/* ==========================================================================
   variables.css — дизайн-токены из Figma «Advent Academy (New)»
   Цветовые стили: Green, pink, Bezh
   Текстовые стили: H1/H2/H3/Description/Text/navigation — 1440 и 320
   ========================================================================== */

:root {
  /* ---------- Цвета ---------- */
  --color-green: #14453f;      /* Green  */
  --color-pink: #ffd5ed;       /* pink   */
  --color-bezh: #fcfbf6;       /* Bezh   */
  --color-white: #ffffff;

  /* ---------- Шрифт ---------- */
  --font-main: "Mulish", "Segoe UI", Arial, sans-serif;

  /* ---------- Типографика: десктоп (1440) ---------- */
  --fs-h1: 65px;               /* H1 1440 — 80/110 в стилях, в макете 65/1.1 */
  --lh-h1: 1.1;
  --fs-h2: 65px;               /* H2 1440 — 65/110 */
  --lh-h2: 1.1;
  --fs-h3: 24px;               /* H3 1440 — 24/130 */
  --lh-h3: 1.3;
  --fs-description: 30px;      /* Description 1440 — 30/130 */
  --lh-description: 1.3;
  --fs-text: 20px;             /* Text 1440 — 20/130 */
  --lh-text: 1.3;
  --fs-nav: 18px;              /* navigation — 18/130 */
  --lh-nav: 1.3;

  /* ---------- Сетка и отступы ---------- */
  --container-max: 1360px;     /* 1440 − 2×40 */
  --gutter: 40px;
  --radius-sm: 10px;
  --radius-md: 20px;

  --section-gap: 120px;        /* вертикальный ритм между секциями */
  --block-gap: 80px;
  --item-gap: 40px;
}

/* ---------- Планшет ---------- */
@media (max-width: 1024px) {
  :root {
    --fs-h1: 48px;
    --fs-h2: 44px;
    --fs-h3: 22px;
    --fs-description: 24px;
    --fs-text: 18px;
    --fs-nav: 16px;

    --gutter: 24px;
    --section-gap: 90px;
    --block-gap: 56px;
    --item-gap: 32px;
  }
}

/* ---------- Мобильные (макет 320) ---------- */
@media (max-width: 767px) {
  :root {
    --fs-h1: 32px;             /* H1 320 — 32/130 */
    --lh-h1: 1.3;
    --fs-h2: 32px;
    --lh-h2: 1.3;
    --fs-h3: 18px;
    --fs-description: 18px;
    --fs-text: 14px;           /* Text 320 — 14/140 */
    --lh-text: 1.4;
    --fs-nav: 14px;            /* Navigation 320 — 14/130 */

    --gutter: 16px;
    --section-gap: 64px;
    --block-gap: 40px;
    --item-gap: 24px;
    --radius-md: 16px;
  }
}