/* ============================================================================= tokens.css — the shared design tokens for the *.bburger.xyz family. THE one source of truth for the palette, type, spacing, and radius scale. How it ships: this file is NOT committed into any site's app/ folder. Each site's deploy workflow copies it in next to index.html right before syncing to S3 (see .github/workflows/deploy-.yml), so every site serves an identical copy without a build step. Edit it HERE only. Local preview: run ./shared/sync-tokens.sh to drop a (git-ignored) copy into each site's app/ so pages render correctly when opened directly. Color schemes: dark is the default and needs no opt-in. A site that also wants light (Mode C field tools — phones in sunlight) sets to follow the OS, or "light"/"dark" to force one. Sites that set nothing stay dark, exactly as before. See STYLE.md for the design rationale behind these values. ============================================================================= */ :root { color-scheme: dark; /* Surfaces — dark slate, never black; layered by elevation */ --bg-primary: #0f1216; --bg-secondary: #141820; --bg-surface: #1a1f28; /* cards */ --bg-elevated: #222832; --bg-hover: #2a313d; /* Text — soft, never pure white */ --text-heading: #f0f2f5; --text-primary: #d4d7dd; --text-secondary: #9ca3ae; --text-muted: #5c6370; /* 3.1:1 — hints and disabled only, never content */ /* Accent — the one true teal */ --accent: #5ba3a3; --accent-light: #7ab3b3; --accent-subtle: rgba(91, 163, 163, 0.12); --accent-muted: rgba(91, 163, 163, 0.15); --on-accent: #0f1216; /* text/icons on a solid accent fill */ /* Semantic — desaturated, meaning only */ --success: #5b9a73; --warning: #c9a35f; --danger: #c97a5f; /* Lines */ --border: rgba(255, 255, 255, 0.06); --border-light: rgba(255, 255, 255, 0.10); /* Focus — one ring, everywhere, keyboard only (:focus-visible) */ --focus-ring: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent); /* Radius */ --radius: 14px; --radius-sm: 10px; --radius-xs: 6px; --radius-pill: 999px; /* Spacing — 4px base */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Type */ --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'SF Mono', 'Fira Code', ui-monospace, monospace; /* Type scale — ~1.2 ratio; px so phones and desktops agree */ --text-xs: 12px; /* eyebrows, legal */ --text-sm: 14px; /* hints, secondary labels */ --text-base: 16px; /* body; also the floor for inputs (iOS zooms below it) */ --text-lg: 18px; /* ledes, emphasized rows */ --text-xl: 22px; /* card titles */ --text-2xl: 28px; /* screen titles */ --text-3xl: 40px; /* hero numbers */ --text-4xl: 56px; /* page hero */ /* Touch — the minimum hit area for anything tappable */ --tap-min: 44px; /* Motion — state changes only; see STYLE.md */ --dur-fast: 120ms; /* press feedback, toggles */ --dur: 200ms; /* reveals, sheet fades */ --dur-slow: 320ms; /* sheets, one-off celebrations */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.6, 0, 0.3, 1); } /* ---------- Light scheme (opt-in) ------------------------------------------ Same roles, re-tuned for daylight: surfaces go near-white, the teal darkens to hold 4.5:1 as text, semantics deepen. Never used unless a site asks. */ :root[data-scheme="light"] { color-scheme: light; --bg-primary: #f4f5f7; --bg-secondary: #eceef1; --bg-surface: #ffffff; --bg-elevated: #ffffff; --bg-hover: #e6e9ed; --text-heading: #11161c; --text-primary: #262d36; --text-secondary: #555e6b; --text-muted: #7a828e; --accent: #2c7474; --accent-light: #3a8a8a; --accent-subtle: rgba(44, 116, 116, 0.08); --accent-muted: rgba(44, 116, 116, 0.14); --on-accent: #ffffff; --success: #2e7048; --warning: #8a5f10; --danger: #a94a2b; --border: rgba(17, 22, 28, 0.08); --border-light: rgba(17, 22, 28, 0.14); } @media (prefers-color-scheme: light) { :root[data-scheme="auto"] { color-scheme: light; --bg-primary: #f4f5f7; --bg-secondary: #eceef1; --bg-surface: #ffffff; --bg-elevated: #ffffff; --bg-hover: #e6e9ed; --text-heading: #11161c; --text-primary: #262d36; --text-secondary: #555e6b; --text-muted: #7a828e; --accent: #2c7474; --accent-light: #3a8a8a; --accent-subtle: rgba(44, 116, 116, 0.08); --accent-muted: rgba(44, 116, 116, 0.14); --on-accent: #ffffff; --success: #2e7048; --warning: #8a5f10; --danger: #a94a2b; --border: rgba(17, 22, 28, 0.08); --border-light: rgba(17, 22, 28, 0.14); } } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; } }