/* ============================================================
   EVENTEX — дизайн-токены
   Значения перенесены со страницы кейса «Polaroid Party»:
   это единственный источник правды по цвету, типографике и ритму.
   ============================================================ */

:root {
  /* ── Цвет ──
     Светлая тема: кремовый фон вместо чёрного, фиолетовый акцент вместо
     лаймового. Переменные --fg-XX/--line-XX считаются от тёмно-чернильного
     --fg (раньше считались от светлого) — весь остальной CSS, который уже
     ссылается на эти токены, подхватывает новую тему без правок. */
  --bg: #ffffff;
  --fg: #17141c;
  --accent: #5b3fe0;
  --accent-2: #e8ff5a; /* кислотный — второй акцент, чтобы фиолетовый не был единственным цветом на сайте */
  --paper: #fffff0; /* «бумага» полароид-карточки — слоновая кость */
  --ink: #1a1a16; /* текст на бумаге */

  /* Приглушённый текст — от самого тихого к самому заметному.

     В исходном дизайне самый тихий уровень был .45, но он даёт контраст
     4.09:1 — мало для 12-пиксельных надписей вроде eyebrow. Подняли до .53
     (4.9:1, проходит WCAG AA); визуально уровень остался самым тихим. */
  --fg-45: rgba(23, 20, 28, 0.53);
  --fg-50: rgba(23, 20, 28, 0.5);
  --fg-60: rgba(23, 20, 28, 0.6);
  --fg-62: rgba(23, 20, 28, 0.62);
  --fg-68: rgba(23, 20, 28, 0.68);
  --fg-70: rgba(23, 20, 28, 0.7);
  --fg-90: rgba(23, 20, 28, 0.9);

  /* Границы */
  --line-08: rgba(23, 20, 28, 0.08);
  --line-10: rgba(23, 20, 28, 0.1);
  --line-12: rgba(23, 20, 28, 0.12);
  --line-16: rgba(23, 20, 28, 0.16);
  --line-22: rgba(23, 20, 28, 0.22);
  --line-24: rgba(23, 20, 28, 0.24);

  /* Поверхности чуть темнее фона — слоновая кость вместо бежевого */
  --surface: #fffbe6;
  --surface-2: #fef6d5;

  /* ── Шрифты ── */
  --font-display: 'Inter', Arial, Helvetica, sans-serif;
  --font-text: 'Anonymous Pro', 'Courier New', monospace;
  /* Отдельный шрифт для текста описаний (абзацев) — читабельнее, чем
     основной моноширинный, но той же «технической» точности. Меню,
     кнопки, лейблы и чипсы остаются на --font-text. */
  --font-text-alt: 'IBM Plex Mono', 'Courier New', monospace;

  /* ── Типографическая шкала ── */
  --fs-h1: clamp(46px, 10.5vw, 168px);
  /* Нижние границы разведены сознательно: при 29px и 26px заголовок первого
     и второго уровня на телефоне отличались на три пикселя и читались как
     один уровень. Теперь шаг между ними заметен — 31 против 23.
     Выше 32px нельзя: самое длинное слово заголовка («пересказывают»)
     перестаёт помещаться в 335px и рвётся посреди слова. */
  --fs-h1-compact: clamp(31px, 5.4vw, 88px);
  --fs-h2: clamp(23px, 3.6vw, 52px);
  /* Заголовок карточки — один размер для услуг, опор и этапов */
  --fs-card-title: clamp(17px, 1.5vw, 19px);
  --fs-h2-hero: clamp(34px, 6vw, 80px);

  --fs-body: 18px;
  --fs-small: 15px;
  --fs-eyebrow: 12px;

  --lh-h1: 0.92;
  --lh-h2: 1.14;
  --lh-body: 1.65;

  --ls-tight: -0.02em;
  --ls-eyebrow: 0.24em;

  /* ── Радиусы ── */
  --r-card: 6px; /* полароид */
  --r-panel: 20px; /* медиа и сетки */
  --r-cta: 28px; /* большая CTA-панель */
  --r-pill: 100px; /* кнопки и чипсы */

  /* ── Ритм ── */
  /* На экранах шире --maxw-wide (27" 5K/5120, ультраширокие мониторы и
     т.п.) верстка до этой правки тянулась на всю физическую ширину:
     сетки на auto-fill плодили по 10+ колонок, header/footer
     растягивались в разные углы, канвасы-воркмарки раздувались до
     гигантских размеров. Решение «топовых» сайтов в такой ситуации —
     не резиновая на 100% ширина, а контент с потолком, который на
     широких экранах просто получает больше полей по бокам, а не больше
     контента. --pad-x теперь растёт вместе с полями: на обычных экранах
     (≤ maxw-wide) ведёт себя как раньше (48px), а дальше увеличивается
     ровно настолько, чтобы контентная область уткнулась в maxw-wide и
     осталась отцентрована. Единственная точка правки — все ~20 мест
     в CSS, использующих var(--pad-x), подхватывают это само. */
  --pad-x: max(48px, calc((100vw - var(--maxw-wide)) / 2));
  --section-y: 110px;
  --maxw: 1180px;
  --maxw-wide: 1600px;

  /* ── Движение ── */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.35s;
}

@media (max-width: 760px) {
  :root {
    --pad-x: 20px;
    --section-y: 72px;
    --fs-body: 16px;
  }
}