/* ==========================================================================
   tokens.css — переменные лендинга «Головна» (gzstudio.com.ua, post_id 16)
   Источник: sgs_elementor_ir (обзор), px ÷ 16 = rem.
   Брейкпоинты из лендинга: tablet 1024px, mobile 767px.
   CSS-переменные нельзя использовать в @media, поэтому в page.css/components.css:
     mobile-first, от 768px (48rem) и от 1025px (64.0625rem).
   ========================================================================== */

:root {
  /* --- Цвета (частота в IR) --- */
  --color-navy: #162044;        /* основной тёмный, 10× */
  --color-navy-soft: #2c3967;   /* 1× */
  --color-slate: #2f4571;       /* hover кнопок в карточках, kit 46345e6 */
  --color-bg: #f6f9ff;          /* светлый фон, 5× */
  --color-blue: #3078c0;        /* акцент, kit c36a83a */
  --color-gray: #8193ae;        /* приглушённый текст, kit 3e4233b */
  --color-sky: #d5ecf7;         /* 2× */
  --color-green: #02ce53;       /* CTA / акцент, kit 0062f1e */
  --color-white: #ffffff;       /* kit f18845a */
  --color-divider: #e0e3ec;     /* линии в панели «Зв’язок» */
  --color-field: #e7edf9;       /* фон полей формы */

  /* --- Шрифты --- */
  --font-main: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-secondary: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* только подпись «МЕНЮ» в шапке */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Размеры шрифта (десктоп-значения из IR) --- */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-25: 1.5625rem;
  --fs-32: 2rem;
  --fs-35: 2.1875rem;
  --fs-42: 2.625rem;

  /* Заголовки через clamp().
     h1 (hero): 22px на мобилке (≤767) → 35px на планшете и десктопе. В оригинале скачок на границе 767/768,
     clamp задаёт его как быстрый переход 767→831px.
     */
  --fs-h1: clamp(1.375rem, 20.3vw - 8.35rem, 2.1875rem);
  /* h2 (заголовки секций): 25px мобилка (≤767) → 35px планшет → 42px десктоп (≥1025).
     Первый скачок (767→831px) задан clamp(), второй (десктоп) — ниже в @media. */
  --fs-h2: clamp(1.5625rem, 15.6vw - 5.93rem, 2.1875rem);
  /* h3 (карточки): 24px мобилка → 32px планшет и десктоп */
  --fs-h3: clamp(1.5rem, 12.5vw - 4.49rem, 2rem);
  --fs-text: 1rem;
  --fs-lead: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);

  /* --- Отступы --- */
  --space-5: 0.3125rem;
  --space-10: 0.625rem;
  --space-15: 0.9375rem;
  --space-20: 1.25rem;
  --space-25: 1.5625rem;
  --space-30: 1.875rem;
  --space-40: 2.5rem;
  --space-50: 3.125rem;
  --space-100: 6.25rem;

  /* --- Радиусы --- */
  --radius-s: 0.625rem;   /* 10 */
  --radius-m: 1.25rem;    /* 20 */
  --radius-pill: 3.125rem; /* 50 */

  /* --- Тени --- */
  --shadow-card: 0 5.25rem 2.5rem -3.125rem rgba(24, 39, 75, 0.12);

  /* --- Контейнер --- */
  --container-max: 75rem;        /* 1200px: ширина hero, замер по скриншоту. TODO: сверить с остальными блоками */
  --container-header: 73.125rem; /* 1170px: контент шапки, замер по скриншоту */
  --container-gutter: var(--space-20);
}

@media (min-width: 64.0625em) {
  :root {
    --fs-h2: 2.625rem;
  }
}