/* Performance Detailing · токены
 *
 * Один источник правды для цвета, шрифта, шага и движения.
 * Ни одного сырого значения в site.css: только var(--...).
 *
 * ВСЁ НИЖЕ СНЯТО С zenvoautomotive.com. Владелец назвал этот сайт
 * первым и единственным ориентиром за девять версий: «неплохо
 * выглядит». Поэтому разобран он по коду, а не по впечатлению.
 * Замеры на 1440 px:
 *
 *   h1            72 px, ВЕС 300, интерлиньяж 74.88 (1.04),
 *                 трекинг -1px, ОБЫЧНЫЙ РЕГИСТР, не капс
 *   h2            46-56 px, вес 300, интерлиньяж 1.05, трекинг -0.5px,
 *                 в промо-блоках ПО ЦЕНТРУ
 *   h3            24 px, вес 200
 *   текст         14 px при интерлиньяже 24, то есть 1.71
 *   кнопки        высота 43-55, вес 300-400, фон ПРОЗРАЧНЫЙ,
 *                 рамка 1px, радиус 40px. Залитых кнопок нет вообще
 *   радиусы       40px на пилюлях (33 элемента), 20px и 15px на блоках
 *   отступ секции 120px сверху и снизу
 *   контейнер     1152 px внутри окна 1440
 *
 * ЧТО ИЗ ЭТОГО СЛЕДУЕТ. Прошлая версия была ровно наоборот: заголовки
 * КАПСОМ весом 600 шрифтом Tektur, залитая зелёная пилюля, радиусы
 * 8px, контейнер 1440. Здесь: обычный регистр, вес 300, пилюли
 * контуром, радиусы 40 и 20, контейнер 1152.
 *
 * Gotham у них лицензионный. Вместо него Geologica: у неё есть веса
 * от 100 и настоящая кириллица. Tektur убран - он квадратный техно
 * и в лёгком весе обычным регистром выглядел бы неуместно.
 *
 * ЗЕЛЁНЫЙ ОСТАВЛЕН ОДИН И ОДИН РАЗ. У Zenvo залитых кнопок нет вовсе,
 * но зелёный #00FF15 это их фирменный цвет с их же сайта, а запись
 * в боте это то, за что платят. Одна залитая пилюля в герое, все
 * остальные контурные.
 */

:root {
  /* --- цвет. Бумага почти белая: чистый oklch(100% 0 0) читается
     плоско, поэтому 99.3% с подтоном к фирменному зелёному. */
  --color-paper:      oklch(99.3% 0.002 143);
  --color-paper-2:    oklch(96.5% 0.003 143);
  --color-paper-3:    oklch(93% 0.004 143);
  --color-rule:       oklch(87% 0.005 143);
  --color-paper-inv:  oklch(17% 0.008 143);

  /* Три ступени текста. Ни одна не ниже 4.5:1 к бумаге: neutral
     на 45% даёт 4.9, на 48% давал бы 4.4 и это уже нарушение. */
  --color-ink:        oklch(18% 0.008 143);
  --color-muted:      oklch(35% 0.006 143);
  --color-neutral:    oklch(45% 0.008 143);
  --color-ink-inv:    oklch(97% 0.004 143);
  --color-muted-inv:  oklch(78% 0.006 143);

  /* Акцент ровно их: rgb(0, 255, 21). Живёт фоном ОДНОЙ кнопки
     с чёрным текстом. Текстом на белом запрещён: 1.4:1. */
  --color-accent:      #00FF15;
  --color-accent-hi:   #00E613;
  --color-accent-ink:  oklch(14% 0.010 143);
  --color-accent-text: oklch(46% 0.17 145);
  --color-focus:       oklch(46% 0.17 145);

  /* --- шрифт. Geologica на заголовки в лёгком весе, Golos Text
     на текст. У ориентира заголовки идут весом 300 и 200. */
  --font-display: "Geologica", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Golos Text", "Helvetica Neue", Arial, sans-serif;
  --вес-заголовка: 300;

  /* Трекинг заголовков: у ориентира -1px на 72 px и -0.5px на 52,
     то есть примерно -0.014em и -0.01em. */
  --track-display: -0.014em;
  --track-tight:   -0.01em;
  --track-eyebrow: 0.14em;

  /* --- шаг. 4 pt. Верхняя ступень 7.5rem = 120 px: ровно отступ
     секции у ориентира. */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 7.5rem;

  /* Контейнер 72rem = 1152 px: ровно как у ориентира внутри 1440. */
  --контейнер: 72rem;
  --page-gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 62ch;
  --tap-min: 2.75rem;

  /* --- кегли. Заголовок 64 и 52, текст 15. У ориентира текст 14,
     но кириллица в Golos Text на 14 мельчит, поэтому 15. */
  --text-eyebrow: 0.6875rem;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-md:   0.9375rem;
  --text-lg:   1.125rem;
  --text-xl:   1.5rem;
  --text-price:   clamp(1.5rem, 2.6vw, 2rem);
  --text-price-s: 1.25rem;
  --text-2xl:  clamp(1.75rem, 3.4vw, 3.25rem);
  /* Потолок 3.5rem = 56 px, а не 4rem. На 64 px заголовок в колонке
     543 px ломался на ТРИ строки, а у ориентира h1 занимает две:
     32 знака при кегле 56 дают 19 знаков на строку. */
  --text-3xl:  clamp(2.25rem, 4.4vw, 3.5rem);
  /* Интерлиньяж заголовка 1.06, у ориентира 1.04. Ниже нельзя:
     в русском тексте Ё и Й выше прописной, и им срезает верх. */
  --инт-заголовка: 1.06;
  --инт-текста: 1.7;

  /* --- линии и углы. Радиусы ориентира: 40 на пилюлях, 20 на блоках. */
  --rule-hair: 1px;
  --radius-pill: 40px;
  --radius-card: 20px;
  --radius-chip: 8px;

  --тень-карточки: 0 2px 16px oklch(18% 0.008 143 / .12);
  --color-подложка: oklch(14% 0.01 143 / .62);

  /* --- движение. Три именованных плавности, три длительности. */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* --- слои. Никаких 9999. */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 200;
}

/* Чтобы --делитель можно было АНИМИРОВАТЬ, а не только присваивать,
   переменная должна быть объявлена с типом. Без @property браузер
   считает её строкой и намёк у ползунка просто не проигрывается. */
@property --делитель {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}