/* Design tokens — числа из макета «лотто 17.fig», названные по роли.
 *
 * Заполнено на F2 (2026-09-09) из вывода fig-tokens.js. Правила:
 *   · имена говорят о роли (--color-surface), не о значении (--color-1, --fs-48);
 *   · значения не округлялись «для красоты» — 13px из макета остаётся 13px;
 *   · всё, чего в макете нет (состояния, фокус, движение), помечено ниже.
 */
:root {
  /* ── Цвет: из макета ─────────────────────────────────────────────────── */
  --color-bg: #f7f8fa;            /* фон страницы (110) */
  --color-surface: #ffffff;       /* карточки, шапка, полосы (785) */
  --color-tint: #e8eeff;          /* светло-синие блоки: bet slip, RG-полоса (75) */
  --color-ink: #11172a;           /* основной текст и тёмный фон (979) */
  --color-brand: #153ddb;         /* синий бренда (972) */
  --color-brand-deep: #2b3fd4;    /* нажатое состояние кнопок из макета (19) */
  --color-brand-lift: #315bff;    /* светлый конец градиентов (12) */
  --color-brand-abyss: #0f2ea8;   /* тёмный конец градиента героя */
  --color-night: #0a0f1e;         /* тёмный конец градиента футера */
  --color-card-dark: #131b23;     /* тёмная карточка внутри синего блока */
  --color-ink-deep: #0b1117;      /* почти чёрные карточки RG-08 */
  --color-slate: #6b7a8d;         /* стрелки в оглавлении (9) */     /* тёмная карточка внутри синего блока */

  --color-text: #333333;          /* текст абзацев (218) */
  --color-muted: #555555;         /* вторичный текст (288) */
  --color-soft: #666666;         /* абзацы в карточках и таблицах (126) */
  /* Макетный #777777 даёт 4.48:1 на белом и 4.21 на фоне страницы — обе цифры
     ниже нормы 4.5. Сдвинут на две единицы до #6f6f6f: глазом неотличимо,
     WCAG AA закрыт на обеих поверхностях. */
  --color-faint: #6f6f6f;         /* подписи, дисклеймеры (макет #777777, 144) */
  /* Решение F3: #888888 даёт 3.34:1 — ниже 3, единственный случай «критичного»
     недобора в палитре. Заменён на #6b6b6b (5.02:1). */
  --color-dim: #6b6b6b;           /* мелкие сноски (макет #888888, 59) */
  --color-on-brand-dim: #8098d0;  /* вторичный текст на синем (38) */

  --color-border: #e0e4eb;        /* линии таблиц и карточек (230) */
  --color-border-strong: #d0d4db; /* обводка полей ввода (170) */
  --color-border-tint: #e8eeff;   /* обводка на светло-синем (53) */
  --color-border-soft: #c8d0e0;   /* обводка полей на светлых карточках (12) */

  /* На тёмном фоне (футер, герой) */
  --color-on-dark: #ffffff;
  --color-on-dark-80: rgba(255, 255, 255, .8);
  --color-on-dark-70: rgba(255, 255, 255, .702);
  --color-on-dark-60: rgba(255, 255, 255, .6);
  --color-on-dark-50: rgba(255, 255, 255, .502);
  --color-on-dark-40: rgba(255, 255, 255, .4);
  --color-on-dark-20: rgba(255, 255, 255, .2);
  --color-on-dark-10: rgba(255, 255, 255, .102);  /* разделители в футере */

  /* Градиенты из макета */
  --grad-hero: linear-gradient(63deg, #315bff 0%, #0f2ea8 100%);
  --grad-hero-mobile: linear-gradient(90deg, #153ddb 0%, #315bff 100%);
  --grad-footer: linear-gradient(63deg, #153ddb 0%, #0a0f1e 100%);
  --grad-footer-mobile: linear-gradient(0deg, #153ddb 0%, #11172a 100%);
  --grad-dark: linear-gradient(63deg, #153ddb 0%, #11172a 100%);

  /* ── Цвет: добавлено нами (в макете нет) ─────────────────────────────── */
  --color-brand-hover: color-mix(in srgb, var(--color-brand) 88%, black);
  --color-brand-active: var(--color-brand-deep);
  --color-error: #b3261e;
  --color-success: #146c2e;
  --color-disabled: #c8d0e0;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-brand) 45%, transparent);

  /* ── Типографика: из макета ──────────────────────────────────────────── */
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero: 120px;      /* заголовок героя, desktop */
  --fs-mark: 100px;      /* лого-подпись в футере */
  --fs-h1: 72px;         /* заголовки секций, desktop */
  --fs-h2: 48px;         /* заголовки секций, mobile / вторичные desktop */
  --fs-h3: 36px;
  --fs-h4: 28px;
  --fs-h5: 26px;         /* лого в шапке */
  --fs-h6: 24px;
  --fs-lg: 22px;
  --fs-md: 18px;
  --fs-body: 16px;
  --fs-body-sm: 15px;
  --fs-base: 14px;       /* самый частый кегль (925) */
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fs-2xs: 11px;
  --fs-3xs: 10px;
  --fs-4xs: 9px;         /* микроподписи в таблицах */

  /* Межстрочный: в макете почти везде 100% (line-height = кегль).
     Эти значения — только для резинового текста, остальное задаётся в px по узлу. */
  --lh-tight: 1;
  --lh-snug: 1.25;
  --lh-base: 1.5;
  --ls-wide: .08em;      /* uppercase-надписи «ONLINE BETTING AUSTRALIA / 01» */

  /* ── Пространство, форма, глубина ────────────────────────────────────── */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;      /* самый частый gap (556) */
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;

  --radius-xs: 2.5px;
  --radius-sm: 4px;      /* кнопки, поля (211) */
  --radius-md: 6px;      /* карточки, таблицы (108) */
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-pill: 999px;  /* бейджи, точки (115) */

  --shadow-card: 0 16px 32px -8px rgba(0, 0, 0, .102);
  --shadow-pop: 0 18px 40px -10px rgba(0, 0, 0, .102);
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, .039);

  /* ── Контейнер: из геометрии фреймов ─────────────────────────────────── */
  --container: 1280px;         /* 1440 − 80×2 */
  --container-pad: 80px;       /* desktop */
  --container-pad-mobile: 20px;/* 390 − 20×2 = 350 */
  --section-pad-y: 48px;       /* desktop */
  --section-pad-y-mobile: 32px;

  /* ── Движение (добавлено нами) ───────────────────────────────────────── */
  --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-overlay: 900;
  --z-modal: 1000;
}

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