/* ============================================================
   Кубок Медведя — Design Tokens
   Источник: DESIGN.md (Drive Capital «Summer Drive») + живой Figma-файл.
   Значения не «на глаз» — сверены со стилями/переменными Figma.

   РЕБРЕНДИНГ (детская лига, «Кубок Медведя» / «Фестивали Медведя»):
     - основной акцент: тёмно-синий #022d62 (был #006eff)
     - контрастный акцент: терракота #d1592c (подобрана под тёмный синий)
     - дисплейный шрифт: Expressway (см. --font-display ниже)

   Шрифты:
     Expressway → --font-display (бренд-заголовки; сейчас подстановка Oswald)
     Editorial New  → Playfair Display = --font-serif (серифные заголовки сущностей)
     Founders Grotesk → Inter = --font-text (весь остальной текст)
   ============================================================ */

:root {
  /* ---- Цвета ---- */
  --color-bg: #f8f8f8;           /* фон страницы (по просьбе заказчика) */
  --color-cream: #fff8f1;        /* тёплый светлый — текст в синей шапке, текст на залитых кнопках */
  --color-ash: #e2e8f0;          /* hairline-разделители, границы карточек */
  --color-ink: #000000;          /* основной текст */
  --color-voltage-blue: #022d62; /* основной хроматический акцент (ребренд: тёмно-синий «Медведя») */
  --color-terracotta: #d1592c;   /* точечный акцент: LIVE / Сегодня / Идёт / ТЕКУЩИЙ (подобран под #022d62) */

  /* ---- Шапка (по просьбе заказчика): синяя подложка, светлый текст ---- */
  --color-header-bg: #022d62;
  --color-header-fg: #fff8f1;

  /* Производные (прозрачности того же ink/blue — не новые цвета) */
  --ink-muted: rgba(0, 0, 0, 0.55);
  --ink-faint: rgba(0, 0, 0, 0.35);
  --blue-soft: rgba(2, 45, 98, 0.06);
  --ghost-number: rgba(2, 45, 98, 0.05); /* крупная фоновая цифра игрока */

  /* ---- Типографика: семейства ----
     --font-display — ЕДИНАЯ точка подключения бренд-шрифта Expressway.
     Реальный файл (Expressway Free) подключается через @font-face в base.css
     под именем 'Expressway'; пока его нет — работает подстановка Oswald
     (геометричный/плотный, близкий по характеру к логотипу «МЕДВЕДЯ»).
     Заменить шрифт = положить файл + оставить одно имя 'Expressway' первым. */
  --font-display: 'Expressway', 'Oswald', 'Inter', ui-sans-serif, system-ui, sans-serif;
  /* По просьбе заказчика Playfair Display заменён на Expressway ВЕЗДЕ:
     --font-serif теперь указывает на тот же бренд-шрифт (одна правка). */
  --font-serif: 'Expressway', 'Oswald', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'Inter', 'Founders Grotesk', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---- Типографика: шкала ---- */
  /* Целевая аудитория — взрослые; макет расширён до 1200px контента, поэтому
     шрифты укрупнены для читабельности (сверено с размерами во фреймах Figma). */
  --text-body-sm: 17px;
  --text-body: 19px;
  --text-body-lg: 22px;
  --text-subheading: 30px;
  --text-heading-sm: 40px;
  --text-heading: 62px;
  --text-heading-lg: 77px;
  --text-display: 120px;

  --leading-tight: 0.95;
  --leading-heading: 1;
  --leading-snug: 1.2;
  --leading-body: 1.5;

  --tracking: -0.02em; /* единый трекинг для всего текста */

  /* ---- Веса ---- */
  --fw-thin: 100;   /* display-хайрлайн */
  --fw-light: 300;  /* заголовки/лейблы — «шёпот-вес», подпись стиля */
  --fw-regular: 400;/* body/ссылки */
  --fw-medium: 500; /* точечно: имена в плотных таблицах, для читабельности */
  --fw-bold: 600;   /* заголовки блоков — «пожирнее» (по просьбе заказчика) */

  /* ---- Отступы (8px база) ---- */
  --sp-7: 7px;
  --sp-11: 11px;
  --sp-14: 14px;
  --sp-20: 20px;
  --sp-29: 29px;
  --sp-30: 30px;
  --sp-35: 35px;
  --sp-43: 43px;
  --sp-80: 80px;
  --sp-144: 144px;
  --sp-150: 150px;

  /* ---- Раскладка ----
     Макет: фрейм 1440, контент-колонка 1200 по центру (боковые поля ~64px в
     шапке, колонка 1200 в теле). Раньше были поля 144 + max 1200 → контент
     сжимался до ~900px и оставлял огромные пустые края. Теперь колонка 1200
     с небольшим защитным отступом. */
  --page-max: 1200px;    /* ширина контент-колонки, как в макете */
  --page-pad-x: 64px;    /* десктоп: скромные поля, как у шапки в макете */
  --frame-max: 1328px;   /* колонка 1200 + 2×64 поля = внешняя ширина обёртки */
  --page-pad-x-mobile: 20px;
  --radius-pill: 60px;   /* кнопки/пилюли — всегда 60px */
  --radius-card: 0px;    /* карточки без скругления */
  --hairline: 1.5px;

  /* ---- Точка перелома ---- */
  --bp-mobile: 860px;
}

/* Мобильные поля страницы */
@media (max-width: 860px) {
  :root {
    --page-pad-x: 20px;
    --text-display: 64px;
    --text-heading-lg: 52px;
    --text-heading: 44px;
    --text-heading-sm: 30px;
    --text-subheading: 24px;
  }
}