/* ============================================================
   tokens.css — значения дизайн-системы Wavesett. 2026-09-25.
   Единственное место, где живут числа и цвета. tkan.css и inner.css
   берут отсюда всё, кроме формул раскладки и значений компонентов,
   которые названы в design/02_foundation/foundation.md §3, §16.

   Имя здесь = code syntax переменной в Figma. Меняется значение —
   в одной сессии правится этот файл, переменная Figma и строка
   в foundation.md. Проверка — python execution/ds_check.py.

   Подключается первым, до tkan.css.
   ============================================================ */

:root {
  /* --- Цвет: примитивы ------------------------------------------ */
  --c-black: #000000;
  --c-white: #ffffff;
  --c-grey-bg: #e5e5e5;
  --c-grey-ink: #444444;
  --c-grey-on-black: #9aa0a6;
  /* Жёлтый снят с образца Яна: теплее и мягче кислотного #fff100. */
  --yellow: #f2e23c;
  --mint:   #d1ffca;

  /* --- Цвет: смысл. Значения по умолчанию — фон «серый».
     Дальше --bg, --fg, --mute, --ln ведёт motion.js по прокрутке,
     поэтому страница обязана быть читаемой и без единого скрипта. --- */
  --bg:   var(--c-grey-bg);
  --fg:   var(--c-black);
  --mute: var(--c-grey-ink);
  --ln:   rgba(0,0,0,.22);
  --fill-subtle: color-mix(in srgb, var(--fg) 8%, transparent);
  --on-accent: var(--c-black);
  /* Кнопка: тёмная на сером и мятном, фирменная на белом и чёрном.
     Режим ставит motion.js атрибутом html[data-pill]. */
  --action-bg: var(--c-black);
  --action-fg: var(--c-white);

  /* --- Фоны глав. Глава задаёт только фон и кнопку: <section class="ch"
     data-ground="…">. Текст, приглушённый и линию motion.js считает сам
     по яркости фона — так контраст держится и на середине перехода.
     Концы этой формулы — ниже, --*-on-light и --*-on-dark. --- */
  --ground-grey:  var(--c-grey-bg);
  --ground-white: var(--c-white);
  --ground-black: var(--c-black);
  --ground-mint:  var(--mint);
  /* Кнопка на фоне главы: dark — чёрная, brand — жёлтая. */
  --ground-grey-pill: dark;
  --ground-white-pill: brand;
  --ground-black-pill: brand;
  --ground-mint-pill: dark;
  --fg-on-light: var(--c-black);
  --fg-on-dark: var(--c-white);
  --mute-on-light: var(--c-grey-ink);
  --mute-on-dark: var(--c-grey-on-black);
  --ln-on-light: rgba(0,0,0,.22);
  --ln-on-dark: rgba(255,255,255,.26);

  /* --- Сцена «нити». Линии интерфейса и нити на фоне — один язык:
     цвет нитей идёт за фоном по той же яркости, что текст и --ln,
     акцент — тот же --yellow. Числа читает threads.js при старте. --- */
  --thread-count: 46;          /* на экране уже 900 рисуется каждая вторая */
  --thread-width: 1;
  --thread-width-narrow: .8;
  --thread-accent-width: 1.4;  /* жёлтая нить поверх полосы */
  --thread-knot-width: 1.2;    /* узел */
  --thread-branch-width: 1.3;  /* ветки вниз — сейчас не стоят нигде */
  --thread-road-width: 2.5;    /* дорожка, что приходит в кнопку */
  --thread-road-width-narrow: 1.6;
  --thread-dim: .55;           /* общая приглушённость поля */
  --thread-dim-narrow: .42;

  /* --- Шрифты ---------------------------------------------------- */
  --display:"RCond","Roboto Condensed","Arial Narrow",sans-serif;
  --text:"Geist",-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"GeistMono",ui-monospace,Consolas,monospace;

  /* --- Размер шрифта: 15 ступеней и 2 особых ---------------------- */
  --fs-1:  clamp(10px,.78vw,13px);
  --fs-2:  clamp(11px,.85vw,14px);
  --fs-3:  clamp(12px,.9vw,15px);
  --fs-4:  clamp(13px,.95vw,16px);
  --fs-5:  clamp(14px,1vw,17px);      /* мелкий текст: списки, кнопка */
  --fs-6:  clamp(15px,1.05vw,18px);   /* основной текст */
  --fs-7:  clamp(15px,1.3vw,24px);
  --fs-8:  clamp(17px,1.35vw,24px);   /* лид */
  --fs-9:  clamp(17px,1.5vw,26px);
  --fs-10: clamp(17px,1.7vw,28px);
  --fs-11: clamp(18px,1.95vw,32px);
  --fs-12: clamp(20px,2.35vw,40px);
  --fs-13: clamp(22px,3vw,54px);
  --fs-14: clamp(30px,min(4.6vw,8vh),84px);   /* заголовок блока */
  --fs-15: clamp(34px,6vw,104px);             /* h1 внутренних страниц */
  /* Зависят и от высоты окна: первый экран и меню обязаны влезть. */
  --fs-hero: clamp(36px,min(6.4vw,9.4vh),118px);
  --fs-menu: clamp(26px,min(9vw,7.4vh),56px);
  /* h1 «Вопросов»: считается от ширины колонки 1/6, а не окна — на 1920
     строка иначе шире колонки. Работает с 900, ниже — как у всех h1. */
  --fs-h1-narrow: clamp(34px,4.4vw,78px);

  /* --- Межстрочный и разрядка ------------------------------------- */
  --lh-tight: .88;
  --lh-snug: .95;
  --lh-heading: 1;
  --lh-quote: 1.3;
  --lh-lead: 1.45;
  --lh-body: 1.55;
  --ls-tight: -.028em;
  --ls-display: -.02em;
  --ls-mono: .02em;
  --ls-mono-wide: .05em;
  --ls-caps: .06em;

  /* --- Отступы: фиксированные — внутри мелких деталей ------------- */
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  /* --- Отступы: резиновые — между блоками. f2 f4 f6 f9 f11 = .mt-3…7 */
  --sp-f0:  clamp(6px,.6vw,10px);
  --sp-f1:  clamp(8px,.8vw,14px);
  --sp-f2:  clamp(10px,1vw,16px);
  --sp-f3:  clamp(12px,1.2vw,20px);
  --sp-f4:  clamp(14px,1.4vw,24px);
  --sp-f5:  clamp(16px,1.6vw,28px);
  --sp-f6:  clamp(18px,1.8vw,30px);
  --sp-f7:  clamp(18px,2vw,34px);
  --sp-f8:  clamp(22px,2.2vw,38px);
  --sp-f9:  clamp(24px,2.4vw,42px);
  --sp-f10: clamp(26px,3vw,52px);
  --sp-f11: clamp(34px,3.4vw,62px);

  /* --- Раскладка: от высоты окна, в лесенку не сливаются ---------- */
  --pad-y: clamp(64px, 11vh, 150px);
  --head-pad: clamp(14px, 2vw, 26px);
  --hero-top: clamp(96px,13vh,150px);
  --hero-inner-top: clamp(120px, 17vh, 210px);
  --hero-inner-bottom: clamp(40px, 6vh, 80px);
  --menu-top: clamp(72px,12vh,140px);
  --menu-bottom: clamp(32px,6vh,80px);
  --menu-gap: clamp(18px, 3vh, 34px);
  --menu-list-gap: clamp(10px,1.6vh,20px);
  --menu-cta: clamp(10px,2vh,24px);
  --foot-top: clamp(48px,7vh,96px);
  --foot-bottom: clamp(28px,4vh,56px);
  --route-lift: clamp(72px, 18vw, 320px);

  /* --- Сетка и ширины --------------------------------------------- */
  --gutter: clamp(20px, 4vw, 72px);
  --col-gap: clamp(16px, 2vw, 34px);
  --max: 1560px;
  --tap: 44px;
  --measure: 52ch;
  --measure-wide: 62ch;
  --measure-answer: 68ch;
  --measure-form: 620px;
  /* Ширины перестройки — в @media числами, других нет:
     560 · 760 · 900 · 1100 (и 1200 · 1500 только у закреплённых потоков). */

  /* Безопасная зона экрана. С viewport-fit=cover страница занимает весь
     экран айфона целиком — вместе с полосой под чёлкой и под нижним
     ярлыком. Значит каждый отступ, который обязан отодвинуть текст от
     края, считает её сам. На экране без выреза все четыре — нули, и
     ничего не меняется. Ян 2026-09-21: «там, где чёлка, текст
     обрывается и не заходит выше». */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  /* Боковое поле: своё для каждой стороны — в горизонтальном положении
     вырез с одной стороны, и одинаковые поля увели бы страницу вбок. */
  --side-l: max(var(--gutter), var(--safe-l));
  --side-r: max(var(--gutter), var(--safe-r));

  /* --- Радиусы: ноль, мягкий, пилюля ------------------------------ */
  --r-soft: 12px;
  --r-pill: 999px;

  /* --- Линии: коробок нет, держат линии --------------------------- */
  --st-hair: 1px;
  --st-base: 2px;
  --st-accent: 3px;
  --focus-offset: 3px;

  /* --- Прозрачность ----------------------------------------------- */
  --o-dim: .3;
  --o-hint: .38;
  --o-link-hover: .65;
  --o-button-hover: .85;

  /* --- Слои ------------------------------------------------------- */
  --z-scene: 0;
  --z-content: 1;
  --z-menu: 4;
  --z-head: 5;
  --z-skip: 6;              /* «Перейти к содержимому» — поверх шапки */

  /* --- Движение --------------------------------------------------- */
  --dur-hover: .2s;
  --dur-fast: .25s;
  --dur-base: .3s;
  --dur-appear: .4s;
  --dur-move: .45s;
  --dur-recolor: .5s;
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-overshoot: cubic-bezier(.34,1.3,.64,1);
  --press-scale: .97;        /* кнопка в момент нажатия */
}

html[data-pill="brand"] {
  --action-bg: var(--yellow);
  --action-fg: var(--c-black);
}