/* =========================================================================
   Alligator Media — дизайн-токены
   Бирюзовый и лайм сняты скриптом по пикселям с assets/brand/brand-colors.webp
   (k-means + «самые хроматичные 8 %» каждого семейства оттенков; см. README → «Решения»).
   ========================================================================= */
:root {
  /* --- Бренд --- */
  --c-turquoise: #70E6BF;   /* ядро бирюзового семейства (hue ≈ 160°) */
  --c-lime:      #A6FF96;   /* ядро лаймового семейства (hue ≈ 110°) */
  --c-mint:      #C6FEB4;   /* переход лайм → лимон с той же картинки */
  --c-lemon:     #DCFAAF;   /* светлый лимонный блик с той же картинки */

  --c-white: #FFFFFF;
  --c-black: #0A0A0A;
  --c-gray-100: #F2F2F2;    /* плейсхолдеры, фон полей */
  --c-gray-400: #A0A0A0;    /* неактивный текст */
  --c-gray-800: #2A2A2A;    /* линии на тёмном */

  --grad-brand: linear-gradient(110deg, var(--c-turquoise) 0%, var(--c-lime) 100%);
  /* «живой» градиент: двигаем background-position при наведении */
  --grad-brand-live: linear-gradient(110deg, var(--c-turquoise) 0%, var(--c-lime) 33%, var(--c-lemon) 50%, var(--c-lime) 67%, var(--c-turquoise) 100%);

  /* --- Тема секции: значения плавно перетекают при скролле (src/motion/section-colors.js) --- */
  --bg: #FFFFFF;
  --fg: #0A0A0A;
  --bg-rgb: 255 255 255;
  --fg-rgb: 10 10 10;
  --muted: rgb(var(--fg-rgb) / .56);
  --line: rgb(var(--fg-rgb) / .14);
  --ph: rgb(var(--fg-rgb) / .075);   /* ≈ #EDEDED на белом, ≈ #1A1A1A на чёрном */

  /* --- Шрифты --- */
  --font-display: 'Unbounded', 'Arial Black', 'Helvetica Neue', sans-serif;
  --font-text: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* --- Шкала --- */
  --fs-h1: clamp(40px, min(12vw, (100vh - 400px) / 2.7), 220px);   /* ≤ 3 строки заголовка + описание помещаются в первый экран */
  --fs-h2: clamp(44px, 7vw, 128px);
  --fs-stat: clamp(72px, 10vw, 180px);   /* верхняя граница; реальный кегль подгоняется под колонку в stats.js */
  --fs-h3: clamp(22px, 2.4vw, 40px);
  --fs-body: clamp(16px, 0.35vw + 13px, 18px);
  --fs-small: 14px;
  --fs-eyebrow: 12.5px;

  --lh-h1: .9;
  --lh-h2: .95;
  --lh-h3: 1.15;

  --tr-h1: -0.03em;
  --tr-h2: -0.02em;
  --tr-eyebrow: 0.14em;

  /* --- Сетка --- */
  --container: 1760px;
  --gutter: clamp(16px, 4vw, 64px);
  --col-gap: clamp(12px, 1.6vw, 32px);
  --section-y: clamp(96px, 14vw, 240px);
  --header-h: 88px;

  /* --- Форма --- */
  --radius: 12px;         /* карточки и картинки — везде одинаково */
  --radius-xl: clamp(24px, 3vw, 48px);  /* крупные «шторки» секций */
  --pill: 999px;

  /* --- Движение --- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --dur: .6s;

  --z-header: 50;
  --z-menu: 60;
  --z-modal: 80;
  --z-preloader: 90;
  --z-cursor: 100;
  --z-grain: 95;
}

@media (max-width: 767px) {
  :root {
    --fs-h2: clamp(34px, 9.4vw, 64px);
    --header-h: 64px;
  }
}