/* ==========================================================================
   DESIGN TOKENS — единый источник правды для значений дизайн-системы.
   Слой 1 из трёх: tokens.css → components.css → style.css
   (см. docs/PRD-design-system.md, §4 «Архитектура» и §5 «Контракт токенов»).

   Правила:
   - В этом файле нет ни одного селектора, кроме :root.
   - Именование: --<группа>-<роль>[-<модификатор>], без сокращений.
   - Новый токен заводится, только если значение используется более чем
     в одном месте либо принадлежит существующей шкале (правило R2 PRD).

   Breakpoints (используются как литералы внутри @media, НЕ как var() —
   CSS custom properties не поддерживаются в media-запросах):
     mobile      ≤ 768px   — основной мобильный брейкпойнт
     tablet-note ≤ 900px   — одно точечное правило
   ========================================================================== */

:root {

  /* ---------- Цвет ---------- */
  --color-bg:            #ffffff;
  --color-bg-alt:        #f7f7f7;
  --color-bg-dark:       #0a0a0a;
  --color-text:          #0a0a0a;
  --color-text-muted:    #5a5a5a;
  --color-text-light:    #ffffff;
  --color-border:        #e5e5e5;
  --color-border-dark:   rgba(255,255,255,0.15);

  /* Статусы. --color-success-border используется в информере успешной
     отправки формы (.form__success); остальные заведены как согласованные
     пастельные пары той же светлоты для будущих состояний форм. */
  --color-success:         #4a9c62;
  --color-success-border:  #a6dab0;
  --color-error:           #c25a4a;
  --color-error-border:    #dab0a6;
  --color-warning:         #c99a2e;
  --color-warning-border:  #dad0a6;

  /* ---------- Типографика ---------- */
  --font-family: 'Commissioner', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Шкала повторяет фактические размеры, уже применённые в вёрстке:
     base — <p>, md — <h3>, 2xl — <h2>, 3xl — <h1>. */
  --font-size-xs:   0.78rem;
  --font-size-sm:   0.85rem;
  --font-size-base: clamp(0.9rem, 1.2vw, 1.05rem);
  --font-size-md:   clamp(1rem, 1.5vw, 1.15rem);
  --font-size-lg:   clamp(1.15rem, 1.8vw, 1.45rem);
  --font-size-xl:   clamp(1.3rem, 2.2vw, 1.65rem);
  --font-size-2xl:  clamp(2rem, 4.5vw, 4rem);
  --font-size-3xl:  clamp(2.8rem, 7.5vw, 7rem);

  --font-weight-normal:   400;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.09em;

  /* ---------- Пространство ----------
     Числовая шкала с шагом 4px: --space-N == N × 4px.
     Соответствие прежним семантическим шагам:
       --sp-xs → --space-2  (8px)
       --sp-sm → --space-4  (16px)
       --sp-md → --space-8  (32px)
       --sp-lg → --space-16 (64px)
       --sp-xl → --space-24 (96px) — вне диапазона 1…16, но на шаге шкалы;
                 значение сохранено фактическое, ради нулевого визуального
                 регресса. */
  --space-1:   0.25rem;  /* 4px  */
  --space-2:   0.5rem;   /* 8px  */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-7:   1.75rem;  /* 28px */
  --space-8:   2rem;     /* 32px */
  --space-9:   2.25rem;  /* 36px */
  --space-10:  2.5rem;   /* 40px */
  --space-11:  2.75rem;  /* 44px */
  --space-12:  3rem;     /* 48px */
  --space-13:  3.25rem;  /* 52px */
  --space-14:  3.5rem;   /* 56px */
  --space-15:  3.75rem;  /* 60px */
  --space-16:  4rem;     /* 64px */
  --space-24:  6rem;     /* 96px — вертикальный ритм секций */

  /* ---------- Радиусы ---------- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-pill: 999px;

  /* ---------- Тени ----------
     Значения взяты из реально повторяющихся паттернов в style.css. */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.25);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.25);

  /* ---------- Слои ----------
     Шкала построена на текущих ad hoc значениях; фактическая иерархия
     наслоения не меняется:
       base 1     — локальные слои внутри секций (hero, footer, cta)
       dropdown 10 — тултип калькулятора
       sticky 100  — .header
       overlay 200 — cookie-баннер, .scroll-top, мобильное меню (250)
       modal 300   — модалка тарифа
       toast 400   — лайтбокс товара (верхний слой) */
  --z-base:     1;
  --z-dropdown: 10;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;

  /* ---------- Движение ----------
     --ease-base     — transition-шорткат «длительность + кривая» для мелких
                       состояний (hover полей, теней).
     --ease-out-expo — кривая easeOutExpo, основная для появлений.
     --motion-base   — transition-шорткат для reveal-анимаций секций. */
  --ease-base:     0.3s ease;
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --motion-base:   0.45s var(--ease-out-expo);

  /* ---------- Размеры ---------- */
  --max-width:     1280px;
  --header-height: 72px;
}