/* * tokens.css — faro's semantic design tokens (the token layer). * * This is the ONLY file that names raw colors and font stacks. * Everything downstream (ui.css, views) consumes these * custom properties by name. A single `data-theme` on flips the * whole layer: :root is Night Watch (dark, primary); [data-theme="light"] * resolves the same contract to the light counterpart. No component * carries a raw color or a theme-specific structure. */ :root { /* Tells the browser to paint its own chrome dark: autofill backgrounds, native select popups, scrollbars and the caret. Without it the first form control lands light-on-dark. */ color-scheme: dark; /* surfaces — deep slate/navy, never pure black */ --surface-bg: #0a1019; --surface-1: #10192a; --surface-2: #16202f; --surface-3: #1b2838; --surface-hi: #22344a; --app-glow: radial-gradient(1200px 620px at 78% -8%, rgb(245 177 61 / 6%), transparent 60%); /* hairlines */ --border: #223145; --border-soft: #1a2636; /* ink */ --text: #e7edf6; --text-2: #a2b2c8; --text-3: #8f9fb7; --text-faint: #6b7c93; /* beacon — the amber lighthouse beam, used only in "beam" positions */ --beacon: #f5b13d; --beacon-bright: #ffc861; --beacon-text: #f5b13d; --beacon-ink: #1a120a; --beacon-soft: rgb(245 177 61 / 13%); --beacon-line: rgb(245 177 61 / 30%); --beacon-beam: radial-gradient(120px 60px at 90% 0%, rgb(245 177 61 / 13%), transparent 70%); /* deltas — positive / negative movement */ --pos: #45c98a; --pos-soft: rgb(69 201 138 / 13%); --neg: #f0785f; --neg-soft: rgb(240 120 95 / 13%); --info: #6fa8e6; /* type */ --font-sans: system-ui, -apple-system, "Segoe UI", roboto, helvetica, arial, sans-serif; --font-mono: ui-monospace, "SF Mono", sfmono-regular, menlo, consolas, "Liberation Mono", monospace; --fs-xs: 0.688rem; --fs-sm: 0.75rem; --fs-base: 0.844rem; --fs-md: 0.875rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.625rem; --lh-tight: 1.15; --lh: 1.45; --tracking-caps: 0.06em; /* spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* radii */ --radius-sm: 6px; --radius: 9px; --radius-lg: 12px; --radius-pill: 20px; /* elevation & focus */ --shadow: 0 1px 0 rgb(255 255 255 / 2%) inset, 0 8px 24px -12px rgb(0 0 0 / 60%); --shadow-drawer: 0 24px 60px -20px rgb(0 0 0 / 70%); --scrim: rgb(4 8 14 / 62%); --focus-ring: 0 0 0 2px var(--surface-bg), 0 0 0 4px var(--beacon-bright); /* motion */ --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --dur: 0.24s; } :root[data-theme="light"] { color-scheme: light; /* surfaces — tinted daylight slate, never pure white */ --surface-bg: #e7ebf2; --surface-1: #f4f7fb; --surface-2: #fbfcfe; --surface-3: #eef2f8; --surface-hi: #dfe6f0; --app-glow: radial-gradient(1200px 620px at 78% -8%, rgb(245 177 61 / 9%), transparent 60%); --border: #cdd6e4; --border-soft: #dde4ee; --text: #16202f; --text-2: #3f4e63; --text-3: #5c6b81; --text-faint: #6a798f; --beacon: #f5b13d; --beacon-bright: #a06c07; --beacon-text: #845209; --beacon-ink: #1a120a; --beacon-soft: rgb(245 177 61 / 18%); --beacon-line: rgb(216 135 26 / 45%); --beacon-beam: radial-gradient(120px 60px at 90% 0%, rgb(245 177 61 / 20%), transparent 70%); --pos: #0a6640; --pos-soft: rgb(31 157 99 / 14%); --neg: #b23719; --neg-soft: rgb(207 74 44 / 12%); --info: #2f6fbf; --shadow: 0 1px 0 rgb(255 255 255 / 60%) inset, 0 10px 26px -14px rgb(23 32 47 / 22%); --shadow-drawer: 0 24px 60px -20px rgb(23 32 47 / 30%); --scrim: rgb(23 32 47 / 32%); } @media (prefers-reduced-motion: reduce) { :root { --dur: 0.001s; } }