/* Все цвета, шрифты и размеры — только здесь. Контраст текста проверен на WCAG AA (≥ 4.5:1).
   Палитра — «тетрадь в клетку»: бумага, синяя шариковая ручка, жёлтый маркер,
   зелёная школьная доска (верно) и красная учительская ручка (ошибка). */
:root {
  /* бумага и поверхности */
  --bg: #fbf9ef;
  --grid: rgba(45, 77, 224, 0.09);
  --surface: #ffffff;
  --surface-2: #eff2fc;
  --border: #cdd6ee;
  --border-strong: #8d9bc4;

  /* чернила: текст и жирные контуры «наклеек» */
  --ink: #141c3a;
  --text: #141c3a;
  --muted: #4a5578;

  /* основной: синяя шариковая ручка */
  --primary: #2d4de0;
  --primary-hover: #2038b8;
  --primary-soft: #e8ecff;
  --primary-text: #2038b8;
  --on-primary: #ffffff;

  /* верно: школьная доска */
  --success: #17804f;
  --success-soft: #dcf5e6;
  --success-border: #86d1a8;
  --success-text: #0d6a3f;

  /* подсказки: жёлтый маркер */
  --amber: #ffd23f;
  --amber-hover: #ffc40d;
  --accent-amber: #ffd23f;
  --amber-soft: #fff6c4;
  --amber-border: #ecd05a;
  --amber-text: #6b4800;
  --on-amber: #2e1f00;

  /* ошибка: красная ручка учителя */
  --danger: #d6322e;
  --danger-soft: #ffe6e3;
  --danger-border: #f2a9a3;
  --danger-text: #b3231f;

  /* розовый «ластик» — для декора */
  --pink: #ff8fb1;
  --pink-soft: #ffe3ec;

  --focus: #2d4de0;

  /* типографика: системные шрифты, без внешних загрузок */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --font-hand: "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Neue", "Comic Sans MS", cursive;
  --fs-base: 1.0625rem;
  --lh: 1.65;

  /* геометрия: жирный контур + жёсткая тень, как у наклейки */
  --radius: 16px;
  --radius-sm: 11px;
  --shadow-ink: #141c3a; /* цвет жёсткой тени */
  --on-bright: #141c3a;  /* текст на ярких заливках (жёлтый маркер, розовый) — не меняется в тёмной теме */
  --ink-bg: #141c3a;     /* тёмные плашки (подвал, лента): остаются тёмными в обеих темах */
  --shadow: 4px 4px 0 var(--shadow-ink);
  --shadow-sm: 2px 2px 0 var(--shadow-ink);
  --shadow-lg: 6px 6px 0 var(--shadow-ink);
  --shadow-soft: 0 1px 2px rgba(20, 28, 58, 0.06), 0 6px 18px rgba(20, 28, 58, 0.08);
  --container: 1120px;
  --gutter: 1rem;
  --tap: 44px; /* минимальная область нажатия */
}

@media (min-width: 768px) {
  :root { --gutter: 1.5rem; --fs-base: 1.125rem; }
}

/* Тёмная тема: «школьная доска» — включается атрибутом data-theme="dark" (см. js/boot.js).
   Контраст текста ≥ 4.5:1 сохранён. Яркие заливки (жёлтый, розовый) остаются яркими — текст на них --on-bright. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1428;
  --grid: rgba(140, 160, 255, 0.07);
  --surface: #182040;
  --surface-2: #1f2850;
  --border: #36427a;
  --border-strong: #5a69a8;

  --ink: #d9dfff;          /* контуры и «чернила» — светлые */
  --text: #e6eaff;
  --muted: #a9b4de;

  --primary: #6f87ff;
  --primary-hover: #8d9fff;
  --primary-soft: #232c5c;
  --primary-text: #a9b8ff;
  --on-primary: #0b1030;

  --success: #2fb872;
  --success-soft: #12342a;
  --success-border: #1f6b4a;
  --success-text: #7fe3ae;

  --amber-soft: #3a3214;
  --amber-border: #7a6720;
  --amber-text: #ffd966;

  --danger: #ff6b66;
  --danger-soft: #3d1b1d;
  --danger-border: #8a3a3a;
  --danger-text: #ff9c97;

  --pink-soft: #3d2330;
  --focus: #9db0ff;

  --shadow-ink: #04060f;
  --ink-bg: #070a1a;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.4);
}