/* ===== Local Fonts ===== */
@font-face {
  font-family: 'Helios Cond';
  src: url('../assets/fonts/HeliosCondC-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helios Cond';
  src: url('../assets/fonts/HeliosCondC.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===== CSS Variables & Design Tokens =====
 * Подробный гайд — см. GLOBAL-STYLES-GUIDE.md.
 * Mobile-first, fluid typography через clamp(), 8-pt spacing grid.
 */
:root {
  /* === Brand Colors === */
  --primary-teal: #2C7A7B;
  --dark-teal:    #1A5556;
  --light-teal:   #B8E5E5;
  --light-teal-2: #C5E5E5;
  --accent-red:   #E23324;
  --dark-red:     #B82820;
  --black:        #1A1A1A;
  --white:        #FFFFFF;
  --gray-text:    #666666;
  --light-gray:   #E5E5E5;
  --vk-blue:      #4A76A8;
  --tg-blue:      #29B6F6;
  --wa-green:     #25D366;
  --tab-inactive: #7FB8B8;
  --price-teal:   #5E9494;
  --holiday-teal: #70BABE;

  /* === Typography === */
  --font-heading: 'Helios Cond', 'Oswald', 'PT Sans Narrow', sans-serif;
  --font-body:    'Helios Cond', 'Oswald', 'PT Sans Narrow', sans-serif;

  /* Fluid type scale (mobile → desktop) */
  --fs-base:    clamp(15px, 0.94rem + 0.2vw, 17px);    /* 15-17px body */
  --fs-h1:      clamp(32px, 2.4rem + 2.5vw, 56px);    /* 32-56px */
  --fs-h2:      clamp(26px, 1.8rem + 1.4vw, 40px);    /* 26-40px */
  --fs-h3:      clamp(20px, 1.3rem + 0.4vw, 24px);    /* 20-24px */
  --fs-h4:      clamp(18px, 1.05rem + 0.2vw, 20px);   /* 18-20px */
  --fs-btn:     clamp(13px, 0.78rem + 0.2vw, 15px);  /* 13-15px */
  --fs-small:   clamp(13px, 0.78rem + 0.1vw, 14px);   /* 13-14px */

  --lh-base:      1.6;
  --lh-heading:   1.15;
  --lh-tight:      1.2;
  --tracking-heading: 0.02em;

  /* === Spacing (4-pt grid) === */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

  /* === Layout (fluid) === */
  --container-max: 1200px;
  --container-padding: clamp(16px, 4vw, 80px);      /* 16-80 px */
  --container-padding-mobile: 20px;                   /* явное 20 для ≤575 */
  --section-padding-y: clamp(60px, 8vw, 100px);      /* 60-100 px */
  --grid-gap: clamp(20px, 2.5vw, 30px);

  /* === Radius === */
  --radius-card:   12px;
  --radius-button:  6px;
  --radius-small:   8px;
  --radius-pill: 9999px;

  /* === Shadows === */
  --shadow-card:  0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.15);
  --shadow-nav:   0 2px 10px rgba(0, 0, 0, 0.08);

  /* === Transitions === */
  --transition: all 0.3s ease;
  --transition-fast: 150ms ease;

  /* === Z-indexes === */
  --z-header: 100;
  --z-float-cart: 90;
  --z-mini-cart: 9000;
  --z-modal: 1000;

  /* === Touch targets (Apple HIG 44pt, Material 48dp) === */
  --touch-min: 44px;
}