/** * themes.css * Maps brand tokens to *semantic* variables consumed by every component. * Components should never reference --brand-* directly — only --color-*. * Toggling [data-theme="dark"] on swaps the whole set. */ :root, [data-theme="light"] { --color-bg: var(--brand-paper); --color-bg-elevated: #ffffff; --color-bg-sunken: var(--brand-slate-50); --color-bg-glass: rgba(255, 255, 255, 0.72); --color-text: var(--brand-ink); --color-text-muted: var(--brand-slate-500); --color-text-faint: var(--brand-slate-400); --color-text-on-brand: #ffffff; --color-border: var(--brand-slate-200); --color-border-strong: var(--brand-slate-300); --color-primary: var(--brand-indigo-600); --color-primary-hover: var(--brand-indigo-700); --color-accent: var(--brand-violet-500); --color-success: var(--brand-emerald-500); --color-warning: var(--brand-amber-500); --color-danger: var(--brand-rose-500); --color-surface-hover: var(--brand-slate-100); --color-surface-active:var(--brand-slate-200); color-scheme: light; } [data-theme="dark"] { --color-bg: var(--brand-slate-950); --color-bg-elevated: var(--brand-slate-900); --color-bg-sunken: var(--brand-ink); --color-bg-glass: rgba(20, 18, 31, 0.68); --color-text: #f2f0fa; --color-text-muted: var(--brand-slate-300); --color-text-faint: #8b84ab; --color-text-on-brand: #ffffff; --color-border: var(--brand-slate-700); --color-border-strong: var(--brand-slate-600); --color-primary: var(--brand-violet-400); --color-primary-hover: var(--brand-violet-500); --color-accent: var(--brand-indigo-500); --color-success: #34d399; --color-warning: #fbbf24; --color-danger: #fb7185; --color-surface-hover: var(--brand-slate-800); --color-surface-active:var(--brand-slate-700); color-scheme: dark; } /* Respect OS preference only until the user makes an explicit choice. theme.js writes data-theme as soon as a preference exists in storage; this media query is just the very first paint's best guess. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-bg: var(--brand-slate-950); --color-bg-elevated: var(--brand-slate-900); --color-bg-sunken: var(--brand-ink); --color-bg-glass: rgba(20, 18, 31, 0.68); --color-text: #f2f0fa; --color-text-muted: var(--brand-slate-300); --color-text-faint: #8b84ab; --color-border: var(--brand-slate-700); --color-border-strong: var(--brand-slate-600); --color-primary: var(--brand-violet-400); --color-primary-hover: var(--brand-violet-500); --color-accent: var(--brand-indigo-500); --color-surface-hover: var(--brand-slate-800); --color-surface-active:var(--brand-slate-700); color-scheme: dark; } }