/* Hub360 Sports — Arena Digital
   Semantic aliases are intentionally separated from palette values so a future
   dark theme can replace the semantic layer without changing components. */
:root {
  color-scheme: light;

  --sports-color-navy: #0f2a44;
  --sports-color-blue: #1463ff;
  --sports-color-teal: #18b7b1;
  --sports-color-gold: #c48a12;
  --sports-color-neutral-0: #ffffff;
  --sports-color-neutral-25: #f7f9fc;
  --sports-color-neutral-100: #e4e7ec;
  --sports-color-neutral-500: #667085;
  --sports-color-neutral-900: #182230;

  --sports-surface-primary: var(--sports-color-neutral-0);
  --sports-surface-secondary: var(--sports-color-neutral-25);
  --sports-surface-brand: var(--sports-color-navy);
  --sports-text-primary: var(--sports-color-neutral-900);
  --sports-text-secondary: var(--sports-color-neutral-500);
  --sports-text-on-brand: var(--sports-color-neutral-0);
  --sports-border-default: var(--sports-color-neutral-100);
  --sports-border-strong: #cbd2dc;
  --sports-action-primary: var(--sports-color-blue);
  --sports-action-primary-hover: #0d4ed8;
  --sports-focus-ring: rgb(20 99 255 / 28%);

  --sports-state-scheduled-fg: #175cd3;
  --sports-state-scheduled-bg: #eff8ff;
  --sports-state-progress-fg: #087a75;
  --sports-state-progress-bg: #e7f9f7;
  --sports-state-finished-fg: #344054;
  --sports-state-finished-bg: #f2f4f7;
  --sports-state-postponed-fg: #b54708;
  --sports-state-postponed-bg: #fff4e5;
  --sports-state-cancelled-fg: #b42318;
  --sports-state-cancelled-bg: #fef3f2;
  --sports-state-annulled-fg: #475467;
  --sports-state-annulled-bg: #f2f4f7;
  --sports-state-success-fg: #067647;
  --sports-state-success-bg: #ecfdf3;
  --sports-state-warning-fg: #b54708;
  --sports-state-warning-bg: #fffaeb;
  --sports-state-error-fg: #b42318;
  --sports-state-error-bg: #fef3f2;
  --sports-state-champion-fg: #7a4e00;
  --sports-state-champion-bg: #fff7dc;

  --sports-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sports-type-display-size: clamp(2rem, 7vw, 3.5rem);
  --sports-type-page-title-size: clamp(1.75rem, 5vw, 2.5rem);
  --sports-type-section-title-size: clamp(1.25rem, 3vw, 1.5rem);
  --sports-type-card-title-size: 1.125rem;
  --sports-type-body-size: 1rem;
  --sports-type-small-size: 0.8125rem;
  --sports-type-score-size: clamp(2rem, 8vw, 3rem);

  --sports-space-1: 0.25rem;
  --sports-space-2: 0.5rem;
  --sports-space-3: 0.75rem;
  --sports-space-4: 1rem;
  --sports-space-6: 1.5rem;
  --sports-space-8: 2rem;
  --sports-space-12: 3rem;
  --sports-space-16: 4rem;

  --sports-radius-control: 0.5rem;
  --sports-radius-card: 0.75rem;
  --sports-radius-feature: 1rem;
  --sports-radius-pill: 999px;
  --sports-shadow-card: 0 1px 2px rgb(16 24 40 / 5%);
  --sports-shadow-elevated: 0 16px 40px rgb(15 42 68 / 16%);

  /* Documentation tokens. Media queries use their resolved values. */
  --sports-breakpoint-mobile: 36rem;
  --sports-breakpoint-tablet: 48rem;
  --sports-breakpoint-desktop: 64rem;

  /* Compatibility aliases for existing consumers. */
  --sports-navy: var(--sports-color-navy);
  --sports-blue: var(--sports-color-blue);
  --sports-teal: var(--sports-color-teal);
  --sports-sky: var(--sports-state-scheduled-bg);
  --sports-canvas: var(--sports-surface-secondary);
  --sports-radius: var(--sports-radius-card);
}

html,
body {
  font-family: var(--sports-font-family);
  color: var(--sports-text-primary);
  background: var(--sports-surface-secondary);
}

button,
input,
select,
textarea { font: inherit; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--sports-focus-ring);
  outline-offset: 2px;
}

.sports-type-display,
.sports-type-page-title,
.sports-type-section-title,
.sports-type-card-title {
  color: var(--sports-text-primary);
  text-wrap: balance;
}

.sports-type-display { font-size: var(--sports-type-display-size); font-weight: 800; line-height: 1.05; }
.sports-type-page-title { font-size: var(--sports-type-page-title-size); font-weight: 780; line-height: 1.12; }
.sports-type-section-title { font-size: var(--sports-type-section-title-size); font-weight: 750; line-height: 1.2; }
.sports-type-card-title { font-size: var(--sports-type-card-title-size); font-weight: 720; line-height: 1.3; }
.sports-type-body { font-size: var(--sports-type-body-size); line-height: 1.6; }
.sports-type-small { color: var(--sports-text-secondary); font-size: var(--sports-type-small-size); line-height: 1.45; }
.sports-type-score { font-size: var(--sports-type-score-size); font-weight: 850; font-variant-numeric: tabular-nums; line-height: 0.95; }

.sports-card {
  border: 1px solid var(--sports-border-default);
  border-radius: var(--sports-radius-card);
  background: var(--sports-surface-primary);
  box-shadow: var(--sports-shadow-card);
}

.sports-button,
.sports-input,
.sports-select { min-height: 2.75rem; border-radius: var(--sports-radius-control); }

.sports-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sports-space-2);
  padding: var(--sports-space-3) var(--sports-space-4);
  border: 1px solid transparent;
  background: var(--sports-action-primary);
  color: var(--sports-text-on-brand);
  font-weight: 700;
}

.sports-input,
.sports-select {
  width: 100%;
  padding: var(--sports-space-3);
  border: 1px solid var(--sports-border-strong);
  background: var(--sports-surface-primary);
  color: var(--sports-text-primary);
}

.sports-state {
  display: grid;
  min-height: 12rem;
  place-items: center;
  gap: var(--sports-space-3);
  padding: var(--sports-space-8);
  border-color: var(--sports-border-default) !important;
  border-radius: var(--sports-radius-card) !important;
  background: var(--sports-surface-primary);
  text-align: center;
}

.sports-state .mud-typography-secondary { color: var(--sports-text-secondary); }

@media (hover: hover) {
  .sports-button:hover { background: var(--sports-action-primary-hover); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}