/* tokens.css - дизайн-токены Persavel (concept §2 + phase1 §5). Единственный источник переменных. */

:root {
  /* ── Цвет ── */
  --bg:            #FBF6EE;  /* фон страницы, кремовый */
  --surface:       #F4ECE0;  /* карточки, песочный */
  --surface-2:     #EFE6D8;  /* вложенные поверхности */
  --ink:           #2C2723;  /* основной текст, угольный */
  --ink-2:         #6A6052;  /* второстепенный текст (на проде проверить контраст AA ≥4.5:1) */
  --ink-on-dark:   #FBF6EE;  /* текст поверх темного hero */
  --ink-on-dark-2: #D8CFC0;  /* второстепенный поверх темного */

  --cta:           #E8835A;  /* главный CTA, коралл */
  --cta-press:     #D9744B;  /* нажатие/hover CTA */
  --cta-ink:       #2C2723;  /* текст на CTA - угольный (контраст ~5.5:1 с --cta, WCAG AA; белый давал 2.68:1) */

  --sage:          #9CAE8E;  /* шалфей - иконки-кружки, бейджи доверия */
  --sage-bg:       #EAEFE3;  /* фон шалфейных кружков */
  --teal:          #3E6E72;  /* данные/радар/перцентили */
  --terra:         #B5613F;  /* акцент Б31.1, пометка «Пример отчета» (крупный текст/декор) */
  --terra-text:    #97492C;  /* терра для МЕЛКОГО текста/лейблов - затемнен до AA на кремовом */
  --line:          #E4D9C8;  /* границы ДЕКОРАТИВНЫЕ (разделители, карточки) - не для полей ввода */

  /* ── Поверхность относительно фона (ревизия 17.08.2026) ──
     Правило: заливка элемента никогда не совпадает с фоном, на котором он лежит.
     До правки чипы, вкладки и панели заливались напрямую (--bg на кремовой
     странице, --surface на песочной полосе) и совпадали с подложкой ноль в ноль:
     замер ΔE = 0 у гармошки вопросов на лендингах, у чипов категорий в FAQ, у
     колонки «Persavel не делает», у вкладок разбора и у метки «Скоро». Держался
     такой элемент на одной декоративной границе.
     Поэтому цвет задается не прямо, а через две переменные. Полоса, залитая
     песочным, переопределяет их у себя - и все, что внутри, переворачивается само,
     включая любой новый элемент. Замеры после правки: не ниже ΔE 4.1 к подложке. */
  --karta:          #FFFDF8;         /* светлая карточка: читается и на кремовом, и на песочном */
  --fon-tihiy:      var(--surface);  /* спокойная заливка: чип, вкладка, панель */
  --fon-navedeniya: var(--surface-2);/* заливка при наведении */
  --podsvetka-ssylki: var(--sage-bg); /* подложка текстовой ссылки при наведении */
  --field-border:  #8A7F6C;  /* граница интерактивных полей/чекбоксов - контраст ~3.4:1 на bg */

  --ok:            #3F683F;  /* успех формы */
  --err:           #97492C;  /* ошибка - затемненная терра (AA для текста; НЕ чистый красный - concept §2) */
  /* предупреждение (теплая охра, AA на кремовом) */

  /* ── Состояния (Б20) ── */
  --focus-ring:    #3E6E72;  /* видимый фокус (теал - контраст к кремовому и к коралл-CTA) */
  --focus-offset:  2px;
  --focus-width:   3px;
  --disabled-bg:   #E7DECF;
  --disabled-ink:  #A89C88;
  --overlay:       rgba(20,17,14,.55); /* подложка модалок/баннера */
            /* плейсхолдер загрузки */
               /* mask иконки тарифа - переопределяется inline на карточке */

  /* hero-градиент поверх фото (прозрачный → угольный к низу).
     Усилен к низу (нижние 30% почти непрозрачны) - гарантия контраста белого
     текста на любом фото и crop-позиции; финально проверять на реальных фото. */
  --hero-scrim: linear-gradient(180deg,
    rgba(20,17,14,0) 0%,
    rgba(20,17,14,.15) 38%,
    rgba(20,17,14,.55) 72%,
    rgba(20,17,14,.85) 100%);

  /* ── Типографика ── */
  /* до заливки woff2 работает системный фолбэк; self-host подключается в base.css.
     Ревизия (CLS): вторым номером стоит подложка с подогнанными метриками - тот же
     системный шрифт, но с принудительной шириной и ascent/descent своего шрифта,
     чтобы дозагрузка woff2 не двигала макет. Описание и числа - в base.css. */
  --sans: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Source Serif 4", "Source Serif 4 Fallback", "Source Serif 4 Fallback Noto", Georgia, "Times New Roman", serif;

  --fs-body:   1.0625rem; /* 17px */
  --fs-small:  0.9375rem; /* 15px */
  --fs-h1:     2.0625rem; /* 33px, мобайл (диапазон 29-34) */
  --fs-h2:     1.4375rem; /* 23px */
  --fs-h3:     1.1875rem; /* 19px */
  --fs-kicker: 0.8125rem; /* 13px, надписи/лейблы */

  --lh-body: 1.5;
  --lh-head: 1.2;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ── Геометрия ── */
  --radius-sm: 8px;
  --radius:    12px;   /* карточки, кнопки */
  --radius-lg: 16px;   /* hero-блоки, крупные карточки */
  --radius-pill: 999px;

  --tap-min: 48px;     /* мин. тач-зона вторичных контролов: 48-56px для аудитории 45+; WCAG-min 44px */
  --cta-h:   56px;     /* высота главного CTA */
  --paired-cta-width: 220px;
  --paired-cta-group-width: 452px; /* 2 × 220px + 12px gap */
  --dark-cta-border: rgba(255,255,255,.42);
  /* Фактическая высота шапки (замер в браузере). На лендингах шапка position:absolute
     и лежит НА хиро, поэтому ее высоту надо резервировать отступом сверху у hero__overlay,
     иначе на низких окнах верх заголовка уезжает под шапку. */
  --header-h: 73px;

  /* ── Ритм/отступы ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --container:  720px;  /* читаемая колонка (мобайл-first, hero, воронка) */
  --measure:    800px;  /* 2.1: мера сплошного текста на десктопе (комфорт 60-90 знаков) */
  --container-wide: 1120px; /* 2.1: широкий каркас лендингов - сетки/карточки/сравнение/галерея, вровень с шапкой и футером */
  --gutter:     1.25rem;/* боковые поля на мобайле */

  /* ── Прочее ── */
  --shadow-card: 0 1px 2px rgba(44,39,35,.04), 0 4px 16px rgba(44,39,35,.06);
  --z-header: 50;
  --z-banner: 60;
  --z-modal:  70;

  --motion: 1;  /* множитель анимаций (Б19: базовое значение обязательно, иначе calc невалиден) */
}/* На десктопе бургер скрыт, шапка ниже (замер: 64px против 73px) */

@media (min-width: 1024px) {
  :root { --header-h: 64px; }
}/* Уважать reduced-motion: гасим множитель */

@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0; }
}