/* ============================================================ Theme System — 4 themes via data-theme on Default: midnight (deep dark, original palette) ============================================================ */ :root, [data-theme="midnight"] { color-scheme: dark; --bg0: #07070c; --bg1: #0b0b12; --card: rgba(255, 255, 255, 0.06); --card2: rgba(255, 255, 255, 0.09); --stroke: rgba(255, 255, 255, 0.14); --stroke2: rgba(255, 255, 255, 0.22); --text: rgba(255, 255, 255, 0.92); --muted: rgba(255, 255, 255, 0.68); --faint: rgba(255, 255, 255, 0.48); --accent: #7c3aed; --accent-hover: #6d28d9; --accent2: #22d3ee; --ok: #22c55e; --warn: #f59e0b; --danger: #ef4444; --body-bg: linear-gradient(180deg, var(--bg0), var(--bg1)); --body-glow-1: rgba(124, 58, 237, 0.26); --body-glow-2: rgba(34, 211, 238, 0.20); --body-glow-3: rgba(239, 68, 68, 0.10); --sidebar-bg: rgba(7, 7, 12, 0.70); --input-bg: rgba(7, 7, 12, 0.55); --code-bg: rgba(0, 0, 0, 0.35); --shadow: 0 18px 60px rgba(0, 0, 0, 0.55); --shadow2: 0 10px 30px rgba(0, 0, 0, 0.35); } [data-theme="dark"] { color-scheme: dark; --bg0: #0f172a; --bg1: #1e293b; --card: rgba(255, 255, 255, 0.05); --card2: rgba(255, 255, 255, 0.08); --stroke: rgba(255, 255, 255, 0.12); --stroke2: rgba(255, 255, 255, 0.20); --text: #f8fafc; --muted: #94a3b8; --faint: #64748b; --accent: #6366f1; --accent-hover: #4f46e5; --accent2: #38bdf8; --ok: #4ade80; --warn: #fbbf24; --danger: #f87171; --body-bg: linear-gradient(180deg, var(--bg0), var(--bg1)); --body-glow-1: rgba(99, 102, 241, 0.18); --body-glow-2: rgba(56, 189, 248, 0.14); --body-glow-3: rgba(239, 68, 68, 0.06); --sidebar-bg: rgba(15, 23, 42, 0.80); --input-bg: rgba(15, 23, 42, 0.60); --code-bg: rgba(0, 0, 0, 0.30); --shadow: 0 18px 60px rgba(0, 0, 0, 0.45); --shadow2: 0 10px 30px rgba(0, 0, 0, 0.30); } [data-theme="gray"] { color-scheme: dark; --bg0: #18181b; --bg1: #27272a; --card: rgba(255, 255, 255, 0.05); --card2: rgba(255, 255, 255, 0.08); --stroke: rgba(255, 255, 255, 0.10); --stroke2: rgba(255, 255, 255, 0.18); --text: #fafafa; --muted: #a1a1aa; --faint: #71717a; --accent: #8b5cf6; --accent-hover: #7c3aed; --accent2: #06b6d4; --ok: #34d399; --warn: #fbbf24; --danger: #fb7185; --body-bg: linear-gradient(180deg, var(--bg0), var(--bg1)); --body-glow-1: rgba(139, 92, 246, 0.14); --body-glow-2: rgba(6, 182, 212, 0.10); --body-glow-3: rgba(251, 113, 133, 0.06); --sidebar-bg: rgba(24, 24, 27, 0.80); --input-bg: rgba(24, 24, 27, 0.60); --code-bg: rgba(0, 0, 0, 0.28); --shadow: 0 18px 60px rgba(0, 0, 0, 0.40); --shadow2: 0 10px 30px rgba(0, 0, 0, 0.25); } [data-theme="light"] { color-scheme: light; --bg0: #f8fafc; --bg1: #f1f5f9; --card: rgba(0, 0, 0, 0.03); --card2: rgba(0, 0, 0, 0.05); --stroke: rgba(0, 0, 0, 0.10); --stroke2: rgba(0, 0, 0, 0.18); --text: #0f172a; --muted: #475569; --faint: #94a3b8; --accent: #7c3aed; --accent-hover: #6d28d9; --accent2: #0891b2; --ok: #16a34a; --warn: #d97706; --danger: #dc2626; --body-bg: linear-gradient(180deg, var(--bg0), var(--bg1)); --body-glow-1: rgba(124, 58, 237, 0.06); --body-glow-2: rgba(8, 145, 178, 0.05); --body-glow-3: rgba(220, 38, 38, 0.03); --sidebar-bg: rgba(255, 255, 255, 0.85); --input-bg: rgba(255, 255, 255, 0.80); --code-bg: rgba(0, 0, 0, 0.05); --shadow: 0 18px 60px rgba(0, 0, 0, 0.08); --shadow2: 0 10px 30px rgba(0, 0, 0, 0.06); }