:root { --bg: #08090D; --bg-deep: #05060A; --surface: #0D1020; --surface-raised: #12162A; --purple: #6C4DFF; --purple-light: #9A7BFF; --blue: #4A7DFF; --sky: #63A4FF; --green: #22C55E; --green-bright: #35E879; --gold: #F6B93B; --gold-light: #FFD66B; --white: #F8FAFC; --soft: #E9EDF5; --muted: #94A3B8; --danger: #EF4444; --border: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.14); --glass: rgba(12,15,30,.62); --shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); --radius-lg: 24px; --radius-md: 18px; --radius-sm: 12px; --content: 1240px; --purple-blue: linear-gradient(135deg,#6C4DFF 0%,#4A7DFF 100%); --purple-pink: linear-gradient(135deg,#6C4DFF 0%,#D05CFF 100%); --blue-cyan: linear-gradient(135deg,#4A7DFF 0%,#63D9FF 100%); --gold-gradient: linear-gradient(135deg,#F6B93B 0%,#FFD66B 100%); } /* ============================================================ LIGHT THEME TOKENS — applied when . Dark stays the default (no attribute, or data-theme="dark"). Flipping these tokens re-themes everything that uses var(--x). ============================================================ */ :root[data-theme="light"] { --bg: #eef1f7; --bg-deep: #e6eaf2; --surface: #ffffff; --surface-raised: #ffffff; --white: #0e1526; --soft: #1f2a40; --muted: #5b6b82; --border: rgba(15,23,42,.10); --border-strong: rgba(15,23,42,.18); --glass: rgba(255,255,255,.78); --shadow: 0 20px 50px rgba(19,32,66,.12), inset 0 1px 0 rgba(255,255,255,.6); }