/* ==========================================================================
   Cup'D — дизайн-токены
   Источник: Figma «cupD-site», переменные Cup'D / Semantic + Layout.
   Заголовочный шрифт Benzin коммерческий и в проект не передан —
   заменён на Unbounded (та же суперэллиптическая геометрия и ширина).
   ========================================================================== */

:root {
  /* --- Цвет ------------------------------------------------------------ */
  --c-bg: #000000;
  --c-surface: #1f1f1f;
  --c-surface-2: #121212;
  --c-stroke: #282828;
  --c-stroke-soft: #696969;
  --c-yellow: #ffbb00;
  --c-yellow-dim: #c79300;
  --c-white: #ffffff;
  --c-grey: #b5b4b4;
  --c-grey-2: #8a8a8a;

  /* Тёплая засветка, которой в макете подсвечены края секций */
  --glow-warm: radial-gradient(60% 60% at 50% 50%, rgba(255, 187, 0, 0.22) 0%, rgba(255, 187, 0, 0) 70%);

  /* --- Типографика ------------------------------------------------------ */
  --f-display: "Unbounded", "Manrope", system-ui, sans-serif;
  --f-text: "Manrope", system-ui, -apple-system, sans-serif;

  /* Benzin набран плотнее Unbounded — компенсируем трекингом */
  --display-tracking: -0.03em;

  --fs-h1: 64px;
  --fs-h2: 40px;
  --fs-h3: 28px;
  --fs-cta: 17px;
  --fs-body: 18px;
  --fs-small: 15px;

  --lh-display: 1.12;
  --lh-h3: 1.16;
  --lh-body: 1.5;

  /* --- Раскладка -------------------------------------------------------- */
  --container: 1400px;
  --gutter: 40px;
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-pill: 999px;

  --section-gap: 160px;

  /* --- Движение --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur-base: 0.5s;
  --dur-slow: 0.9s;
}

/* Планшет / ноутбук — контейнер сжимается вместе с окном */
@media (max-width: 1439px) {
  :root {
    --fs-h1: 52px;
    --fs-h2: 36px;
    --fs-h3: 25px;
    --gutter: 32px;
    --section-gap: 120px;
  }
}

/* Мобильная шкала — ровно из макета 390 */
@media (max-width: 767px) {
  :root {
    --fs-h1: 24px;
    --fs-h2: 19px;
    --fs-h3: 16px;
    --fs-cta: 13px;
    --fs-body: 12px;
    --fs-small: 11px;
    --gutter: 16px;
    --section-gap: 72px;
    --radius-m: 12px;
  }
}