/* Themes: token sets over the architecture in theme.css.
   Every surface inherits a theme without knowing anything about it.

   Beyond colour, each theme carries a MOTION PERSONALITY:
     --settle  the base easing for state changes
     --bounce  the playful easing (corporate sets it equal to --settle: no bounce)
     --lift    how far elements travel on entry
     --joy     0–1, scales celebration intensity, particle count and sound
   Nothing here is derived from any competitor's palette or identity. */

/* ── Corporate — town halls, leadership, restraint ───────────────────────── */
:root,
[data-theme="corporate"] {
  --ink: #12100E; --ink-2: #1C1915; --ink-3: #2A2620;
  --bone: #F5F1EA; --bone-2: #E8E2D7; --bone-3: #D6CEC0;
  --graphite: #5C554A;
  /* --graphite is a LIGHT-ground token (6.53:1 on --bone). On --ink it measures
     2.58:1, which fails even the 3:1 large-text floor — and test/contrast.mjs
     never checks it that way. --dim is its dark-ground twin: secondary text on
     Pocket, Stage and /join reads from THIS, never from --graphite. */
  --dim: #8A8277;        /* 5.01:1 on --ink */
  --signal: #FF5A36; --signal-dim: #C43D1F;
  --amber: #E8A33D; --sage: #6E8B6B;
  --settle: cubic-bezier(0.20, 0.90, 0.10, 1.00);
  --bounce: cubic-bezier(0.20, 0.90, 0.10, 1.00);   /* deliberately identical */
  --lift: 16px; --joy: 0;   --stagger: 28ms;
  --radius: 0px; --weight: 800; --track: -0.02em;
  --voice: 'Archivo Condensed','Roboto Condensed','Oswald','Arial Narrow',system-ui,sans-serif;
}

/* ── Spectrum — multicolour, energetic; each option owns a hue ───────────── */
[data-theme="spectrum"] {
  --ink: #141726; --ink-2: #1E2338; --ink-3: #2C3350;
  --bone: #F4F6FB; --bone-2: #E4E8F4; --bone-3: #C9D0E4;
  --graphite: #5C6684;   /* darkened for 5.27:1 on --bone */
  --dim: #7F849F;        /* 4.83:1 on --ink */
  --signal: #4CC9F0; --signal-dim: #2A9FC4;
  --amber: #FFC53D; --sage: #4ADE80;
  --settle: cubic-bezier(0.22, 0.88, 0.16, 1.00);
  --bounce: cubic-bezier(0.34, 1.42, 0.64, 1.00);
  --lift: 22px; --joy: 0.6; --stagger: 45ms;
  --radius: 10px; --weight: 800; --track: -0.01em;
  --voice: 'Archivo','Inter Tight',system-ui,sans-serif;
  /* Series order is a LUMINANCE decision, not a palette decision. STATE.md §6
     records Spectrum's adjacent-series separation as 10-13 ΔL* against a spec of
     30; that trade-off (multicolour costs separation) is decided and is NOT
     reopened here. What changed is only the ORDER the same four hues are dealt
     into the four slots. Measured L*: 54.9 / 79.2 / 42.7 / 75.8 → adjacent ΔL*
     24.3 / 36.5 / 33.1, against 20.9 / 12.2 / 36.5 before. Worst adjacent pair
     goes 12.2 → 24.3. Still short of 30, so texture + the numeral inside every
     band + the index glyph + Clarity-one-tap-away all remain mandatory.
     Texture polarity is preserved: tx-2 (black hatch) and tx-4 (black cross)
     land on the two light fills, tx-3 (white dot) on the one dark fill.
     Same four hexes as before, so all 47 contrast checks are byte-identical. */
  --s1: #F72585; --s2: #4ADE80; --s3: #7B2FF7; --s4: #4CC9F0;
}

/* ── Arcade — competitive, loud; quizzes, classrooms, training ───────────── */
[data-theme="arcade"] {
  --ink: #1A0B2E; --ink-2: #26113F; --ink-3: #3A1B5C;
  --bone: #FFF6FF; --bone-2: #F0E4F7; --bone-3: #D6C2E6;
  --graphite: #7A5E96;   /* darkened for 5.14:1 on --bone */
  --dim: #8F86A8;        /* 5.43:1 on --ink */
  --signal: #00F5D4; --signal-dim: #00BFA6;
  --amber: #FFD60A; --sage: #4ADE80;
  --settle: cubic-bezier(0.18, 0.92, 0.12, 1.00);
  --bounce: cubic-bezier(0.30, 1.65, 0.55, 1.00);
  --lift: 28px; --joy: 1;   --stagger: 70ms;
  --radius: 16px; --weight: 900; --track: 0.01em;
  --voice: 'Archivo Black','Archivo','Inter Tight',system-ui,sans-serif;
  --s1: #00F5D4; --s2: #FFD60A; --s3: #FF4D9D; --s4: #9D4EDD;
}

/* ── Warm — informal; workshops, icebreakers, small rooms ────────────────── */
[data-theme="warm"] {
  --ink: #2B1D14; --ink-2: #3A2820; --ink-3: #4E372C;
  --bone: #FFF4E8; --bone-2: #FBE6D2; --bone-3: #EACAA8;
  --graphite: #8A6A52;
  --dim: #A2907E;        /* 5.45:1 on --ink */
  --signal: #FF8C42; --signal-dim: #D96A25;
  --amber: #F0B429; --sage: #7A9A5B;
  --settle: cubic-bezier(0.24, 0.86, 0.18, 1.00);
  --bounce: cubic-bezier(0.32, 1.35, 0.60, 1.00);
  --lift: 20px; --joy: 0.5; --stagger: 52ms;
  --radius: 20px; --weight: 700; --track: -0.005em;
  --voice: 'Fraunces','Georgia','Archivo',system-ui,serif;
  --s1: #FF8C42; --s2: #F0B429; --s3: #C96F8A; --s4: #7A9A5B;
}

/* ── High Contrast — accessibility-first, hostile rooms ──────────────────── */
[data-theme="contrast"] {
  --ink: #000000; --ink-2: #0D0D0D; --ink-3: #262626;
  --bone: #FFFFFF; --bone-2: #F0F0F0; --bone-3: #C9C9C9;
  --graphite: #707070;
  --dim: #949494;        /* 6.92:1 on --ink — the accessibility theme keeps headroom */
  --signal: #FFD400; --signal-dim: #C9A600;
  --amber: #FFD400; --sage: #00E05A;
  --settle: cubic-bezier(0.2, 0.9, 0.1, 1);
  --bounce: cubic-bezier(0.2, 0.9, 0.1, 1);
  --lift: 0px; --joy: 0;    --stagger: 0ms;
  --radius: 0px; --weight: 900; --track: 0;
  --voice: 'Archivo Black','Archivo',system-ui,sans-serif;
}

/* ── Theme-driven band textures ───────────────────────────────────────────
   Corporate and Contrast keep luminance + texture (the projector and
   colourblind story). Spectrum/Arcade/Warm give each option its own hue but
   KEEP the texture underneath, so hue is never the sole carrier of meaning. */

[data-theme="spectrum"] .tx-1, [data-theme="arcade"] .tx-1, [data-theme="warm"] .tx-1 { background: var(--s1); }
[data-theme="spectrum"] .tx-2, [data-theme="arcade"] .tx-2, [data-theme="warm"] .tx-2 {
  background: var(--s2);
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.22) 0 6px, transparent 6px 12px);
}
[data-theme="spectrum"] .tx-3, [data-theme="arcade"] .tx-3, [data-theme="warm"] .tx-3 {
  background: var(--s3);
  background-image: radial-gradient(circle at 4px 4px, rgba(255,255,255,.34) 1.6px, transparent 1.7px);
  background-size: 10px 10px;
}
[data-theme="spectrum"] .tx-4, [data-theme="arcade"] .tx-4, [data-theme="warm"] .tx-4 {
  background: var(--s4);
  background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,.20) 0 5px, transparent 5px 10px);
}

[data-theme="contrast"] .tx-1 { background: var(--signal); }
[data-theme="contrast"] .tx-2 { background: var(--bone);
  background-image: repeating-linear-gradient(45deg, #000 0 6px, transparent 6px 12px); }
[data-theme="contrast"] .tx-3 { background: var(--bone-3);
  background-image: radial-gradient(circle at 4px 4px, #000 2px, transparent 2.1px); background-size: 10px 10px; }
[data-theme="contrast"] .tx-4 { background: #FFFFFF;
  background-image: repeating-linear-gradient(-45deg, #000 0 5px, transparent 5px 10px); }

/* ── Theme-driven shape ─────────────────────────────────────────────────── */
.opt, .btn, .send, .go, .chip, .qbtn, input.f, select.f, textarea.f, .act, .ev, .receipt {
  border-radius: var(--radius, 0);
}
.voice { font-weight: var(--weight, 800); letter-spacing: var(--track, -0.02em); }

/* Playful themes give bands a soft inner light; restrained themes do not. */
[data-theme="arcade"] .band-fill,
[data-theme="spectrum"] .band-fill { box-shadow: inset 0 0 30px rgba(255,255,255,.14); }
[data-theme="arcade"] .sb .band-label { text-shadow: 0 2px 0 rgba(0,0,0,.35); }

/* Reduced motion and Quiet Mode flatten every theme's personality to Corporate's. */
.quiet, [data-quiet="true"] { --bounce: var(--settle); --lift: 0px; --joy: 0; --stagger: 0ms; }
@media (prefers-reduced-motion: reduce) { :root { --bounce: var(--settle); --lift: 0px; --joy: 0; --stagger: 0ms; } }