/* Тепловодоучет — дизайн-токены. Строгий минимализм, синий акцент. */
:root {
  /* Нейтральные */
  --color-bg:         #ffffff;
  --color-surface:    #f5f6f7;
  --color-surface-2:  #eef0f2;
  --color-border:     #e2e4e7;
  --color-border-2:   #d3d7dc;
  --color-text:       #1a1d21;
  --color-text-muted: #6b7280;
  --color-text-faint: #9aa1ab;

  /* Акцент (основной) — синий */
  --color-accent:       #1e5eff;
  --color-accent-dark:  #1746c2;
  --color-accent-soft:  #eaf0ff;

  /* Вторичный акцент — красный (скидки/важное) */
  --color-danger:  #e02424;
  --color-danger-soft: #fdeaea;
  --color-success: #1f9d55;
  --color-success-soft: #e7f5ee;

  /* Типографика */
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 26px;
  --fs-2xl: 34px;
  --fs-3xl: 44px;
  --lh: 1.5;

  /* Отступы (шкала) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  /* Вертикальный ритм: половина шага между блоками (2 × 40 = 80px) */
  --section-y: 40px;

  /* Скругления и тени (минималистично) */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow:    0 4px 16px rgba(16,24,40,.08);
  --shadow-lg: 0 12px 32px rgba(16,24,40,.12);

  /* Слой */
  --container: 1200px;
  --header-h: 132px;
  --z-header: 100;
  --z-drawer: 900;
  --z-modal: 1000;

  /* Минимальный размер зоны нажатия на тач-экранах */
  --tap: 44px;
}

/* Мобильная шкала: уменьшаем сами токены, чтобы не переопределять размеры
   в каждом компоненте (иначе .hero h1 и .pdp h1 перебивают правила адаптива). */
/* --header-h держим равным реальной высоте липкой шапки на каждом шаге:
   от него зависят scroll-padding и «прилипание» сводки заказа. */
@media (min-width: 861px) and (max-width: 1000px) {
  :root { --header-h: 176px; }   /* меню категорий переносится на две строки */
}
@media (max-width: 860px) {
  :root {
    --fs-3xl: 32px;
    --fs-2xl: 27px;
    --fs-xl: 22px;
    /* Шаг между блоками на мобильных — 40px (по 20px с каждой стороны) */
    --section-y: 20px;
    --header-h: 132px;           /* шапка: строка с логотипом + строка поиска */
  }
}
@media (max-width: 560px) {
  :root {
    --fs-3xl: 27px;
    --fs-2xl: 23px;
    --fs-xl: 20px;
    --fs-lg: 18px;
    --header-h: 120px;
  }
}