/* ============================================================ SCOUT — DESIGN TOKENS (build copy, reconciled to the published system v1.1) Apple-style surface ladder (not pure black/white). Hanken Grotesk + Geist Mono (real webfonts). Set data-theme="dark" | "light" on . Dark is the marketing default; Recon pages default light and share this ladder. ============================================================ */ /* fonts.css is enqueued separately by the theme (was @import-ed here, which serialized the download). The static site still @imports it; see site/. */ :root, [data-theme="dark"] { --bg: #0B0B0B; --surface: #161616; --surface-2: #1E1E1E; --text: #F5F5F7; --text-2: #B5B5B8; --text-3: #86868B; --line: rgba(255,255,255,.10); --accent: #0E8FE6; /* Cerulean — the single spark */ --accent-text: #5FB8F2; /* links / eyebrows, lifted for dark */ --accent-ink: #0A6FB4; /* cerulean as text on white */ --on-accent: #FFFFFF; --glow: rgba(14,143,230,.20); --nav-bg: rgba(11,11,11,.60); --shadow-sm: none; --shadow-lg: 0 30px 60px -24px rgba(0,0,0,.80); } [data-theme="light"] { --bg: #F5F5F7; --surface: #FFFFFF; --surface-2: #EDEDF0; --text: #1D1D1F; --text-2: #515154; --text-3: #86868B; --line: rgba(0,0,0,.08); --accent: #0E8FE6; --accent-text: #0A6FB4; --accent-ink: #0A6FB4; --on-accent: #FFFFFF; --glow: rgba(14,143,230,.14); --nav-bg: rgba(245,245,247,.72); --shadow-sm: 0 1px 3px rgba(0,0,0,.04); --shadow-lg: 0 30px 60px -20px rgba(14,143,230,.22); } :root { /* Curated data palette (use in order, no extra saturated colors) */ --data-1: #0E8FE6; --data-2: #12B5A6; --data-3: #FF6F61; --data-4: #FBB024; --data-5: #7B6CF0; /* Status */ --positive: #0E9E73; --negative: #F2553D; --caution: #FBB024; /* Type — real webfonts: Hanken Grotesk (display/body), Geist Mono (labels/numerals) */ --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'Geist Mono', ui-monospace, Menlo, monospace; /* Radii */ --r-chip: 8px; /* chips, inputs, segmented */ --r-control: 12px; /* controls, small cards */ --r-card: 18px; /* cards, panels */ --r-media: 18px; /* media */ --r-pill: 980px; /* Layout */ --container: 1160px; --gutter: 24px; /* The lightning bolt mark (clip-path) */ --bolt: polygon(58% 0, 0 58%, 42% 58%, 30% 100%, 100% 40%, 54% 40%); }