/* ============================================================
   ТВЕРДЬ · Дизайн-система — токены
   Источник палитры: logo-tverd.svg, ТЗ п. 11.7
   Сетка, отступы, типографика: ТЗ п. 11.2
   Единственный источник значений. Произвольные числа в
   компонентах и шаблонах запрещены.
   ============================================================ */

:root {
  /* ---------- Нейтральная база: графит → сталь → бумага ----------
     6 ступеней. Три закреплены логотипом (800/600/500 и steel-300). */
  --n-900: #0E1013; /* подвал, самый глубокий фон               */
  --n-800: #16181C; /* ГРАФИТ — база страницы     [логотип]     */
  --n-700: #1C1F25; /* фон вложенной секции                     */
  --n-600: #22262D; /* ПОВЕРХНОСТЬ — карточки     [логотип]     */
  --n-500: #2A2E35; /* границы, разделители       [логотип]     */
  --n-400: #3A404A; /* границы активные, hover                  */
  --s-300: #8A9199; /* СТАЛЬ — вторичный текст    [логотип]     */
  --s-200: #B4BAC1; /* вторичный текст мелкий (на поверхности)  */
  --p-100: #F5F6F7; /* основной текст на тёмном                 */
  --p-000: #FFFFFF;

  /* ---------- Акцент. ТОЛЬКО CTA и активные состояния ----------
     ТЗ п. 11.2: акцент на заголовке или иконке «преимущества» — ошибка. */
  --accent:        #E8A317;  /* ЯНТАРЬ [логотип]                */
  --accent-hover:  #F2B23A;
  --accent-press:  #C98A0F;
  --accent-ink:    #16181C;  /* текст НА янтаре: 8,46:1         */
  --accent-soft:   rgba(232, 163, 23, .12); /* заливка активного */
  --col-key-bg:    #2C2619;  /* колонка «под ключ» — НЕПРОЗРАЧНЫЙ эквивалент accent-soft:
                                под липким столбцом прозрачность даёт двойной слой */

  /* ---------- Служебные ----------
     -fill  — заливки, полосы, иконки-индикаторы
     -text  — текст на тёмном фоне (осветлён до контраста ≥ 4,5:1) */
  --ok-fill:    #3FA46A;  --ok-text:    #4FBE7E;
  --err-fill:   #D2453F;  --err-text:   #E8635C; /* #D2453F как текст = 4,07:1 — не проходит */
  --warn-fill:  #C98A0F;  --warn-text:  #E0A83A;

  /* ---------- Семантические роли (используются в компонентах) ---------- */
  --bg:            var(--n-800);
  --bg-deep:       var(--n-900);
  --bg-alt:        var(--n-700);
  --surface:       var(--n-600);
  --surface-hover: #262B33;
  --border:        var(--n-500);
  --border-strong: var(--n-400);
  --text:          var(--p-100);
  --text-2:        var(--s-300);
  --text-3:        var(--s-200);
  --focus:         var(--accent);

  /* ---------- Шкала отступов. ТЗ п. 11.2: 4/8/12/16/24/32/48/64/96 ---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;  --sp-9: 96px;

  /* ---------- Сетка ----------
     Desktop 1440 → контент 1200, 12 колонок, гаттер 24
     Tablet  768  → 8 колонок
     Mobile  360  → 4 колонки, поля 16 */
  --content: 1200px;
  --gutter: var(--sp-5);
  --pad-x: var(--sp-5);
  --cols: 12;

  /* ---------- Типографика ----------
     Один гротеск, 2 начертания (400/700). Кандидат — Golos Text
     (кириллица спроектирована, не адаптирована), запасной — Inter.
     В публикации: self-host, subset кириллицы, font-display: swap. */
  --font: "Golos Text", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num: var(--font); /* цифры — табличные, см. .num */

  /* Display — только первый экран. Ниже по странице он ломает иерархию:
     h1 внутренней страницы не должен спорить с главной. */
  --fs-display: 60px; --lh-display: 1.04; --tr-display: -.022em;
  --fs-h1: 40px;  --lh-h1: 1.15;
  --fs-h2: 32px;  --lh-h2: 1.2;
  --fs-h3: 24px;  --lh-h3: 1.25;
  --fs-body: 18px;--lh-body: 1.5;
  --fs-sm: 16px;
  --fs-xs: 14px;  /* минимум для вспомогательного, не для основного текста */
  --fs-label: 12px; /* инженерная метка, только прописные + трекинг */

  /* ---------- Форма ---------- */
  --r-ctl: 4px;   /* кнопки, поля, чипы */
  --r-card: 8px;  /* карточки, модальные */
  /* Графитовый градиент поверх фото первого экрана (ТЗ п. 11.1): плотный сверху,
     чтобы читался оффер, и почти прозрачный снизу, чтобы фото осталось видно. */
  --hero-grad: linear-gradient(180deg, rgba(14,16,19,.94) 0%, rgba(14,16,19,.80) 38%, rgba(22,26,32,.52) 100%);
  --shadow: 0 2px 8px rgba(0,0,0,.35), 0 8px 32px rgba(0,0,0,.25);
  --ring: 0 0 0 3px rgba(232,163,23,.45); /* фокус с клавиатуры */

  /* ---------- Размеры интерактива. ТЗ п. 10.6, 11.2 ---------- */
  --ctl-h: 48px;      /* высота кнопки/поля ≥ 48 */
  --tap: 44px;        /* минимальная зона нажатия */
  --header-h: 88px;
  --header-h-sticky: 64px;
  --mobile-bar-h: 56px; /* ТЗ п. 9.3: липкая панель ≤ 56 px */

  /* ---------- Движение ---------- */
  --t-fast: .12s;
  --t: .2s;
  --ease: cubic-bezier(.2,.6,.3,1);
}

@media (max-width: 1023px) {
  :root { --cols: 8; --pad-x: var(--sp-5); }
}

@media (max-width: 1023px) { :root { --fs-display: 44px; } }
@media (max-width: 767px) {
  :root {
    --cols: 4;
    --pad-x: var(--sp-4);       /* поля 16 */
    --gutter: var(--sp-4);
    --fs-display: 34px; --lh-display: 1.08;
    --fs-h1: 32px;  --fs-h2: 24px;  --fs-h3: 20px;
    --fs-body: 16px; --fs-sm: 15px;
    --header-h: 64px; --header-h-sticky: 56px;
  }
}

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