/* ══════════════════════════════════════════════════════════════════
   ЦВЕТОВЫЕ ПАЛИТРЫ — ровно как в макете «Tutor Mini App Premium».
   Значения перенесены один в один из объекта T дизайн-файла.

     [data-palette="boy"]                    — мальчик, светлая
     [data-palette="boy"][data-theme="dark"] — мальчик, тёмная
     [data-palette="girl"]                   — девочка, светлая
     [data-palette="girl"][data-theme="dark"]— девочка, тёмная

   Мальчики: акцент #6889BD, текст #22303F, фон #EDF2F8 с градиентом.
   Девочки (Rose): акцент #C2687E, фон #FAF6F7 без градиента, текст #3A2831.
   ══════════════════════════════════════════════════════════════════ */

/* ── МАЛЬЧИК · СВЕТЛАЯ (по умолчанию) ─────────────────────────── */
:root,
:root[data-palette="boy"] {
  --bg: #EDF2F8;
  --bgImage: radial-gradient(120% 80% at 20% 0%, #F6F9FC 0%, #E4EBF4 55%, #DCE5F0 100%);
  --card: rgba(255,255,255,0.72);
  --cardSolid: #FFFFFF;
  --cardBorder: rgba(255,255,255,0.9);
  --text: #22303F;
  --muted: #7A8B9C;
  --weekend: #A0AEBF;
  --accent: #6889BD;
  --accent2: #A9BDD8;
  --accentSoft: rgba(104,137,189,0.14);
  --accentGrad: linear-gradient(135deg,#6889BD,#8FA9D8);
  --onAccent: #FFFFFF;
  --onAccentSoft: rgba(255,255,255,0.78);
  --chip: rgba(120,140,165,0.14);
  --glass: rgba(255,255,255,0.62);
  --sep: rgba(34,48,63,0.10);
  --shadow: 0 14px 34px rgba(38,60,90,0.12);
  --btnShadow: 0 12px 26px rgba(104,137,189,0.32);
  --glowA: rgba(104,137,189,0.32);
  --glowB: rgba(140,168,206,0.34);
  --avatar: linear-gradient(145deg,#B7C4CF,#6889BD);
  --indicator: rgba(34,48,63,0.26);
  --scrim: rgba(24,36,54,0.30);
  --menuBg: rgba(255,255,255,0.86);
  --menuBorder: rgba(255,255,255,0.9);
  --busyBg: rgba(183,196,207,0.28);
  --busyText: #9AA8B6;
  --warn: #4E6E9E;
  --warnSoft: rgba(78,110,158,0.12);
  --skel: linear-gradient(90deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.85) 40%, rgba(255,255,255,0.5) 80%);
  --toastBg: rgba(34,48,63,0.92);
  --toastText: #FFFFFF;
}

/* ── МАЛЬЧИК · ТЁМНАЯ ─────────────────────────────────────────── */
:root[data-palette="boy"][data-theme="dark"] {
  --bg: #0E141C;
  --bgImage: radial-gradient(120% 80% at 20% 0%, #1A2432 0%, #121A25 55%, #0C121A 100%);
  --card: rgba(255,255,255,0.07);
  --cardSolid: #1A2330;
  --cardBorder: rgba(255,255,255,0.10);
  --text: #EAF0F7;
  --muted: #8B9BAE;
  --weekend: #75859A;
  --accent: #7FA3D8;
  --accent2: #5C7BA8;
  --accentSoft: rgba(127,163,216,0.18);
  --accentGrad: linear-gradient(135deg,#6889BD,#8FB0E0);
  --onAccent: #0E141C;
  --onAccentSoft: rgba(14,20,28,0.65);
  --chip: rgba(255,255,255,0.09);
  --glass: rgba(255,255,255,0.10);
  --sep: rgba(255,255,255,0.10);
  --shadow: 0 16px 38px rgba(0,0,0,0.45);
  --btnShadow: 0 12px 28px rgba(104,137,189,0.30);
  --glowA: rgba(104,137,189,0.30);
  --glowB: rgba(92,123,168,0.28);
  --avatar: linear-gradient(145deg,#54708F,#6889BD);
  --indicator: rgba(255,255,255,0.32);
  --scrim: rgba(0,0,0,0.52);
  --menuBg: rgba(38,48,62,0.86);
  --menuBorder: rgba(255,255,255,0.12);
  --busyBg: rgba(255,255,255,0.05);
  --busyText: #6E7E90;
  --warn: #8FB0E0;
  --warnSoft: rgba(143,176,224,0.14);
  --skel: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.12) 40%, rgba(255,255,255,0.05) 80%);
  --toastBg: rgba(232,240,250,0.94);
  --toastText: #0E141C;
}

/* ── ДЕВОЧКА · СВЕТЛАЯ (Rose) ─────────────────────────────────── */
:root[data-palette="girl"] {
  --bg: #FAF6F7;
  --bgImage: none;
  --card: rgba(255,255,255,0.92);
  --cardSolid: #FFFFFF;
  --cardBorder: rgba(58,40,49,0.07);
  --text: #3A2831;
  --muted: #937C86;
  --weekend: #B39AA4;
  --accent: #C2687E;
  --accent2: #E0A9B8;
  --accentSoft: rgba(194,104,126,0.14);
  --accentGrad: linear-gradient(135deg,#C2687E,#DE93A6);
  --onAccent: #FFFFFF;
  --onAccentSoft: rgba(255,255,255,0.80);
  --chip: rgba(165,125,140,0.14);
  --glass: rgba(255,255,255,0.64);
  --sep: rgba(58,40,49,0.10);
  --shadow: 0 10px 26px rgba(120,60,80,0.09);
  --btnShadow: 0 12px 26px rgba(194,104,126,0.32);
  --glowA: rgba(194,104,126,0.30);
  --glowB: rgba(222,147,166,0.32);
  --avatar: linear-gradient(145deg,#E0BFC8,#C2687E);
  --indicator: rgba(58,40,49,0.26);
  --scrim: rgba(60,30,42,0.30);
  --menuBg: rgba(255,255,255,0.88);
  --menuBorder: rgba(255,255,255,0.90);
  --busyBg: rgba(196,170,180,0.22);
  --busyText: #A48B95;
  --warn: #A8536B;
  --warnSoft: rgba(168,83,107,0.12);
  --skel: linear-gradient(90deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.85) 40%, rgba(255,255,255,0.5) 80%);
  --toastBg: rgba(58,40,49,0.92);
  --toastText: #FFFFFF;
}

/* ── ДЕВОЧКА · ТЁМНАЯ ─────────────────────────────────────────── */
:root[data-palette="girl"][data-theme="dark"] {
  --bg: #181115;
  --bgImage: none;
  --card: rgba(255,255,255,0.07);
  --cardSolid: #251A20;
  --cardBorder: rgba(255,255,255,0.10);
  --text: #F6EAEE;
  --muted: #A98F99;
  --weekend: #967C86;
  --accent: #E294A9;
  --accent2: #B4697F;
  --accentSoft: rgba(226,148,169,0.18);
  --accentGrad: linear-gradient(135deg,#C2687E,#E9A2B5);
  --onAccent: #171014;
  --onAccentSoft: rgba(23,16,20,0.65);
  --chip: rgba(255,255,255,0.09);
  --glass: rgba(255,255,255,0.10);
  --sep: rgba(255,255,255,0.10);
  --shadow: 0 16px 38px rgba(0,0,0,0.45);
  --btnShadow: 0 12px 28px rgba(194,104,126,0.32);
  --glowA: rgba(194,104,126,0.30);
  --glowB: rgba(180,105,127,0.28);
  --avatar: linear-gradient(145deg,#8E5A69,#E294A9);
  --indicator: rgba(255,255,255,0.32);
  --scrim: rgba(0,0,0,0.52);
  --menuBg: rgba(56,40,47,0.86);
  --menuBorder: rgba(255,255,255,0.12);
  --busyBg: rgba(255,255,255,0.05);
  --busyText: #8A737C;
  --warn: #E9A2B5;
  --warnSoft: rgba(233,162,181,0.14);
  --skel: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.12) 40%, rgba(255,255,255,0.05) 80%);
  --toastBg: rgba(246,234,238,0.94);
  --toastText: #3A2831;
}

/* ── ЦВЕТА МАРКЕРОВ ДОСКИ ─────────────────────────────────────────
   Взяты из палитр макета: акценты обеих тем плюс тёмный текст. */
:root {
  --pen-1: #C2687E;
  --pen-2: #6889BD;
  --pen-3: #4E6E9E;
  --pen-4: #DE93A6;
  --pen-5: #22303F;
}

/* ══════════════════════════════════════════════════════════════════
   Константы сетки из макета: шаг 4px, отступ экрана 16,
   радиусы 14/20/24, кнопки 99, нажимаемые зоны ≥ 44px,
   переходы 0.24–0.42s по кривой iOS.
   ══════════════════════════════════════════════════════════════════ */
:root {
  --ease: cubic-bezier(0.32,0.72,0,1);
  --font: -apple-system, "SF Pro Display", "SF Pro Text", "Helvetica Neue",
          Helvetica, sans-serif;
}