/* ============================================================================
   theme.css — визуальная тема top-wager.com (v2, контрастная).
   Подключается ПОСЛЕДНЕЙ и перекрывает токены и компоненты.
   Идея: спортивный «конденс» — узкая гарнитура заголовков, острые углы,
   жёсткие offset-тени у кнопок, тёмная шапка и тёмный герой, мятная полоса 18+.
   ========================================================================= */

/* ── Дисплейная гарнитура: узкий Archivo Narrow Bold вместо Archivo Black ── */

@font-face {
  font-family: "TopWager Display";
  src: url("../fonts/archivo-narrow-700.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "TopWager Display", "Arial Narrow", "Helvetica Neue", sans-serif;

  /* Острые формы: почти всё квадратное, таблетки -> скруглённые прямоугольники */
  --radius-xs: 2px;
  --radius-sm: 2px;
  --radius: 4px;
  --radius-md: 5px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 10px;
  --radius-pill: 6px;

  /* Конденс шире по буквам, чем кажется: чуть раздвигаем капс */
  --ls-wide: .08em;
  --ls-wider: .1em;
}

/* ── Кнопки: жёсткая offset-тень вместо внутренней обводки ─────────────── */

.btn--brand,
.btn--light,
.btn--ink,
.btn--outline {
  box-shadow: 3px 3px 0 var(--color-ink);
}

.btn--brand:active,
.btn--light:active,
.btn--ink:active,
.btn--outline:active {
  box-shadow: 1px 1px 0 var(--color-ink);
}

/* ── Верхняя полоса 18+: мятная с тёмным текстом ───────────────────────── */

.rg-bar { background: var(--color-flame); color: var(--color-ink); }

.rg-bar__caps,
.rg-bar__note,
.rg-bar__help,
.rg-bar__phone { color: var(--color-ink); }

.rg-bar__cta { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.rg-bar__cta:hover { color: #065f38; }

.rg-bar .badge--brand { box-shadow: inset 0 0 0 1px var(--color-ink); }

/* ── Шапка: тёмная ─────────────────────────────────────────────────────── */

.site-header {
  background: var(--color-ink);
  box-shadow: inset 0 -1px 0 rgba(233, 238, 245, .18);
}

.site-header .logo { color: var(--color-surface); }
.site-header .logo__tld { box-shadow: inset 0 0 0 1px rgba(233, 238, 245, .35); }

.site-nav__link { color: var(--color-paper); }
.site-nav__link:hover,
.site-nav__link[aria-current="page"] { color: var(--color-brand-on-dark); }

.site-header__login { color: var(--color-paper); }
.site-header__login:hover { color: var(--color-brand-on-dark); }

.site-header .burger { color: var(--color-paper); }

/* ── Лента видов спорта: тёмная с золотыми звёздами ────────────────────── */

.ticker {
  background: var(--color-ink);
  box-shadow: inset 0 1px 0 rgba(233, 238, 245, .18);
}

.page-home .ticker__star,
.ticker__star { color: var(--color-amber); }

/* ── Герой главной: тёмный, текст справа уже повёрнут темой v1 ─────────── */

.page-home .hero { background: var(--color-ink); }

.page-home .hero__head .kicker-pill {
  background: var(--color-flame);
  color: var(--color-ink);
}

.page-home .hero__title em { color: var(--color-brand-on-dark); }
.page-home .hero__title .hero__accent { color: var(--color-amber); }
.page-home .hero__line,
.page-home .hero__line:last-child { color: var(--color-surface); }

.page-home .hero__lead,
.page-home .hero__note { color: var(--color-paper); opacity: .78; }

.page-home .hero__poster {
  box-shadow: inset 0 0 0 1px rgba(233, 238, 245, .25);
}

/* ── Секция racing: тёмное море вместо зелёного ────────────────────────── */

.racing { background: var(--color-ink); }

.racing__watermark { -webkit-text-stroke-color: var(--color-flame); }

/* Выбранный забег подписываем фирменным зелёным, а не тёплым золотым */
.ntj-card--lead .ntj-card__race { color: var(--color-brand-text); }

/* ── Нижние полосы и футер: контрастные линии сверху ───────────────────── */

.site-footer { box-shadow: inset 0 6px 0 var(--color-brand); }

.support-strip { box-shadow: inset 0 -4px 0 rgba(12, 21, 36, .18); }

/* ── Заголовки секций: золотое подчёркивание кикеров ───────────────────── */

.betting__kicker,
.racing__kicker,
.explore__kicker,
.rg-section__kicker,
.hiw__kicker {
  box-shadow: inset 0 -3px 0 var(--color-amber);
}

/* Дисплейные заголовки чуть плотнее по межстрочному — конденс это позволяет */
.hero__title,
.betting__title,
.explore__title,
.hiw__title,
.racing__title,
.rg-section__title {
  letter-spacing: .01em;
}