/* ========================================================================== Theme tokens — color variables for dark (default) and light mode. Swap by setting data-theme="dark" | "light" on . ========================================================================== */ :root, [data-theme="dark"] { --bg-primary: #0B0E1A; --bg-primary-rgb: 11, 14, 26; --bg-panel: #151A2E; --bg-panel-rgb: 21, 26, 46; --bg-panel-alpha: 0.6; --bg-panel-border: rgba(255, 255, 255, 0.08); --bg-panel-hover: rgba(255, 255, 255, 0.04); --bg-sidebar: rgba(11, 14, 26, 0.7); --bg-topbar: rgba(21, 26, 46, 0.55); --text-primary: #F4F5FA; --text-secondary: #9BA1B8; --text-muted: #656B85; --accent-violet: #7C6FFF; --accent-violet-rgb: 124, 111, 255; --accent-mint: #2DD4BF; --accent-mint-rgb: 45, 212, 191; --accent-amber: #F5A623; --accent-amber-rgb: 245, 166, 35; --accent-danger: #F15B6C; --accent-danger-rgb: 241, 91, 108; --border-subtle: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.14); --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.45); --glass-blur: 16px; --scrollbar-thumb: rgba(255, 255, 255, 0.12); } [data-theme="light"] { --bg-primary: #EEF0F7; --bg-primary-rgb: 238, 240, 247; --bg-panel: #FFFFFF; --bg-panel-rgb: 255, 255, 255; --bg-panel-alpha: 0.65; --bg-panel-border: rgba(15, 18, 40, 0.08); --bg-panel-hover: rgba(15, 18, 40, 0.03); --bg-sidebar: rgba(255, 255, 255, 0.6); --bg-topbar: rgba(255, 255, 255, 0.55); --text-primary: #171A2C; --text-secondary: #545A72; --text-muted: #8992AB; --accent-violet: #6A5CFB; --accent-violet-rgb: 106, 92, 251; --accent-mint: #14B8A6; --accent-mint-rgb: 20, 184, 166; --accent-amber: #E08E00; --accent-amber-rgb: 224, 142, 0; --accent-danger: #E1465A; --accent-danger-rgb: 225, 70, 90; --border-subtle: rgba(15, 18, 40, 0.07); --border-strong: rgba(15, 18, 40, 0.14); --shadow-glass: 0 8px 32px rgba(15, 18, 40, 0.12); --glass-blur: 16px; --scrollbar-thumb: rgba(15, 18, 40, 0.15); }