/* ═══════════════════════════════════════════ HQ Design Tokens Single source of truth for all design values. Import this first — all other CSS files depend on it. ═══════════════════════════════════════════ */ :root { color-scheme: dark; /* ── Colors ────────────────────────────────── */ --color-bg: #0C0A09; --color-panel: #151311; --color-panel2: #1a1715; --color-border: #252219; --color-text: #E8E2D9; --color-dim: #8A8074; --color-muted: #4A4238; --color-amber: #D4A017; --color-amber-dim: #D4A01722; --color-amber-glow: #D4A01744; --color-green: #5CB85C; --color-red: #E85555; --color-blue: #4A9EE8; --color-orange: #E8943A; --color-purple: #9B6DD7; --color-pink: #E86A92; --color-teal: #4AC9D4; /* ── Font stacks ───────────────────────────── */ --font-body: 'Outfit', system-ui, sans-serif; --font-display: 'Playfair Display', Georgia, serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* ── Font sizes ────────────────────────────── */ --text-xs: 9px; --text-sm: 10px; --text-base: 12px; --text-md: 13px; --text-lg: 14px; --text-xl: 16px; --text-2xl: 20px; --text-3xl: 24px; --text-4xl: 30px; /* ── Spacing scale (4px base) ──────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; /* ── Border radius ─────────────────────────── */ --radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 8px; /* ── Transitions ───────────────────────────── */ --transition-fast: 0.1s ease; --transition-base: 0.15s ease; --transition-slow: 0.25s ease; /* ── Shadows ───────────────────────────────── */ --shadow-amber: 0 0 6px #D4A01744; --shadow-green: 0 0 6px #5CB85C88; --shadow-red: 0 0 6px #E8555588; } /* ═══════════════════════════════════════════ Light theme (Brian-requested 2026-07-12: "Yes to add the light"). Token-level override — every var(--color-*) consumer restyles for free; component CSS never branches on theme. Dark stays the default; the top-bar ☀/☾ toggle stamps data-theme on (persisted in localStorage, applied pre-paint by an inline snippet in app.html). Warm paper counterpart to the dark amber/industrial world. ═══════════════════════════════════════════ */ html[data-theme="light"] { color-scheme: light; --color-bg: #F4EFE7; --color-panel: #FDFAF4; --color-panel2: #EFE8DC; --color-border: #DED4C4; --color-text: #2A251E; --color-dim: #7C7261; --color-muted: #B8AC9A; /* Amber deepens for contrast on paper (dark #D4A017 fails 4.5:1 on white). */ --color-amber: #8F6A10; --color-amber-dim: #8F6A101F; --color-amber-glow: #8F6A1038; --color-green: #2E7D32; --color-red: #C62828; --color-blue: #1565C0; --color-orange: #B35A0E; --color-purple: #6A3FB5; --color-pink: #B03A5E; --color-teal: #00796B; --shadow-amber: 0 0 6px #8F6A1038; --shadow-green: 0 0 6px #2E7D3255; --shadow-red: 0 0 6px #C6282855; } /* ═══════════════════════════════════════════ Legacy alias tokens (2026-07-12). Various components reference token names that were never defined (--color-bg-soft, --color-surface, ...), so their HARDCODED FALLBACKS applied in both themes — the systemic root of Brian's "backgrounds still black" light-mode reports (Overseer, Voice, ...). Aliasing them to real tokens fixes every reference at once and keeps them theme-following via var() indirection. New code should use the canonical names; these exist so old references can never go phantom again. ═══════════════════════════════════════════ */ :root { --color-bg-soft: var(--color-panel2); --color-bg-elev: var(--color-panel); --color-bg-elev-2: var(--color-panel2); --color-bg-elev-3: var(--color-panel2); --color-surface: var(--color-panel); --color-border-soft: var(--color-border); --color-accent: var(--color-amber); --color-accent-dim: var(--color-amber-dim); --color-danger: var(--color-red); --color-text-dim: var(--color-dim); --color-text-muted: var(--color-muted); }