/* Design tokens — числа из макета «лотто 25.fig», названные по роли.
 *
 * Выгрузка: 2026-09-08, источник — node tools/fig-tokens.js (figma/INVENTORY.md).
 * Значения не округлялись: 22px из макета остаётся 22px. Режим приёмки — pixel (±2px),
 * поэтому нормализация шкалы «для красоты» здесь запрещена.
 * Всё, чего в макете нет (состояния, фокус, движение, слои), помечено отдельным блоком.
 */
:root {
  /* ── Цвет: из макета ─────────────────────────────────────────────────── */
  --color-bg: #07060c;              /* фон страницы, 134 узла */
  --color-bg-deep: #0a0812;         /* карточки на тёмном */
  --color-surface: #0f0b1e;         /* bet slip, payment-strip, низ футера */
  --color-surface-2: #11172a;       /* карточки race/market на тёмном */
  --color-violet-deep: #1e1145;     /* rg-support-strip, верх градиента футера */
  --color-black: #000000;           /* секция responsible-gambling */

  --color-light-bg: #f3f0ff;        /* светлые секции: upcoming-markets */
  --color-white: #ffffff;           /* 971 узел: текст на тёмном, карточки на светлом */
  --color-light-tint: #ece9f2;      /* сведён с #e8e4f0 — разница 2 ед., один и тот же серый */

  --color-text: #ffffff;            /* основной текст на тёмном */
  --color-text-dark: #111014;       /* текст на светлых секциях */
  --color-muted: #a09bb0;           /* 826 узлов: вторичный текст */
  --color-muted-2: #6b6580;         /* 467: мелкие подписи, футер-бottom */
  --color-muted-3: #4c465c;         /* 306: самый тихий уровень */

  --color-brand: #7c3aed;           /* 760 узлов: кнопки, акценты, активные табы */
  --color-brand-light: #a78bfa;     /* 191: ссылки и акценты на тёмном */

  --color-border: rgba(255, 255, 255, .078);   /* разделители на тёмном */
  --color-border-soft: rgba(255, 255, 255, .055);
  --color-border-brand: rgba(124, 58, 237, .141);
  --color-border-brand-strong: rgba(124, 58, 237, .4);
  --color-border-light: #e8e4f0;               /* обводка карточек на светлом */

  --fill-glass: rgba(255, 255, 255, .059);     /* 127 узлов: стеклянные плашки */
  --fill-glass-soft: rgba(255, 255, 255, .04);

  --grad-hero: linear-gradient(180deg, #07060c 0%, #0f0b1e 100%);
  --grad-footer: linear-gradient(180deg, #07060c 0%, #0f0b1e 55%, #1e1145 100%);
  --grad-brand: linear-gradient(90deg, #7c3aed 0%, #6d28d9 100%);
  --grad-veil: linear-gradient(180deg, rgba(124, 58, 237, 0) 0%, rgba(124, 58, 237, .302) 100%);

  /* ── Цвет: добавлено нами (в макете состояний нет) ───────────────────── */
  --color-brand-hover: #8b5cf6;
  --color-brand-active: #6d28d9;    /* конец брендового градиента — берём как active */
  --color-error: #f87171;
  --color-success: #34d399;
  --color-disabled: var(--color-muted-3);
  --focus-ring: 0 0 0 3px rgba(167, 139, 250, .55);

  /* ── Типографика: из макета ──────────────────────────────────────────── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;

  /* дисплейные «водяные знаки» на фоне секций */
  --fs-watermark-xl: 240px;         /* MARKETS */
  --fs-watermark-lg: 160px;         /* Betaroo.co в футере */

  --fs-display: 74px;               /* hero h1 */
  --fs-h1: 56px;                    /* UPCOMING MARKETS */
  --fs-h2: 48px;                    /* NEXT TO JUMP */
  --fs-h3: 40px;
  --fs-h4: 32px;
  --fs-h5: 28px;
  --fs-h6: 24px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-body-sm: 15px;
  --fs-ui: 14px;
  --fs-small: 13px;                 /* 701 узел — самый частый кегль */
  --fs-caption: 12px;
  --fs-micro: 11px;                 /* utility-strip, legal-info */
  --fs-nano: 10px;                  /* подпись под логотипом */

  /* В макете межстрочный почти везде 100% (line-height = кеглю); там, где текст
     резиновый, используем коэффициенты ниже. Точные px — на узел, из fig-spec. */
  --lh-solid: 1;
  --lh-tight: 1.15;
  --lh-base: 1.5;
  --ls-wide: .08em;                 /* uppercase-подписи PAYMENT METHODS, лейблы */

  /* ── Пространство: gap и padding из auto layout ───────────────────────── */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;                 /* 521 — самый частый gap */
  --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;                 /* вертикальный ритм секций */

  /* ── Форма и глубина ─────────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;                /* 183 узла — базовый радиус карточек */
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-4xl: 24px;
  --radius-pill: 999px;

  --shadow-card: 0 4px 24px rgba(0, 0, 0, .059);
  --shadow-card-dark: 0 10px 24px -10px rgba(0, 0, 0, .4);
  --shadow-brand: 0 18px 48px -12px rgba(124, 58, 237, .149);
  --shadow-brand-sm: 0 10px 24px -10px rgba(124, 58, 237, .149);
  --shadow-soft: 0 8px 32px rgba(0, 0, 0, .149);

  /* ── Контейнер: из auto layout секций (1440 − 80/80) ─────────────────── */
  --container: 1280px;
  --container-pad: 80px;            /* desktop */
  --container-pad-mobile: 16px;     /* мобильные фреймы 390 */

  /* ── Движение (в макете нет) ─────────────────────────────────────────── */
  --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-watermark: 0;
  --z-content: 1;
  --z-header: 100;
  --z-overlay: 900;
  --z-modal: 1000;
}

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