/* ============================================================
   Bajor Wellness — Design Tokens
   Значения сняты с макета Figma (1440 / 360), fluid между ними.
   Display — Forum (serif), текст — Montserrat.
   ============================================================ */

:root {
  /* ---------- Цвета ---------- */
  --c-primary:      #244c51; /* тёмный teal — кнопки, заголовки на светлом */
  --c-primary-soft: #466c70; /* приглушённый teal — вторичный текст */
  --c-accent:       #ef8341; /* оранжевый — акценты, CTA (hero: #f08342) */
  --c-bg:           #fbfaf6; /* фон страницы / шапки */
  --c-cream:        #f4efe3; /* фон карточек */
  --c-beige:        #dfd7c5; /* приглушённый фон / плейсхолдер картинок */
  --c-border:       #d9d3c4; /* рамка карточек */
  --c-on-teal:      #dde8ea; /* светлый текст на тёмном teal-фоне */
  --c-footer:       #223e42; /* фон футера (глубокий teal) */
  --c-white:        #ffffff;
  --c-dark:         #000000; /* подложка hero под фото */

  /* ---------- Шрифты ---------- */
  --ff-display: "Forum", Georgia, serif;
  --ff-base:    "Montserrat", system-ui, -apple-system, sans-serif;

  /* ---------- Типографика (fluid 360 → 1440) ---------- */
  --fs-display: clamp(2.5rem,  1.83rem + 2.96vw, 4.5rem);   /* 40 → 72  H1 hero   */
  --fs-h2:      clamp(2.125rem, 1.42rem + 3.15vw, 4.25rem);  /* 34 → 68  заголовки секций (Forum) */
  --fs-h3:      clamp(1.75rem, 1.53rem + 1.11vw, 2.5rem);   /* 28 → 40  под-заголовки */
  --fs-lg:      1.25rem;   /* 20 — крупный текст, лид */
  --fs-md:      1.125rem;  /* 18 — nav, буллеты доверия */
  --fs-base:    1rem;      /* 16 — базовый body */
  --fs-sm:      0.875rem;  /* 14 — мелкий текст, подписи */

  --lh-display: 0.9;   /* Forum очень плотный (в макете 0.8) */
  --lh-tight:   1.2;
  --lh-base:    1.3;
  --lh-body:    1.5;
  --ls-display: -0.03em; /* tracking крупных заголовков */

  /* ---------- Отступы (fluid) ---------- */
  --space-3xs: 0.375rem; /* 6  */
  --space-2xs: 0.625rem; /* 10 */
  --space-xs:  0.75rem;  /* 12 */
  --space-sm:  1rem;     /* 16 */
  --space-md:  1.25rem;  /* 20 */
  --space-lg:  1.5rem;   /* 24 */
  --space-xl:  2.5rem;   /* 40 */
  --space-2xl: clamp(2.5rem, 2rem + 2.22vw, 3.75rem);   /* 40 → 60 */
  --section-y: clamp(3.75rem, 2.92rem + 3.7vw, 6.25rem); /* 60 → 100 — вертикальные отступы секций */

  /* ---------- Раскладка ---------- */
  --container:   1920px;                                  /* макс. ширина сайта */
  --pad-inline:  clamp(0.625rem, 2.78vw, 2.5rem);         /* 10 → 40 — боковые поля */
  --gap:         clamp(1.25rem, 0.83rem + 1.85vw, 2.5rem);/* 20 → 40 — сетки/гаттеры */

  /* ---------- Прочее ---------- */
  --radius-sm: 4px;
  --radius:    0;        /* кнопки/карточки прямоугольные */
  --header-h:  60px;     /* мобильная высота шапки */
}

@media (min-width: 1200px) {
  :root { --header-h: 86px; }
}