/* ==========================================================================
   theme.css — global palette tokens. Single source of truth for every theme.
   Replaces the per-page :root copies and the token half of theme-common.js's
   injected dark override sheet.

   Selector model
     html[data-theme="<name>"]  one of 7 user-selectable themes (below)
     html[data-scheme]          "light" | "dark", stamped by JS alongside
                                data-theme. Scheme-level CSS (status colors,
                                game-semantic dark variants, scheme-dark.css)
                                keys off THIS, never off individual themes.
     body.theme-future          future view (X-VERSE successor, teal),
                                orthogonal to theme; resolves per scheme.

   Stored preference migration (handled in theme-common.js + FOUC guards):
     "light" -> "theme-1", "dark" -> "theme-2",
     anything unknown -> "theme-1". Guests: forced "theme-1".

   Every value is a seed hex from the chosen palettes, an rgba() of one, or a
   documented OKLab mix (see the ChuniMaru Repalette comparison page).
   Status tokens derive from existing site/game vocabulary, never new hues:
   danger = EXPERT red #e8443e mixed 72% toward black (light) / existing
   #ff8a8a (dark); success = FC-badge greens already shipped on the site.
   ========================================================================== */

/* ---- classic light (coffee-peach) — default ---- */
:root,
html[data-theme="theme-1"] {
  color-scheme: light;
  --bg: #f2e5d7;
  --bg-strong: #e3d2c4;
  --panel: #f8f1e9;
  --panel-solid: #f8f1e9;
  --panel-hover: #eae3dc;
  --text: #262322;
  --muted: #7a736d;
  --line: rgba(99, 55, 44, 0.16);
  --line-strong: rgba(99, 55, 44, 0.34);
  --shadow: 0 18px 44px rgba(38, 35, 34, 0.10);
  --accent: #c97d60;
  --accent-2: #ffbcb5;
  --accent-deep: #63372c;
  --accent-soft: rgba(201, 125, 96, 0.12);
  --accent-2-soft: rgba(255, 188, 181, 0.12);
  --btn-fill: #c97d60;
  --btn-text: #262322;
  --hist-new-color: #9a5332;
  --hist-old-color: #046b96;
  /* status (light-scheme defaults; dark scheme overrides below) */
  --danger: #952824;
  --success: #216e33;
  --warn: var(--accent-deep);
  --info: var(--muted);
  /* modal/drawer backdrop scrim (neutral black; scheme-tuned) */
  --scrim: rgba(0, 0, 0, 0.45);
}

/* ---- classic dark (coffee-peach) ---- */
html[data-theme="theme-2"] {
  color-scheme: dark;
  --bg: #262322;
  --bg-strong: #1c1a19;
  --panel: #3b3735;
  --panel-solid: #3b3735;
  --panel-hover: #45403e;
  --text: #f2e5d7;
  --muted: #958d85;
  --line: rgba(242, 229, 215, 0.13);
  --line-strong: rgba(242, 229, 215, 0.30);
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
  --accent: #ffbcb5;
  --accent-2: #c97d60;
  --accent-deep: #ffcdc7;
  --accent-soft: rgba(255, 188, 181, 0.12);
  --accent-2-soft: rgba(201, 125, 96, 0.12);
  --btn-fill: #ffbcb5;
  --btn-text: #262322;
  --hist-new-color: #d17c54;
  --hist-old-color: #179696;
}

/* ---- lavender light ---- */
html[data-theme="theme-3"] {
  color-scheme: light;
  --bg: #f1e3e4;
  --bg-strong: #eadade;
  --panel: #f8f1f1;
  --panel-solid: #f8f1f1;
  --panel-hover: #e9e3e3;
  --text: #1c1d21;
  --muted: #544a59;
  --line: rgba(162, 136, 166, 0.26);
  --line-strong: rgba(162, 136, 166, 0.44);
  --shadow: 0 18px 44px rgba(28, 29, 33, 0.10);
  --accent: #a288a6;
  --accent-2: #bb9bb0;
  --accent-deep: #615566;
  --accent-soft: rgba(162, 136, 166, 0.13);
  --accent-2-soft: rgba(187, 155, 176, 0.12);
  --btn-fill: #a288a6;
  --btn-text: #1c1d21;
  --hist-new-color: #844b80;
  --hist-old-color: #846305;
}

/* ---- lavender dark ---- */
html[data-theme="theme-4"] {
  color-scheme: dark;
  --bg: #1c1d21;
  --bg-strong: #141518;
  --panel: #2c2a31;
  --panel-solid: #2c2a31;
  --panel-hover: #36333a;
  --text: #f1e3e4;
  --muted: #7f7779;
  --line: rgba(187, 155, 176, 0.16);
  --line-strong: rgba(187, 155, 176, 0.32);
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
  --accent: #bb9bb0;
  --accent-2: #a288a6;
  --accent-deep: #cfb8c7;
  --accent-soft: rgba(187, 155, 176, 0.12);
  --accent-2-soft: rgba(162, 136, 166, 0.12);
  --btn-fill: #bb9bb0;
  --btn-text: #1c1d21;
  --hist-new-color: #b67ab1;
  --hist-old-color: #9d7b2a;
}

/* ---- grey (grey-olive, light) ---- */
html[data-theme="theme-5"] {
  color-scheme: light;
  --bg: #c5c5c5;
  --bg-strong: #b6b8b8;
  --panel: #e5e5e5;
  --panel-solid: #e5e5e5;
  --panel-hover: #d9dada;
  --text: #2c423f;
  --muted: #4c5b61;
  --line: rgba(76, 91, 97, 0.32);
  --line-strong: rgba(76, 91, 97, 0.52);
  --shadow: 0 18px 44px rgba(44, 66, 63, 0.14);
  --accent: #2c423f;
  --accent-2: #829191;
  --accent-deep: #172523;
  --accent-soft: rgba(76, 91, 97, 0.14);
  --accent-2-soft: rgba(130, 145, 145, 0.12);
  --btn-fill: #2c423f;
  --btn-text: #c5c5c5;
  --hist-new-color: #007654;
  --hist-old-color: #5682bb;
}

/* ---- navy (blue-rose, dark) ---- */
html[data-theme="theme-6"] {
  color-scheme: dark;
  --bg: #11151c;
  --bg-strong: #212d40;
  --panel: #1e2838;
  --panel-solid: #1e2838;
  --panel-hover: #273140;
  --text: #c8ccd2;
  --muted: #8a919f;
  --line: rgba(54, 65, 86, 0.65);
  --line-strong: rgba(54, 65, 86, 0.90);
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
  --accent: #d66853;
  --accent-2: #7d4e57;
  --accent-deep: #e59383;
  --accent-soft: rgba(214, 104, 83, 0.13);
  --accent-2-soft: rgba(125, 78, 87, 0.14);
  --btn-fill: #d66853;
  --btn-text: #11151c;
  --hist-new-color: #c97b60;
  --hist-old-color: #4f84ba;
}

/* ---- cyan (cyan-highlight, dark) ---- */
html[data-theme="theme-7"] {
  color-scheme: dark;
  --bg: #0e1116;
  --bg-strong: #07090d;
  --panel: #1f2328;
  --panel-solid: #1f2328;
  --panel-hover: #272b30;
  --text: #bbbbbf;
  --muted: #8d8e8e;
  --line: rgba(141, 142, 142, 0.22);
  --line-strong: rgba(141, 142, 142, 0.38);
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
  --accent: #52d1dc;
  --accent-2: #a3a9aa;
  --accent-deep: #9fe3e9;
  --accent-soft: rgba(82, 209, 220, 0.11);
  --accent-2-soft: rgba(163, 169, 170, 0.10);
  --btn-fill: #52d1dc;
  --btn-text: #0e1116;
  --hist-new-color: #28a3b6;
  --hist-old-color: #a4771c;
}

/* ---- chromeless light (achromatic) — default via auto ----
   Shell carries no color scheme; the only hue on screen is the game's.
   Born from the 2026-08 controlled-variable tests (chunirec/maishift
   standard). Status + hist series stay colored: they are functional,
   same class as difficulty colors. */
html[data-theme="theme-8"] {
  color-scheme: light;
  --bg: #f2f2f2;
  --bg-strong: #e6e6e6;
  --panel: #ffffff;
  --panel-solid: #ffffff;
  --panel-hover: #f0f0f0;
  --text: #1c1c1c;
  --muted: #6f6f6f;
  --line: rgba(0, 0, 0, 0.14);
  --line-strong: rgba(0, 0, 0, 0.32);
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.08);
  --accent: #2e2e2e;
  --accent-2: #5a5a5a;
  --accent-deep: #111111;
  --accent-soft: rgba(0, 0, 0, 0.07);
  --accent-2-soft: rgba(0, 0, 0, 0.05);
  --btn-fill: #2e2e2e;
  --btn-text: #ffffff;
  --hist-new-color: #007654;
  --hist-old-color: #5682bb;
  /* accent-deep is near-black here, so warn needs its own hue */
  --warn: #8a5310;
}

/* ---- chromeless dark (achromatic) — default via auto ---- */
html[data-theme="theme-9"] {
  color-scheme: dark;
  --bg: #161616;
  --bg-strong: #0f0f0f;
  --panel: #1e1e1e;
  --panel-solid: #1e1e1e;
  --panel-hover: #262626;
  --text: #ececec;
  --muted: #9a9a9a;
  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.32);
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  --accent: #d6d6d6;
  --accent-2: #a0a0a0;
  --accent-deep: #f5f5f5;
  --accent-soft: rgba(255, 255, 255, 0.08);
  --accent-2-soft: rgba(255, 255, 255, 0.06);
  --btn-fill: #d6d6d6;
  --btn-text: #161616;
  --hist-new-color: #28a3b6;
  --hist-old-color: #a4771c;
  --warn: #e0a85c;
}

/* ---- dark-scheme status overrides (all dark themes at once) ---- */
html[data-scheme="dark"] {
  --danger: #ff8a8a;
  --success: #7ddf9b;
  --scrim: rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   Future view (teal) — orthogonal to theme, resolves per scheme.
   Dark variant is derived from the same teal seeds (formulas: bg mix(A 32%,
   black), panel mix(A 45%, black), text seed E, muted seed B, accent seed C,
   accent-deep mix(C 70%, white)). Contrast verified AA+.
   ========================================================================== */
html[data-scheme="light"] body.theme-future,
html:not([data-scheme]) body.theme-future {
  --bg: #f1ebd3;
  --bg-strong: #e8ddb5;
  --panel: #f9f7ed;
  --panel-solid: #f9f7ed;
  --panel-hover: #ebe9e1;
  --text: #292b38;
  --muted: #666a86;
  --line: rgba(102, 106, 134, 0.22);
  --line-strong: rgba(102, 106, 134, 0.40);
  --shadow: 0 18px 44px rgba(41, 43, 56, 0.10);
  --accent: #788aa3;
  --accent-2: #92b6b1;
  --accent-deep: #313a46;
  --accent-soft: rgba(146, 182, 177, 0.18);
  --accent-2-soft: rgba(146, 182, 177, 0.12);
  --btn-fill: #313a46;
  --btn-text: #f1ebd3;
  --hist-new-color: #37649e;
  --hist-old-color: #858626;
}
html[data-scheme="dark"] body.theme-future {
  --bg: #0e0f16;
  --bg-strong: #06070b;
  --panel: #1d1e29;
  --panel-solid: #1d1e29;
  --panel-hover: #272831;
  --text: #e8ddb5;
  --muted: #788aa3;
  --line: rgba(120, 138, 163, 0.25);
  --line-strong: rgba(120, 138, 163, 0.42);
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
  --accent: #92b6b1;
  --accent-2: #b2c9ab;
  --accent-deep: #b2ccc8;
  --accent-soft: rgba(146, 182, 177, 0.12);
  --accent-2-soft: rgba(178, 201, 171, 0.12);
  --btn-fill: #92b6b1;
  --btn-text: #0e0f16;
  --hist-new-color: #6595d1;
  --hist-old-color: #858626;
}

/* ==========================================================================
   Component-role tokens derived from the theme — pages consume these instead
   of raw accents, so per-theme special-casing never leaks into page CSS.
   ========================================================================== */
/* Rating history / b50 series colors are defined PER THEME above — muted
   (OKLCh C ~0.105, the legibility floor) and hue-harmonized with each theme,
   with the lightness split doing part of the separating work. Every pair is
   machine-validated CLEAN (dataviz six-checks: CVD ΔE, normal-vision ΔE,
   lightness band, chroma floor, 3:1 contrast) on that theme's own panel.
   To change a pair, re-run the search in the design scratchpad
   (find-pairs.mjs) rather than eyeballing replacements. */