/* ============================================================
   THRIVE 88.1 FM — Design Tokens
   Layer 1 of 4: tokens.css → base.css → components.css → page.css

   Color convention:
     :root       = LIGHT mode (default without JS; golden-hour warmth)
     html.dark   = DARK mode  (applied by theme-init.js from localStorage;
                               the design's primary aesthetic — midnight stage)

   CRITICAL DARK-MODE INVARIANT:
   Any section that sets --bg-inverse as its background in dark mode will
   get a LIGHT background color (since --bg-inverse flips). If a dark section
   overrides that back to near-black, it MUST also reset:
       --text-on-inverse: var(--ink)
   in the same rule — otherwise text becomes invisible (dark on dark).
   See .pledge and any .stage overrides below.
   ============================================================ */

/* ── LIGHT (default :root) ─────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:           oklch(0.97 0.008 80);   /* off-white parchment */
  --bg-2:         oklch(0.94 0.010 80);   /* warm light cream */
  --bg-elev:      oklch(1.00 0 0);        /* pure white cards */
  --bg-inverse:   oklch(0.13 0.018 265);  /* near-black (for inverse sections) */

  /* Text */
  --ink:          oklch(0.18 0.02 265);   /* dark blue-gray */
  --ink-mute:     oklch(0.40 0.02 265);   /* medium gray */
  --ink-dim:      oklch(0.62 0.02 265);   /* light gray */
  --text-on-inverse: oklch(0.97 0.012 80); /* readable on --bg-inverse */

  /* Borders */
  --line:         oklch(0.18 0.02 265 / 0.14);
  --line-soft:    oklch(0.18 0.02 265 / 0.07);

  /* Stage lights — golden-hour palette */
  --ember:        oklch(0.62 0.18 45);    /* warm primary — muted amber */
  --ember-deep:   oklch(0.48 0.18 35);
  --vesper:       oklch(0.45 0.20 285);   /* cool secondary — soft purple */
  --vesper-deep:  oklch(0.35 0.18 280);
  --haze:         oklch(0.85 0.08 80 / 0.55);

  /* On-accent text (auto-selected by JS for custom palettes) */
  --on-ember:     #fff8ef;

  /* Shadows */
  --shadow-soft:  0 12px 40px rgba(30, 20, 10, .12), 0 1px 0 rgba(255,255,255,.6) inset;
  --shadow-card:  0 1px 0 rgba(255,255,255,.7) inset, 0 6px 18px rgba(20,15,5,.08);

  /* Grain overlay opacity */
  --grain-opacity: 0.06;

  /* Geometry */
  --radius-card:  16px;
  --radius-pill:  999px;
  --radius-program: 18px;
}

/* ── DARK (html.dark — applied by theme-init.js) ───────────── */
html.dark {
  /* Backgrounds */
  --bg:           oklch(0.13 0.018 265);  /* deep navy charcoal */
  --bg-2:         oklch(0.17 0.022 265);
  --bg-elev:      oklch(0.20 0.025 265);
  --bg-inverse:   oklch(0.97 0.008 80);   /* flips to near-white */

  /* Text */
  --ink:          oklch(0.97 0.012 80);   /* off-white */
  --ink-mute:     oklch(0.74 0.018 80);
  --ink-dim:      oklch(0.55 0.020 265);
  --text-on-inverse: oklch(0.18 0.02 265); /* dark ink on light inverse bg */

  /* Borders */
  --line:         oklch(0.30 0.025 265 / 0.55);
  --line-soft:    oklch(0.30 0.025 265 / 0.25);

  /* Stage lights — midnight palette */
  --ember:        oklch(0.76 0.16 50);    /* warm — gold/rust */
  --ember-deep:   oklch(0.58 0.18 38);
  --vesper:       oklch(0.62 0.20 295);   /* cool — violet/purple */
  --vesper-deep:  oklch(0.45 0.20 290);
  --haze:         oklch(0.45 0.10 280 / 0.35);

  --on-ember:     #1a1409;

  --shadow-soft:  0 12px 40px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04) inset;
  --shadow-card:  0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.35);

  --grain-opacity: 0.18;
}