/* ============================================================
   Дизайн-токены — Awaria zamka
   Направление v3 «Ночная диспетчерская» — УТВЕРЖДЕНО КЛИЕНТОМ 2026-07-21
   Промт 8.1 · пересобрано 2026-07-21 (заменило направление A «Спокойный профи»)

   Эталон: прототипы/v3.html (цвет варианта 1 + IBM Plex Sans).
   Правила применения — в дизайн-система.md.
   ВСЁ оформление сайта — только через эти переменные.
   Захардкоженный цвет/отступ в коде секций = баг.

   ⚠️ Имена переменных — контракт со styles.css. Менять значения можно,
   переименовывать — только вместе со styles.css.
   ============================================================ */

:root {
  /* ---------- Цвета (основные, ≤5) ---------- */
  --color-primary: #0B0C0E;  /* почти чёрный: шапка, футер, sticky, тёмные карточки */
  --color-accent:  #F59E0B;  /* янтарный: ТОЛЬКО кнопки звонка и главные CTA */
  --color-bg:      #FFFFFF;  /* базовый фон */
  --color-bg-soft: #F4F5F7;  /* нейтральная подложка секций (без синевы!) */
  --color-ink:     #0B0C0E;  /* основной текст */

  /* ---------- Цвета (производные и статусные) ---------- */
  --color-ink-soft:     #6B7280;  /* вторичный текст, подписи */
  --color-on-accent:    #0B0C0E;  /* текст на янтарной кнопке */
  --color-on-primary:   #FFFFFF;  /* текст на тёмном */
  --color-line:         #E5E7EB;  /* рамки, разделители */
  --color-graphite:     #16181C;  /* блоки услуг «Co robimy» */
  --color-sand:         #F6F3EF;  /* тёплый песочный: фон секции ситуаций. Светлее
                                     и теплее, чем --color-bg-soft — держит янтарное
                                     свечение рендеров и даёт паузу после тёмного
                                     hero (решение владельца 2026-07-25) */
  --color-ink-on-sand:  #5B6474;  /* вторичный текст на песочном. Обычный
                                     --color-ink-soft даёт на этом фоне 4.37 — ниже
                                     нормы 4.5; этот даёт 5.39 */
  --color-accent-ink:   #B45309;  /* янтарь, затемнённый до контраста на белом:
                                     текстовые ссылки «Zadzwoń →» */
  --color-edge:         rgba(255,255,255,.18); /* рамки поверх тёмного */
  --color-on-dark-soft: rgba(255,255,255,.74); /* вторичный текст на тёмном */
  --color-error:        #C62828;  /* ошибки формы */
  --color-success:      #2E7D32;  /* успех отправки */
  --color-wa:           #25D366;  /* значок WhatsApp (только иконка) */
  --color-tg:           #229ED9;  /* значок Telegram (только иконка) */
  --color-accent-wash:  rgba(245,158,11,.14); /* подложка под иконками карточек */
  --color-veil:         rgba(255,255,255,.05); /* фон «призрачных» кнопок на тёмном */
  --color-on-dark-line: rgba(255,255,255,.13); /* разделители на тёмном */

  /* ---------- Тёмная «диспетчерская» поверхность ----------
     Только 3 места: hero, «Działamy oficjalnie», финальный CTA.
     Больше нигде — иначе теряется акцент. */
  --surface-dark:
    radial-gradient(circle at 75% 15%, rgba(245,158,11,.16), transparent 60%),
    linear-gradient(135deg, #111315, #1B1D20 55%, #0C0D0E);
  --surface-grid:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  --surface-grid-size: 48px 48px;

  /* ---------- Типографика ----------
     IBM Plex Sans — выбран клиентом (строгий «инженерный» гротеск).
     ⚠️ Максимальный вес — 700. Значения 800/900 не использовать:
     браузер всё равно отрисует 700, а в коде появится ложь. */
  --font-heading: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;

  --weight-body:     400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;  /* потолок семейства */

  --text-xs:   0.75rem;   /* 12px — RODO-строка, сноски */
  --text-sm:   0.875rem;  /* 14px — вторичный текст, бейджи */
  --text-base: 1rem;      /* 16px — базовый текст */
  --text-lg:   1.125rem;  /* 18px — подзаголовок hero, лид */
  --text-xl:   1.375rem;  /* 22px — подзаголовки внутри секций */
  --text-2xl:  1.75rem;   /* 28px */
  --text-3xl:  2.375rem;  /* 38px */
  --text-h1: clamp(1.85rem, 6.6vw, 3.1rem);  /* H1 hero — тянется под экран */
  --text-h2: clamp(1.75rem, 5.6vw, 2.8rem);  /* H2 секций */

  --leading-tight: 1.1;    /* заголовки */
  --leading-body:  1.55;   /* текст */
  --tracking-tight: -.025em; /* заголовки: минус-трекинг для плотности */

  /* ---------- Отступы (шаг 4px) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- Радиусы ---------- */
  --radius-sm:   8px;    /* поля формы, значки-квадраты */
  --radius-md:   12px;   /* карточки, кнопки */
  --radius-lg:   24px;   /* крупные блоки: hero, доверие, финальный CTA */
  --radius-pill: 999px;  /* бейджи-пилюли */

  /* ---------- Тени ---------- */
  --shadow-card:   0 2px 10px rgba(11,12,14,.08);
  --shadow-sticky: 0 -2px 12px rgba(11,12,14,.18);
  --shadow-accent: 0 16px 34px rgba(245,158,11,.16); /* только под кнопкой звонка */

  /* ---------- Движение (правила — motion-brief.md) ----------
     Характер «резкое и точное»: быстрый старт, мягкая остановка. */
  --motion-in:      320ms;  /* появление */
  --motion-hover:   160ms;  /* отклик на наведение/клик */
  --motion-stagger:  60ms;  /* задержка между соседями в каскаде */
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ---------- Размеры ---------- */
  --container: 1120px;  /* max-width контента */
  --tap-min:   48px;    /* мин. высота кнопок и полей (тап-зона) */
  /* Резерв под нижнюю плашку: её высота 8+48+8 = 64px плюс безопасная зона
     у телефонов с домашней полоской. Раньше стояло круглое число 74px —
     на одних экранах оставалась пустая полоска, на других не хватало. */
  --sticky-h:  calc(var(--space-16) + env(safe-area-inset-bottom, 0px));
}

/* Брейкпоинты (в media-query переменные не работают — фикс. значения):
   mobile-first; tablet ≥ 768px; desktop ≥ 1080px */