/* ============================================================ BlueList Design Tokens — v1.1 (2026-07-19) v1.1: single-typeface — everything is Instrument Sans. Canonical source: design-system/ (see DESIGN-SYSTEM.md) Theming: the dark "war-room" theme is the default (public website). Add data-theme="light" on for the portal / product surfaces. Token NAMES keep their roles across themes (--ink* = surfaces, --cream* = text) — the existing site and portal convention. Do not rename. ============================================================ */ :root { /* ---- Brand slate (identity — logo & brand moments only) ---- */ --slate: #485E68; --slate-2: #607D8B; --slate-bright: #9DB4C0; /* slate on dark surfaces */ --slate-paper: #E7EDF1; /* lightest slate — logo on dark */ /* ---- Type: one family, Instrument Sans (variable wght 400-700). --display/--sans/--mono survive as ROLES so existing pages migrate without markup churn. --mono contexts must add `font-variant-numeric: tabular-nums` (data, counts, FEC IDs); actual code samples fall back to the system monospace stack. ---- */ --sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; --display: var(--sans); --mono: var(--sans); --code: ui-monospace, 'SF Mono', monospace; /* real code only */ /* Weights (display 650 = the wordmark weight) */ --wt-body: 400; --wt-meta: 500; --wt-data: 500; /* + tabular-nums */ --wt-ui: 600; --wt-heading: 600; --wt-display: 650; /* ---- Space (4px base) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* ---- Radius (sharp, editorial) ---- */ --r-1: 2px; /* chips, tags */ --r-2: 6px; /* buttons, inputs */ --r-3: 8px; /* cards */ --r-full: 999px; /* pills, dots, bar motifs */ /* ---- Motion ---- */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.76, 0, .24, 1); --t-fast: 160ms; --t-med: 280ms; /* ---- Dark theme (default — public website) ---- */ /* Surfaces */ --ink: #05122A; --ink-2: #0A1A34; --ink-3: #0F2344; --ink-4: #16305A; --rule: rgba(244, 239, 230, .12); --rule-strong: rgba(244, 239, 230, .22); /* Text */ --cream: #F4EFE6; --cream-2: #ECE5D6; --cream-ink: #1A1612; /* dark ink for use ON light accents */ /* Signal blues (action) */ --signal: #4FA8FF; --signal-2: #2E7FFB; --signal-3: #1E5ADF; --signal-glow: rgba(79, 168, 255, .35); /* Accents (semantic) */ --desert: #E4B57A; --rust: #C6562E; --kelly: #3DD598; /* Logo colors in this theme (use the -dark SVG files) */ --logo-bar: var(--slate-paper); --logo-bar-muted: var(--slate-bright); } [data-theme="light"] { /* ---- Light theme (portal / product surfaces) ---- */ /* Surfaces */ --ink: #F6F7F9; --ink-2: #FFFFFF; --ink-3: #EEF2F7; --ink-4: #E2E8F0; --rule: rgba(15, 23, 42, .10); --rule-strong: rgba(15, 23, 42, .18); /* Text */ --cream: #0F172A; --cream-2: #334155; --cream-ink: #1A1612; /* Signal blues (tuned for contrast on white) */ --signal: #2E7FFB; --signal-2: #1E5ADF; --signal-3: #1746B0; --signal-glow: rgba(46, 127, 251, .25); /* Accents (darkened for light surfaces) */ --desert: #B4791F; --rust: #C6562E; --kelly: #1F9D6B; /* Logo colors in this theme (use the standard SVG files) */ --logo-bar: var(--slate); --logo-bar-muted: var(--slate-2); } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-med: 0ms; } }