/* ============================================================
   MW Design System — Tokens
   "Stadium at night" palette · Archivo Black + Barlow
   ============================================================ */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/montserrat-v29-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/montserrat-v29-latin-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/montserrat-v29-latin-900.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/barlow-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/barlow-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/barlow-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/barlow-700.woff2') format('woff2');
}

:root {
  /* --- Palette: stadium at night --- */
  --mw-night: #0B2417;      /* hero bg, footer, dark sections */
  --mw-night-deep: #05120B; /* vignette depths, footer base */
  --mw-pitch: #24663F;      /* primary green surfaces */
  --mw-pitch-mid: #2E7A4B;  /* hovers, secondary green */
  --mw-red: #C42E22;        /* ticker band, eyebrows, finale */
  --mw-red-hot: #E4342A;    /* red emphasis */
  --mw-red-soft: #FF7A6E;   /* red accents on dark */
  --mw-lime: #D8FF6B;       /* primary CTA only */
  --mw-cream: #DDDAC9;      /* light section bg */
  --mw-sage-1: #C9D8CD;     /* muted text on dark */
  --mw-sage-2: #B4C6B9;     /* borders on dark */
  --mw-sage-3: #8FB49F;     /* secondary text on dark */
  --mw-sage-4: #7E9686;     /* subtle labels */
  --mw-ink: #3C4A40;        /* body text on cream */
  --mw-white: #FFFFFF;

  /* --- Semantic roles --- */
  --bg-dark: var(--mw-night);
  --bg-section: var(--mw-pitch);
  --bg-light: var(--mw-cream);
  --bg-accent: var(--mw-red);
  --text-on-dark: var(--mw-white);
  --text-muted-dark: var(--mw-sage-1);
  --text-on-light: var(--mw-ink);
  --cta-bg: var(--mw-lime);
  --cta-text: var(--mw-night);
  --eyebrow: var(--mw-red-hot);

  /* --- Typography --- */
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --display-weight: 800;
  --display-weight-heavy: 900;

  --text-hero: clamp(2.6rem, 6.5vw, 5.5rem);
  --text-h1: clamp(2.2rem, 5vw, 4rem);
  --text-h2: clamp(1.7rem, 3.4vw, 2.8rem);
  --text-h3: clamp(1.2rem, 2vw, 1.5rem);
  --text-lead: clamp(1.05rem, 1.6vw, 1.25rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-eyebrow: 0.8rem;

  --leading-display: 1.05;
  --leading-body: 1.6;
  --tracking-eyebrow: 0.14em;

  /* --- Spacing & layout --- */
  --container: 1200px;
  --container-narrow: 780px;
  --space-section: clamp(4rem, 10vw, 8rem);
  --radius-card: 18px;
  --radius-button: 14px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-reveal: 0.7s;
  --dur-hover: 0.25s;
}

/* --- Reset & base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-on-dark);
  background: var(--bg-dark);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  line-height: var(--leading-display);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}