/* =============================================== THEME TOKENS — 7 dark space themes Switch via =============================================== */ :root, :root[data-theme="noir"] { color-scheme: dark; --bg: #070707; --bg-2: #0d0d0d; --card: rgba(255, 255, 255, 0.04); --card-hover: rgba(255, 255, 255, 0.07); --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(212, 175, 55, 0.45); --accent: #d4af37; --accent-2: #f3c952; --accent-rgb: 212, 175, 55; --on-accent: #131313; --text: #f5f5f5; --muted: #9aa0a8; --nav-bg: rgba(7, 7, 7, 0.78); --chip-bg: rgba(212, 175, 55, 0.08); --shadow: 0 18px 50px rgba(0, 0, 0, 0.55); --particle-alpha: 0.55; } :root[data-theme="midnight"] { color-scheme: dark; --bg: #060a14; --bg-2: #0a1020; --card: rgba(148, 184, 255, 0.05); --card-hover: rgba(148, 184, 255, 0.09); --border: rgba(148, 184, 255, 0.12); --border-strong: rgba(56, 189, 248, 0.5); --accent: #38bdf8; --accent-2: #818cf8; --accent-rgb: 56, 189, 248; --on-accent: #04121c; --text: #eef2ff; --muted: #94a3b8; --nav-bg: rgba(6, 10, 20, 0.78); --chip-bg: rgba(56, 189, 248, 0.08); --shadow: 0 18px 50px rgba(2, 6, 23, 0.6); --particle-alpha: 0.55; } :root[data-theme="emerald"] { color-scheme: dark; --bg: #04100c; --bg-2: #071a13; --card: rgba(167, 243, 208, 0.05); --card-hover: rgba(167, 243, 208, 0.09); --border: rgba(167, 243, 208, 0.12); --border-strong: rgba(52, 211, 153, 0.5); --accent: #34d399; --accent-2: #a7f3d0; --accent-rgb: 52, 211, 153; --on-accent: #04140d; --text: #ecfdf5; --muted: #8fb3a5; --nav-bg: rgba(4, 16, 12, 0.78); --chip-bg: rgba(52, 211, 153, 0.08); --shadow: 0 18px 50px rgba(0, 10, 6, 0.6); --particle-alpha: 0.5; } :root[data-theme="violet"] { color-scheme: dark; --bg: #0a0614; --bg-2: #120b22; --card: rgba(196, 181, 253, 0.05); --card-hover: rgba(196, 181, 253, 0.09); --border: rgba(196, 181, 253, 0.13); --border-strong: rgba(167, 139, 250, 0.5); --accent: #a78bfa; --accent-2: #c4b5fd; --accent-rgb: 167, 139, 250; --on-accent: #140b29; --text: #f3efff; --muted: #9d93b8; --nav-bg: rgba(10, 6, 20, 0.78); --chip-bg: rgba(167, 139, 250, 0.09); --shadow: 0 18px 50px rgba(5, 2, 14, 0.6); --particle-alpha: 0.55; } :root[data-theme="crimson"] { color-scheme: dark; --bg: #120508; --bg-2: #1d0a10; --card: rgba(253, 164, 175, 0.05); --card-hover: rgba(253, 164, 175, 0.09); --border: rgba(253, 164, 175, 0.13); --border-strong: rgba(251, 113, 133, 0.5); --accent: #fb7185; --accent-2: #fda4af; --accent-rgb: 251, 113, 133; --on-accent: #2a060d; --text: #fff1f2; --muted: #b39096; --nav-bg: rgba(18, 5, 8, 0.78); --chip-bg: rgba(251, 113, 133, 0.09); --shadow: 0 18px 50px rgba(10, 2, 4, 0.6); --particle-alpha: 0.55; } :root[data-theme="ember"] { color-scheme: dark; --bg: #120a04; --bg-2: #1d1208; --card: rgba(253, 186, 116, 0.05); --card-hover: rgba(253, 186, 116, 0.09); --border: rgba(253, 186, 116, 0.13); --border-strong: rgba(251, 146, 60, 0.5); --accent: #fb923c; --accent-2: #fdba74; --accent-rgb: 251, 146, 60; --on-accent: #2a1404; --text: #fff7ed; --muted: #b3a08c; --nav-bg: rgba(18, 10, 4, 0.78); --chip-bg: rgba(251, 146, 60, 0.09); --shadow: 0 18px 50px rgba(10, 5, 2, 0.6); --particle-alpha: 0.55; } :root[data-theme="silver"] { color-scheme: dark; --bg: #0a0a0c; --bg-2: #131318; --card: rgba(226, 232, 240, 0.05); --card-hover: rgba(226, 232, 240, 0.09); --border: rgba(226, 232, 240, 0.12); --border-strong: rgba(226, 232, 240, 0.45); --accent: #e2e8f0; --accent-2: #f8fafc; --accent-rgb: 226, 232, 240; --on-accent: #0f172a; --text: #f8fafc; --muted: #94a3b8; --nav-bg: rgba(10, 10, 12, 0.78); --chip-bg: rgba(226, 232, 240, 0.07); --shadow: 0 18px 50px rgba(0, 0, 0, 0.6); --particle-alpha: 0.5; }