/* Расту+ · шкалы. v1, 15-09-2026
   
   ВАЖНО: файл только ДОБАВЛЯЕТ. Здесь нет ни одного цвета и ни одного имени,
   которое уже стоит в :root страниц (--paper, --water, --honey, --ink, --line,
   --honey-ink, --card, --shadow и родня остаются как были). Подключать первым,
   до основного <style>:
   
       <link rel="stylesheet" href="assets/tokens.css">
   
   Подключение ничего не сдвигает: пока переменные не используются, страница
   выглядит ровно так же. */

:root{
  /* ── Отступы. Шаг 4px, дальше удвоение ──────────────────────────
     Заменяет россыпь ручных clamp(44px,5vw,80px): у каждой отбивки
     теперь есть имя, и одинаковые расстояния перестают быть «примерно
     одинаковыми». */
  --s1:4px;   --s2:8px;   --s3:12px;  --s4:16px;  --s5:24px;
  --s6:32px;  --s7:48px;  --s8:64px;  --s9:96px;  --s10:128px;

  /* Вертикальные отбивки секций: три размера вместо полутора десятков формул.
     Внутри clamp, чтобы на телефоне не разрывало. */
  --gap-s:clamp(var(--s6), 4vw, var(--s7));
  --gap-m:clamp(var(--s7), 6vw, var(--s9));
  --gap-l:clamp(var(--s8), 8vw, var(--s10));

  /* ── Типографика. Одна шкала на весь сайт ───────────────────────
     Крупные ступени с clamp: подобраны так, чтобы попадать в нынешние
     размеры, а не менять их. */
  --t-xs:13px;  --t-s:15px;  --t-m:17px;  --t-l:21px;
  --t-xl:clamp(23px, 2.2vw, 28px);
  --t-2xl:clamp(32px, 3.8vw, 52px);
  --t-3xl:clamp(34px, 6vw, 84px);

  --lh-tight:1.05;  /* крупные заголовки */
  --lh-head:1.15;   /* средние */
  --lh-text:1.6;    /* текст */
  --tracking-tight:-.01em;

  /* ── Форма ──────────────────────────────────────────────────────── */
  --r1:6px;  --r2:12px;  --r3:20px;  --r-full:999px;

  /* ── Глубина. Три уровня, не больше.
     Имена новые, существующий --shadow не трогаем: его можно оставить
     как есть или позже приравнять к --e2. */
  --e1:0 1px 3px rgba(10,90,130,.06);
  --e2:0 2px 6px rgba(10,90,130,.08), 0 12px 32px -12px rgba(10,90,130,.18);
  --e3:0 8px 20px -8px rgba(10,90,130,.22), 0 32px 64px -32px rgba(10,90,130,.30);

  /* ── Движение. Сейчас .16s ease вписан в каждую кнопку ───────────── */
  --ease:cubic-bezier(.2,.7,.2,1);
  --fast:140ms;
  --slow:320ms;
}

/* Уважаем системную настройку: у кого движение отключено, тому ничего
   не анимируем. Одно правило на весь сайт вместо проверки в каждом месте. */
@media (prefers-reduced-motion: reduce){
  :root{ --fast:0ms; --slow:0ms; }
}

/* ────────────────────────────────────────────────────────────────────
   ТАБЛИЦА ПЕРЕВОДА. Когда будем переводить существующее на шкалу,
   приводить к ближайшей ступени по этой таблице, а не на глаз:

     было                          стало
     8px,10px                      --s2
     12px,14px                     --s3
     16px,18px                     --s4
     20px,24px,26px                --s5
     28px,32px,36px                --s6
     40px,44px,48px                --s7
     56px,64px,72px                --s8
     80px,96px                     --s9
     clamp(44px,5vw,80px)          --gap-m
     clamp(64px,8vw,120px)         --gap-l
     font:400 clamp(34px,6vw,84px) --t-3xl
     font:400 clamp(32px,3.8vw,52px) --t-2xl
     font:400 clamp(23px,2.2vw,28px) --t-xl
     15px                          --t-s
     17px                          --t-m
     .16s ease                     var(--fast) var(--ease)
   ──────────────────────────────────────────────────────────────────── */
