/* tokens.css - the single source of color, type, space, motion. Every color in the app comes from a token here. A hard-coded hex outside this file is a bug. Dark theme redefines the same names under [data-theme="dark"]; an inline script in sets data-theme before the first paint so there is no flash. */ :root { /* Type */ --font: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", "SF Mono", "Cascadia Code", ui-monospace, Consolas, monospace; /* Brand */ --navy: #0d3b63; --navy-deep: #0a2e4d; --brand-tint: #e9f0f8; --coral: #f0553f; --coral-strong: #dc4630; --coral-soft: #fdece9; --coral-text: #b83a26; /* Neutral foundation */ --bg: #f4f6f9; --bg-tint: #eef2f7; --surface: #ffffff; --surface-2: #f8fafc; --ink: #16202e; --ink-2: #47546a; --muted: #5f6b82; --faint: #9aa5b8; --line: #e7ebf1; --line-strong: #d6dbe4; /* Semantic (tinted, not saturated) */ --ok: #0f9d63; --ok-bg: #e6f6ee; --ok-text: #0b7a4b; --warn: #b9750c; --warn-bg: #fbf0dc; --warn-text: #945c0a; --danger: #d6472e; --danger-bg: #fceae6; --danger-text: #a63421; --info: #2f74c9; --info-bg: #e9f1fb; --info-text: #2866ad; /* Radius */ --r-xs: 7px; --r-sm: 9px; --r-md: 13px; --r-lg: 18px; --r-pill: 999px; /* Elevation. Real depth: an offset and a soft blur, never a flat colored halo. */ --sh-1: 0 1px 2px rgba(16,32,50,.06), 0 1px 1px rgba(16,32,50,.05); --sh-2: 0 1px 3px rgba(16,32,50,.07), 0 8px 20px -8px rgba(16,32,50,.16); --sh-3: 0 20px 48px -16px rgba(16,32,50,.30); --ring: 0 0 0 3px rgba(47,116,201,.30); --ring-coral: 0 0 0 3px rgba(240,85,63,.28); /* Motion */ --ease: cubic-bezier(.2,.7,.3,1); --pop: cubic-bezier(.34,1.56,.64,1); --dur-1: .12s; --dur-2: .18s; --dur-3: .28s; /* Space */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px; --topbar-h: 62px; --rail-w: 280px; --content-max: 1180px; /* Named surfaces the topbar reuses in both themes */ --topbar-a: #0d3b63; --topbar-b: #0a2e4d; --scrim: rgba(10,30,52,.44); --on-navy: rgba(255,255,255,.96); --on-navy-soft: rgba(255,255,255,.72); --on-navy-line: rgba(255,255,255,.24); --on-navy-fill: rgba(255,255,255,.10); --on-navy-fill-2: rgba(255,255,255,.20); } [data-theme="dark"] { --navy: #143a5c; --navy-deep: #0d2740; --brand-tint: #1a2a3d; --coral: #f0553f; --coral-strong: #f26a55; --coral-soft: #35211d; --coral-text: #f4917f; --bg: #0b1219; --bg-tint: #0f1720; --surface: #141e2a; --surface-2: #1a2634; --ink: #e6ecf3; --ink-2: #b3c0d0; --muted: #92a0b3; --faint: #64748b; --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.15); --ok: #3ecf8e; --ok-bg: #10241c; --ok-text: #6fdba8; --warn: #e0a53a; --warn-bg: #2a2113; --warn-text: #edc074; --danger: #f0725a; --danger-bg: #2c1713; --danger-text: #f2a08d; --info: #5fa2e8; --info-bg: #12233a; --info-text: #8ec0f2; --sh-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 1px rgba(0,0,0,.24); --sh-2: 0 1px 3px rgba(0,0,0,.34), 0 10px 24px -10px rgba(0,0,0,.55); --sh-3: 0 24px 56px -18px rgba(0,0,0,.66); --ring: 0 0 0 3px rgba(95,162,232,.40); --ring-coral: 0 0 0 3px rgba(240,85,63,.36); --topbar-a: #10314f; --topbar-b: #0a2237; --scrim: rgba(0,0,0,.58); } /* ---------- reset ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } body { font-family: var(--font); color: var(--ink); background: var(--bg); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { color: var(--ink); font-weight: 700; margin: 0; letter-spacing: -0.01em; } a { color: var(--info); text-decoration: none; } a:hover { text-decoration: underline; } [hidden] { display: none !important; } button { font-family: inherit; } /* Themed browser surfaces: focus ring, selection, caret, scrollbars, numerals. */ :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); } ::selection { background: rgba(240,85,63,.18); } [data-theme="dark"] ::selection { background: rgba(240,85,63,.30); } :root { accent-color: var(--coral); caret-color: var(--coral); } .tnum, td.num, .v, .mono { font-variant-numeric: tabular-nums; } .mono { font-family: var(--mono); } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: padding-box; } * { scrollbar-color: var(--line-strong) transparent; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }