/*
 * Site themes.
 *
 * Every page's inline <style> reads its purples, golds and panel darks from the
 * tokens below instead of hardcoding them. Three dark palettes are defined; the
 * one in use is chosen by the data-theme attribute on <html>, set before first
 * paint by a small inline script in each page's <head>.
 *
 *   (none) / apollo  black + white, monochrome  -- the default
 *   mystic           deep purple + gold        -- the original look
 *   midnight         navy + cyan + silver
 *   ember            near-black + rose + amber
 *   daylight         the one light palette
 *
 * The *-rgb tokens hold a bare "r, g, b" triplet so a rule can vary the alpha:
 * rgba(var(--accent-rgb), 0.3). Where a rule needs the solid colour it uses the
 * matching hex token instead.
 *
 * Greys, whites, semantic red/green, the crimson lucky-shop palette and the
 * parchment poster colours are deliberately NOT tokenised - they read correctly
 * on any of the dark backgrounds and carry meaning a theme should not repaint.
 *
 * Mystic's values are byte-identical to the colour literals they replaced, so
 * selecting it reproduces the site's original appearance exactly.
 */

:root[data-theme='mystic'] {
  --accent: #a855f7;
  --accent-rgb: 168, 85, 247;
  --accent-mid: #8b5cf6;
  --accent-mid-rgb: 139, 92, 246;
  --accent-deep: #7c3aed;
  --accent-deep-rgb: 124, 58, 237;
  --accent-deeper: #6d28d9;
  --accent-vivid: #9333ea;
  --accent-light: #a78bfa;
  --accent-bright: #c084fc;
  --accent-bright-rgb: 192, 132, 252;
  --accent-pale: #c4b5fd;
  --accent-pale-rgb: 196, 181, 253;
  --accent-soft: #ddd6fe;
  --accent-faint: #e9d5ff;
  --accent-muted: #a89ec9;
  --accent-muted2: #8b83a8;

  --bg-page: #090a0f;
  --bg-panel-rgb: 15, 10, 30;
  --bg-panel2-rgb: 30, 27, 46;
  --bg-panel3-rgb: 20, 15, 35;
  --bg-panel4-rgb: 30, 30, 50;
  --bg-panel5-rgb: 20, 15, 40;
  --bg-panel6-rgb: 30, 20, 50;
  --bg-panel7-rgb: 45, 40, 70;
  --bg-glow: #1b2838;
  --bg-deep: #1a1525;
  --bg-deep2: #1a1a2e;

  --gold: #fbbf24;
  --gold-rgb: 251, 191, 36;
  --gold-bright: #ffd700;
  --gold-bright-rgb: 255, 215, 0;
  --gold-deep: #d4af37;
  --gold-deep-rgb: 212, 175, 55;
  --gold-amber: #f59e0b;
  --gold-amber-deep: #d97706;
  --gold-soft: #fcd34d;
  --gold-dark: #b8860b;
  --gold-pale: #f0d060;
  --gold-cream-rgb: 255, 235, 205;

  /* "picked" affordance: selected filter, body-part tag */
  --speak-rgb: 6, 182, 212;
  --speak: #06b6d4;
  --pick-rgb: 52, 211, 153;
  --pick-text: #6ee7b7;
}

:root[data-theme='midnight'] {
  --accent: #38bdf8;
  --accent-rgb: 56, 189, 248;
  --accent-mid: #0ea5e9;
  --accent-mid-rgb: 14, 165, 233;
  --accent-deep: #0284c7;
  --accent-deep-rgb: 2, 132, 199;
  --accent-deeper: #0369a1;
  --accent-vivid: #0891b2;
  --accent-light: #7dd3fc;
  --accent-bright: #7dd3fc;
  --accent-bright-rgb: 125, 211, 252;
  --accent-pale: #bae6fd;
  --accent-pale-rgb: 186, 230, 253;
  --accent-soft: #cfe9fb;
  --accent-faint: #e0f2fe;
  --accent-muted: #94a3b8;
  --accent-muted2: #7d8ba1;

  --bg-page: #060a12;
  --bg-panel-rgb: 10, 18, 34;
  --bg-panel2-rgb: 20, 32, 52;
  --bg-panel3-rgb: 14, 24, 40;
  --bg-panel4-rgb: 22, 36, 58;
  --bg-panel5-rgb: 14, 24, 44;
  --bg-panel6-rgb: 18, 30, 56;
  --bg-panel7-rgb: 34, 50, 78;
  --bg-glow: #16283f;
  --bg-deep: #101c2c;
  --bg-deep2: #12203a;

  /* the "gold" role becomes silver here */
  --gold: #cbd5e1;
  --gold-rgb: 203, 213, 225;
  --gold-bright: #e2e8f0;
  --gold-bright-rgb: 226, 232, 240;
  --gold-deep: #94a3b8;
  --gold-deep-rgb: 148, 163, 184;
  --gold-amber: #a5b4c8;
  --gold-amber-deep: #7d8ba1;
  --gold-soft: #dbe4ee;
  --gold-dark: #64748b;
  --gold-pale: #d7e0ea;
  --gold-cream-rgb: 226, 240, 250;

  --speak-rgb: 56, 189, 248;
  --speak: #38bdf8;
  --pick-rgb: 45, 212, 191;
  --pick-text: #5eead4;
}

:root[data-theme='ember'] {
  --accent: #fb7185;
  --accent-rgb: 251, 113, 133;
  --accent-mid: #f43f5e;
  --accent-mid-rgb: 244, 63, 94;
  --accent-deep: #e11d48;
  --accent-deep-rgb: 225, 29, 72;
  --accent-deeper: #be123c;
  --accent-vivid: #f43f5e;
  --accent-light: #fda4af;
  --accent-bright: #fda4af;
  --accent-bright-rgb: 253, 164, 175;
  --accent-pale: #fecdd3;
  --accent-pale-rgb: 254, 205, 211;
  --accent-soft: #ffe0e4;
  --accent-faint: #ffe4e6;
  --accent-muted: #c9a3a8;
  --accent-muted2: #a8888c;

  --bg-page: #0c0708;
  --bg-panel-rgb: 26, 10, 14;
  --bg-panel2-rgb: 44, 22, 26;
  --bg-panel3-rgb: 32, 15, 18;
  --bg-panel4-rgb: 46, 26, 30;
  --bg-panel5-rgb: 34, 16, 20;
  --bg-panel6-rgb: 42, 20, 24;
  --bg-panel7-rgb: 62, 38, 42;
  --bg-glow: #2b1418;
  --bg-deep: #241216;
  --bg-deep2: #2a1418;

  /* the "gold" role stays warm, but amber rather than yellow-gold */
  --gold: #f59e0b;
  --gold-rgb: 245, 158, 11;
  --gold-bright: #fbbf24;
  --gold-bright-rgb: 251, 191, 36;
  --gold-deep: #b45309;
  --gold-deep-rgb: 180, 83, 9;
  --gold-amber: #f59e0b;
  --gold-amber-deep: #d97706;
  --gold-soft: #fcd34d;
  --gold-dark: #92400e;
  --gold-pale: #fcd97a;
  --gold-cream-rgb: 255, 237, 213;

  --speak-rgb: 251, 146, 60;
  --speak: #fb923c;
  --pick-rgb: 251, 191, 36;
  --pick-text: #fcd34d;
}

/*
 * Apollo -- monochrome, after the NASA wordmark shot: pure black, white type,
 * hierarchy carried by brightness instead of hue. The only colour left on the
 * page comes from photographs and the untokenised crimson/parchment blocks.
 */
:root,
:root[data-theme='apollo'] {
  --accent: #d4d4d4;
  --accent-rgb: 212, 212, 212;
  --accent-mid: #a3a3a3;
  --accent-mid-rgb: 163, 163, 163;
  --accent-deep: #737373;
  --accent-deep-rgb: 115, 115, 115;
  --accent-deeper: #525252;
  --accent-vivid: #e5e5e5;
  --accent-light: #e5e5e5;
  --accent-bright: #fafafa;
  --accent-bright-rgb: 250, 250, 250;
  --accent-pale: #d4d4d4;
  --accent-pale-rgb: 212, 212, 212;
  --accent-soft: #ededed;
  --accent-faint: #ffffff;
  --accent-muted: #8a8a8a;
  --accent-muted2: #6e6e6e;

  --bg-page: #000000;
  --bg-glow: #131313;
  --bg-panel-rgb: 18, 18, 18;
  --bg-panel2-rgb: 30, 30, 30;
  --bg-panel3-rgb: 22, 22, 22;
  --bg-panel4-rgb: 34, 34, 34;
  --bg-panel5-rgb: 24, 24, 24;
  --bg-panel6-rgb: 28, 28, 28;
  --bg-panel7-rgb: 48, 48, 48;
  --bg-deep: #141414;
  --bg-deep2: #171717;

  /* the "gold" role becomes the brightest step, so headings still lead */
  --gold: #ffffff;
  --gold-rgb: 255, 255, 255;
  --gold-bright: #ffffff;
  --gold-bright-rgb: 255, 255, 255;
  --gold-deep: #b5b5b5;
  --gold-deep-rgb: 181, 181, 181;
  --gold-amber: #e0e0e0;
  --gold-amber-deep: #9a9a9a;
  --gold-soft: #f0f0f0;
  --gold-dark: #8a8a8a;
  --gold-pale: #ededed;
  --gold-cream-rgb: 245, 245, 245;

  /* selected state reads as a brighter fill, not a different hue */
  --speak-rgb: 255, 255, 255;
  --speak: #ffffff;
  --pick-rgb: 255, 255, 255;
  --pick-text: #ffffff;
}

/*
 * Daylight -- the one light palette.
 *
 * Two things differ from the dark themes beyond the obvious. First, the accent
 * ramp inverts: --accent-faint was the brightest step (near-white heading text
 * on a dark panel) and here it must be the darkest, or headings vanish. The
 * token names describe their ROLE in the hierarchy, not their lightness.
 *
 * Second, gold at #fbbf24 fails contrast on white, so the "gold" role drops to
 * bronze. Same for the pick/speak accents.
 *
 * The --text-* tokens are undefined in every dark theme, so each page keeps its
 * own hardcoded fallback there; only this block turns them on.
 */
:root[data-theme='daylight'] {
  color-scheme: light;

  /* heading -> body -> border, darkest first */
  --accent-faint: #000000;
  --accent-soft: #18181b;
  --accent-pale: #000000;
  --accent-pale-rgb: 0, 0, 0;
  --accent-bright: #18181b;
  --accent-bright-rgb: 24, 24, 27;
  --accent-light: #3f3f46;
  --accent: #3f3f46;
  --accent-rgb: 63, 63, 70;
  --accent-mid: #52525b;
  --accent-mid-rgb: 82, 82, 91;
  --accent-deep: #27272a;
  --accent-deep-rgb: 39, 39, 42;
  --accent-deeper: #18181b;
  --accent-vivid: #27272a;
  --accent-muted: #6b6b75;
  --accent-muted2: #85858f;

  --text: #000000;
  --text-strong: #000000;
  --text-dim: #3f3f46;
  --text-dimmer: #52525b;
  --text-dimmest: #6b6b75;

  --bg-page: #f7f7f8;
  --bg-glow: #ffffff;
  --bg-panel-rgb: 255, 255, 255;
  --bg-panel2-rgb: 244, 244, 245;
  --bg-panel3-rgb: 250, 250, 251;
  --bg-panel4-rgb: 240, 240, 242;
  --bg-panel5-rgb: 248, 248, 249;
  --bg-panel6-rgb: 243, 243, 245;
  --bg-panel7-rgb: 231, 231, 234;
  --bg-deep: #ffffff;
  --bg-deep2: #f0f0f2;

  /* bronze, because #fbbf24 on white is unreadable */
  --gold: #a3560b;
  --gold-rgb: 163, 86, 11;
  --gold-bright: #92400e;
  --gold-bright-rgb: 146, 64, 14;
  --gold-deep: #a16207;
  --gold-deep-rgb: 161, 98, 7;
  --gold-amber: #b45309;
  --gold-amber-deep: #92400e;
  --gold-soft: #7a4a06;
  --gold-dark: #78350f;
  --gold-pale: #b8720d;
  --gold-cream-rgb: 168, 118, 40;

  --pick-rgb: 5, 150, 105;
  --pick-text: #046c4e;
  --speak-rgb: 8, 145, 178;
  --speak: #0e7490;
}

/*
 * Rule-level fixes the tokens cannot reach. These need the [data-theme]
 * prefix to outrank the pages' own inline rules, which load after this file.
 */

/* twinkle animates opacity, so only display can retire the starfield. */
:root[data-theme='daylight'] .stars { display: none; }

/* Bloom reads as smudge on a light background. */
:root[data-theme='daylight'] .hero-image,
:root[data-theme='daylight'] .eye-image,
:root[data-theme='daylight'] .cta-btn,
:root[data-theme='daylight'] .ai-btn,
:root[data-theme='daylight'] .plan-btn-primary,
:root[data-theme='daylight'] .tab-btn.active {
  box-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.18);
}

/* White type only works while the fill behind it stays dark. */
:root[data-theme='daylight'] .modal-close:hover,
:root[data-theme='daylight'] .game-problem {
  color: var(--text-strong);
}

/* Panels are solid here; translucency over a light page just looks washed. */
:root[data-theme='daylight'] .move-card,
:root[data-theme='daylight'] .cat-section,
:root[data-theme='daylight'] .plan-box,
:root[data-theme='daylight'] .toc,
:root[data-theme='daylight'] .note-box {
  background: #ffffff;
  border-color: rgba(var(--accent-rgb), 0.22);
}

/* The line-art figures are drawn in gold/purple strokes on a dark tile. */
:root[data-theme='daylight'] .move-figure {
  background: rgba(var(--accent-rgb), 0.05);
}
:root[data-theme='daylight'] .figure .glow {
  fill: rgba(var(--accent-rgb), 0.08);
}

/*
 * Daylight shows the portrait with no ring at all: no border, no bloom. The
 * speaking glow lives in a keyframe, and an animation outranks a plain
 * declaration, so the animation itself has to go -- the audio bars and the
 * video's own pulse still signal that Bei is talking.
 */
:root[data-theme='daylight'] .bei-video-wrapper {
  border: none;
  box-shadow: none;
}
:root[data-theme='daylight'] .bei-video-wrapper.speaking {
  box-shadow: none;
  animation: none;
}
