/* ============================================================
   ТОКЕНЫ ПРОЕКТА «СВформа»
   Единственный источник значений. В остальных файлах —
   только var(--…). Магические числа запрещены (CLAUDE.md §7–§8).
   ============================================================ */

:root {
  /* ---------- Цвета: фирменные ---------- */
  --navy: #222E4B;
  --navy-90: #2B3856;
  --navy-80: #3A4767;
  --bg: #F8F8FA;
  --white: #FFFFFF;
  --black: #000000;

  /* ---------- Цвета: акцент ---------- */
  --accent: #2FA5A0;
  --accent-hover: #268A86;
  --accent-soft: #E6F4F3;

  /* ---------- Цвета: текст и линии ---------- */
  --text: #14192B;
  --text-muted: #5C6479;
  --text-weak: #8A91A3;
  --line: #E4E6EC;
  --border: #CFD3DE;

  /* ---------- Цвета: статусы ---------- */
  --sale: #C0392B;
  --success: #2E7D5B;
  --warning: #D68910;
  --warning-bg: #FFF9EF;
  --warning-text: #8A6417;
  --error-light: #FF8A7A;   /* ошибка на тёмной подложке тоста */

  /* ---------- Цвета: печать накладной ---------- */
  --print-border: #999999;
  --print-muted: #666666;

  /* ---------- Шрифты ---------- */
  --font-head: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* ---------- Типографика (desktop) ----------
     Формат: размер / интерлиньяж. Начертание и трекинг — в base.css */
  --t-logo-size: 26px;
  --t-h1-size: 56px;      --t-h1-lh: 64px;
  --t-h2-size: 40px;      --t-h2-lh: 48px;
  --t-h3-size: 24px;      --t-h3-lh: 32px;
  --t-h4-size: 18px;      --t-h4-lh: 26px;
  --t-overline-size: 12px;--t-overline-lh: 16px;
  --t-body-l-size: 18px;  --t-body-l-lh: 28px;
  --t-body-size: 16px;    --t-body-lh: 26px;
  --t-body-s-size: 14px;  --t-body-s-lh: 22px;
  --t-caption-size: 13px; --t-caption-lh: 18px;
  --t-nav-size: 15px;     --t-nav-lh: 24px;
  --t-btn-l-size: 16px;   --t-btn-l-lh: 24px;
  --t-btn-size: 14px;     --t-btn-lh: 20px;
  --t-price-l-size: 30px; --t-price-l-lh: 36px;
  --t-price-size: 20px;   --t-price-lh: 26px;
  --t-price-old-size: 15px; --t-price-old-lh: 20px;
  --t-label-size: 13px;   --t-label-lh: 18px;
  --t-input-size: 16px;   --t-input-lh: 24px;
  --t-badge-size: 11px;   --t-badge-lh: 14px;
  --t-table-size: 14px;   --t-table-lh: 20px;

  /* ---------- Шкала отступов ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 56px;
  --sp-9: 72px;
  --sp-10: 96px;
  --sp-11: 120px;

  /* ---------- Сетка ---------- */
  --container: 1320px;
  --pad-x: 60px;
  --gutter: 24px;
  --cols-products: 4;
  --section-y: var(--sp-10);

  /* ---------- Форма ---------- */
  --r-sm: 4px;
  --r-md: 8px;
  --shadow-card: 0 1px 2px rgba(20, 25, 43, .06);
  --shadow-pop: 0 12px 32px rgba(20, 25, 43, .12);

  /* ---------- Движение ---------- */
  --ease: cubic-bezier(.2, .6, .2, 1);
  --dur: 180ms;
  --dur-slow: 240ms;

  /* ---------- Служебное ---------- */
  --header-h: 116px;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* ---------- Брейкпоинты: сетка и типографика ---------- */
@media (max-width: 1439px) {
  :root { --pad-x: 40px; }
}

@media (max-width: 1199px) {
  :root {
    --pad-x: 32px;
    --cols-products: 3;
    --section-y: var(--sp-9);
    --t-h1-size: 44px;  --t-h1-lh: 52px;
    --t-h2-size: 32px;  --t-h2-lh: 40px;
  }
}

@media (max-width: 767px) {
  :root {
    --pad-x: 20px;
    --cols-products: 2;
    --gutter: 16px;
    --section-y: var(--sp-8);
    --header-h: 64px;

    --t-logo-size: 22px;
    --t-h1-size: 34px;      --t-h1-lh: 40px;
    --t-h2-size: 26px;      --t-h2-lh: 32px;
    --t-h3-size: 20px;      --t-h3-lh: 28px;
    --t-h4-size: 16px;      --t-h4-lh: 24px;
    --t-body-l-size: 16px;  --t-body-l-lh: 26px;
    --t-body-size: 15px;    --t-body-lh: 24px;
    --t-price-l-size: 24px; --t-price-l-lh: 30px;
  }
}

@media (max-width: 479px) {
  :root { --pad-x: 16px; }
}