/* ══════════════════════════════════════════════════════════ Theme Overrides — Dark & Light Switched via data-theme attribute on . ══════════════════════════════════════════════════════════ */ /* Default to light tokens so CYDD surfaces (topbar, sidebar, cards) have valid custom properties on first paint — before inline script or app.js sets data-theme. [data-theme="light|dark"] below overrides when present. */ :root { --bg-base: #F4F6FB; --bg-surface: #FFFFFF; --bg-elevated: #EDF0F8; --border: #DDE2F0; --border-strong: #B8C2E0; --text-primary: #0D1124; --text-secondary: #4A5478; --text-muted: #9AA3BF; --accent: #2563EB; --accent-glow: rgba(37, 99, 235, 0.10); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12); --shadow-glow-blue: 0 0 24px rgba(37, 99, 235, 0.12); --shadow-glow-red: 0 0 24px rgba(255, 77, 77, 0.10); color-scheme: light; } [data-theme="dark"] { --bg-base: #0A0D12; --bg-surface: #111520; --bg-elevated: #181E2E; --border: #1E2640; --border-strong: #2A3356; --text-primary: #F0F4FF; --text-secondary: #8B96B8; --text-muted: #4A5478; --accent: #3B7CFF; --accent-glow: rgba(59, 124, 255, 0.15); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6); --shadow-glow-blue: 0 0 24px rgba(59, 124, 255, 0.20); --shadow-glow-red: 0 0 24px rgba(255, 77, 77, 0.15); color-scheme: dark; } [data-theme="light"] { --bg-base: #F4F6FB; --bg-surface: #FFFFFF; --bg-elevated: #EDF0F8; --border: #DDE2F0; --border-strong: #B8C2E0; --text-primary: #0D1124; --text-secondary: #4A5478; --text-muted: #9AA3BF; --accent: #2563EB; --accent-glow: rgba(37, 99, 235, 0.10); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12); --shadow-glow-blue: 0 0 24px rgba(37, 99, 235, 0.12); --shadow-glow-red: 0 0 24px rgba(255, 77, 77, 0.10); color-scheme: light; }