/* Semantic aliases. Components only ever read these. Light is the default; [data-theme="dark"] on flips the whole system. [data-theme="auto"] (or no attribute) follows the OS. */ :root{ --surface-canvas:var(--n-400); --surface-1:var(--n-75); --surface-2:var(--n-0); --surface-3:var(--n-0); --surface-inset:var(--n-150); --surface-sunken:var(--n-100); --surface-hover:var(--n-150); --surface-active:var(--n-300); --surface-selected:var(--n-300); --surface-track:var(--n-400); --surface-inverse:var(--n-900); --surface-scrim:rgba(9,9,11,.42); --surface-veil:rgba(247,247,248,.90); --text-primary:var(--n-900); --text-secondary:var(--n-750); --text-muted:var(--n-700); --text-faint:var(--n-600); --text-inverse:var(--n-75); --text-on-accent:#FFFFFF; --border-subtle:var(--n-250); --border-default:var(--n-400); --border-strong:var(--n-500); --border-inverse:var(--n-800); --accent:var(--n-900); --accent-hover:var(--n-950); --accent-active:var(--n-1000); --accent-subtle:var(--n-300); --accent-fg:var(--n-900); --focus-ring:var(--n-900); --focus-halo:rgba(24,24,27,.14); --success:var(--h-teal); --success-fg:var(--h-teal-ink); --success-tint:var(--h-teal-tint); --success-line:var(--h-teal-line); --info:var(--h-blue); --info-fg:var(--h-blue-ink); --info-tint:var(--h-blue-tint); --info-line:var(--h-blue-line); --warning:var(--h-amber); --warning-fg:var(--h-amber-ink); --warning-tint:var(--h-amber-tint); --warning-line:var(--h-amber-line); --danger:var(--h-rust); --danger-fg:var(--h-rust-ink); --danger-tint:var(--h-rust-tint); --danger-line:var(--h-rust-line); --notice:var(--h-clay); --notice-fg:var(--h-clay-ink); --notice-tint:var(--h-clay-tint); --notice-line:var(--h-clay-line); --new:var(--h-violet); --new-fg:var(--h-violet-ink); --new-tint:var(--h-violet-tint); --new-line:var(--h-violet-line); --neutral:var(--n-750); --neutral-fg:var(--n-750); --neutral-tint:var(--n-350); --neutral-line:var(--n-400); --highlight:var(--n-900); --highlight-tint:var(--n-300); --selection-bg:var(--n-900); --selection-fg:var(--n-0); color-scheme:light; } [data-theme="dark"]{ --surface-canvas:#000000; --surface-1:var(--n-1000); --surface-2:var(--n-950); --surface-3:var(--n-900); --surface-inset:var(--n-900); --surface-sunken:#050506; --surface-hover:var(--n-900); --surface-active:var(--n-850); --surface-selected:var(--n-850); --surface-track:var(--n-850); --surface-inverse:var(--n-75); --surface-scrim:rgba(0,0,0,.66); --surface-veil:rgba(9,9,11,.90); --text-primary:var(--n-75); --text-secondary:var(--n-500); --text-muted:var(--n-600); --text-faint:var(--n-700); --text-inverse:var(--n-900); --text-on-accent:var(--n-950); --border-subtle:var(--n-900); --border-default:var(--n-850); --border-strong:var(--n-800); --border-inverse:var(--n-400); --accent:var(--n-75); --accent-hover:var(--n-0); --accent-active:var(--n-400); --accent-subtle:var(--n-850); --accent-fg:var(--n-75); --focus-ring:var(--n-400); --focus-halo:rgba(228,228,231,.18); --success:var(--h-teal-lift); --success-fg:#5FDCCD; --success-tint:#0F2E2A; --success-line:#1C4C46; --info:var(--h-blue-lift); --info-fg:#A3C6E8; --info-tint:#141F2A; --info-line:#24384A; --warning:var(--h-amber-lift); --warning-fg:#EFC183; --warning-tint:#2B1F0F; --warning-line:#4A3618; --danger:var(--h-rust-lift); --danger-fg:#F79C89; --danger-tint:#2E1410; --danger-line:#4E211A; --notice:var(--h-clay-lift); --notice-fg:#DDA97F; --notice-tint:#2A1B10; --notice-line:#4A3220; --new:var(--h-violet-lift); --new-fg:#B6A9E8; --new-tint:#1B1730; --new-line:#332B54; --neutral:var(--n-500); --neutral-fg:var(--n-500); --neutral-tint:var(--n-850); --neutral-line:var(--n-800); --highlight:var(--n-75); --highlight-tint:var(--n-850); --selection-bg:var(--n-75); --selection-fg:var(--n-950); color-scheme:dark; } /* No prefers-color-scheme block on purpose: ThemeToggle resolves "auto" in JS and writes data-theme="light" | "dark" onto , so one code path owns the theme. */