/* ================================================================ theme.css — Light / Dark Theme Semantic Tokens ================================================================ Components use ONLY these semantic tokens for colors. Never use raw palette tokens (--gbo-purple-400) in components. Theme resolution order: 1. [data-theme] attribute on (user toggle, stored in localStorage) 2. @media (prefers-color-scheme) (browser/OS preference) 3. Light theme (fallback default) ================================================================ */ /* ── Light theme (default) ── */ :root, [data-theme="light"] { --gbo-bg-primary: var(--gbo-slate-50); --gbo-bg-secondary: #ffffff; --gbo-bg-tertiary: var(--gbo-slate-100); --gbo-bg-hover: var(--gbo-slate-100); --gbo-text-primary: var(--gbo-slate-900); --gbo-text-secondary: var(--gbo-slate-600); --gbo-text-muted: var(--gbo-slate-400); --gbo-border-color: var(--gbo-slate-200); --gbo-border-subtle: var(--gbo-slate-100); --gbo-accent: var(--gbo-purple-600); --gbo-accent-hover: var(--gbo-purple-700); --gbo-accent-subtle: var(--gbo-purple-50); --gbo-positive: var(--gbo-green-500); --gbo-negative: var(--gbo-red-500); --gbo-warning: var(--gbo-amber-500); --gbo-nav-bg: var(--gbo-slate-900); --gbo-nav-text: var(--gbo-slate-200); --gbo-nav-accent: var(--gbo-purple-400); --gbo-table-stripe: var(--gbo-slate-50); --gbo-table-hover: var(--gbo-purple-50); --gbo-shadow-card: var(--gbo-shadow-sm); --gbo-shadow-card-hover: var(--gbo-shadow-md); } /* ── Dark theme (via OS preference, no explicit data-theme) ── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gbo-bg-primary: var(--gbo-slate-950); --gbo-bg-secondary: var(--gbo-slate-900); --gbo-bg-tertiary: var(--gbo-slate-800); --gbo-bg-hover: var(--gbo-slate-800); --gbo-text-primary: var(--gbo-slate-100); --gbo-text-secondary: var(--gbo-slate-400); --gbo-text-muted: var(--gbo-slate-500); --gbo-border-color: var(--gbo-slate-700); --gbo-border-subtle: var(--gbo-slate-800); --gbo-accent: var(--gbo-purple-400); --gbo-accent-hover: var(--gbo-purple-300); --gbo-accent-subtle: rgba(139, 92, 246, 0.1); --gbo-positive: var(--gbo-green-400); --gbo-negative: var(--gbo-red-400); --gbo-warning: var(--gbo-amber-400); --gbo-nav-bg: var(--gbo-slate-950); --gbo-nav-text: var(--gbo-slate-300); --gbo-nav-accent: var(--gbo-purple-400); --gbo-table-stripe: rgba(139, 92, 246, 0.04); --gbo-table-hover: rgba(139, 92, 246, 0.08); --gbo-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3); --gbo-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.4); } } /* ── Dark theme (via explicit toggle) ── */ [data-theme="dark"] { --gbo-bg-primary: var(--gbo-slate-950); --gbo-bg-secondary: var(--gbo-slate-900); --gbo-bg-tertiary: var(--gbo-slate-800); --gbo-bg-hover: var(--gbo-slate-800); --gbo-text-primary: var(--gbo-slate-100); --gbo-text-secondary: var(--gbo-slate-400); --gbo-text-muted: var(--gbo-slate-500); --gbo-border-color: var(--gbo-slate-700); --gbo-border-subtle: var(--gbo-slate-800); --gbo-accent: var(--gbo-purple-400); --gbo-accent-hover: var(--gbo-purple-300); --gbo-accent-subtle: rgba(139, 92, 246, 0.1); --gbo-positive: var(--gbo-green-400); --gbo-negative: var(--gbo-red-400); --gbo-warning: var(--gbo-amber-400); --gbo-nav-bg: var(--gbo-slate-950); --gbo-nav-text: var(--gbo-slate-300); --gbo-nav-accent: var(--gbo-purple-400); --gbo-table-stripe: rgba(139, 92, 246, 0.04); --gbo-table-hover: rgba(139, 92, 246, 0.08); --gbo-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3); --gbo-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.4); }