/* ═══ ТОКЕНЫ ═══════════════════════════════════════════════════════════════
   Единственное место, где живут цвета, шрифты, ритм и тайминги.
   Хардкод цветов в разметке и в остальных css-файлах запрещён.
   Важно: переменные НЕ участвуют в анимируемых свойствах — GSAP всегда
   получает конкретные значения, иначе браузер не может закэшировать слой. */

:root {
  /* цвет */
  --prune:   #1A0B10;  /* чернослив — фон первого экрана */
  --bordeaux:#4A1420;  /* бордо — основной тёмный, кнопки на светлом */
  --gold:    #C9A24D;  /* золото — акцент, дозировано. Только линии и
                          заливки, и только на тёмном оно годится для текста:
                          на слоновой кости даёт 2.13:1. */
  --ivory:   #F6F1E8;  /* слоновая кость — светлый фон */
  --ash:     #8A7F7A;  /* пепел — второстепенный текст */

  /* Пепел на слоновой кости даёт 3.46:1 — ниже требуемых 4.5. Для
     второстепенного текста на светлом берём пепел, подмешанный к бордо на
     четверть: 4.87:1, тон тот же, из палитры не выходим. На тёмном пепел
     работает как есть (4.91:1 на черносливе). */
  --ash-ink: #7A6464;
  /* бордо, осветлённое до слоновой кости на 18% — для подзаголовков.
     Раньше это делалось через opacity, но по этому же свойству идёт
     каскад появления текста, и два движения дрались за одно значение. */
  --bordeaux-soft: #693C44;

  /* производные: только смеси перечисленных пяти */
  --ivory-dim:   rgba(246, 241, 232, 0.62);
  --ivory-faint: rgba(246, 241, 232, 0.16);
  --gold-faint:  rgba(201, 162, 77, 0.28);
  --bordeaux-8:  rgba(74, 20, 32, 0.08);
  --bordeaux-16: rgba(74, 20, 32, 0.16);
  --prune-40:    rgba(26, 11, 16, 0.40);

  /* шрифт */
  --display: 'Alumni Sans', 'Golos Text', system-ui, sans-serif; /* только RU-заголовки */
  --text:    'Golos Text', system-ui, -apple-system, sans-serif; /* весь текст + все KZ-заголовки */

  /* Кегли. Крупный кегль — пункты меню; он же держит контраст к тексту.
     Второй ограничитель 15vh обязателен: пять строк меню должны помещаться
     в экран по высоте, иначе телефон и WhatsApp внизу уезжают за край.
     Достигнутый контраст к тексту (16px): 1920x1080 — x10.1,
     1440x900 — x8.4, 390x844 — x3.3. Подробности в NOTES.md. */
  /* Множитель дисплейного кегля. На казахской версии заголовки набраны
     не Alumni Sans (в нём нет ә ғ қ ң ө ұ ү һ), а Golos — он заметно шире,
     и тот же кегль даёт вдвое более длинную строку. Множитель применяется
     ко ВСЕМ дисплейным величинам сразу, поэтому пропорции между ними
     не едут. Значение для kk стоит ниже, отдельным правилом. */
  --display-scale: 1;

  --fs-mega:   calc(clamp(3rem, min(15.2vw, 15vh), 12rem) * var(--display-scale));
  /* 6.9vw, а не 7.4: на 1440 заголовок первого экрана при 7.4vw
     опрокидывался с трёх строк на четыре, и между текстом и знаком
     повисал мёртвый коридор в четверть экрана */
  --fs-h1:     calc(clamp(2.9rem, 6.9vw, 7.5rem) * var(--display-scale));
  --fs-h2:     calc(clamp(2.5rem, 5.6vw, 5rem) * var(--display-scale));
  --fs-h3:     calc(clamp(1.7rem, 2.6vw, 2.4rem) * var(--display-scale));
  --fs-lead:   clamp(1rem, 1.3vw, 1.25rem);
  --fs-body:   1rem;
  --fs-small:  0.9375rem;
  --fs-micro:  0.8125rem;

  /* сетка */
  /* Поле от края экрана до контента. До 1744px это просто 4vw, дальше
     контейнер упирается в 1600px и поле растёт вместе с экраном. Шапка,
     углы и текст первого экрана берут ЭТО ЖЕ значение — иначе на широких
     экранах левая ось разъезжается: логотип на 72px, заголовки на 160px. */
  --gutter: max(clamp(20px, 4vw, 72px), calc((100vw - 1600px) / 2));
  /* Высота шапки. Значение здесь — запасное, на случай выключенного js:
     настоящее подставляет app.js замером после загрузки шрифтов. От него
     считаются и scroll-margin-top секций, и верхний отступ закреплённых
     сцен — раньше это были два разных числа «на глаз». */
  --topbar-h: 104px;
  --wrap: min(1600px, 100vw - 2 * clamp(20px, 4vw, 72px));
  --pad-section: clamp(80px, 9vw, 160px);
  --gap-xs: 16px;
  --gap-s:  20px;
  --gap-m:  24px;
  --gap-l:  30px;

  /* Одна ширина колонки-подписи на все секции и один зазор до содержания.
     Без этого правые колонки начинались на 595 / 619 / 417 / 434 / 476 —
     почти совпадения читаются как промах, а не как разные сетки. */
  --col-label: 34%;
  --col-gap: clamp(24px, 4.2vw, 70px);

  /* движение */
  --t-fast: 0.3s;
  --t-mid:  0.5s;
  --t-slow: 0.6s;
  --ease:   cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Казахская версия. Правило стоит после :root и на том же элементе
   (<html lang="kk">), поэтому переопределяет множитель, а все дисплейные
   величины пересчитываются сами.

   Почему не «font-size: 0.72em» на .display, как было раньше: em в
   font-size считается от РОДИТЕЛЯ, а не от собственного значения. Заголовок
   первого экрана лежит в колонке с обычным кеглем 16px — и 0.72em давало
   11.5px вместо 77. На казахской странице заголовок был мельче подзаголовка. */
:root[lang="kk"] { --display-scale: 0.78; }