/* ============================================================ 10 UI THEMES × Light / Dark mode A theme sets the accent trio (--primary/--secondary/--accent); the mode sets the surfaces (--bg/--card/--text/--muted/--border). Switched via . ============================================================ */ :root { /* default = Ocean Blue */ --primary: #2563eb; --secondary: #1e40af; --accent: #38bdf8; } [data-theme="oceanBlue"] { --primary:#2563eb; --secondary:#1e40af; --accent:#38bdf8; } [data-theme="royalPurple"] { --primary:#7c3aed; --secondary:#5b21b6; --accent:#a78bfa; } [data-theme="emeraldGreen"] { --primary:#059669; --secondary:#047857; --accent:#34d399; } [data-theme="sunsetOrange"] { --primary:#ea580c; --secondary:#c2410c; --accent:#fb923c; } [data-theme="crimsonRed"] { --primary:#dc2626; --secondary:#991b1b; --accent:#f87171; } [data-theme="cyberCyan"] { --primary:#0891b2; --secondary:#0e7490; --accent:#22d3ee; } [data-theme="graphiteGray"] { --primary:#4b5563; --secondary:#374151; --accent:#9ca3af; } [data-theme="goldenSand"] { --primary:#d97706; --secondary:#b45309; --accent:#fbbf24; } [data-theme="rosePink"] { --primary:#db2777; --secondary:#9d174d; --accent:#f472b6; } [data-theme="midnightNeon"] { --primary:#6366f1; --secondary:#4338ca; --accent:#22d3ee; } /* ── Light surfaces (default) ── */ :root, [data-mode="light"] { --bg: #f4f6fb; --card: #ffffff; --text: #1f2937; --muted: #6b7280; --border: #e5e7eb; --surface-2: #f9fafb; --success: #16a34a; --warning: #f59e0b; --error: #dc2626; --info: #0ea5e9; --shadow: 0 10px 30px rgba(2, 8, 23, 0.06); --on-primary: #ffffff; } /* ── Dark surfaces ── */ [data-mode="dark"] { --bg: #0f172a; --card: #1e293b; --text: #e2e8f0; --muted: #94a3b8; --border: #334155; --surface-2: #172033; --shadow: 0 10px 30px rgba(0, 0, 0, 0.4); --on-primary: #ffffff; }