/* ============================================================================ THEME TOKENS Applied via [data-theme="light" | "dark" | "pop"] on ============================================================================ */ /* ---- Light ---- */ [data-theme="light"] { --bg: #F4F6FA; --surface: #FFFFFF; --surface-2: #EDF0F5; --surface-hover: #E4E8F0; --border: #DDE2EA; --border-subtle: #EAECF2; --text: #1A1D2E; --text-muted: #6C737F; --text-faint: #9BA3B0; /* Aliases used in main.css */ --text-1: #1A1D2E; --text-2: #6C737F; --text-3: #9BA3B0; --bg-1: #FFFFFF; --bg-2: #EDF0F5; --bg-card: #FFFFFF; --accent: #5B6AE0; --accent-hover: #4A58CC; --accent-2: #0BB89A; --accent-2-hover: #09A388; --accent-glow: rgba(91, 106, 224, 0.15); --accent-2-glow: rgba(11, 184, 154, 0.15); --navbar-bg: rgba(255, 255, 255, 0.82); --navbar-border: rgba(221, 226, 234, 0.8); --shadow-sm: 0 0.1rem 0.3rem rgba(0,0,0,0.06); --shadow-md: 0 0.4rem 1.2rem rgba(0,0,0,0.08); --shadow-lg: 0 1rem 3rem rgba(0,0,0,0.10); --widget-badge-bg: #EFF1FF; --widget-badge-text: #5B6AE0; } /* ---- Dark ---- */ [data-theme="dark"] { --bg: #0D0F14; --surface: #161A23; --surface-2: #1E2330; --surface-hover: #252C3D; --border: #2A303F; --border-subtle: #222840; --text: #E4E8F0; --text-muted: #8892A4; --text-faint: #5A6478; /* Aliases used in main.css */ --text-1: #E4E8F0; --text-2: #8892A4; --text-3: #5A6478; --bg-1: #161A23; --bg-2: #1E2330; --bg-card: #1E2330; --accent: #7C89F0; --accent-hover: #8F9BF5; --accent-2: #2DD4BF; --accent-2-hover: #3EE0CB; --accent-glow: rgba(124, 137, 240, 0.18); --accent-2-glow: rgba(45, 212, 191, 0.15); --navbar-bg: rgba(13, 15, 20, 0.88); --navbar-border: rgba(42, 48, 63, 0.9); --shadow-sm: 0 0.1rem 0.3rem rgba(0,0,0,0.25); --shadow-md: 0 0.4rem 1.2rem rgba(0,0,0,0.35); --shadow-lg: 0 1rem 3rem rgba(0,0,0,0.45); --widget-badge-bg: rgba(124, 137, 240, 0.12); --widget-badge-text: #7C89F0; } /* Logo icon blend overrides */ [data-theme="dark"] .navbar__logo-icon { mix-blend-mode: screen; } /* ---- Pop ---- */ [data-theme="pop"] { --bg: #F4EDD6; --surface: #FFFFFF; --surface-2: #FAF4E2; --surface-hover: #F0E8CE; --border: #DDD0AA; --border-subtle: #EAE2C4; --text: #1C0C06; --text-muted: #6A4428; --text-faint: #A07848; /* Aliases used in main.css */ --text-1: #1C0C06; --text-2: #6A4428; --text-3: #A07848; --bg-1: #FFFFFF; --bg-2: #FAF4E2; --bg-card: #FFFFFF; --accent: #1B4FCC; --accent-hover: #1440B0; --accent-2: #C46A00; --accent-2-hover: #A85A00; --accent-glow: rgba(27, 79, 204, 0.16); --accent-2-glow: rgba(196, 106, 0, 0.18); --navbar-bg: rgba(244, 237, 214, 0.94); --navbar-border: rgba(221, 208, 170, 0.9); --shadow-sm: 0 0.1rem 0.4rem rgba(28, 12, 6, 0.08); --shadow-md: 0 0.4rem 1.4rem rgba(28, 12, 6, 0.10); --shadow-lg: 0 1rem 3rem rgba(28, 12, 6, 0.13); --widget-badge-bg: rgba(27, 79, 204, 0.12); --widget-badge-text: #1440B0; }