/* Токены дизайн-системы. Единственное место, где живут цвета, размеры и формы.
 *
 * Гамма — мягкий шалфей на тёплой бумаге. Оранжевого нет: он резал глаза и
 * достался сайту по наследству, а не по замыслу. Зелёный спокойнее, к нему
 * не устаёшь за час занятия, и он не «детсадовский».
 *
 * Все текстовые пары проверены по WCAG: минимум 4,5:1 для текста и 3:1 для
 * границ на всех трёх поверхностях (бумага, белая карточка, вторичная).
 *
 * Правило: в остальных файлах не должно быть ни одного шестнадцатеричного
 * цвета. Только var(--...) — иначе гамма расползётся.
 */

:root {
  /* Нативные контролы (чекбокс согласия и ко) красятся по теме:
     без этого хинта чекбокс ночью остаётся кричаще-белым пятном. */
  color-scheme: light;

  /* ---------- Поверхности ---------- */
  --paper:       #F6F5F0;  /* фон страницы — тёплый, не белый */
  --surface:     #FCFBF7;  /* карточки: чуть светлее бумаги */
  --surface-alt: #ECEEE8;  /* вторичная — с лёгким зелёным подтоном */

  /* ---------- Чернила ---------- */
  --ink:      #2B3630;  /* заголовки — 11,5:1 */
  --ink-soft: #5A665E;  /* вторичный текст — 5,5:1 */

  /* ---------- Зелёный ----------
     Оттенок 131° — тот, что выбрал заказчик (#65D97A). Прежний шалфей
     #46664F стоял на 143° и был приглушён до серо-зелёного; новый
     заметно свежее и чище, при этом остаётся зелёным, а не салатовым.

     Сам #65D97A слишком светлый, чтобы быть ТЕКСТОМ: на бумаге он даёт
     1,64:1 при норме 4,5, и белым по нему тоже нельзя — 1,79:1. Зато
     чернилами по нему 7,7:1. Поэтому он живёт там, где он и должен
     жить, — в ЗАЛИВКЕ главной кнопки, с тёмным текстом поверх. А для
     текста и обводок взят тот же оттенок, опущенный по светлоте. */
  --accent:      #2B7037;  /* акцентный ТЕКСТ и обводка — 5,5:1 на бумаге */
  --accent-deep: #1D5626;  /* нажатое состояние */
  --accent-soft: #DFF2E3;  /* мягкая подложка акцента */
  --accent-line: #53945F;  /* обводка акцентом — 3,3:1, проходит */

  /* Заливка главной кнопки — цвет заказчика во всю силу.
     Текст на ней ТЁМНЫЙ: белый по такому зелёному нечитаем. */
  --accent-fill:    #65D97A;
  --on-accent-fill: #12341A;  /* 7,7:1 */

  /* ---------- Линии ---------- */
  --line:         #6E7A72;  /* жёсткая граница — 4,1:1 */
  --line-control: #7F8C84;  /* граница поля ввода и кнопки — 3,0:1 минимум.
                               Отдельный токен появился потому, что поля были
                               обведены декоративным --line-soft (1,28:1):
                               рамки фактически не было, поле опознавалось
                               только по подсказке внутри */
  --line-soft:    #D8DBD4;  /* ТОЛЬКО декоративная линейка: 1,28:1.
                               Обводить ею контрол нельзя */

  /* Фокус — глубокий шалфей, виден на любой поверхности */
  --focus:      var(--ink);
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink);

  /* Текст на заливке акцентом */
  --on-accent: #FFFFFF;   /* белый на #2B7037 — 6,0:1 */

  /* ---------- Мягкие акценты ---------- */
  /* Пастель. ТОЛЬКО декор: иллюстрации, наклейки, подложки. Контраст у них
     2:1 — как текст или граница не годятся, и это не придирка, а причина,
     по которой прошлая палитра и резала глаз. */
  /* Палитра доски для урока. Цвета живут здесь, а не в js/board.js:
     правило проекта — ни одного hex вне токенов, иначе ночная тема
     и доступность начинают расходиться по файлам. Подобраны так, чтобы
     читались и на светлой бумаге доски, и в ночной теме. */
  --bd-ink:    #2B3630;
  --bd-red:    #C0392B;
  --bd-blue:   #2A6BB8;
  --bd-green:  #2B7037;
  --bd-orange: #C4761E;
  --bd-violet: #7A5AA8;
  --bd-note:   #FFE9A3;   /* заливка стикера — жёлтый */
  --bd-note2:  #C7E8CE;   /* зелёный */
  --bd-note3:  #FFD3C4;   /* розовый */
  --bd-note4:  #BFE0F5;   /* голубой */
  --bd-note5:  #E3D4F5;   /* фиолетовый */
  /* Маркер — своя палитра, а не чернила ручки. Текстовыделитель кладётся
     полупрозрачной полосой ПОВЕРХ написанного, поэтому цвета здесь яркие
     и светлые: тёмно-зелёная линия ручки, размазанная на всю строку,
     просто съедала текст под собой. */
  --bd-mark1:  #FFE24D;   /* жёлтый — основной */
  --bd-mark2:  #6FE39B;   /* зелёный */
  --bd-mark3:  #6FD0FF;   /* голубой */
  --bd-mark4:  #FF8FC8;   /* розовый */
  --bd-mark5:  #FFAE57;   /* оранжевый */
  --bd-paper:  #FBFAF6;   /* полотно доски */
  --bd-grid:   #E2E5DE;   /* точки сетки */

  /* Видеозвонок и показ экрана. Это сцена под видеопоток, а не поверхность
     интерфейса: она тёмная ВСЕГДА, в обеих темах, и ночная лестница её не
     касается (так же, как тёмный кадр ролика на экране регистрации).
     Текст и значки на ней тоже постоянные, поэтому --on-accent не подходит —
     ночью он тёмный. */
  --bd-video:       #1C1F1D;  /* фон окна видео собеседника */
  --bd-video-self:  #2A2E2B;  /* своё превью — чуть светлее, чтобы отличать */
  --bd-video-stage: #161A17;  /* большой режим звонка на весь экран */
  --bd-video-deep:  #10130F;  /* само видео в большом режиме */
  --bd-video-ink:   #B9C2BB;  /* приглушённый текст поверх тёмной сцены */
  --bd-on-dark:     #FFFFFF;  /* текст на кнопках звонка: красная «завершить»
                                 и зелёная плашка показа экрана в обеих темах
                                 одни и те же, значит и текст постоянный */
  --bd-rec:         #F04438;  /* точка «идёт показ экрана» и опасные кнопки —
                      как в Zoom и macOS: её читают по привычке.
                      Был #FF5F57 — белая иконка на нём давала 2,99:1 при
                      норме 3:1; этот тон чуть темнее (3,76:1), красный тот же */

  --soft-lavender: #A79FC4;
  --soft-sky:      #8FB3CC;
  --soft-clay:     #C9A38F;
  --soft-mint:     #9CC4B2;

  /* ---------- Типографика ---------- */
  --font-display: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-caption:    16px;
  --text-body-sm:    18px;
  --text-body:       20px;
  --text-subheading: 24px;
  --text-heading-sm: 28px;
  --text-heading:    36px;
  --text-heading-lg: 46px;
  --text-display:    92px;

  --leading-display: 1.06;
  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.55;

  /* ---------- Отступы ---------- */
  --space-4:   4px;
  --space-8:   8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  /* ---------- Формы ---------- */
  /* Мягче, чем было: крупные скругления успокаивают картинку. */
  --radius-input: 12px;
  --radius-card:  18px;
  --radius-btn:   999px;   /* таблетка — самая мягкая форма */
  --radius-tag:   999px;
  --radius-panel: 28px;

  --border-w: 1px;   /* тонкая линия вместо жирной обводки */

  /* ---------- Тени ---------- */
  /* Очень мягкие и с зелёным подтоном, чтобы не выглядели грязными. */
  --shadow-soft:  0 1px 2px rgba(43, 54, 48, .04), 0 8px 24px rgba(43, 54, 48, .06);
  --shadow-lift:  0 2px 4px rgba(43, 54, 48, .06), 0 16px 40px rgba(43, 54, 48, .10);

  /* ---------- Раскладка ---------- */
  --page-max:     1180px;
  --section-gap:  var(--space-64);
  --card-padding: var(--space-32);
  --element-gap:  var(--space-12);

  /* ---------- Движение ---------- */
  /* Одна кривая на весь сайт: мягкий выход без отскока. */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --dur-fast:  .18s;
  --dur:       .32s;
  --dur-slow:  .6s;
}

@media (max-width: 900px) {
  :root {
    --text-display:    52px;
    --text-heading-lg: 36px;
    --text-heading:    28px;
    --section-gap:     var(--space-40);
    --card-padding:    var(--space-20);
  }
}

@media (max-width: 480px) {
  :root {
    --text-display:    42px;
    --text-heading-lg: 30px;
  }
}

/* Системная тёмная тема включает ночную сама — но только пока человек
   не нажал луну. После нажатия на <html> появляется data-theme, и он
   побеждает системную настройку: явный выбор важнее умолчания.
   Сами значения — в блоке «НОЧНАЯ ТЕМА» внизу файла. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================= НОЧНАЯ ТЕМА ================= */
/* Не чёрная, а глубокая зелёно-серая: чистый чёрный на светящемся экране
   даёт слишком высокий контраст и от него быстро устают глаза.
   Все пары проверены: заголовки 11,6:1, вторичный 6,2:1, шалфей 6,6:1,
   границы 3,7:1. */
:root[data-theme="night"] {
  color-scheme: dark;

  /* Порядок яркости обязан совпадать с дневным: карточка — самая светлая
     поверхность. Раньше вторичная (#27302C) была светлее карточки (#1E2522),
     и ночью иерархия переворачивалась: второстепенные плитки выглядели
     приподнятыми над главной, а пузырь чата — светлее подложки. */
  /* Ступени между поверхностями были 1,07–1,09 — то есть край карточки
     ночью не виден вовсе, а пузырь реплики кота сливался с лентой чата.
     Ниже набор с шагом ~1,15–1,19 на каждой границе: этого хватает,
     чтобы глаз видел границу, и мало, чтобы поверхность начала светиться. */
  --paper:       #141917;
  --surface-alt: #1F2622;
  --surface:     #2A332E;
  --surface-hi:  #354039;   /* пузырь кота, всплывающие плашки */

  --ink:      #E9EEEA;
  --ink-soft: #A6B2AA;

  /* Ночью цвет заказчика работает НАПРЯМУЮ и во всю силу: на тёмном фоне
     он даёт 9,96:1 — светлое на тёмном и должно быть ярким. Это тот
     редкий случай, когда ограничений нет вообще. */
  --accent:      #65D97A;
  --accent-deep: #8AE79B;
  --accent-soft: #223A28;
  --accent-line: #4E9460;

  --accent-fill:    #65D97A;
  --on-accent-fill: #0E2614;  /* 9,0:1 */

  --line:         #78897F;
  --line-control: #7B8C82;  /* 3,0:1 на всех четырёх тёмных поверхностях,
                               включая самую светлую — пузырь кота */
  --line-soft:    #333E38;  /* декор, 1,57:1 */

  --focus:      var(--accent);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);
  --on-accent:  #16201A;    /* тёмный текст на светлой кнопке — 8,1:1 */

  /* пастель приглушается, иначе ночью светится неоном */
  --soft-lavender: #6E668A;
  --soft-sky:      #5B7C93;
  --soft-clay:     #8E7264;
  --soft-mint:     #6A8C7C;

  /* тени ночью не работают — вместо них чуть более светлые поверхности */
  --shadow-soft: 0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.24);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.36), 0 16px 40px rgba(0,0,0,.34);
}

/* Кот. Днём — тёплый серо-кремовый, ночью приглушается вместе со всем
   остальным. Значения живут здесь, чтобы персонаж не выпадал из палитры. */
:root {
  --cat-fur:      #E4DFD3;
  --cat-fur-dark: #C9C2B2;
  --cat-muzzle:   #F6F3EC;
  --cat-ink:      #2B3630;
  --cat-whisker:  #8A9690;
  --cat-tongue:   #C99A93;
  --cat-eye:      #FCFBF7;
}
:root[data-theme="night"] {
  --cat-fur:      #C2BDB0;   /* было #9AA69C — кот выглядел каменным */
  --cat-fur-dark: #A29B8C;
  --cat-muzzle:   #D8D3C8;
  --cat-ink:      #121815;
  --cat-whisker:  #5E6A64;
  --cat-tongue:   #A87F79;
  --cat-eye:      #E9EEEA;
}

/* Системное «тёмное» подхватывается, пока человек не выбрал вручную:
   селектор :not([data-theme]) снимает это правило сразу после нажатия луны. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --paper: #141917; --surface-alt: #1F2622; --surface: #2A332E;
    --surface-hi: #354039;
    --ink: #E9EEEA; --ink-soft: #A6B2AA;
    /* Значения ОБЯЗАНЫ совпадать с блоком :root[data-theme="night"] выше.
       Это два пути к одной теме: сюда попадает тот, кто луну не жал,
       туда — кто жал. Разъедутся — половина пользователей увидит одно,
       половина другое, и заметить это можно только сравнив два браузера.
       Так и вышло при смене зелёного: там #65D97A, здесь оставался
       прежний #8FC0A0. */
    --accent: #65D97A; --accent-deep: #8AE79B; --accent-soft: #223A28;
    --accent-line: #4E9460; --line: #78897F;
    --line-control: #7B8C82; --line-soft: #333E38;
    --accent-fill: #65D97A; --on-accent-fill: #0E2614;
    --focus: #65D97A; --on-accent: #16201A;
    --soft-lavender: #6E668A; --soft-sky: #5B7C93;
    --soft-clay: #8E7264; --soft-mint: #6A8C7C;
    --cat-fur: #C2BDB0; --cat-fur-dark: #A29B8C; --cat-muzzle: #D8D3C8;
    --cat-ink: #121815; --cat-whisker: #5E6A64; --cat-tongue: #A87F79;
    --cat-eye: #E9EEEA;
  }
}