/* * Talos Design System — CSS custom properties * * Drop this file into your Razor app (wwwroot/css/talos-tokens.css), include * it once in your layout, and every other stylesheet can use var(--talos-*). * * Dark mode is switched by setting `data-theme="dark"` on : * * Light is the default (no attribute needed). Persist the choice in * localStorage and set the attribute on page load. * * Design principle: ink* tokens are foreground-alpha. On light theme ink is * near-black; on dark theme ink is warm pale. Because every surface reads * `var(--talos-ink)` + `var(--talos-ink12)` for borders, switching the * attribute flips the whole UI without rewriting component CSS. */ :root { /* Foreground (ink) — near-black on warm paper */ --talos-ink: #1f1915; --talos-ink-80: rgba(31, 25, 21, 0.80); --talos-ink-65: rgba(31, 25, 21, 0.65); --talos-ink-45: rgba(31, 25, 21, 0.45); --talos-ink-25: rgba(31, 25, 21, 0.25); --talos-ink-12: rgba(31, 25, 21, 0.12); --talos-ink-08: rgba(31, 25, 21, 0.08); --talos-ink-05: rgba(31, 25, 21, 0.05); /* Bronze scale — the brand */ --talos-deep: #3d2817; --talos-mid: #8a5a2b; --talos-warm: #b87333; /* primary accent */ --talos-warm-hover: #a0612a; --talos-light: #d4a574; --talos-pale: #f0e4d0; /* Surfaces */ --talos-bg: #f4ede0; /* page background / row headers */ --talos-paper: #faf5ec; /* main canvas */ --talos-panel: #ffffff; /* cards, tables, drawers */ --talos-bg-alt: #1a1310; /* inverted pockets even in light mode */ /* Semantic */ --talos-ok: #4a7a52; --talos-warn: #b87333; --talos-risk: #a63d2a; /* Type */ --talos-serif: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif; --talos-sans: 'Inter', ui-sans-serif, system-ui, sans-serif; --talos-mono: 'JetBrains Mono', ui-monospace, monospace; /* Spacing scale (use these, don't invent) */ --talos-s-1: 4px; --talos-s-2: 8px; --talos-s-3: 12px; --talos-s-4: 16px; --talos-s-5: 20px; --talos-s-6: 24px; --talos-s-8: 32px; /* Density notes: rows are 11px vertical padding, headers are 9px. Don't increase without talking to design. */ } [data-theme="dark"] { /* Foreground is now warm pale; alphas automatically adjust surface contrast */ --talos-ink: #f0e4d0; --talos-ink-80: rgba(240, 228, 208, 0.80); --talos-ink-65: rgba(240, 228, 208, 0.65); --talos-ink-45: rgba(240, 228, 208, 0.42); --talos-ink-25: rgba(240, 228, 208, 0.22); --talos-ink-12: rgba(240, 228, 208, 0.12); --talos-ink-08: rgba(240, 228, 208, 0.08); --talos-ink-05: rgba(240, 228, 208, 0.04); /* Bronze brightens on dark for contrast */ --talos-deep: #d4a574; --talos-mid: #b8895a; --talos-warm: #d08944; --talos-warm-hover: #e29957; --talos-light: #e8c598; --talos-pale: #f0e4d0; /* Surfaces invert */ --talos-bg: #1a1310; --talos-paper: #110d0a; --talos-panel: #1f1915; --talos-bg-alt: #0c0806; /* Semantic tuned for dark backgrounds */ --talos-ok: #7ca883; --talos-warn: #d08944; --talos-risk: #d46a58; } /* ─── Base ──────────────────────────────────────────────────────────── */ html, body { margin: 0; padding: 0; background: var(--talos-paper); color: var(--talos-ink); font-family: var(--talos-sans); } *, *::before, *::after { box-sizing: border-box; } /* Warm scrollbars that match the palette */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--talos-ink-12); border-radius: 5px; } *::-webkit-scrollbar-thumb:hover { background: var(--talos-ink-25); }