:root{ /* ── canonical tokens — GENERATED from design.json, do not edit here ── */ /* theme-independent: fonts + radii */ --font:'IBM Plex Mono', 'SF Mono', ui-monospace, 'Courier New', monospace;--font-serif:'DM Serif Display', Georgia, serif;--font-sans:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --radius:10px;--radius-sm:6px;--radius-lg:14px; /* dark palette (baseline / no-JS default) */ --bg:#080b11;--bg2:#0e131c;--bg3:#161d29; --border:#1d2635;--border2:#2b3848; --text:#e7edf6;--text2:#8a9bb2;--text3:#4e6178; --accent:#22d3ee;--accent2:#0e7ea3;--accent-text:#22d3ee; --green:#26e08a;--red:#ff5470;--gold:#ffce6a;--neutral:#8a9bb2;--live:#26e08a; --accent-l:rgba(34,211,238,.10);--accent-m:rgba(34,211,238,.22); --green-l:rgba(38,224,138,.08);--red-l:rgba(255,84,112,.08);--gold-l:rgba(255,206,106,.08); --hover:#1c2636;--active:#232f42;--focus:#22d3ee; --disabled-bg:#131a24;--disabled-text:#3c4a5c; --scrim:rgba(4,7,12,0.72);--grid:#141b26;--accent-ink:#04141b; --focus-ring:rgba(34,211,238,.35); /* ── legacy aliases → canonical (older templates resolve from one source) ── */ --ink0:var(--bg);--ink1:var(--bg2);--ink2:var(--bg3);--ink3:var(--bg3); --card:var(--bg2);--card2:var(--bg3); --blue:var(--accent);--cyan:var(--accent); --blue-l:var(--accent-l);--blue-m:var(--accent-m);--cyan-l:var(--accent-l); --t0:var(--text);--t1:var(--text2);--t2:var(--text3);--t3:var(--border); --bd:var(--border);--bdh:var(--border2);--bda:var(--accent-m); --fs:var(--font-serif);--fb:var(--font-sans);--fm:var(--font); --r:var(--radius);--r2:var(--radius-lg); color-scheme:dark; } /* Theming is opt-in via (set by app_base.html). Pages not yet migrated to the shell have no `.themed` class and stay on the dark baseline above — so light mode never reaches an un-restyled page. */ /* system default → light, unless the user has picked a theme explicitly */ @media (prefers-color-scheme: light){ :root.themed:not([data-theme]){ --bg:#f4f7fb;--bg2:#ffffff;--bg3:#eaeff6; --border:#dde4ee;--border2:#c5d0de; --text:#0b1420;--text2:#55647a;--text3:#8494a8; --accent:#22d3ee;--accent2:#0e7ea3;--accent-text:#0a6a82; --green:#0f9d6e;--red:#d92d47;--gold:#9a6a0f;--neutral:#55647a;--live:#0f9d6e; --accent-l:rgba(34,211,238,.10);--accent-m:rgba(34,211,238,.22); --green-l:rgba(15,157,110,.08);--red-l:rgba(217,45,71,.08);--gold-l:rgba(154,106,15,.08); --hover:#e9eef6;--active:#dde5f0;--focus:#0e7ea3; --disabled-bg:#eef2f8;--disabled-text:#a7b3c4; --scrim:rgba(15,23,42,0.42);--grid:#e6ecf4;--accent-ink:#04141b; --focus-ring:rgba(14,126,163,.35); color-scheme:light; } } /* explicit user override (set by static/js/theme.js) */ :root.themed[data-theme="light"]{ --bg:#f4f7fb;--bg2:#ffffff;--bg3:#eaeff6; --border:#dde4ee;--border2:#c5d0de; --text:#0b1420;--text2:#55647a;--text3:#8494a8; --accent:#22d3ee;--accent2:#0e7ea3;--accent-text:#0a6a82; --green:#0f9d6e;--red:#d92d47;--gold:#9a6a0f;--neutral:#55647a;--live:#0f9d6e; --accent-l:rgba(34,211,238,.10);--accent-m:rgba(34,211,238,.22); --green-l:rgba(15,157,110,.08);--red-l:rgba(217,45,71,.08);--gold-l:rgba(154,106,15,.08); --hover:#e9eef6;--active:#dde5f0;--focus:#0e7ea3; --disabled-bg:#eef2f8;--disabled-text:#a7b3c4; --scrim:rgba(15,23,42,0.42);--grid:#e6ecf4;--accent-ink:#04141b; --focus-ring:rgba(14,126,163,.35); color-scheme:light; } :root.themed[data-theme="dark"]{ --bg:#080b11;--bg2:#0e131c;--bg3:#161d29; --border:#1d2635;--border2:#2b3848; --text:#e7edf6;--text2:#8a9bb2;--text3:#4e6178; --accent:#22d3ee;--accent2:#0e7ea3;--accent-text:#22d3ee; --green:#26e08a;--red:#ff5470;--gold:#ffce6a;--neutral:#8a9bb2;--live:#26e08a; --accent-l:rgba(34,211,238,.10);--accent-m:rgba(34,211,238,.22); --green-l:rgba(38,224,138,.08);--red-l:rgba(255,84,112,.08);--gold-l:rgba(255,206,106,.08); --hover:#1c2636;--active:#232f42;--focus:#22d3ee; --disabled-bg:#131a24;--disabled-text:#3c4a5c; --scrim:rgba(4,7,12,0.72);--grid:#141b26;--accent-ink:#04141b; --focus-ring:rgba(34,211,238,.35); color-scheme:dark; }