/* 🎨 THE PALETTE — THE ONE FILE.
 *
 * ⭐ THIS IS THE FILE DESIGN EDITS. Every colour in the app resolves to a custom
 * property declared here: `src/constants/theme.js` maps `C.gold` → `var(--c-gold)`,
 * and `alpha()` builds `rgb(var(--c-gold-rgb) / .4)` from the triplet beside it.
 * Change a value here and it changes everywhere, in one edit, with no code change
 * and nothing to hunt for.
 *
 * 🔴 WHY IT IS A FILE AND NO LONGER A <style> BLOCK INSIDE index.html (19 Aug 2026).
 * It had FIVE copies. index.html held the real one; every `tools/design-preview/*.html`
 * shell carried its own transcription so it could render standalone — and those copies
 * were already STALE: not one of them declared `--c-border-control`, `--c-track`,
 * `--c-level-2`, `--c-level-3` (both RETIRED 22 Aug — the level ramp is one
 * definition in `src/components/comic/levels.js` now) or `--c-green-ink`, so every component using them drew a
 * missing colour in the very harnesses we judge screens with. ⛔ That is the whole
 * disease in one artefact: a value copied to a second place is a value that will differ.
 * One file, linked by everything, cannot drift.
 *
 * 📐 THREE THEMES, ONE SHAPE. `:root` = 🌊 Ocean (dark, the default). `html.theme-light`
 * = ☀️ off-white. `html.theme-contrast` = 🔆 WCAG-AAA. Switching theme is a single root
 * class swap (`displayPrefs.applyTheme`) — no re-render, no per-component change.
 * ⚠️ Every colour ships BOTH a hex (`--c-x`) and an "r g b" triplet (`--c-x-rgb`),
 * because a CSS variable cannot carry the old two-digit hex-alpha suffix. Add one and
 * you must add the other, in all three themes, or `alpha()` renders nothing.
 *
 * ⚠️ `scripts/contrast-audit.mjs` PARSES THIS FILE and measures every pair. A new
 * colour is checked the moment it lands, which is the point of keeping them together.
 */
:root{
  --c-bg:#0a1628;--c-bg-rgb:10 22 40;
  --c-surface:#0f1f3d;--c-surface-rgb:15 31 61;
  --c-card:#132240;--c-card-rgb:19 34 64;
  --c-border:#1e3a5f;--c-border-rgb:30 58 95;
  /* 🔵 THE HAIRLINE IS THREE TOKENS (Design ruling, 10 Aug). Same job in a
     mock, three jobs in an app. --c-border stays a near-invisible PANEL EDGE
     on purpose; a control's border is the only thing saying "tap here" and
     has to clear WCAG 1.4.11's 3:1; a track is the empty half of a value and
     must NOT move when a control edge does, which is why it is its own name
     at the same hex. Measured on OUR surfaces, not the mocks': #1e3a5f is
     1.37:1 on card, 1.42 on surface, 1.58 on page. #52719a is 3.15 / 3.26 / 3.62. */
  --c-border-control:#52719a;--c-border-control-rgb:82 113 154;
  /* 🪜 SESSIONS' LEVEL RAMP (turn 20) — value, not hue, pale to deep, the
     same direction QUIVER runs. Chrome only: the level bar and nothing else. */
  --c-track:#1e3a5f;--c-track-rgb:30 58 95;
  --c-ink:#111827;--c-ink-rgb:17 24 39;
  --c-accent:#00d4ff;--c-accent-rgb:0 212 255;
  --c-teal:#00b4a6;--c-teal-rgb:0 180 166;
  --c-coral:#ff6b6b;--c-coral-rgb:255 107 107;
  --c-gold:#ffd166;--c-gold-rgb:255 209 102;
  --c-purple:#a78bfa;--c-purple-rgb:167 139 250;
  --c-green:#34d399;--c-green-rgb:52 211 153;--c-green-ink:#04231f;--c-green-ink-rgb:4 35 31;
  --c-text:#e8f4fd;--c-text-rgb:232 244 253;
  --c-slateLight:#e2e8f0;--c-slateLight-rgb:226 232 240;
  --c-muted:#7d97b8;--c-muted-rgb:125 151 184;
  --c-slate:#94a3b8;--c-slate-rgb:148 163 184;
  --c-slateDim:#7c8ba0;--c-slateDim-rgb:124 139 160;
  --c-danger:#ff4444;--c-danger-rgb:255 68 68;
  /* ⚠️ CAUTION — renamed from `--c-warn` and REVALUED, 19 Aug 2026, and the
     revalue is the point. Design's name-per-job table lists caution as
     #f59e0b / #b45309 and calls them "today's --c-warn"; today's are #fbbf24 /
     #a5540a. So the table proposed a change without knowing it — and the change
     is right, because the old values COLLIDE WITH THE ACTION.
     📏 Measured, ΔE*ab against gold in each theme: Ocean 20.4 → 29.1 ·
     Daylight 21.0 → 27.8 · Contrast 3.7 → 27.3. The Contrast pair was the worst
     in the app — #ffcc4d beside #ffd24d is the same colour to anyone — in the
     one theme a rider picks BECAUSE the default is hard to read.
     ⛔ Contrast's #ffa23d is Code's, not Design's: the table says code owns those
     values, and no proposal in the drop touched them. */
  --c-caution:#f59e0b;--c-caution-rgb:245 158 11;
  /* ⌨️ THE FOCUS RING — extracted from index.html's a11y block, 19 Aug 2026.
     ⚠️ THE SAME VALUE IN ALL THREE THEMES, ON PURPOSE. It is what the app ships
     today (one hardcoded blue everywhere), and an extraction that also changes
     pixels is an extraction nobody can verify. ⭐ Light and High-contrast almost
     certainly want their own — a #3b82f6 ring measures 3.68:1 on Light's page —
     but that is a DESIGN decision and it is flagged, not taken here.
     ⛔ Three blues used to do this one job: #3b82f6 (the ring), #60a5fa (the
     prefers-contrast ring) and #2563eb (the skip link's border). The third is
     gone — collapsed into --c-focus, invisible on a 1px keyboard-only chip. */
  --c-focus:#3b82f6;--c-focus-rgb:59 130 246;
  --c-focus-strong:#60a5fa;--c-focus-strong-rgb:96 165 250;
}
html.theme-light{
  --c-bg:#eef2f7;--c-bg-rgb:238 242 247;
  --c-surface:#ffffff;--c-surface-rgb:255 255 255;
  --c-card:#ffffff;--c-card-rgb:255 255 255;
  --c-border:#b7c6d8;--c-border-rgb:183 198 216;
  /* ⚠️ LIGHT FAILS IDENTICALLY and the ruling does not mention it: #b7c6d8 is
     1.55:1 on the page and 1.74 on a white card. ⭐ #52719a happens to clear it
     here too (4.46 / 5.02), so one hex serves both themes — no second value. */
  --c-border-control:#52719a;--c-border-control-rgb:82 113 154;
  /* 🪜 SESSIONS' LEVEL RAMP (turn 20) — value, not hue, pale to deep, the
     same direction QUIVER runs. Chrome only: the level bar and nothing else. */
  --c-track:#b7c6d8;--c-track-rgb:183 198 216;
  --c-ink:#f4f7fb;--c-ink-rgb:244 247 251;
  --c-accent:#0369a1;--c-accent-rgb:3 105 161;
  --c-teal:#0f766e;--c-teal-rgb:15 118 110;
  --c-coral:#c81e3a;--c-coral-rgb:200 30 58;
  --c-gold:#8a6300;--c-gold-rgb:138 99 0;
  --c-purple:#6d28d9;--c-purple-rgb:109 40 217;
  --c-green:#047857;--c-green-rgb:4 120 87;--c-green-ink:#ffffff;--c-green-ink-rgb:255 255 255;
  --c-text:#13233a;--c-text-rgb:19 35 58;
  --c-slateLight:#2b3d52;--c-slateLight-rgb:43 61 82;
  --c-muted:#4e6480;--c-muted-rgb:78 100 128;
  --c-slate:#5c6b80;--c-slate-rgb:92 107 128;
  --c-slateDim:#586a7f;--c-slateDim-rgb:88 106 127;
  --c-danger:#b91c1c;--c-danger-rgb:185 28 28;
  /* ⚠️ #b05000, NOT Design's #b45309 — and it is four points of red, not a
     different colour. Theirs measures 4.47:1 as text on the light page and the
     bar is 4.5, so `contrast:audit` fails it. This is the same hue (57° vs 56°)
     at the same chroma (66 vs 65), darkened until it clears at 4.68:1, and it
     keeps their separation from the action: ΔE 27.7 against theirs of 27.8. */
  --c-caution:#b05000;--c-caution-rgb:176 80 0;
  --c-focus:#3b82f6;--c-focus-rgb:59 130 246;
  --c-focus-strong:#60a5fa;--c-focus-strong-rgb:96 165 250;
}
html.theme-contrast{
  --c-bg:#000000;--c-bg-rgb:0 0 0;
  --c-surface:#000000;--c-surface-rgb:0 0 0;
  --c-card:#0b0f16;--c-card-rgb:11 15 22;
  --c-border:#8fb4d6;--c-border-rgb:143 180 214;
  /* ⛔ THIS THEME ALREADY PASSES — #8fb4d6 is 8.84:1 on the card and 9.67 on
     black. Dropping it to #52719a would LOWER contrast in the one theme chosen
     for contrast. The control token therefore keeps this theme's own border. */
  --c-border-control:#8fb4d6;--c-border-control-rgb:143 180 214;
  --c-track:#8fb4d6;--c-track-rgb:143 180 214;
  --c-ink:#000000;--c-ink-rgb:0 0 0;
  --c-accent:#4ad8ff;--c-accent-rgb:74 216 255;
  --c-teal:#2fe0cc;--c-teal-rgb:47 224 204;
  --c-coral:#ff8a8a;--c-coral-rgb:255 138 138;
  --c-gold:#ffd24d;--c-gold-rgb:255 210 77;
  --c-purple:#c4a8ff;--c-purple-rgb:196 168 255;
  --c-green:#54f0a8;--c-green-rgb:84 240 168;--c-green-ink:#001410;--c-green-ink-rgb:0 20 16;
  --c-text:#ffffff;--c-text-rgb:255 255 255;
  --c-slateLight:#f0f4f8;--c-slateLight-rgb:240 244 248;
  --c-muted:#c8d4e0;--c-muted-rgb:200 212 224;
  --c-slate:#d8e0e8;--c-slate-rgb:216 224 232;
  --c-slateDim:#c0ccd8;--c-slateDim-rgb:192 204 216;
  --c-danger:#ff8585;--c-danger-rgb:255 133 133;
  --c-caution:#ffa23d;--c-caution-rgb:255 162 61;
  --c-focus:#3b82f6;--c-focus-rgb:59 130 246;
  --c-focus-strong:#60a5fa;--c-focus-strong-rgb:96 165 250;
}