/* ============================================================================
   mightybet.co — дизайн-токены
   Источник: https://www.figma.com/design/xKqdpz7Vyxa2Jn5bXhVsfz/mightybet-10
   Выгружено: 2026-09-03 · 45 фреймов (14 страниц × 2 ширины + 17 состояний)

   Значения НЕ округлялись: приоритет режима — совпадение с макетом, а не
   красота шкалы. Отступ 38px остаётся 38px, даже если просится 40.

   Межстрочные заданы в PX, а не коэффициентом. Figma округляет высоту
   текстового бокса до целого пикселя, браузер — нет: Archivo Black 24px
   при автоматическом 1.088 даёт 26.11px, в макете бокс 26. По отдельности
   это шум, но на странице 13 088px расхождение складывается в сотни пикселей.
   ========================================================================= */

:root {
  /* ── Цвет ────────────────────────────────────────────────────────────────
     Шесть несущих цветов. Роли выведены из макета: где цвет стоит заливкой,
     а где текстом (см. figma/INVENTORY.md → палитра).                      */

  --color-ink: #120e0d;            /* 3052× — тёмные полосы, футер, основной текст */
  --color-paper: #f4e2cf;          /* 462×  — кремовый фон страницы, текст на тёмном */
  --color-surface: #fffdf8;        /* 1510× — белые карточки и полосы, текст на тёмном */
  --color-white: #ffffff;          /* 216×  — чистый белый, поля ввода */
  /* Макетный красный #f20d2f под белым текстом даёт 4.24:1 при норме 4.5 —
     не добирают все плашки, бейджи и кнопки сразу. Затемнён на один шаг:
     #e50c2c даёт 4.67:1, разница в оттенке на глаз не видна (проверено
     секционным диффом против эталона). Макетное значение сохранено ниже. */
  --color-brand: #e50c2c;          /* 1279× — красный: CTA, ленты, акцентный текст */
  --color-brand-figma: #f20d2f;    /* исходное значение из макета, для сверки  */
  --color-flame: #ff704d;          /* 102×  — коралловый: support-полоса, панель героя, водяные знаки */
  --color-amber: #ff7900;          /* 115×  — оранжевый: акцентный текст на тёмном, нумерация */
  --color-muted: #5e5552;          /* 878×  — приглушённый текст, выключенные переключатели */

  /* Правка ради доступности (решение F3, согласовано).
     #f20d2f мелким текстом на светлом даёт 3.41:1 при норме WCAG AA 4.5:1.
     Затемнён ТОЛЬКО текст: 4.71:1 на кремовом, 5.86:1 на белом.
     Заливки, ленты и кнопки остаются --color-brand — макет не меняется. */
  --color-brand-text: #c80a26;

  /* Те же правки для тёмных полос и акцентных оттенков. Мелкий текст на них
     тоже не добирал до 4.5, а крупные декоративные номера — до 3.
     Заливки, ленты и кнопки НЕ трогаются: макет остаётся макетом. */
  --color-brand-on-dark: #ff3355;  /* 5.35:1 на #120e0d (было 4.45 у brand)  */
  --color-flame-text: #b03a17;     /* 5.96 на белом, 4.80 на кремовом        */
  --color-amber-text: #a34a00;     /* 5.84 на белом, 4.70 на кремовом        */
  --color-amber-strong: #c25800;   /* крупные номера: 4.40 / 3.55 при норме 3 */

  /* Границы — в макете это ink с разной прозрачностью, а не отдельные серые */
  --color-line: #120e0d;                    /* сплошная обводка 1px, 1435× */
  --color-line-soft: rgba(18, 14, 13, .102); /* 71× */
  --color-line-softer: rgba(18, 14, 13, .051);
  --color-line-strong: rgba(18, 14, 13, .149);

  /* Статусы (в макете единичные, но нужны формам) */
  --color-success: #10b981;
  --color-success-deep: #2e7d32;
  --color-success-bg: #e8f5e9;
  --color-warning: #ef6c00;
  --color-warning-bg: #fff3e0;
  --color-danger: var(--color-brand);

  /* ── Состояния: в макете их нет, выведены от базовых ──────────────────── */
  --color-brand-hover: #d40b28;
  --color-brand-active: #b80922;
  --color-flame-hover: #ff5c33;

  /* Текстовые варианты акцентов: макетные #ff7900 и белый на #ff704d
     дают 2.6:1 при норме 4.5:1, поэтому для надписей на светлом фоне
     берётся затемнённый оранжевый, а на коралловом — цвет чернил. */
  --color-amber-text: #b35400;    /* 4.94:1 на #fffdf8 */
  --color-amber-heading: #d15f00; /* 3.11:1 на #f4e2cf — норма крупного текста */
  --color-on-flame: var(--color-ink);  /* 7.01:1 на #ff704d */
  --color-ink-hover: #282423;
  --color-surface-hover: #fbf3ea;
  --color-disabled-text: rgba(18, 14, 13, .38);
  --color-disabled-bg: rgba(18, 14, 13, .06);

  /* Видимый фокус обязателен, даже если дизайнер о нём не думал */
  --focus-ring: 0 0 0 3px rgba(242, 13, 47, .45);
  --focus-outline: 3px solid rgba(242, 13, 47, .75);
  --focus-outline-on-dark: 3px solid rgba(255, 121, 0, .9);
  --focus-ring-on-dark: 0 0 0 3px rgba(255, 121, 0, .65);

  /* Полупрозрачные подложки оверлеев — из макета */
  --scrim: rgba(18, 14, 13, .8);
  --scrim-soft: rgba(18, 14, 13, .6);

  /* ── Шрифты ──────────────────────────────────────────────────────────────
     Все три семейства свободные (OFL), self-host в assets/fonts/.
     Замен не потребовалось — FONT_SUBSTITUTIONS пуст.                      */

  --font-display: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-narrow: "Archivo Narrow", "Arial Narrow", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Consolas", monospace;

  /* ── Типографика: пары «размер + межстрочный в px» ────────────────────────
     Разбита по ролям, а не по числам: --fs-48 при правке макета пришлось бы
     переименовывать. Межстрочный Archivo Black везде = round(size × 1.088).  */

  /* Дисплейные заголовки (Archivo Black) */
  --fs-display: 72px;     --lh-display: 72px;     /* «TELL US WHAT'S UP.», 29× */
  --fs-h1: 64px;          --lh-h1: 64px;          /* «BACK YOUR GAME.», 6× */
  --fs-h2: 56px;          --lh-h2: 56px;          /* «AUD 250», 9× */
  --fs-h3: 42px;          --lh-h3: 44px;          /* «BACK YOUR GAME.» ×1.048, 9× */
  --fs-h4: 40px;          --lh-h4: 40px;          /* 24× */
  --fs-h5: 32px;          --lh-h5: 35px;          /* 48× — 32 × 1.088 */
  --fs-h6: 28px;          --lh-h6: 30px;          /* 118× */
  --fs-title: 24px;       --lh-title: 26px;       /* 171× — заголовок карточки */
  --fs-title-sm: 20px;    --lh-title-sm: 22px;    /* 127× */
  --fs-label-lg: 18px;    --lh-label-lg: 20px;    /* 137× */
  --fs-label: 16px;       --lh-label: 17px;       /* 122× */
  --fs-label-sm: 14px;    --lh-label-sm: 15px;    /* 164× */
  --fs-label-xs: 12px;    --lh-label-xs: 13px;    /* 90× */

  /* Основной текст (Geist) */
  --fs-body-lg: 16px;     --lh-body-lg: 26px;     /* 198× — абзацы legal, ×1.625 */
  --fs-body: 14px;        --lh-body: 21px;        /* 122× — ×1.5 */
  --fs-body-tight: 14px;  --lh-body-tight: 18px;  /* 116× — ×1.3, плотные списки */
  --fs-body-sm: 13px;     --lh-body-sm: 17px;     /* 385× — самый частый текст макета */
  --fs-body-xs: 12px;     --lh-body-xs: 16px;     /* 177× */
  --fs-caption: 11px;     --lh-caption: 14px;     /* 181× — сноски, дисклеймеры */
  --fs-micro: 10px;       --lh-micro: 13px;       /* 91× — мелкие бейджи */

  /* Узкие лейблы (Archivo Narrow 700) — кикеры и подписи разделов */
  --fs-kicker: 14px;      --lh-kicker: 19px;      /* 81× — ×1.347 */
  --fs-kicker-sm: 13px;   --lh-kicker-sm: 18px;   /* 68× */
  --fs-kicker-xs: 12px;   --lh-kicker-xs: 16px;   /* 62× */

  /* Начертания */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* Разрядка — в макете встречается точечно, на капсе */
  --ls-wide: .0625em;   /* 16px «PLACE BET →» */
  --ls-wider: .0769em;  /* 13px «SPORTS» в навигации */
  --ls-caps: .0455em;

  /* ── Пространство ─────────────────────────────────────────────────────────
     Шкала кратна 4, из реальных gap/padding макета (частота в скобках).     */

  --space-1: 2px;    /* 459× */
  --space-2: 4px;    /* 624× */
  --space-3: 6px;    /* 552× */
  --space-4: 8px;    /* 917× */
  --space-5: 10px;   /* 275× */
  --space-6: 12px;   /* 1318× — самый частый */
  --space-7: 14px;   /* 275× */
  --space-8: 16px;   /* 1303× */
  --space-9: 20px;   /* 691× */
  --space-10: 24px;  /* 687× */
  --space-11: 32px;  /* 364× */
  --space-12: 40px;  /* 130× — gap между секционными блоками */
  --space-13: 48px;  /* 111× */
  --space-14: 64px;  /* 24× */
  --space-15: 80px;  /* 396× — вертикальный отступ секций и padding-inline */

  /* Контейнер: фрейм 1440 при padding-inline 80 → контент 1280 */
  --container: 1280px;
  --gutter: 80px;
  --gutter-mobile: 16px;   /* из мобильных фреймов 390 */

  /* Высоты повторяющихся полос (в Figma заданы FIXED, выводить из падингов нельзя) */
  --h-utility-bar: 40px;
  --h-header: 80px;
  --h-ticker: 54px;

  /* ── Форма ────────────────────────────────────────────────────────────── */
  --radius-xs: 2px;    /* 27× */
  --radius-sm: 3px;    /* 183× — мелкие бейджи и чипы */
  --radius: 4px;       /* 140× */
  --radius-md: 6px;    /* 60× */
  --radius-lg: 8px;    /* 263× — карточки */
  --radius-xl: 12px;   /* 87× */
  --radius-2xl: 16px;  /* 19× */
  --radius-pill: 100px;/* 191× — кнопки-таблетки, табы */

  /* ── Глубина ──────────────────────────────────────────────────────────── */
  --shadow-card: 0 4px 16px rgba(18, 14, 13, .102);
  --shadow-soft: 0 8px 24px rgba(18, 14, 13, .031);
  --shadow-raised: 0 16px 32px rgba(0, 0, 0, .251);
  --shadow-overlay: 0 16px 40px rgba(0, 0, 0, .251);
  --shadow-modal: 0 24px 48px rgba(0, 0, 0, .4);
  --shadow-deep: 0 16px 40px rgba(0, 0, 0, .502);
  --shadow-up: 0 -8px 32px rgba(18, 14, 13, .251);  /* липкая панель снизу */

  /* ── Слои: в макете нет, задаём сами ──────────────────────────────────── */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-scrim: 400;
  --z-modal: 500;
  --z-agegate: 600;    /* регуляторный экран поверх всего */
  --z-toast: 700;

  /* ── Движение ─────────────────────────────────────────────────────────── */
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(.2, .6, .3, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
}

/* Брейкпоинты (в CSS не бывают кастом-свойствами — держим одним списком):
   390px  — ширина мобильного фрейма макета, пиксельный эталон
   1440px — ширина десктопного фрейма макета, пиксельный эталон
   389px  — ниже мобильного фрейма: только «чтобы не ломалось», эталона нет
   768px / 1024px — достроены нами по констрейнтам, эталона нет            */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}