/*
  Дизайн-токены проекта. Источник — значения из Figma (пиксель-в-пиксель).
  Пополняется по мере вёрстки новых блоков. Не хардкодить эти значения
  в компонентах — только через var(--...).
*/
:root {
  /* Цвет: текст / фон */
  --color-ink: #0a1621; /* основной тёмный текст */
  --color-ink-muted: rgba(10, 22, 33, 0.5); /* неактивные пункты меню и т.п. */
  --color-surface: #ffffff;
  --color-surface-muted: #f5f5f7;

  /* Цвет: акцент бренда */
  --color-accent: #da394a;

  /* Цвет: иконки-пиктограммы (двухцветные, primary+accent) */
  --color-icon-primary: #415567;
  --color-icon-badge-bg: #e7e6ef;

  /* Цвет: блок «Не просто поставка» (value-prop) */
  --color-value-prop-muted: #949494;

  /* Цвет: тёмный нейтральный заголовок (без синевы --color-ink) —
     используется в жирной части заголовка value-prop и в заголовках
     карточек «6 шагов работы» (совпадает в обоих местах, не «похожий») */
  --color-heading-dark: #1f1f1f;
  --color-heading-mid: #414141;

  /* Цвет: плашки «6 шагов работы» (159:3336..3418, продолжение value-prop) */
  --color-step-card-bg: #f8f8fa;
  --color-step-divider: rgba(0, 0, 0, 0.1);
  --shadow-step-card: 0 13px 33.5px rgba(0, 0, 0, 0.04);

  /* Цвет: сквозной CTA-блок консультации (используется на нескольких страницах) */
  --color-cta-bg: #f6f5f8; /* важно: НЕ путать с --color-solutions-bg #f5f5f8 — другой блок, другой оттенок */
  --color-cta-ink: #1e1e1e;
  --color-cta-pill-bg: #efedf3; /* сплошной, не rgba: плашки-фичи могут наезжать на фото на "ноутбучных" ширинах — сквозь прозрачность было бы видно машину под плашкой */

  /* Цвет: тёмная кнопка (градиент) */
  --color-dark-800: #232b37;
  --color-dark-900: #121a24;

  /* Цвет: футер (тёмная карточка) */
  --color-footer-bg-1: #161d23;
  --color-footer-bg-2: #1e2830;
  --color-footer-ink: #b4c5d6;
  --color-footer-ink-tagline: rgba(180, 197, 214, 0.6);
  --color-footer-ink-muted: rgba(180, 197, 214, 0.4);

  /* Цвет: слайдер «Решения под ключ» (свой тёмный нейтральный тон, отличный от --color-ink) */
  --color-slider-ink: #1f1f1f;
  --color-slider-border: #e6e6e6; /* обводка чипов */
  --color-slider-pill-border: #ededed; /* обводка кнопки «Подробнее» */
  --color-slider-pill-border-hover: #d0d0d0; /* обводка кнопки «Подробнее» на ховере (правки 2026-08-05, п.5) */
  --color-slider-dot: #e1e1e8; /* неактивная точка пагинации */
  --color-solutions-bg: #f5f5f8; /* фон секции "Решения под ключ" (важно: не путать с --color-surface-muted #f5f5f7) */
  --color-slider-accent-mobile: #eb384b; /* моб. подзаголовок слайдера — на 1 шаг отличается от --color-accent #da394a, не совпадение, заведён отдельно */
  --color-slider-ink-mobile: #1e1e1e; /* моб. подзаголовок слайдера — на 1 шаг отличается от --color-slider-ink #1f1f1f */

  /* Размеры карточки слайдера (используются и в JS для расчёта позиции — держать в синхроне) */
  --slider-card-width: 300px;
  --slider-card-active-width: 335px;
  --slider-card-height: 480px;
  --slider-card-active-height: 536px;
  --slider-track-gap: 20px;
  --slider-track-pad-y: 40px;

  /* Типографика */
  --font-base: "Inter", "Helvetica Neue", Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --fs-nav: 12px;
  --fs-button: 12px;
  --fs-button-lg: 14px;
  --fs-footer-heading: 13px;
  --fs-footer-body: 12px;
  --fs-h1: 44px;
  --lh-h1: 60px;
  --fs-hero-subtitle: 15px;
  --lh-hero-subtitle: 25px;
  --fs-trust-title: 16px;
  --lh-trust-title: 21px;
  --fs-trust-text: 13px;
  --lh-trust-text: 20px;
  --fs-h2: 44px;
  --lh-h2: 60px;
  --fs-section-subtitle: 15px;
  --lh-section-subtitle: 25px;
  --fs-eyebrow: 12px;
  --fs-value-prop-heading: 35px;
  --lh-value-prop-heading: 55px;
  --fs-body: 15px;
  --lh-body: 25px;
  --fs-step-title: 19px;
  --lh-step-title: 25px;
  --fs-step-desc: 13px;
  --lh-step-desc: 23px;

  /* Радиусы */
  --radius-pill: 999px;
  --radius-badge: 5px;
  --radius-card: 25px;
  --radius-trust-bar: 40px;

  /* Кнопки */
  --button-gap: 3px;

  /* Хедер */
  --header-height: 88px;
  --header-pad-left: 40px;
  --header-pad-right: 20px;

  /* Футер */
  --footer-card-margin: 30px;
  --footer-card-pad-x: 45px;
  --footer-card-pad-top: 35px;
  --footer-card-pad-bottom: 46px;

  /* Герой + trust-bar (главная страница) */
  --hero-image-height: 925px; /* высота фонового фото */
  --hero-height: 958px; /* фото + нижняя часть trust-bar, которая выступает за фото */
  --hero-trust-bar-height: 210px;

  /* Контейнер страницы (макет 1440px) */
  --content-width: 1290px; /* текст, заголовки, буллиты, сетки карточек — не сжимается/не растёт, всегда по центру */
  --wide-content-width: 1380px; /* «плашка на всю ширину» — единый крупный карточный блок (CTA, футер, чек-лист, цитата-с-фото), не сетка из нескольких карточек и не фоновое фото — третья, промежуточная величина между --content-width и --bleed-width */
  --bleed-width: 1700px; /* Настоящие фоновые фото (hero-секций, value-prop, product-samples) и карусели-треки solutions-slider/product-related (растягиваются до кэпа сами, см. эти файлы). Остальные карточки/CTA — всегда --content-width, даже если выглядят как «подложка». */
  --color-page-bg: #f5f5f8; /* фон body + цвет, в который уходит боковой градиент под-контентных фото */
  --page-gutter: 40px;

  /* Каталог оборудования (159:4594) — фильтр слева + сетка карточек справа */
  --catalog-filter-width: 290px;
  --catalog-filter-gap: 35px;
  --color-filter-thumb-bg: #f9faff; /* плашка-превью уровня 2 (Таблетки/Капсулы) */
  --color-filter-item-bg: #f1f2fa; /* плашка пункта уровня 3 */
  --color-filter-item-border-active: #dbdff0;
  --color-filter-count-bg: rgba(229, 230, 240, 0.6); /* счётчик неактивного пункта уровня 3 */
  --color-filter-count-ink: #7a7f97;
  --color-filter-chevron-mobile: #bdc0ce; /* моб. фильтр (226:4998) — закрытое состояние шеврона светлее --color-ink, сверено через get_design_context */

  /* Продуктовая страница (159:3813) */
  --color-ink-breadcrumb: #383846; /* хлебные крошки — свой нейтральный тон, отличный от --color-ink */
  --color-card-corner: #e3e3e3; /* декоративные уголки карточек «Габаритной схемы» */
  --color-divider: rgba(0, 0, 0, 0.05); /* тонкие линии-разделители между секциями (159:3917/3918) */
  --radius-drawing: 50px; /* скругление чертежа в «Габаритной схеме» (159:3919) — своё, отличное от --radius-card */
  /* Круглые кнопки навигации слайдеров — общие для главной («Решения под
     ключ») и продуктовой («Другие решения»): обе стали белыми с серой
     стрелкой (правки 2026-08-05, п.6). До этого у каждого слайдера были
     свои цвета, а у «Других решений» левая и правая кнопки различались. */
  --color-slider-nav-arrow: #bababa; /* стрелка кнопок слайдеров, базовое состояние */
  --shadow-slider-nav: 0 10px 30px rgba(103, 103, 103, 0.2); /* #676767 20%, X0 Y10 Blur30 Spread0 */
  --color-drawing-border: #e8e8e8; /* тонкая обводка чертежа (159:3919) — не белая толстая, реальная линия из макета */
  --color-line-composition-arrow: #bababa; /* стрелка-разделитель «Состава линии» (312:3304). Значение совпадает с --color-slider-nav-arrow, но токен свой: блоки разные, и правка цвета кнопок слайдера не должна молча перекрашивать этот разделитель */

  /* Страница «Сервисное сопровождение» (159:5258) */
  --color-card-tint-1: #efeff6; /* градиентный фон карточек-фото (support-highlight/app-cta), общий для обеих, угол — свой у каждой */
  --color-card-tint-2: #ececf4;
  --color-quote-bar-support: #e3e3f1; /* акцентная полоса цитаты в блоке "После поставки..." */
  --color-quote-bar-app: #c8c8d9; /* акцентная полоса цитаты в блоке "Удобный канал связи..." */
  --color-checklist-bg: #1f2227; /* тёмная карточка-чеклист */
  --color-checklist-heading: #dfe7f3;
  --color-checklist-item: #9ba9c0;
  --color-support-card-bg: #f0f0f6; /* карточки "Поддержка в эксплуатации" */

  /* Страница «Контакты» (159:5449). Радиус/фон/тень карточек — общие
     .card-like токены, уже переиспользуемые в других блоках проекта
     (--radius-trust-bar, --color-step-card-bg, --shadow-step-card), не
     заводим дубликаты под новыми именами. */
  --color-contact-pill-bg: #f0f0f6; /* плашка телефон/email внутри карточки реквизитов */
  --color-contact-label: #8f8f9c; /* подписи "Телефон:"/"Адрес:" и лейблы строк реквизитов */
  --color-contact-dash: #d2d2d8; /* пунктирная линия-разделитель в строках реквизитов */
  --color-contact-map-placeholder: #eceef3; /* фон карточки карты до инициализации Яндекс.Карт JS API */
  --fs-contact-value: 18px; /* значение телефона/email/адреса в плашках карточки реквизитов */
  --lh-contact-requisite: 19px; /* высота строки в списке "Наименование/ИНН/КПП/..." */

  /* Модалка «Заявка на консультацию» (225:2356 и соседние состояния) */
  --color-modal-field-bg: #f8f8f8; /* фон полей ввода/селекта/телефона */
  --color-modal-error-bg: rgba(218, 57, 74, 0.04); /* фон поля с ошибкой валидации */
  --color-modal-error-label: #a82e3a; /* цвет лейбла невалидного поля */
  --color-modal-checkbox-bg: #f8f6f6; /* фон неотмеченного чекбокса */
  --color-modal-consent-ink: #6a7784; /* обычный текст чекбоксов согласия */
  --color-modal-dropdown-hover: #f9f8f8; /* фон пункта дропдауна под курсором */
  --color-modal-scrollbar-track: #f7f6f6;
  --color-modal-scrollbar-thumb: #e1e1e1;
  --color-modal-flag-border: rgba(10, 22, 33, 0.12); /* обводка флагов в дропдауне стран — часть флагов СНГ белая по краю, сольётся с полем без неё */
  --color-modal-close-bg: #f6f5f7; /* фон кнопки закрытия (правка 14.3) — НЕ путать с похожим --color-surface-muted #f5f5f7, разница в 1 unit не случайна */
  --color-modal-close-stroke: #cacaca; /* цвет "X" кнопки закрытия (правка 14.3) */
  --radius-modal-field: 15px;
  --radius-modal-dropdown-item: 10px;

  /* Мобильное бургер-меню (226:4032) */
  --color-mobile-nav-item-bg: #f9f9fc;

  /* Мобильная адаптация страницы «Сервисное сопровождение» (226:5709) —
     фейды фото под текстовыми карточками photo-quote. Близкие к
     --color-card-tint-1/2, но не идентичные — по установленной в проекте
     практике заводим отдельные токены, не переиспользуем «похожий». */
  --color-photo-quote-fade-support: #eeeef5;
  --color-photo-quote-fade-app: #ededf5;

  /* Ширина макета (1440). Раньше это число хардкодилось в product-hero.css
     дважды с оговоркой «в media query var() не подставить»; для обычных
     правил токен работает и избавляет новые блоки от литерала. */
  --layout-width: 1440px;

  /* Блок «Модели оборудования» на странице товара (443:3396..444:3607)
     и первый экран страницы модели (444:3613). Оттенки близки к уже
     существующим (--color-slider-border #e6e6e6, --color-surface-muted),
     но НЕ совпадают с ними — по принятой в проекте практике заводим свои
     токены, а не переиспользуем «похожий». */
  --color-model-card-label: rgba(31, 31, 31, 0.6); /* «Подходит для:» в карточке — #1f1f1f под 60% */
  --color-model-tag-border: #e7edf3; /* обводка плашек-тегов в карточке модели */
  --color-model-tag-ink: #9c9ca2; /* текст плашек-тегов в карточке модели */
  --color-model-hero-tag-border: #dbdbe8; /* те же плашки на первом экране страницы модели — обводка другая */
  --color-model-counter-bg: rgba(235, 235, 240, 0.6); /* плашка счётчика «N шт.»: #ebebf0 под 60% (прозрачность у подложки, текст полный) */
  --color-model-counter-ink: #a1a1b5;
  --radius-model-counter: 20px;

  /* Размеры карточки модели и ряда — общие для карточки, ряда и будущего
     слайдера (движок меряет карточку по факту, но раскладка ряда считается
     отсюда): 4 × 335 + 3 × 10 = 1370 из 1440. */
  --model-card-width: 335px;
  --model-card-height: 488px;
  --model-card-pad: 30px;
  --model-card-media-height: 220px;
  --model-card-gap: 10px;
  --model-row-gutter: 35px;

  /* Страница модели: описание (444:3891) и таблица характеристик (451:1582) */
  --fs-model-heading: 30px; /* «Описание модели:» и «Характеристики:» — тот же кегль, что у подзаголовка модели в первом экране */
  --lh-model-heading: 41px;
  --fs-model-description: 14px; /* текст описания модели — свой кегль, не --fs-body 15/25 */
  --lh-model-description: 28px;
  --fs-model-spec: 13px; /* текст таблицы характеристик */
  --lh-model-spec: 18px;
  --color-model-table-line: #e2e2ea; /* обводка таблицы и разделители строк/колонок */
  --color-model-table-tint: rgba(226, 226, 234, 0.3); /* заливка нечётных логических строк — тот же #e2e2ea под 30% */
  --radius-model-table: 15px;
  --model-table-row-height: 40px; /* высота строки; именно минимум, длинное значение строку растит (см. model-specs.css) */
  /* Телефон: колонок нет, таблица идёт парами «подпись — значение»
     (утверждённый прототип publication/ПРОТОТИП-таблица-мобилка.html).
     Подпись группы мельче основного кегля таблицы; приглушённый тон свой,
     а не --color-ink-muted rgba(10,22,33,.5) — та прозрачность заведена
     под неактивные пункты меню и на 13px читается слишком светлой. */
  --fs-model-spec-group: 11px;
  --lh-model-spec-group: 17px;
  --color-model-spec-muted: #5f6b78;
  --radius-wide-panel: 50px; /* скругление широких плашек — то же, что у CTA-карточки и карточки-цитаты (там пока литералом) */
}