/* =========================================================
   emir — Colors & Type
   Dark, premium sportsbook · numbers-forward data journalism
   ========================================================= */

/* ----- Webfonts (Google Fonts substitutions — see README) ----- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600;700;800;900&family=Fraunces:opsz,wght@9..144,700;9..144,900&display=swap');

:root {
  /* =========================================================
     COLOR SYSTEM
     ========================================================= */

  /* --- Base surfaces (dark-first) --- */
  --bg-0: #07090B;           /* page background, deepest */
  --bg-1: #0C1014;           /* panel */
  --bg-2: #131920;           /* card */
  --bg-3: #1C242E;           /* raised / hover */
  --bg-4: #26303C;           /* pressed / input */

  /* --- Foreground (neutrals) --- */
  --fg-0: #FFFFFF;           /* pure white — only for headlines */
  --fg-1: #E8EDF3;           /* primary body */
  --fg-2: #A6B0BD;           /* secondary / labels */
  --fg-3: #6B7785;           /* tertiary / meta */
  --fg-4: #3B4550;           /* quaternary / disabled */

  /* --- Borders / dividers --- */
  --border-1: rgba(255,255,255,0.06);
  --border-2: rgba(255,255,255,0.10);
  --border-3: rgba(255,255,255,0.16);

  /* --- Primary: emir neon green (sportsbook "go" colour) --- */
  --green-50:  #E8FFE6;
  --green-100: #C4FFBC;
  --green-200: #8AFF7D;
  --green-300: #4DFF3D;
  --green-400: #1FE610;    /* primary */
  --green-500: #00C307;    /* hover */
  --green-600: #00960A;
  --green-700: #006B0D;

  --accent: var(--green-400);
  --accent-hover: var(--green-300);
  --accent-press: var(--green-500);
  --accent-ink: #04140A;     /* text ON neon */

  /* --- Amber (featured / in-play / warnings) --- */
  --amber-300: #FFD467;
  --amber-400: #FFB020;    /* in-play pulse */
  --amber-500: #E08800;

  /* --- Red (loss / down / live) --- */
  --red-300:  #FF8A8A;
  --red-400:  #FF3D3D;    /* live dot */
  --red-500:  #E01A1A;
  --red-600:  #B00000;

  /* --- Blue (info / stats) --- */
  --blue-300: #8EC7FF;
  --blue-400: #3B9CFF;
  --blue-500: #1A7AE0;

  /* --- Odds movement (semantic) --- */
  --odds-up:    var(--green-400);
  --odds-down:  var(--red-400);
  --odds-stale: var(--fg-3);

  /* --- Match status (semantic) --- */
  --status-live:    var(--red-400);
  --status-upcoming: var(--fg-2);
  --status-ft:      var(--fg-3);
  --status-ht:      var(--amber-400);

  /* =========================================================
     TYPE SYSTEM
     ========================================================= */
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-grotesk: 'Space Grotesk', 'Inter', sans-serif;   /* numeric / UI chrome */
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* tabular digits everywhere by default for odds/scores */
  --num-features: "tnum" 1, "lnum" 1;

  /* --- Scale --- */
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  44px;
  --fs-4xl:  60px;
  --fs-5xl:  84px;

  /* --- Weights --- */
  --fw-reg: 400;
  --fw-med: 500;
  --fw-sem: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* --- Line heights --- */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  /* --- Tracking --- */
  --ls-tight: -0.02em;
  --ls-flat:   0em;
  --ls-wide:   0.06em;
  --ls-caps:   0.12em;

  /* =========================================================
     SPACING / RADIUS / SHADOW / MOTION
     ========================================================= */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 80px;

  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-pill: 999px;

  --shadow-1: 0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-3: 0 12px 40px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 24px rgba(31,230,16,0.35);
  --shadow-glow-amber: 0 0 24px rgba(255,176,32,0.4);

  --ring:  0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.55, 0, 0.65, 1);
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 340ms;
}

/* =========================================================
   SEMANTIC TYPE STYLES
   ========================================================= */
html, body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: var(--num-features);
}

.h-hero {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-5xl);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--fg-0);
}
.h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-0);
}
.h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-0);
}
.h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-0);
}
.h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-sem);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-sem);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.eyebrow {
  font-family: var(--font-grotesk);
  font-weight: var(--fw-med);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--fg-2);
}
.label {
  font-family: var(--font-grotesk);
  font-weight: var(--fw-med);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-2);
}
.p {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--fg-1);
}
.p-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.meta {
  font-family: var(--font-grotesk);
  font-size: var(--fs-xs);
  color: var(--fg-3);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.num, .odds {
  font-family: var(--font-grotesk);
  font-weight: var(--fw-bold);
  font-feature-settings: "tnum" 1, "lnum" 1, "ss01" 1;
  letter-spacing: -0.01em;
}
.num-display {
  font-family: var(--font-grotesk);
  font-weight: var(--fw-bold);
  font-size: var(--fs-4xl);
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.03em;
  color: var(--fg-0);
}
.code {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--green-300);
  background: var(--bg-2);
  padding: 2px 6px;
  border-radius: var(--r-1);
}