/* ============================================================ THEME SYSTEM — three distinct, fully-realized themes. Switch via . Persisted in localStorage. ============================================================ */ :root { /* typography (shared across themes) */ --font-display: "Fraunces", Georgia, serif; --font-body: "Public Sans", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* fixed party hues (consistent across themes, tuned per theme below) */ --dem: #2b6cb0; --rep: #c5352f; --oth: #6b7280; /* spacing / radius / motion */ --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --maxw: 1240px; --ease: cubic-bezier(.2,.7,.2,1); --t-fast: .16s; --t-med: .32s; } /* ---------- BROADSHEET (light editorial, default) ---------- */ [data-theme="broadsheet"] { --bg: #f4f1ea; --bg-elev: #fbf9f4; --bg-sunk: #ece7db; --ink: #1a1714; --ink-soft: #5c5448; --ink-faint: #8a7f6f; --line: #d8d0bf; --line-strong: #b9ad95; --accent: #8c1d1d; /* deep newsroom red */ --accent-2: #1b3a5b; /* navy */ --gold: #9a7b2e; --dem: #1f5fa6; --rep: #b32b22; --good: #2f6f4f; --grain-opacity: .035; --shadow: 0 1px 2px rgba(40,30,15,.08), 0 12px 30px -12px rgba(40,30,15,.18); --header-bg: rgba(244,241,234,.86); color-scheme: light; } /* ---------- ELECTION NIGHT (dark, dramatic) ---------- */ [data-theme="night"] { --bg: #0d1017; --bg-elev: #161b26; --bg-sunk: #0a0d13; --ink: #eef2f8; --ink-soft: #aab4c4; --ink-faint: #6b7689; --line: #232b3a; --line-strong: #36425a; --accent: #ffb020; /* electoral amber */ --accent-2: #4aa8ff; --gold: #ffce6b; --dem: #57a6ff; --rep: #ff5e57; --good: #3ddc97; --grain-opacity: .06; --shadow: 0 2px 4px rgba(0,0,0,.4), 0 20px 50px -18px rgba(0,0,0,.7); --header-bg: rgba(13,16,23,.82); color-scheme: dark; } /* ---------- CIVIC (high-contrast, accessible, flag-inspired) ---------- */ [data-theme="civic"] { --bg: #ffffff; --bg-elev: #f7f9fc; --bg-sunk: #eef2f8; --ink: #0a0e14; --ink-soft: #3d4757; --ink-faint: #6e7787; --line: #d2dae6; --line-strong: #9fb0c6; --accent: #b22234; /* US flag red */ --accent-2: #3c3b6e; /* US flag blue */ --gold: #b8860b; --dem: #1d4ed8; --rep: #b91c1c; --good: #15803d; --grain-opacity: 0; --shadow: 0 1px 2px rgba(10,14,20,.08), 0 10px 24px -12px rgba(10,14,20,.18); --header-bg: rgba(255,255,255,.9); color-scheme: light; }