/* =====================================================================
   PiknikKids — цветовые темы. Выбор: Настройки → «Оформление» (settings ui.theme).
   Фиолетовая тема — значения :root в app.css; здесь переопределения остальных.
   ===================================================================== */
html[data-theme="ocean"] {
  --brand: #0891b2; --brand-600: #0e7490; --brand-50: #e6f6fa; --brand-100: #cdeef5;
  --brand-rgb: 8, 145, 178; --grad2-rgb: 14, 165, 233; --glow-rgb: 8, 125, 165; --accent-rgb: 16, 185, 129;
  --shade-rgb: 12, 52, 68; --backdrop-rgb: 6, 22, 30;
  --grad: linear-gradient(135deg, #0891b2 0%, #0ea5e9 50%, #10b981 100%);
  --grad-soft: linear-gradient(135deg, #e6f6fa 0%, #e8f3fe 60%, #e7f8f1 100%);
  --grad-dark: linear-gradient(180deg, #0a2530 0%, #0e3644 100%);
  --grad-card: linear-gradient(135deg, #0e7490 0%, #0ea5e9 52%, #10b981 100%);
  --ink: #0f2733; --ink-2: #2f4b58; --muted: #6b808a; --line: #e1edf1; --line-2: #cfe0e6; --bg: #f1f7f9;
  --tint: #f5fafc; --tint-2: #f8fcfd; --tint-3: #edf6f9; --track: #e2eff3; --muted-2: #a3b6be; --dark: #0f2733;
  --side-text: #cde5ed; --side-muted: #8db3c1; --side-title: #6d97a6; --side-scroll: #2a5465;
  --topbar-bg: rgba(241, 247, 249, .85);
}

html[data-theme="emerald"] {
  --brand: #059669; --brand-600: #047857; --brand-50: #e6f6ef; --brand-100: #cbeedd;
  --brand-rgb: 5, 150, 105; --grad2-rgb: 16, 185, 129; --glow-rgb: 5, 130, 95; --accent-rgb: 132, 204, 22;
  --shade-rgb: 10, 60, 40; --backdrop-rgb: 6, 26, 18;
  --grad: linear-gradient(135deg, #059669 0%, #10b981 50%, #84cc16 100%);
  --grad-soft: linear-gradient(135deg, #e6f6ef 0%, #eaf8f0 60%, #f2f9e3 100%);
  --grad-dark: linear-gradient(180deg, #08261b 0%, #0c3526 100%);
  --grad-card: linear-gradient(135deg, #047857 0%, #10b981 52%, #84cc16 100%);
  --ink: #10281f; --ink-2: #2e4a3e; --muted: #6b8078; --line: #e2eee8; --line-2: #cfe2d8; --bg: #f2f8f5;
  --tint: #f6faf8; --tint-2: #f9fcfa; --tint-3: #edf6f1; --track: #e2f0e8; --muted-2: #a5b8ae; --dark: #10281f;
  --side-text: #cfe8dc; --side-muted: #8fb9a5; --side-title: #6e9a86; --side-scroll: #2b5a45;
  --topbar-bg: rgba(242, 248, 245, .85);
}

html[data-theme="blue"] {
  --brand: #2563eb; --brand-600: #1d4ed8; --brand-50: #eaf0fe; --brand-100: #d4e1fd;
  --brand-rgb: 37, 99, 235; --grad2-rgb: 79, 70, 229; --glow-rgb: 50, 80, 220; --accent-rgb: 6, 182, 212;
  --shade-rgb: 20, 35, 90; --backdrop-rgb: 10, 16, 40;
  --grad: linear-gradient(135deg, #2563eb 0%, #4f46e5 50%, #06b6d4 100%);
  --grad-soft: linear-gradient(135deg, #eaf0fe 0%, #eeeefe 60%, #e6f8fb 100%);
  --grad-dark: linear-gradient(180deg, #0f1a38 0%, #16244d 100%);
  --grad-card: linear-gradient(135deg, #1d4ed8 0%, #4f46e5 52%, #06b6d4 100%);
  --ink: #131b33; --ink-2: #333d5a; --muted: #6f7890; --line: #e4e9f4; --line-2: #d2dbec; --bg: #f3f6fc;
  --tint: #f7f9fd; --tint-2: #fafbfe; --tint-3: #eff3fb; --track: #e5eaf5; --muted-2: #a9b2c6; --dark: #131b33;
  --side-text: #d3dcf2; --side-muted: #95a5cc; --side-title: #7485ad; --side-scroll: #34426b;
  --topbar-bg: rgba(243, 246, 252, .85);
}

html[data-theme="coral"] {
  --brand: #e11d48; --brand-600: #be123c; --brand-50: #fdecf0; --brand-100: #fbd5de;
  --brand-rgb: 225, 29, 72; --grad2-rgb: 244, 63, 94; --glow-rgb: 220, 40, 80; --accent-rgb: 249, 115, 22;
  --shade-rgb: 90, 20, 40; --backdrop-rgb: 36, 8, 18;
  --grad: linear-gradient(135deg, #e11d48 0%, #f43f5e 45%, #f97316 100%);
  --grad-soft: linear-gradient(135deg, #fdecf0 0%, #feeef0 60%, #fff1e6 100%);
  --grad-dark: linear-gradient(180deg, #2a0d17 0%, #3b1320 100%);
  --grad-card: linear-gradient(135deg, #be123c 0%, #f43f5e 52%, #f97316 100%);
  --ink: #2a1219; --ink-2: #4d2e36; --muted: #8a7076; --line: #f3e4e8; --line-2: #e8d2d8; --bg: #fbf4f6;
  --tint: #fdf8f9; --tint-2: #fefafb; --tint-3: #faeff2; --track: #f4e5e9; --muted-2: #c3aab1; --dark: #2a1219;
  --side-text: #f2d3db; --side-muted: #c996a4; --side-title: #a87583; --side-scroll: #6a3443;
  --topbar-bg: rgba(251, 244, 246, .85);
}