/** * tokens.css — Disclosure Navigator design tokens * * Single source of truth for ALL color tokens. * Loaded on every page via a at end of (overrides per-page :root blocks). * Never hardcode hex values anywhere — always reference a var() from this file. * * Dark mode is the default (:root). * Light mode overrides via [data-theme="light"]. */ /* ─── DARK THEME (default) ───────────────────────────────────────────────────── */ :root { /* Backgrounds */ --bg: #0d0d14; --surface: #111120; --surface2: #161625; --surface3: #1e1e30; /* Borders */ --border: #1e293b; --border2: #2d3f55; /* Text — WCAG AA compliant on dark backgrounds */ --text: #a8b8c8; /* primary body — was #94a3b8, now higher contrast */ --text-dim: #6b7f94; /* secondary / labels — was #475569, ~4× contrast */ --text-bright: #f0f4f8; /* headings / emphasis — was #e2e8f0 */ --text-muted: #475569; /* truly suppressed (timestamps, metadata only) */ /* Accent */ --accent: #4a9eff; --accent2: #818cf8; /* Semantic */ --danger: #ff6b35; --warning: #fbbf24; --green: #34d399; --red: #f87171; /* Entity type colors */ --entity-person: #c084fc; --entity-org: #22d3ee; --entity-program: #4a9eff; --entity-location: #fb923c; --entity-concept: #a78bfa; --entity-case: #34d399; /* Misc */ --glow: rgba(74, 158, 255, 0.08); --glow2: rgba(129, 140, 248, 0.08); --overlay-bg: rgba(0, 0, 0, 0.72); --tag-bg: #161625; } /* ─── LIGHT THEME ────────────────────────────────────────────────────────────── */ [data-theme="light"] { /* Backgrounds */ --bg: #f1f5f9; --surface: #ffffff; --surface2: #f8fafc; --surface3: #e2e8f0; /* Borders */ --border: #cbd5e1; --border2: #94a3b8; /* Text — WCAG AA compliant on light backgrounds */ --text: #334155; /* primary body — was #475569, better contrast */ --text-dim: #5a6a78; /* secondary — was #94a3b8 which was barely readable */ --text-bright: #0f172a; /* headings / emphasis */ --text-muted: #94a3b8; /* truly suppressed */ /* Accent */ --accent: #2563eb; --accent2: #6366f1; /* Semantic */ --danger: #dc2626; --warning: #d97706; --green: #059669; --red: #dc2626; /* Entity type colors */ --entity-person: #9333ea; --entity-org: #0891b2; --entity-program: #2563eb; --entity-location: #ea580c; --entity-concept: #7c3aed; --entity-case: #059669; /* Misc */ --glow: rgba(37, 99, 235, 0.06); --glow2: rgba(99, 102, 241, 0.06); --overlay-bg: rgba(0, 0, 0, 0.50); --tag-bg: #e2e8f0; }