/* Design tokens — числа из макета earlycr0wn 4.fig (betaces.co), выгрузка 2026-09-08.
 *
 * Имена говорят о роли, а не о значении. Значения НЕ округлялись: 22px из макета
 * остаётся 22px. Что добавлено нами (в макете этого нет) — помечено в секциях.
 * Источник: figma/INVENTORY.md (fig-tokens.js).
 */
:root {
  /* ── Цвет: из макета ─────────────────────────────────────────────────── */
  --color-brand: #2438ff;          /* электрик, 1133 узла — фон шапки, футера, панелей */
  --color-brand-deep: #1a28cc;     /* обводка и разделители внутри синих блоков */
  --color-accent: #d4ff00;         /* лайм, 483 — CTA, бейджи 18+, выделенный коэффициент */

  --color-ink: #0a0e1a;            /* основной текст и тёмные блоки (сведён с #0a0d1a) */
  --color-ink-soft: #1e2233;       /* обводка на тёмном (сведён с #1e2333) */
  --color-muted: #404659;          /* вторичный текст, 1297 */
  /* Макет ставит на третичный текст #8f96a6 — это 2.84:1 на кремовом фоне при
     норме 4.5:1 (WCAG 2.2 AA). Затемнено на один шаг; оттенок сохранён. */
  --color-muted-2: #5b6470;        /* было #8f96a6 (сведено с #8e94a6) */
  --color-muted-2-line: #8f96a6;   /* исходное значение — для линий и иконок */
  --color-muted-3: #888e94;        /* подписи в плашках */

  --color-cream: #fafaf7;          /* светлая поверхность и текст на синем/тёмном, 1383 */
  --color-cream-2: #f0efeb;        /* вторая кремовая поверхность */
  --color-page: #f0f2f4;           /* фон страницы и карточек рынков */
  --color-white: #ffffff;

  /* роли, которыми живёт базовый слой (base.css, layout.css) */
  --color-bg: var(--color-page);
  --color-text: var(--color-ink);
  --color-surface: var(--color-cream);

  --color-border: #e1e4e6;         /* основная обводка, 850 */
  --color-border-2: #e5e7eb;
  /* Макет держит вторичный текст на синем на 60% — это 3.21:1 при норме 4.5:1.
     Поднято до 78%: тот же приём, читаемый контраст. */
  --color-on-brand-soft: rgba(250, 250, 247, .8);   /* в макете 0.6 */
  --color-hairline-light: rgba(250, 250, 247, .149); /* разделители на синем */
  --color-hairline-dark: rgba(10, 14, 26, .078);     /* разделители на светлом */

  /* ── Цвет: добавлено нами (в макете нет) ─────────────────────────────── */
  --color-brand-hover: #1a28cc;
  --color-brand-active: #1420a3;
  --color-accent-hover: #c2eb00;
  --color-error: #b3261e;
  --color-success: #146c2e;
  --color-scrim: rgba(10, 14, 26, .5);              /* подложка модалок */
  --focus-ring: 0 0 0 3px rgba(36, 56, 255, .45);
  --focus-ring-on-brand: 0 0 0 3px rgba(212, 255, 0, .7);

  /* ── Типографика: из макета ──────────────────────────────────────────── */
  --font-display: "Archivo Narrow", "Arial Narrow", system-ui, sans-serif; /* заголовки */
  --font-body: "Geist", system-ui, -apple-system, sans-serif;              /* интерфейс и текст */
  --font-brand: "Inter", system-ui, sans-serif;                            /* словесный логотип */

  /* дисплейная шкала (Archivo Narrow Bold, трекинг отрицательный) */
  --fs-display: 110px;   /* герой главной */
  --fs-h1: 72px;
  --fs-h2: 64px;
  --fs-h3: 56px;
  --fs-h4: 40px;
  --fs-h5: 32px;
  --fs-h6: 22px;
  --fs-title: 20px;      /* заголовок пункта списка */
  --fs-card: 18px;       /* название матча в карточке */

  /* интерфейсная шкала (Geist) */
  --fs-body: 15px;
  --fs-body-sm: 14px;
  --fs-ui: 13px;
  --fs-meta: 12px;
  --fs-label: 11px;      /* капслок-метки секций, 858 узлов */
  --fs-micro: 10px;
  --fs-nano: 9px;

  --ls-display: -3px;    /* герой */
  --ls-h1: -2px;
  --ls-h4: -.5px;
  --ls-label: .5px;      /* капслок-метки */

  --lh-solid: 1;         /* в макете почти везде line-height 100% */
  --lh-tight: 1.15;
  --lh-base: 1.5;        /* только для резинового текста; фиксированные — в px по узлу */

  /* ── Пространство, форма, глубина ────────────────────────────────────── */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  --section-pad-y: 120px;   /* 100/80/100/80 и 120/80/120/80 — основные секции */
  --section-pad-y-sm: 80px;
  --section-pad-x: 80px;

  --radius-sm: 2px;         /* 337 узлов — основной радиус макета */
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-pill: 999px;     /* добавлено нами */

  --shadow-hairline: 0 1px 2px rgba(0, 0, 0, .102);
  --shadow-card: 8px 16px 32px rgba(0, 0, 0, .2);

  /* ── Контейнер: из геометрии макета (1440 − 80 × 2) ──────────────────── */
  --container: 1280px;
  --container-pad: 80px;
  /* Внешнее поле секции во всю ширину. До 1440 это те же 80px из макета, шире —
     ровно столько, чтобы содержимое осталось в центральной колонке 1280, а не
     прижималось к левому краю. Проценты в calc считаются от самой секции. */
  --section-gutter: max(80px, (100% - 1280px) / 2);
  --container-pad-mobile: 20px;   /* мобильные фреймы 390: 48/20/48/20, 40/20/40/20 */

  /* ── Движение (добавлено нами) ───────────────────────────────────────── */
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(.2, .7, .3, 1);
  --ease-in: cubic-bezier(.5, 0, .8, .3);

  /* ── Слои (добавлено нами) ───────────────────────────────────────────── */
  --z-sticky: 50;
  --z-header: 100;
  --z-sheet: 800;
  --z-overlay: 900;
  --z-modal: 1000;
}

/* Брейкпоинты не могут быть кастом-свойствами в media-запросах. Ширины макета
   держатся в kit.config.json, менять вместе:
   мобильный фрейм 390px · планшетный фрейм 820px (только racing) · десктоп 1440px
   переключение раскладки: max-width 1199px */