/* Все цвета, шрифты и размеры — только здесь. Контраст текста проверен на 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;
  --focus-ring: rgba(27, 95, 207, 0.25);
  --focus-soft: rgba(27, 95, 207, 0.08);

  /* контуры и жёсткие тени «наклеек»; --ink — всегда тёмные чернила (текст на жёлтом/розовом) */
  --outline: #141c3a;
  --footer-bg: #141c3a;
  --on-success: #ffffff;
  --success-stripe: #25a066;
  --primary-border: #bfd3f4;
  --primary-soft-hover: #d6e5fb;
  --amber-soft-hover: #ffe9b0;
  --hero-top: #eaf1fb;
  --glass: rgba(255, 255, 255, 0.7);
  --glass-strong: rgba(255, 255, 255, 0.85);
  --mark: rgba(255, 210, 63, 0.7);
  --tip-bg: #141c3a;
  --tip-fg: #ffffff;
  --tip-link: #cfe0ff;
  color-scheme: light;

  /* типографика: системные шрифты, без внешних загрузок */
  --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: 4px 4px 0 var(--outline);
  --shadow-sm: 2px 2px 0 var(--outline);
  --shadow-lg: 6px 6px 0 var(--outline);
  --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" на <html> (см. js/boot.js) */
:root[data-theme="dark"] {
  --bg: #0e1124;
  --grid: rgba(140, 160, 255, 0.07);
  --surface: #171b36;
  --surface-2: #20254a;
  --border: #333b69;
  --border-strong: #5a67a6;

  --text: #e8ecff;
  --muted: #a8b1d8;

  --primary: #8097ff;
  --primary-hover: #9bacff;
  --primary-soft: #232a5c;
  --primary-text: #a9b8ff;
  --on-primary: #0b1030;

  --success: #3ec184;
  --success-soft: #12301f;
  --success-border: #2c6b4a;
  --success-text: #6fe0a6;
  --on-success: #04180d;
  --success-stripe: #2fa06c;

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

  --danger: #ff6b66;
  --danger-soft: #3a1716;
  --danger-border: #7a2f2c;
  --danger-text: #ff9a95;

  --pink-soft: #3d1f2b;

  --focus: #9db0ff;
  --focus-ring: rgba(155, 172, 255, 0.35);
  --focus-soft: rgba(155, 172, 255, 0.14);

  --outline: #7482c4;
  --footer-bg: #0a0d1c;
  --primary-border: #3b4690;
  --primary-soft-hover: #2c3573;
  --amber-soft-hover: #4d4216;
  --hero-top: #151a3a;
  --glass: rgba(23, 27, 54, 0.8);
  --glass-strong: rgba(23, 27, 54, 0.85);
  --mark: rgba(255, 210, 63, 0.3);
  --tip-bg: #e8ecff;
  --tip-fg: #141c3a;
  --tip-link: #2038b8;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}