/* vista-design/tokens.css : Ink & Teal design tokens, the single source of truth for values. Light is the shipped default; dark is authored now and gated behind [data-theme="dark"]. Other files reference these tokens; they never redefine the values. */ :root { /* ---- action / accent: teal (never red) ---- */ --primary: #0E7C74; /* buttons, active nav, selected-row marker, focus ring */ --primary-strong: #0C625C; /* hover */ --primary-tint: #ECFBF8; /* selected-row wash, focus halo */ /* teal ramp (action = 600) */ --teal-50:#ECFBF8; --teal-100:#CDF3EC; --teal-200:#9BE7DB; --teal-300:#5FD3C5; --teal-400:#2AB6A8; --teal-500:#119A8D; --teal-600:#0E7C74; --teal-700:#0C625C; --teal-800:#0B4E49; --teal-900:#0B3E3B; /* ---- cool neutrals (canvas -> text) ---- */ --bg: #F5F8F8; --surface: #FFFFFF; --surface-2: #E9F0F0; /* zebra, sticky header, hover target */ --surface-3: #E0E9E9; --border: #D6E0E0; --text: #17252A; /* never #000 */ --text-muted:#57676B; /* ---- semantic status (fixed meaning across the app) ---- */ --success:#1F9D57; --success-surface:#E7F6EC; --warning:#C98A15; --warning-surface:#FBF1D9; --danger: #E23744; --danger-surface: #FCE7E9; /* danger red, hue-separate from teal */ --info: #2F76D6; --info-surface: #E7F0FC; /* darker text tones for small type ON the matching surface tint: the saturated tokens above land 2.6-3.9:1 there, these hold 5.1-7.1:1 (WCAG AA at 12px) */ --success-text:#14683B; --warning-text:#8A5E0D; --danger-text:#A31C28; --info-text:#1D4E93; /* ---- type: Geist super-family, self-hosted (OFL) ---- */ --font-display: "Geist", system-ui, sans-serif; /* titles, headers, KPI labels */ --font-body: "Geist", ui-sans-serif, system-ui, sans-serif; /* all body, labels, table text */ --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace; /* IDs, phone, counts, dates, currency */ /* type scale (referenced by components.css — must exist or the UI falls back to browser defaults) */ --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:.875rem; --fs-md:1rem; --fs-lg:1.125rem; --fs-xl:1.25rem; --fs-2xl:1.563rem; --fs-3xl:1.953rem; --lh-tight:1.15; --lh-body:1.5; /* ---- shape / space / motion ---- */ --radius-sm:4px; --radius:8px; --radius-lg:12px; --radius-pill:999px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-8:48px; --space-10:64px; --space-12:96px; --row-pad-y:8px; --row-pad-x:12px; /* Comfortable default */ --motion-fast:120ms; --motion-base:180ms; --motion-slow:280ms; --ease:cubic-bezier(0.22,1,0.36,1); --elev-1:0 1px 2px rgba(23,37,42,.06); --elev-2:0 4px 12px rgba(23,37,42,.08); --elev-3:0 8px 28px rgba(23,37,42,.10); --scrim: rgba(23,37,42,.32); --container-max:1600px; } /* Compact density (opt-in, persisted per user via a class on ) */ body.density-compact { --row-pad-y:6px; --row-pad-x:10px; } /* Dark theme — authored now, shipped as fast-follow. Gated by [data-theme="dark"] + toggle. */ :root[data-theme="dark"] { --primary:#2FB9AC; --primary-strong:#4EC9BD; --primary-tint:#12312E; --bg:#0E1719; --surface:#142225; --surface-2:#1B2D30; --surface-3:#20363A; --border:#2A3F42; --text:#E6EFEE; --text-muted:#8CA3A2; --success:#34C77A; --success-surface:#123024; --warning:#E0A93E; --warning-surface:#2E2513; --danger: #F26571; --danger-surface: #33191C; --info: #5B9BEA; --info-surface: #152538; /* on dark tints the bright tones already clear AA for small type */ --success-text:#34C77A; --warning-text:#E0A93E; --danger-text:#F26571; --info-text:#5B9BEA; --elev-1:0 1px 2px rgba(0,0,0,.4); --elev-2:0 4px 12px rgba(0,0,0,.5); --elev-3:0 8px 28px rgba(0,0,0,.6); --scrim: rgba(0,0,0,.55); }