/* ============================================================
   QUALITUM — COLOR TOKENS
   Brand: deep emerald + bright spring-mint. Light editorial body,
   dark-green hero/feature bands. Mint is the single accent — used
   sparingly for highlight words, the logo glow, and chart strokes.
   ============================================================ */
:root {
  /* ---- Brand greens (base ramp) ---- */
  --green-mint:    #3EF1AC;  /* signature accent — glow, highlight, chart */
  --green-spring:  #2EE89C;  /* mint text on dark surfaces */
  --green-400:     #4FD89B;
  --green-500:     #1A8A57;
  --green-600:     #11603F;  /* primary action / deep emerald */
  --green-700:     #0E4F34;
  --green-800:     #0A3A26;  /* dark feature band */
  --green-900:     #082218;  /* hero background — darkest */
  --green-950:     #061A12;

  /* ---- Neutrals (cool green-grey) ---- */
  --white:         #FFFFFF;
  --ink:           #0C1A13;  /* primary text — near-black green */
  --ink-soft:      #46554D;  /* body / secondary text */
  --ink-mute:      #8B988F;  /* captions, fine print, disabled */
  --rule:          #E9EEEB;  /* hairline borders, dividers */
  --rule-strong:   #D7E0DB;  /* stronger borders, chips */
  --bg:            #FFFFFF;  /* page surface */
  --bg-alt:        #F4F7F5;  /* alt section / input fill */

  /* ---- On-dark text ---- */
  --on-dark:       #EAF6EF;  /* primary text on green-900 */
  --on-dark-soft:  rgba(234, 246, 239, 0.62); /* muted text on dark */
  --on-dark-mute:  rgba(234, 246, 239, 0.40);

  /* ---- Status ---- */
  --status-live:   #11603F;  /* "Live" pill */
  --status-soon:   #8B7A2E;  /* "SOON / Q3 2026" pill */
  --status-live-bg: rgba(17, 96, 63, 0.10);
  --status-soon-bg: rgba(139, 122, 46, 0.12);

  /* ---- Chart / data ---- */
  --chart-1: #3EF1AC;  /* mint */
  --chart-2: #11603F;  /* emerald */
  --chart-3: #8AC6EA;  /* soft blue (3rd series only) */
  --chart-track: #EDF0F6;

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components
     ============================================================ */
  --text-heading:   var(--ink);
  --text-body:      var(--ink-soft);
  --text-muted:     var(--ink-mute);
  --text-on-dark:   var(--on-dark);
  --text-accent:    var(--green-600);

  --surface:        var(--bg);
  --surface-alt:    var(--bg-alt);
  --surface-card:   var(--white);
  --surface-dark:   var(--green-900);
  --surface-dark-2: var(--green-800);

  --border:         var(--rule);
  --border-strong:  var(--rule-strong);
  --border-dark:    rgba(234, 246, 239, 0.14);

  --accent:         var(--green-mint);
  --primary:        var(--green-600);
  --primary-ink:    var(--white);
  --focus-ring:     rgba(17, 96, 63, 0.16);
}