/* theme.css — datadime.cloud site-wide theme system (single source of truth).
   Themes are complete pre-validated token sets: every pairing rendered
   anywhere on the site passes WCAG 2.2 AA, enforced by
   scripts/check-contrast.mjs (run it after ANY color change; the parser
   relies on the THEME/SYNC comment markers).
   Each page needs: this stylesheet, /theme.js before </body>, an inline
   no-flash snippet in <head>, and a <div id="theme-picker"> container. */

/* THEME classic-dark */
:root{--bg:#0d0f14;--surface:#141720;--surface-2:#1c2030;--border:#252a38;--text:#e2e6f0;--text-muted:#8891ab;--accent:#00d4aa;--accent-2:#9b8cff;--accent-3:#f5a623;--accent-4:#e56b79;--accent-text:#04211b;--ok:#3ddc84;--hdr1:#07111f;--hdr2:#141720;--ev:#00e87a;--ev-bg:#030e08;--ev-fg:#ffffff;--ev-dim:#93b39f;--ev-text:#020f06;color-scheme:dark}
/* THEME classic-light */
[data-theme="classic-light"]{--bg:#f5f6f9;--surface:#ffffff;--surface-2:#eef0f5;--border:#d8dce6;--text:#1d2333;--text-muted:#5a6172;--accent:#007a5f;--accent-2:#5b47d6;--accent-3:#7a4e06;--accent-4:#bc3a4a;--accent-text:#ffffff;--ok:#166237;--hdr1:#e9edf5;--hdr2:#f7f9fc;--ev:#0b7a3e;--ev-bg:#e7f6ec;--ev-fg:#14261b;--ev-dim:#456353;--ev-text:#ffffff;color-scheme:light}
/* THEME high-contrast */
[data-theme="high-contrast"]{--bg:#000000;--surface:#0d0d0d;--surface-2:#161616;--border:#4a4f5e;--text:#ffffff;--text-muted:#c2c7d6;--accent:#4dffd2;--accent-2:#beb3ff;--accent-3:#ffc14d;--accent-4:#ff97a2;--accent-text:#001a12;--ok:#5df59a;--hdr1:#000000;--hdr2:#0d0d0d;--ev:#4dffa1;--ev-bg:#000000;--ev-fg:#ffffff;--ev-dim:#c2d6c9;--ev-text:#001a0d;color-scheme:dark}
/* THEME forge */
[data-theme="forge"]{--bg:#141009;--surface:#1d1710;--surface-2:#262017;--border:#372c1c;--text:#f2eadf;--text-muted:#a89880;--accent:#f5a623;--accent-2:#00d4aa;--accent-3:#9b8cff;--accent-4:#e56b79;--accent-text:#241500;--ok:#3ddc84;--hdr1:#190f04;--hdr2:#1d1710;--ev:#00e87a;--ev-bg:#071009;--ev-fg:#ffffff;--ev-dim:#93b39f;--ev-text:#020f06;color-scheme:dark}
/* THEME mist */
[data-theme="mist"]{--bg:#f6f5fa;--surface:#ffffff;--surface-2:#efedf7;--border:#d9d6e6;--text:#232038;--text-muted:#5c5872;--accent:#5b47d6;--accent-2:#00654e;--accent-3:#7a4e06;--accent-4:#bc3a4a;--accent-text:#ffffff;--ok:#166237;--hdr1:#eceafb;--hdr2:#f9f8fd;--ev:#0b7a3e;--ev-bg:#e9f5ee;--ev-fg:#14261b;--ev-dim:#456353;--ev-text:#ffffff;color-scheme:light}
/* System preference default: only when the visitor has never picked a theme.
   Token values MUST stay identical to classic-light (checked by script). */
@media(prefers-color-scheme:light){
/* SYNC classic-light */
:root:not([data-theme]){--bg:#f5f6f9;--surface:#ffffff;--surface-2:#eef0f5;--border:#d8dce6;--text:#1d2333;--text-muted:#5a6172;--accent:#007a5f;--accent-2:#5b47d6;--accent-3:#7a4e06;--accent-4:#bc3a4a;--accent-text:#ffffff;--ok:#166237;--hdr1:#e9edf5;--hdr2:#f7f9fc;--ev:#0b7a3e;--ev-bg:#e7f6ec;--ev-fg:#14261b;--ev-dim:#456353;--ev-text:#ffffff;color-scheme:light}
}

/* Fonts + legacy aliases (aliases let pre-Phase-2 pages keep their short
   var names; new code should use the canonical names above). */
:root{--mono:'JetBrains Mono',monospace;--sans:'Inter',system-ui,sans-serif;
--sur:var(--surface);--sur2:var(--surface-2);--bdr:var(--border);--txt:var(--text);--dim:var(--text-muted);--acc:var(--accent);--acc2:var(--accent-2);--warn:var(--accent-3);--err:var(--accent-4)}

/* Theme picker (container: <div class="picker" id="theme-picker">) */
.picker{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:12px;position:relative}
.picker button{width:44px;height:44px;border-radius:50%;cursor:pointer;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;padding:0}
.picker button .dot{width:16px;height:16px;border-radius:50%;display:block}
.picker button[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:2px}
.picker button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
