/* ============================================================
   ScoreIndexer — Design tokens (stylesheet 1 of 4)
   Single source of truth for colour, type, space, radius, shadow.
   Direction: "energetic sports" — a confident teal base with a vivid
   coral energy accent and bold, saturated per-sport colours. Still
   trustworthy: colour lives in accents, chips and borders; body text
   stays high-contrast ink on light surfaces.
   ============================================================ */

/* --- Google Fonts: Space Grotesk (display) + Inter (body/UI) --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* --- Neutrals -------------------------------------------- */
  --c-ink:        #121821;   /* near-black, primary text */
  --c-ink-soft:   #384451;   /* secondary text */
  --c-muted:      #64717f;   /* captions, meta */
  --c-line:       #e4e8ec;   /* hairline borders */
  --c-surface:    #ffffff;   /* cards */
  --c-bg:         #f5f7fa;   /* page background */
  --c-bg-alt:     #eceff4;   /* alternating sections */
  --c-ink-deep:   #0b1119;   /* footer / dark sections */

  /* --- Primary accent: energetic teal ---------------------- */
  --c-accent:       #0d8378; /* brighter deep teal */
  --c-accent-dark:  #0a635b; /* hover / active */
  --c-accent-soft:  #dcf1ee; /* tinted backgrounds */
  --c-accent-ink:   #ffffff; /* text on accent */
  --c-accent-glow:  rgba(13,131,120,0.18);

  /* --- Energy accent: vivid coral (used sparingly, for pop) - */
  --c-energy:       #ff5a36;
  --c-energy-dark:  #e23f1c;
  --c-energy-soft:  #ffe7e0;
  --c-energy-ink:   #ffffff;

  --c-warm:       #f2960d;   /* amber highlight */
  --c-focus:      #1f8fff;   /* focus ring, high-contrast blue */

  --c-ok:         #16803c;
  --c-warn:       #8a5a00;
  --c-err:        #c5271e;

  /* --- Sport accent colours (bold + saturated) ------------- */
  --c-golf:       #17a34a;
  --c-running:    #f97316;
  --c-strength:   #7c3aed;
  --c-swimming:   #0ea5e9;
  --c-cricket:    #d97706;

  /* darker readable variants (for text on tinted chips) */
  --c-golf-ink:      #0f7a37;
  --c-running-ink:   #c2560c;
  --c-strength-ink:  #5b28b8;
  --c-swimming-ink:  #0b7cb0;
  --c-cricket-ink:   #a35a05;

  /* --- Sport glow colours ---------------------------------- */
  --c-golf-glow:       rgba(23,163,74,0.20);
  --c-running-glow:    rgba(249,115,22,0.20);
  --c-strength-glow:   rgba(124,58,237,0.20);
  --c-swimming-glow:   rgba(14,165,233,0.20);
  --c-cricket-glow:    rgba(217,119,6,0.20);

  /* --- Typography ------------------------------------------- */
  --font-sans:    'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;

  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.4rem;
  --fs-xl:   1.85rem;
  --fs-2xl:  2.4rem;
  --fs-3xl:  3.25rem;
  --fs-4xl:  4.25rem;

  --lh-tight: 1.08;
  --lh-snug:  1.32;
  --lh-body:  1.65;

  --fw-normal: 400;
  --fw-medium: 550;
  --fw-semibold: 600;
  --fw-bold:   700;

  /* --- Spacing scale (4px base) ----------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 5rem;
  --sp-10: 7rem;

  /* --- Radius / shadow / layout ----------------------------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(18,24,33,0.06), 0 1px 3px rgba(18,24,33,0.05);
  --shadow-md: 0 4px 12px rgba(18,24,33,0.08), 0 10px 28px rgba(18,24,33,0.07);
  --shadow-lg: 0 8px 24px rgba(18,24,33,0.10), 0 24px 60px rgba(18,24,33,0.10);
  --shadow-glow: 0 0 0 4px var(--c-accent-glow);
  --shadow-energy: 0 6px 20px rgba(255,90,54,0.30);

  --container: 1160px;
  --container-narrow: 760px;

  --header-h: 68px;

  /* --- Transitions ------------------------------------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.15s;
  --dur-med:  0.25s;
  --dur-slow: 0.45s;

  /* --- Gradients -------------------------------------------- */
  --grad-accent:  linear-gradient(120deg, #0d8378 0%, #12a58e 100%);
  --grad-energy:  linear-gradient(120deg, #ff5a36 0%, #ff8a3d 100%);
  --grad-hero:    radial-gradient(1200px 560px at 82% -10%, rgba(13,131,120,0.16), transparent 55%),
                  radial-gradient(900px 500px at 6% 4%, rgba(255,90,54,0.10), transparent 52%),
                  linear-gradient(180deg, #f5f7fa 0%, #eef2f6 100%);
  --grad-headline: linear-gradient(100deg, #0d8378 0%, #14b39a 45%, #ff5a36 115%);

  --grad-card-golf:     linear-gradient(135deg, rgba(23,163,74,0.16) 0%, rgba(23,163,74,0.02) 100%);
  --grad-card-running:  linear-gradient(135deg, rgba(249,115,22,0.16) 0%, rgba(249,115,22,0.02) 100%);
  --grad-card-strength: linear-gradient(135deg, rgba(124,58,237,0.16) 0%, rgba(124,58,237,0.02) 100%);
  --grad-card-swimming: linear-gradient(135deg, rgba(14,165,233,0.16) 0%, rgba(14,165,233,0.02) 100%);
  --grad-card-cricket:  linear-gradient(135deg, rgba(217,119,6,0.16) 0%, rgba(217,119,6,0.02) 100%);

  /* --- Per-sport banner gradients (article heroes) --------- */
  --grad-banner-golf:     linear-gradient(120deg, #0f7a37 0%, #17a34a 60%, #3ac06b 100%);
  --grad-banner-running:  linear-gradient(120deg, #c2560c 0%, #f97316 60%, #ff9f4a 100%);
  --grad-banner-strength: linear-gradient(120deg, #5b28b8 0%, #7c3aed 60%, #a06bf5 100%);
  --grad-banner-swimming: linear-gradient(120deg, #0b7cb0 0%, #0ea5e9 60%, #4cc4f5 100%);
  --grad-banner-cricket:  linear-gradient(120deg, #a35a05 0%, #d97706 60%, #f0a53d 100%);
}