/* Design tokens — swiftbet.co
 *
 * Источник: макет «лотто 22.fig», разобран 2026-09-15 → figma/INVENTORY.md.
 * Значения не округлялись: 22px из макета остаётся 22px, gap 55 остаётся 55.
 * Всё, чего в макете нет (состояния, фокус, движение), помечено отдельным блоком.
 */
:root {
  /* ── Цвет: из макета ─────────────────────────────────────────────────── */
  --color-bg: #ffffff;              /* фон страницы (1444) */
  --color-ink: #1a1a1a;             /* основной текст и тёмные полосы (1826) */
  --color-lime: #c8ff00;            /* акцент №1: CTA, маркеры, ссылки на тёмном (725) */
  --color-violet: #6250d4;          /* акцент №2: бет-слип, выделение в заголовке (296).
                                       В макете #7b68ee. На нём лежат ДВА цвета текста:
                                       белый (4.15:1 в макете) и лаймовые значения
                                       коэффициентов (3.92:1). Одного сдвига фона хватает
                                       на оба: белый 5.81:1, лайм 4.91:1 — обе нормы AA
                                       закрыты без замены самих цветов текста. */
  --color-violet-fig: #7b68ee;      /* исходный тон макета — для декора без текста */
  --color-violet-on-dark: #8878f0;  /* фиолетовый текст на #1a1a1a: 4.19:1 → 4.97:1 */
  --color-border: #e5e7eb;          /* линии карточек и таблиц (271 обводок + 27 заливок) */
  --color-muted: #6b7280;           /* вспомогательный текст форм и модалок (47) */
  --color-note: #666666;            /* мелкая сноска в шапке, десктоп (14) */
  --color-note-m: #737373;          /* она же в мобильной шапке — в макете светлее (15) */
  --color-faint: #767676;           /* подписи колонок в таблице заездов.
                                       В макете #a3a3a3 — 2.52:1, поднято до 4.54:1 */

  /* Тёплая линия: секции-полки, плашки-предупреждения, кампания */
  --color-sand: #f3f0e4;            /* тёплая светлая поверхность секции (35) */
  --color-sand-ink: #5c564c;        /* текст на песочном (11) */
  --color-sand-muted: #a6a095;      /* приглушённый на песочном (6) */
  --color-notice: #f6e9a7;          /* жёлтая плашка «важно» (12) */
  --color-notice-line: #d9cc81;     /* её обводка (8) */
  --color-ink-warm: #181610;        /* тёплый тёмный фон (17) */

  /* Тёмные поверхности внутри тёмных блоков */
  --color-ink-2: #2a2a2f;
  --color-ink-3: #3a3a40;
  --color-scrim: rgba(26, 26, 26, .902);   /* подложка модалок */

  /* ── Цвет: добавлено нами (в макете нет) ─────────────────────────────── */
  --color-lime-hover: color-mix(in srgb, var(--color-lime) 88%, #1a1a1a);
  --color-lime-active: color-mix(in srgb, var(--color-lime) 78%, #1a1a1a);
  --color-violet-hover: color-mix(in srgb, var(--color-violet) 86%, #000);
  --color-violet-active: color-mix(in srgb, var(--color-violet) 74%, #000);
  --color-ink-hover: #2d2d2d;              /* есть в макете 2 раза — годится как hover */
  --color-error: #b3261e;
  --color-success: #146c2e;
  --color-surface-2: #f9fafb;              /* зебра в таблицах, из макета (1) */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-violet) 55%, transparent);
  --focus-ring-dark: 0 0 0 3px color-mix(in srgb, var(--color-lime) 65%, transparent);

  /* ── Типографика: из макета ──────────────────────────────────────────── */
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Anton", "Plus Jakarta Sans", system-ui, sans-serif;

  /* Шкала кеглей — 30 значений в макете, в роли сведены основные.
     Редкие (120, 88, 80, 42, 38, 36, 30, 26) ставятся по месту из fig-spec. */
  --fs-watermark: 96px;   /* «Swiftbet.co» подложкой в футере */
  --fs-h1: 72px;          /* hero, десктоп */
  --fs-h2: 64px;          /* заголовок секции, десктоп */
  --fs-h3: 44px;
  --fs-h4: 40px;
  --fs-h5: 32px;
  --fs-h6: 28px;
  --fs-lead: 24px;
  --fs-title: 22px;
  --fs-subtitle: 20px;
  --fs-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 15px;
  --fs-small: 14px;       /* самый частый кегль макета (686) */
  --fs-xs: 13px;
  --fs-2xs: 12px;
  --fs-3xs: 11px;
  --fs-micro: 10px;
  --fs-nano: 9px;
  --fs-pico: 8px;

  /* Межстрочный. В макете почти везде 100% («line-height: auto» у одной строки)
     либо +1/+2px к кеглю у абзацев. Абзацные значения задаются в px по месту;
     эти два — только для текста, длина которого не фиксирована. */
  --lh-flat: 1;
  --lh-base: 1.5;
  --tracking-tight: -0.02em;

  /* ── Пространство ────────────────────────────────────────────────────── */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;   /* самый частый gap (497) */
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-55: 55px;   /* из макета, не округляем до 56 */
  --space-56: 56px;
  --space-72: 72px;
  --space-80: 80px;

  /* Вертикальный ритм секций: десктоп 80/40, мобильный 40/16 */
  --section-y: 80px;
  --section-y-m: 40px;

  /* ── Форма ───────────────────────────────────────────────────────────── */
  --radius-xs: 2px;
  --radius-sm: 4px;    /* базовый радиус макета (550) */
  --radius-md: 6px;    /* кнопки (77) */
  --radius-lg: 8px;
  --radius-pill: 100px;

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

  /* ── Контейнер: из геометрии фреймов ─────────────────────────────────── */
  --container: 1440px;       /* ширина десктопного фрейма; контент внутри = 1360 */
  --container-pad: 40px;
  --container-pad-m: 16px;   /* мобильный фрейм 390 → контент 358 */

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

  /* Высота липкой шапки. Живёт токеном, потому что от неё зависит не только
     сама шапка, но и отступ прокрутки к якорям (scroll-padding-top). */
  --header-h: 96px;

  /* ── Слои ────────────────────────────────────────────────────────────── */
  --z-header: 100;
  --z-slip: 200;
  --z-overlay: 900;
  --z-modal: 1000;
}

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