/* ===== Темы ===== Тема выбирается атрибутом data-theme на , например: Светлая тема — значение по умолчанию (:root). */ /* ☀️ Светлая (по умолчанию) */ :root, [data-theme="light"] { --bg: #f3f4f9; --card: #ffffff; --text: #181b26; --muted: #6f7686; --border: #e4e7ef; --accent: #6366f1; --accent-2: #a855f7; --success: #10b981; --error: #ef4444; --shadow: 0 24px 60px -12px rgba(79, 70, 229, 0.18); --glow-1: rgba(99, 102, 241, 0.14); --glow-2: rgba(168, 85, 247, 0.14); --accent-glow: rgba(99, 102, 241, 0.55); } /* 🌙 Тёмная */ [data-theme="dark"] { --bg: #0e1016; --card: #171a23; --text: #e7e9f0; --muted: #9aa1b0; --border: #262b3a; --accent: #818cf8; --accent-2: #c084fc; --success: #34d399; --error: #f87171; --shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.6); --glow-1: rgba(129, 140, 248, 0.12); --glow-2: rgba(192, 132, 252, 0.12); --accent-glow: rgba(129, 140, 248, 0.5); } /* 🌊 Океан */ [data-theme="ocean"] { --bg: #eef4fb; --card: #ffffff; --text: #12263a; --muted: #5a7184; --border: #d5e2f0; --accent: #0ea5e9; --accent-2: #2563eb; --success: #059669; --error: #dc2626; --shadow: 0 24px 60px -12px rgba(14, 165, 233, 0.2); --glow-1: rgba(14, 165, 233, 0.14); --glow-2: rgba(37, 99, 235, 0.14); --accent-glow: rgba(14, 165, 233, 0.5); } /* 🌲 Лес */ [data-theme="forest"] { --bg: #f0f7f1; --card: #ffffff; --text: #1a2e1f; --muted: #5f7a67; --border: #d8e8dd; --accent: #16a34a; --accent-2: #65a30d; --success: #16a34a; --error: #dc2626; --shadow: 0 24px 60px -12px rgba(22, 163, 74, 0.2); --glow-1: rgba(22, 163, 74, 0.14); --glow-2: rgba(101, 163, 13, 0.14); --accent-glow: rgba(22, 163, 74, 0.5); } /* 🌅 Закат */ [data-theme="sunset"] { --bg: #fdf3f0; --card: #fffdfc; --text: #3b1d2a; --muted: #8a6a76; --border: #f0dcd6; --accent: #f43f5e; --accent-2: #f97316; --success: #10b981; --error: #ef4444; --shadow: 0 24px 60px -12px rgba(244, 63, 94, 0.2); --glow-1: rgba(244, 63, 94, 0.14); --glow-2: rgba(249, 115, 22, 0.14); --accent-glow: rgba(244, 63, 94, 0.5); }