/* ============================================================
   TOKENS — значения из Figma через MCP.
   Десктоп: фрейм «MacBook Pro 16" - 13» 1728×5216 (172:11675)
   Мобайл:  фрейм «iPhone 13 & 14 - 1»   390×4827  (220:17718)

   Принцип адаптива:
   · текст и элементы управления — clamp(), чтобы оставались читаемыми;
   · декоративный арт (космонавты, капсулы, трубы) — множитель --k/--m,
     он даёт пропорциональное масштабирование от опорной ширины макета.
   ============================================================ */
:root {
  /* ---------- Опорные размеры макета ---------- */
  --frame-w:            1728px;
  --frame-h:            5216px;
  --frame-w-mob:         390px;
  --frame-h-mob:        4827px;

  /* Масштаб десктопного арта: 1 при ширине ≥1728, ниже — пропорционально.
     Нижняя граница 0.55 не даёт арту схлопнуться на узких десктопах. */
  --k: clamp(0.55px, 100vw / 1728, 1px);
  /* Масштаб мобильного фрейма: 1 при 390 и выше, ниже — пропорционально.
     Выше 1 разгонять нельзя: космонавт в макете и так шире кадра на 40%,
     на экране 500–600px он бы накрыл всю страницу. */
  --m: min(1px, 100vw / 390);

  /* ---------- Сетка ---------- */
  --container-w:        1528px;              /* ширина карточек в макете */
  --gutter:  clamp(16px, 5.787vw, 100px);    /* 100 / 1728 = 5.787% */

  /* ---------- Цвета (именованные стили Figma) ---------- */
  --dark-blue:         #011623;   /* dark_blue */
  --violet:            #7E49F6;   /* violet */
  --cyan:              #75FBFD;   /* Cyan */
  --cyan-blur:         #7FF9FF;   /* cyan_blur */
  --black:             #000000;   /* black */
  --pure-white:        #F1F0ED;   /* Pure White */
  --white:             #FFFFFF;

  --pill-from:         #63FDFF;   /* градиент пилюли */
  --pill-to:           #7585FD;

  --hero-mint:         #A8DAD5;
  --hero-teal:         #2E6D74;
  --hero-indigo:       #3B3E9E;
  --hero-purple:       #6B54D3;

  --glass-light-a:     #CFDCE8;
  --glass-light-b:     #A9CBEA;
  --text-muted:        rgba(255,255,255,.72);

  /* ---------- Типографика ----------
     Cy Grotesk Std — коммерческий, файлы кладутся в assets/fonts/.
     Пока их нет, действует запасная связка. */
  --font-display: 'Cy Grotesk Std', 'Unbounded', system-ui, sans-serif;
  --font-text:    'Inter', system-ui, -apple-system, sans-serif;

  /* десктоп 1728 → мобайл 390 (h1 60→32, h2 52→28, h3 32→16, body 20→12) */
  --fs-h1:    clamp(32px, 3.472vw, 60px);
  --fs-h2:    clamp(28px, 3.009vw, 52px);
  --fs-h3:    clamp(16px, 1.852vw, 32px);
  --fs-body:  clamp(12px, 1.157vw, 20px);
  --fs-small: clamp(12px, 0.926vw, 16px);
  --lh-h1:      1.2;

  /* ---------- Радиусы ---------- */
  --r-card:              60px;   /* макет: rounded-[60px] у карточек */
  --r-btn:            31.751px;
  --r-row:               40px;
  --r-pill:              60px;

  /* ---------- Кнопка (408×106 в макете) ---------- */
  --btn-w:    clamp(240px, 23.611vw, 408px);
  --btn-h:    clamp(62px,   6.134vw, 106px);
  --btn-border:       0.567px;
  --btn-glow:         0 0 79.377px 0 rgba(255,255,255,.5);

  /* ---------- Размеры блоков ---------- */
  --header-h:  clamp(64px, 7.986vw, 138px);
  --faq-row-h: clamp(51px, 6.713vw, 116px);
  --faq-row-gap: clamp(10px, .694vw, 12px);

  --blur-glass:          25px;    /* backdrop-blur карточек и пилюли */

  /* ---------- Motion (комментарии дизайнера в макете) ---------- */
  --t-levitate:            7s;    /* «космонавт левітує» */
  --t-marquee:            28s;    /* «бігуча строка з лого компаній» */
  --t-tubes:              22s;    /* «трубки рухаються назустріч одна одній» */
}

/* Ниже 600px переключаемся на мобильный фрейм 390: арт считается от --m */
@media (max-width: 600px) {
  :root {
    --container-w: calc(358 * var(--m));
    --gutter:      calc(16 * var(--m));
    --header-h:    calc(88 * var(--m));
    /* размеры мобильного фрейма, масштабируются вместе с ним */
    --fs-h1:       calc(32 * var(--m));
    --fs-h2:       calc(28 * var(--m));
    --fs-h3:       calc(16 * var(--m));
    --fs-body:     calc(12 * var(--m));
    --fs-small:    calc(12 * var(--m));
    --r-card:     calc(40 * var(--m));
    --r-row:      calc(18.743 * var(--m));
    /* макет: строки FAQ 54.353, гэп 5.623 */
    --faq-row-h:   calc(54.353 * var(--m));
    --faq-row-gap: calc(5.623 * var(--m));
    --btn-w:      100%;
    --btn-h:      calc(88 * var(--m));
  }
}