/* Vitrola Falante — Color tokens
   Deep purple is the anchor; sage + mint are the breath and contrast. */
:root {
  /* ---- Base palette ---- */
  /* Plum (roxo profundo) — the brand anchor */
  --plum-900: #2c0e28;
  --plum-800: #3a1335;
  --plum-700: #4a1843; /* PRIMARY brand purple */
  --plum-600: #5d2255;
  --plum-500: #743268;
  --plum-400: #9a5e8f;

  /* Sage (verde sálvia) — accent, the logo color */
  --sage-700: #6fa377;
  --sage-600: #87bd8f;
  --sage-500: #a7d2ae; /* PRIMARY sage accent */
  --sage-400: #bbdcc0;
  --sage-300: #cbe5cf;

  /* Mint (verde menta) — soft surfaces */
  --mint-200: #d6e9d8; /* PRIMARY mint surface */
  --mint-100: #e6f1e7;
  --mint-50:  #f1f7f1;

  /* Ivory / neutrals — text on dark, hairlines */
  --ivory:    #f7f3ee;
  --ivory-dim:#e7ddd1;
  --ink:      #2c0e28;

  /* ---- Semantic aliases ---- */
  --color-bg:            var(--plum-700);
  --color-bg-deep:       var(--plum-900);
  --surface-soft:        var(--mint-200);
  --surface-soft-2:      var(--mint-100);
  --surface-card:        var(--ivory);
  --surface-card-dark:   var(--plum-600);

  --text-strong:         var(--plum-700);   /* headings on light */
  --text-body:           var(--plum-800);   /* body on light */
  --text-muted:          var(--plum-400);   /* labels, captions on light */
  --text-on-dark:        var(--ivory);      /* body on purple */
  --text-on-dark-muted:  rgba(247,243,238,0.72);

  --accent:              var(--sage-500);
  --accent-strong:       var(--sage-700);
  --accent-soft:         var(--sage-300);

  --border-on-dark:      rgba(247,243,238,0.28);
  --border-on-light:     rgba(74,24,67,0.16);
  --border-accent:       var(--sage-500);

  /* CTA */
  --cta-bg:              var(--sage-500);
  --cta-text:            var(--plum-800);
  --cta-bg-hover:        var(--sage-600);

  --focus-ring:          var(--sage-500);
}