/* The Matchday — Design Tokens */
/* All design primitives live here. Components reference these only. */

:root {
  /* === Color: Base === */
  --mt-white: #FFFFFF;
  --mt-black: #0A0A0A;

  /* === Color: Neutrals (Apple-style) === */
  --mt-neutral-50:  #F5F5F7;
  --mt-neutral-200: #D2D2D7;
  --mt-neutral-400: #86868B;
  --mt-neutral-700: #424245;
  --mt-neutral-900: #1D1D1F;

  /* === Color: Accents === */
  --mt-pitch:    #00543E;  /* primary brand-green, CTAs */
  --mt-pitch-50: #E6F0EC;  /* tinted background */
  --mt-live:     #FF6B35;  /* live moments, countdown, now-state */
  --mt-live-50:  #FFEEE5;
  --mt-gold:     #D4AF37;  /* crown #1, sparingly */

  /* === Color: Status === */
  /* Brand-aligned, contrast-tested for WCAG AA on white background. */
  --mt-color-success:    #00875A;
  --mt-color-warning:    #C46300;
  --mt-color-error:      #C8102E;
  --mt-color-success-bg: #E6F4ED;
  --mt-color-warning-bg: #FBEEDC;
  --mt-color-error-bg:   #FBE9EB;

  /* === Color: Semantic === */
  --mt-bg:          var(--mt-white);
  --mt-bg-elevated: var(--mt-neutral-50);
  --mt-text:        var(--mt-neutral-900);
  --mt-text-muted:  var(--mt-neutral-400);
  --mt-border:      var(--mt-neutral-200);

  /* === Typography === */
  --mt-font-display: "Inter Tight", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --mt-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --mt-font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --mt-fs-hero:    clamp(4rem, 12vw, 12.5rem);
  --mt-fs-h1:      clamp(2.5rem, 6vw, 4rem);
  --mt-fs-h2:      clamp(1.75rem, 4vw, 2.5rem);
  --mt-fs-h3:      1.375rem;
  --mt-fs-h4:      1.125rem;
  --mt-fs-h5:      1rem;
  --mt-fs-h6:      0.9375rem;
  --mt-fs-body:    1.0625rem;
  --mt-fs-small:   0.875rem;
  --mt-fs-micro:   0.75rem;

  /* Component-level font-size tokens (replaces magic numbers in components.css) */
  --mt-fs-display-number: 1.75rem;   /* score-cell, score-separator */
  --mt-fs-rank:           1.25rem;   /* leaderboard rank + points */
  --mt-fs-label:          0.875rem;  /* leaderboard avatar, badges */
  --mt-fs-caption:        0.8125rem; /* nav-link narrow, small captions */

  --mt-lh-tight:   1.05;
  --mt-lh-snug:    1.2;
  --mt-lh-normal:  1.5;

  --mt-fw-regular:   400;
  --mt-fw-medium:    500;
  --mt-fw-semibold:  600;
  --mt-fw-bold:      700;
  --mt-fw-black:     900;

  --mt-tracking-tight:  -0.04em;
  --mt-tracking-normal: -0.011em;
  --mt-tracking-wide:   0.04em;

  /* === Spacing (8px base scale with hero-level steps for large sections) === */
  --mt-sp-1:  0.5rem;
  --mt-sp-2:  1rem;
  --mt-sp-3:  1.5rem;
  --mt-sp-4:  2rem;
  --mt-sp-5:  3rem;
  --mt-sp-6:  5rem;
  --mt-sp-7:  7.5rem;
  --mt-sp-8:  10rem;

  /* === Layout === */
  --mt-container:    72rem;
  --mt-container-md: 56rem;
  --mt-radius-sm:    8px;
  --mt-radius-md:    16px;
  --mt-radius-lg:    24px;
  --mt-radius-pill:  999px;

  /* === Z-Index Scale === */
  --mt-z-base:    0;
  --mt-z-nav:     10;
  --mt-z-overlay: 100;
  --mt-z-modal:   200;
  --mt-z-toast:   300;
  --mt-z-tooltip: 400;

  /* === Motion === */
  --mt-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --mt-ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --mt-ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --mt-dur-fast:   180ms;
  --mt-dur-base:   320ms;
  --mt-dur-slow:   600ms;

  /* === Elevation === */
  /* Shadow base color is hardcoded as rgba() for max browser compatibility */
  /* (deep grey #0A0A0A = rgb(10,10,10); intentional, not token-derived). */
  --mt-shadow-sm: 0 1px 2px rgba(10,10,10,0.04), 0 1px 3px rgba(10,10,10,0.06);
  --mt-shadow-md: 0 4px 12px rgba(10,10,10,0.06), 0 8px 24px rgba(10,10,10,0.04);
  --mt-shadow-lg: 0 12px 32px rgba(10,10,10,0.08), 0 24px 64px rgba(10,10,10,0.06);
}