/*
 * CHAG SPORTS base styles: resets, base element styling, typography
 * classes, and the small set of layout primitives every page reuses.
 * Component styling (buttons, cards, badges, ...) lives in components.css;
 * breakpoint overrides live in responsive.css. Always reference tokens
 * from tokens.css - never hard-code a color/space/radius value here.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  transition: background-color var(--transition-base), color var(--transition-base);
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  font-family: inherit;
}

/* ---- Skip-to-content link (WCAG 2.1 AA / keyboard nav) ---- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-12);
  z-index: 2000;
  padding: var(--space-8) var(--space-16);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-12);
  text-decoration: none;
}

/* ---- Visible focus states everywhere (never remove outline without a
   replacement) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ---- Reduced motion (Design System V1.0 §18/§19) ----
 * "Remove nonessential transforms/transitions when reduced motion is
 * enabled." Component-specific animations (e.g. the skeleton shimmer in
 * components.css) still disable themselves individually where they use
 * @keyframes; this covers the general transition/scroll case. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Layout primitives ---- */
.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  flex: 1 0 auto;
}

.container-page {
  width: 100%;
  max-width: var(--container-xxl);
  margin-inline: auto;
  padding-inline: var(--space-16);
}

/* ---- Typography scale (Design System V1.0 §04) ----
 * The editorial (Georgia) family is used *selectively* - hero statements
 * and major section headings - never applied wholesale to every heading
 * level ("don't overuse it in operational UI"). Concretely: display/H1/H2
 * are editorial; H3/H4 are the primary sans-serif family, since those
 * levels are typically operational (card titles, widget headers) rather
 * than major editorial headings. */
.text-display,
.text-h1,
.text-h2 {
  font-family: var(--font-family-display);
  color: var(--color-text-primary);
  line-height: var(--line-height-heading);
  margin: 0 0 var(--space-12);
}

.text-h3,
.text-h4 {
  font-family: var(--font-family-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-heading);
  margin: 0 0 var(--space-12);
}

.text-display {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.02em;
}

.text-h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
}

.text-h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
}

.text-h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
}

.text-h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
}

.text-body-lg {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
  color: var(--color-text-primary);
}

.text-body {
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
}

.text-body-sm {
  font-size: var(--font-size-body-sm);
  color: var(--color-text-secondary);
}

/* "Metadata" is the Design System V1.0 term (§04/§27) for small, heavy,
   uppercase evidentiary labels (timestamps, competition tags, ...).
   .text-caption is kept as an alias - same token, same rendering - for
   anything already using that name. */
.text-metadata,
.text-caption {
  font-size: var(--font-size-metadata);
  font-weight: var(--font-weight-black);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.text-nav {
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-bold);
}

.text-control {
  font-size: var(--font-size-control);
  font-weight: var(--font-weight-bold);
}

.text-button {
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-semibold);
}

/* ---- Tabular numerals (Design System V1.0 §04) ----
 * "All odds, probabilities, scores and statistics use tabular numerals
 * where supported." .text-stat-value/.text-probability-value already
 * include this; .text-tabular is the standalone utility for anywhere else
 * a number needs it (table cells, slip totals, ad-hoc numeric labels). */
.text-tabular {
  font-variant-numeric: tabular-nums;
}

/* Statistical/probability values get their own scale: tabular figures so
   columns of numbers (odds, stats) align, and distinct weight so they read
   as data rather than prose. */
.text-stat-value {
  font-size: var(--font-size-stat);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}

/* Modifier for the "selected statistics/performance figures" editorial use
   case (Design System V1.0 §04) - a hero/featured metric, not a
   general-purpose stat. Use sparingly; most stat values stay in the
   primary family via .text-stat-value alone. */
.text-stat-value--editorial {
  font-family: var(--font-family-display);
}

.text-probability-value {
  font-size: var(--font-size-probability);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}

/* !important on all three: Bootstrap ships its own same-named `.text-
   muted`/`.text-secondary`/`.text-body` utility classes, each already
   declared with `!important` (bootstrap.min.css - a fixed, non-theme-
   aware color via --bs-secondary-color/--bs-body-color, not our own
   design tokens). A non-important rule can never win against an
   `!important` one regardless of source order or specificity, so
   without this, every use of these classes silently rendered
   Bootstrap's own static color instead of our theme-aware token -
   nearly invisible in dark theme, since that color never adapts to the
   dark navy background (confirmed directly: computed color was
   Bootstrap's rgba(33,37,41,.75) on a `.text-muted` "No predictions are
   available" message, not this rule's --color-text-muted, on the
   League Detail page; the identical rgb(33,37,41) collision was found
   again on `.text-body` on Match Detail's analysis summary during Task
   1.72A V2 Stage 6). Previously worked around per-instance (e.g. the
   footer tagline avoids `.text-secondary` entirely and uses the default
   text color instead) rather than fixed at the root - this closes it
   for every current and future use of any of the three classes,
   everywhere on the site. */
.text-muted {
  color: var(--color-text-muted) !important;
}

.text-secondary {
  color: var(--color-text-secondary) !important;
}

.text-body {
  color: var(--color-text-primary) !important;
}