/* 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;  /* границы ДЕКОРАТИВНЫЕ (разделители, карточки) — не для полей ввода */
  --field-border:  #8A7F6C;  /* граница интерактивных полей/чекбоксов — контраст ~3.4:1 на bg (Геша п.1: ≥3) */

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

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

  /* hero-градиент поверх фото (прозрачный → угольный к низу).
     Усилен к низу (нижние 30% почти непрозрачны) — гарантия контраста белого
     текста на любом фото и crop-позиции (Геша п.12; финально проверять на реальных фото). */
  --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 */
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Source Serif 4", 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;     /* мин. тач-зона вторичных контролов (Геша п.6: 48–56 для 45+; WCAG-min 44) */
  --cta-h:   56px;     /* высота главного CTA */

  /* ── Ритм/отступы ── */
  --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) */
  --container-wide: 1080px; /* широкий контейнер для грид-блоков (карточки, тарифы) на десктопе */
  --gutter:     1.25rem;/* боковые поля на мобайле */

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

  --motion: 1;  /* множитель анимаций (Б19: базовое значение обязательно, иначе calc невалиден) */
}

/* Уважать reduced-motion: гасим множитель */
@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0; }
}