/* ============================================================================ tokens.css — v8 Design System: semantic design tokens Spec: docs/superpowers/specs/2026-05-11-v8-design-system-spec.md §2 RGB triples (no commas, no `rgb(...)` wrapper) so Tailwind's `rgb(var(--token) / )` opacity utilities work: bg-surface-2/80 → rgba(var(--surface-2), 0.8) Light mode is the default (`:root`). Dark mode activates via `` (or `class="dark"` set by JS based on system / stored preference). Public surface defaults to light (reading comfort, marketing trust). Admin surface will default to dark (terminal feel) once migration completes; today it sources values from these tokens via the bridge in dashboard.css. ============================================================================ */ :root { /* Surfaces — page background through to top-most elevated card */ --surface-0: 255 255 255; /* page background */ --surface-1: 248 250 252; /* slate-50 — section background */ --surface-2: 255 255 255; /* default card */ --surface-3: 241 245 249; /* slate-100 — table row hover, code */ /* Text */ --text-1: 15 23 42; /* slate-900 — primary content + headings */ --text-2: 71 85 105; /* slate-600 — secondary, meta */ --text-3: 148 163 184; /* slate-400 — captions, hints, micro */ --text-on-accent: 255 255 255; /* white text on solid accent bg */ /* Borders & dividers */ --border-1: 226 232 240; /* slate-200 — default card border */ --border-2: 203 213 225; /* slate-300 — emphasised */ --border-focus: 15 23 42; /* slate-900 — 2-px focus ring */ /* Brand — NOT GREEN. Slate-900 is the brand color (decision lock §1 of design-system spec). Green is reserved for direction-positive meaning only. */ --brand-fg: 15 23 42; --brand-bg: 248 250 252; /* Semantic accents — every accent has fg / bg / ring triple */ --accent-positive-fg: 4 120 87; /* emerald-700 */ --accent-positive-bg: 236 253 245; /* emerald-50 */ --accent-positive-ring: 16 185 129; /* emerald-500 */ --accent-caution-fg: 180 83 9; /* amber-700 */ --accent-caution-bg: 255 251 235; /* amber-50 */ --accent-caution-ring: 245 158 11; /* amber-500 */ --accent-threat-fg: 190 18 60; /* rose-700 */ --accent-threat-bg: 255 241 242; /* rose-50 */ --accent-threat-ring: 244 63 94; /* rose-500 */ --accent-info-fg: 29 78 216; /* blue-700 */ --accent-info-bg: 239 246 255; /* blue-50 */ --accent-info-ring: 59 130 246; /* blue-500 */ /* Data-viz palette — Wong 6-color colour-blind safe (spec §2.3). Use these for categorical charts ONLY (never bind to semantic meaning — semantic uses the accents above). */ --viz-1: 0 114 178; /* blue */ --viz-2: 230 159 0; /* orange */ --viz-3: 0 158 115; /* green */ --viz-4: 240 228 66; /* yellow */ --viz-5: 213 94 0; /* vermillion */ --viz-6: 204 121 167; /* magenta */ } html.dark { /* Surfaces — terminal-style depth */ --surface-0: 10 14 23; --surface-1: 15 20 25; --surface-2: 17 24 39; --surface-3: 26 35 50; /* Text */ --text-1: 241 245 249; --text-2: 148 163 184; --text-3: 100 116 139; --text-on-accent: 255 255 255; /* Borders */ --border-1: 30 41 59; --border-2: 51 65 85; --border-focus: 226 232 240; /* Brand — slate-100 inverse */ --brand-fg: 241 245 249; --brand-bg: 15 20 25; /* Accents — brighter on dark (500-range) so they pop without desaturating against deep backgrounds. */ --accent-positive-fg: 16 185 129; --accent-positive-bg: 16 185 129; /* used at /12 opacity */ --accent-positive-ring: 52 211 153; --accent-caution-fg: 245 158 11; --accent-caution-bg: 245 158 11; --accent-caution-ring: 251 191 36; --accent-threat-fg: 244 63 94; --accent-threat-bg: 244 63 94; --accent-threat-ring: 251 113 133; --accent-info-fg: 59 130 246; --accent-info-bg: 59 130 246; --accent-info-ring: 96 165 250; /* Data-viz tweaks for dark contrast */ --viz-1: 86 180 233; --viz-2: 230 159 0; --viz-3: 0 158 115; --viz-4: 240 228 66; --viz-5: 213 94 0; --viz-6: 204 121 167; } /* When tokens are sourced from RGB triples and used by legacy `rgb(...)` CSS (admin dashboard.css), provide ready-mixed values for the common accent foregrounds. Keeps dashboard.css working without `rgb(var(...))` syntax rewrite. */ :root { --rgb-positive: rgb(var(--accent-positive-fg)); --rgb-caution: rgb(var(--accent-caution-fg)); --rgb-threat: rgb(var(--accent-threat-fg)); --rgb-info: rgb(var(--accent-info-fg)); } /* Editorial serif display face for consumer mastheads (Nexus daily-brief mock: Fraunces headlines). NO external font fetch — Fraunces is SELF-HOSTED via css/fonts.css (loaded by public.html only), so on the consumer surface this resolves to the real Fraunces; anywhere fonts.css is not loaded it falls back to Georgia (the mock's own declared fallback stack). Token-agnostic: color/size stay with the caller, this class owns ONLY the family. */ .font-display-serif { font-family: 'Fraunces', Georgia, 'Iowan Old Style', 'Times New Roman', serif; }