/* ==========================================================================
   tokens.css — переменные дизайн-системы
   Источник значений: docs/introskop-tz-redizajn-v19-06092026.md, раздел 4.
   Значения перенесены буквально. Всё, что вычислено или добавлено сверх
   документа, помечено пометкой «производное» или «нет в документе».
   ========================================================================== */

:root {

  /* --- Палитра -------------------------------------------------------- */

  --ink:          #12161C;   /* Основной текст, тёмные секции */
  --ink-60:       #5A6472;   /* Вторичный текст, подписи */
  --paper:        #FFFFFF;   /* Основной фон */
  --paper-alt:    #F2F4F6;   /* Фон чередующихся секций, полей форм */
  --line:         #DDE2E8;   /* Границы, разделители, рамки таблиц */
  /* Акцент: кнопки, активные состояния, органика в схемах.
     Белый текст на этой заливке даёт 3.06:1 при норме 4.5:1 из раздела 9.
     Заказчик 21.08.2026 решил оставить: визуально устраивает. Отступление
     осознанное. Альтернатива, если решение пересмотрят, — тёмный текст
     --ink на той же заливке: 5.92:1, палитра при этом не меняется. */
  --scan-orange:  #E8721C;
  --scan-blue:    #1F6FB2;   /* Второй акцент: ссылки, металл в схемах */
  /* Статус «в наличии», успешная отправка.

     Значение углублено 24.08.2026: прежнее #2E9E5B давало на белом
     3.41:1 при норме 4.5 из раздела 9. Тон и насыщенность оставлены
     как были — 144°, 55%, — опущена только светлота, с 40% до 32%.
     Замер после правки: 5.05:1 на белом, 4.61:1 на подложке успеха.
     На тёмном фоне подвала токен не используется ни разу — проверено
     по всем трём местам: статус карточки, рамка успешного поля
     и знак на странице благодарности. */
  --signal:       #257E49;
  --warn:         #C4362B;   /* Ошибки валидации */

  /* Производное: «Hover — затемнение на 8%» (раздел 4, «Кнопки»).
     #E8721C × 0.92 = #D5691A. Тем же правилом получен hover синего. */
  --scan-orange-hover: #D5691A;
  --scan-blue-hover:   #1C66A4;

  /* Нет в документе. Нужны для состояний, которые документ требует,
     но не окрашивает: disabled-кнопка, фон ошибки, тёмная секция. */
  --ink-on-dark:     #FFFFFF;   /* Текст на тёмной секции */
  --ink-60-on-dark:  #9AA4B2;   /* Вторичный текст на тёмной секции */
  --line-on-dark:    #2A313B;   /* Разделители внутри тёмной секции */
  --disabled-bg:     #E6E9ED;   /* Фон заблокированной кнопки и поля */
  --disabled-ink:    #9AA4B2;   /* Текст заблокированного элемента */
  --warn-bg:         #FBF0EF;   /* Подложка поля с ошибкой */
  --signal-bg:       #EDF7F1;   /* Подложка успешного состояния */

  /* --- Типографика ---------------------------------------------------- */

  /* Заголовки — Onest (600, 700). Текст — Golos Text (400, 500).
     Технический — JetBrains Mono (400, 500). Файлы: assets/fonts/. */
  --font-heading: 'Onest', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-text:    'Golos Text', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fw-regular:  400;
  --fw-medium:   500;   /* Golos Text, JetBrains Mono */
  --fw-semibold: 600;   /* Onest */
  --fw-bold:     700;   /* Onest */

  /* Шкала. Базовые значения — мобильные (360), десктопные подставляются
     с 768 px ниже. В документе шкала задана парой «desktop / mobile». */
  --fs-h1:         32px;
  --fs-h2:         26px;
  --fs-h3:         20px;
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-mono-price: 20px;

  /* Нет в документе. Абзац-лид: крупнее основного текста, но не заголовок.
     В шкале между body 17/16 и H3 24/20 ступени нет, а она нужна: в блоке
     «Технику обслуживаем сами» вывоз и утилизация — отдельная услуга,
     и одинаковым с соседним абзацем кеглем она в нём терялась. Полная
     ступень H3 при этом читалась заголовком — правка 05.09.2026.
     Пара значений задана по правилу шкалы: мобильное здесь, десктопное
     ниже, на 768. */
  --fs-lead:       18px;

  --lh-heading: 1.15;
  --lh-text:    1.55;

  --measure: 72ch;   /* Длина строки в тексте — не более 72 символов */

  /* --- Сетка и пространство ------------------------------------------- */

  --container:     1280px;
  --container-pad: 16px;   /* мобильные поля; с 768 px — 32 px */

  --grid-columns: 12;
  --grid-gap:     24px;

  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  --section-gap: 56px;   /* мобильные; с 768 px — 96 px */

  /* --- Компоненты ------------------------------------------------------ */

  --radius:       4px;   /* Кнопки. Без градиентов и теней */
  --border-width: 1px;   /* Рамки карточек, полей, таблиц */
  --focus-width:  2px;   /* «focus (видимая рамка 2 px)» */
  --focus-offset: 2px;   /* Нет в документе */

  --btn-height:  48px;   /* мобильные; с 768 px — 52 px */
  --tap-min:     44px;   /* Минимальная площадь кликабельного элемента */

  --accent-bar:  3px;    /* Левая полоса плашки-уточнения */
  --card-ratio:  4 / 3;  /* Фото в карточке оборудования */

  --fs-accordion: 18px;  /* Вопрос в аккордеоне FAQ, начертание 500 */

  /* Нет в документе. Сноска про калькулятор под селектором формы: задание
     05.09.2026, раздел 1, требует ступень мельче прежнего --fs-small.
     Ниже small шкала документа не идёт, поэтому значение своё. Не пара,
     а одно число на все ширины — как у --fs-accordion: пара дала бы
     на мобильном 12 px, мельче всего, что есть в дизайн-системе,
     а сноска набрана сплошной строкой. */
  --fs-note:      13px;

  --input-font-size: 16px;   /* Не меньше 16 px, иначе iOS зумит при фокусе */

  /* Нижняя закреплённая панель мобильного: «высота 56 px», раздел 5.
     Тем же значением резервируется место под панель у body. */
  --bottom-bar-height: 56px;

  /* --- Движение -------------------------------------------------------- */

  --motion-duration: 200ms;   /* Появление секций при скролле */
  /* Нет в документе. Наведение на карточку: рамка и кнопка внутри неё
     меняют цвет одновременно, и на общей длительности 200 мс движение
     читалось вяло. Отдельный токен, а не число в правиле: рамка
     и кнопка — разные компоненты, а идти должны в ногу. */
  --motion-hover:    150ms;
  --motion-shift:    12px;    /* Сдвиг при появлении */
  --motion-easing:   ease-out; /* Нет в документе */

  /* --- Тёмные блоки ---------------------------------------------------- */

  /* Затемнение фонового фото. На первом экране хаба больше не применяется:
     правкой 8.1 пункт 7 он переведён в две колонки на светлом фоне, текста
     поверх снимка нет. Токен оставлен намеренно — ТЗ требует сохранить его
     для фоновых изображений на других страницах.

     История значения: раздел 6 ТЗ на редизайн задавал 45%, при нём контраст
     белого текста был 4.15 / 3.63 / 4.04 против нормы 4.5:1, и значение
     поднимали до 60% (замер 6.31 / 5.61 / 6.17). Именно неразрешимость
     этого компромисса и привела к отказу от текста поверх фото. */
  --hero-overlay: 60%;
}

/* Брейкпоинты: 360 (база), 768 (планшет), 1280 (десктоп).
   В медиазапросах переменные не работают, значения записаны числами. */

@media (min-width: 768px) {
  :root {
    --fs-h1:         48px;
    --fs-h2:         34px;
    --fs-h3:         24px;
    --fs-body:       17px;
    --fs-small:      15px;
    --fs-mono-price: 22px;
    --fs-lead:       20px;

    --container-pad: 32px;
    --section-gap:   96px;
    --btn-height:    52px;
  }
}