/* Design tokens — числа из макета «лотто 10.fig», названы по роли.
 *
 * Источник: figma/INVENTORY.md (fig-tokens.js), разбор 2026-09-09. Правила:
 *   · имена говорят о роли (--color-surface), не о значении (--color-1, --fs-48);
 *   · значения НЕ округлены «для красоты» — 22px из макета остаётся 22px;
 *   · всё, чего в макете нет (состояния, фокус, движение), помечено ниже.
 * Режим приёмки — pixel (±2px), поэтому шкалы не нормализованы.
 */
:root {
  /* ── Цвет: из макета ─────────────────────────────────────────────────── */
  /* Тёмная база сайта. Самая большая площадь заливки в макете. */
  --color-bg: #0b0f14;
  /* Светлые секции (Upcoming markets, Find your competition, RG). */
  --color-bg-light: #f5f3ef;
  /* Тёмная панель: betstop-strip, карточки на тёмном, поля форм. */
  --color-panel: #0e1b2e;
  /* Отдельный тёмно-синий фон оверлеев и крупных подложек. */
  --color-panel-deep: #0b1220;
  /* Футер — почти чёрный с зелёным подтоном. */
  --color-footer: #080e0a;
  /* Карточка на светлой секции. */
  --color-card: #ffffff;
  /* Светлая служебная поверхность (строки таблиц, пустые состояния). */
  --color-surface-light: #f6f7f9;

  /* Текст на тёмном */
  --color-text: #cbd5e1;          /* основной, 930 узлов */
  --color-text-strong: #ffffff;   /* заголовки и акцентные строки */
  --color-text-muted: #94a3b8;    /* приглушённый (#96a3b8 сведён сюда, Δ=2) */
  --color-text-faint: #8c99b2;    /* ещё тише; отдельный токен, Δ=8 — не дубль */

  /* Текст на светлом */
  --color-text-dark: #0b0f14;
  --color-text-dark-muted: #475569;
  --color-text-dark-faint: #5b6470;   /* макетный #6b7280 давал 4.36:1 при норме 4.5 */

  /* Акцент бренда — лаймовый */
  --color-accent: #d9ff00;
  --color-accent-2: #c8ff00;      /* второй лайм из макета, редкий */
  --color-on-accent: #0b0f14;     /* текст на лаймовой кнопке */

  /* Зелёные — нумерация шагов и «положительные» метки */
  --color-green: #166534;
  --color-green-deep: #26590d;
  --color-green-bg: #0d2a1d;

  /* Границы */
  --color-border: #1f2a3a;        /* на тёмном, 457 обводок */
  --color-border-light: #e5e7eb;  /* на светлом */
  --color-border-dim: #d4d0c6;    /* на бежевом #f5f3ef */

  /* Ссылка/инфо из макета */
  --color-link: #2563eb;

  /* Затемнение поверх фотографий (герои, карточки видов спорта) */
  --scrim-55: rgba(11, 15, 20, .55);
  --scrim-75: rgba(11, 15, 20, .75);
  --scrim-70: rgba(5, 8, 13, .7);
  --scrim-35: rgba(11, 15, 20, .35);   /* подложка под фото героя */
  --scrim-25: rgba(11, 15, 20, .25);   /* она же на мобильном */

  /* ── Цвет: добавлено нами (в макете нет) ─────────────────────────────── */
  --color-accent-hover: color-mix(in srgb, var(--color-accent) 88%, #ffffff);
  --color-accent-active: color-mix(in srgb, var(--color-accent) 82%, #000000);
  --color-error: #ef4444;
  --color-error-bg: color-mix(in srgb, #ef4444 14%, transparent);
  --color-success: #22c55e;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-accent) 55%, transparent);
  --focus-ring-dark: 0 0 0 3px color-mix(in srgb, var(--color-text-dark) 45%, transparent);

  /* ── Типографика: из макета ──────────────────────────────────────────── */
  /* Пять семейств, все свободные и есть на Google Fonts — замен не требуется. */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;      /* 36 фреймов */
  --font-text: "Archivo", system-ui, sans-serif;                             /* контент, legal, формы */
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;      /* метки, коды, «18+» */
  --font-narrow: "Archivo Narrow", "Archivo", system-ui, sans-serif;         /* только bet cart */
  --font-geist: "Geist", system-ui, sans-serif;                              /* только showdown mobile */

  /* Шкала кеглей — как в макете, с ролями. Интерфейс плотный: ядро 11–16px. */
  --fs-hero: 96px;   /* логотип-вывеска в футере */
  --fs-d1: 64px;
  --fs-d2: 52px;     /* «CHANCES ARE YOU'RE ABOUT TO LOSE.» */
  --fs-d3: 48px;
  --fs-h1: 44px;
  --fs-h2: 32px;
  --fs-h3: 28px;
  --fs-h4: 24px;
  --fs-h5: 20px;
  --fs-h6: 18px;
  --fs-lg: 16px;
  --fs-md: 15px;
  --fs-body: 14px;   /* самый частый после 13 */
  --fs-sm: 13px;     /* самый частый кегль макета (836 узлов) */
  --fs-xs: 12px;
  --fs-2xs: 11px;
  --fs-3xs: 10px;

  /* Межстрочный. В макете подавляющее большинство узлов — 100% (line-height
     равен кеглю). Per-node значение в px ставится в вёрстке из fig-spec;
     эти два — только для резинового текста. */
  --lh-solid: 1;
  --lh-tight: 1.15;
  --lh-base: 1.5;

  /* ── Пространство ────────────────────────────────────────────────────── */
  --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;

  /* Вертикальный ритм секции: десктоп 48 (местами 64), мобильный 40. */
  --section-pad-y: 48px;
  --section-pad-y-mobile: 40px;

  /* ── Форма ───────────────────────────────────────────────────────────── */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-6: 6px;
  --radius-md: 8px;
  --radius-10: 10px;   /* самый частый непилюльный радиус (168) */
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ── Глубина ─────────────────────────────────────────────────────────── */
  --shadow-card: 0 16px 32px rgba(0, 0, 0, .149);
  --shadow-pop: 0 16px 32px -12px rgba(0, 0, 0, .149);

  /* ── Контейнер: из фреймов макета ────────────────────────────────────── */
  --container: 1440px;       /* ширина десктопного фрейма */
  --container-pad: 48px;     /* padding секций: 1440 − 48×2 = 1344 контента */
  --container-pad-mobile: 16px;  /* мобильный фрейм 390 − 16×2 = 358 */
  --content: 1344px;

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

  /* ── Слои ────────────────────────────────────────────────────────────── */
  --z-header: 100;
  --z-betslip: 300;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-agegate: 1100;   /* возрастной барьер поверх всего */

  /* ── Мосты для базового слоя заготовки ───────────────────────────────
     Заготовка кита написана на обобщённых именах. Здесь они привязаны к
     ролям этого макета, чтобы base/components работали без переписывания. */
  --font-body: var(--font-ui);
  --font-display: var(--font-ui);
  --color-brand: var(--color-accent);
  --color-brand-hover: var(--color-accent-hover);
  --color-brand-active: var(--color-accent-active);
  --color-surface: var(--color-panel);
  --color-muted: var(--color-text-muted);
  --fs-small: var(--fs-sm);
}

/* Брейкпоинты в медиа-запросах не могут быть кастом-свойствами. Ширины макета
   лежат в kit.config.json; менять эти три значения только вместе с ним.
   --bp-mobile: 390px   (мобильный фрейм макета)
   --bp-switch: 1199px  (ниже — мобильная раскладка)
   --bp-desktop: 1440px (десктопный фрейм макета) */