/* Football Tracker 2026 — design tokens
   Evolved from the Fire TV app: near-black canvas, periwinkle-blue accent,
   pitch-green match cards, gold for the #1 scorer. */

:root {
  /* ---- Surfaces (black as a material, 6 tints) ---- */
  --bg:        #08090b;
  --bg-1:      #0b0d10;
  --bg-2:      #0e1116;
  --surface:   #15181e;
  --surface-2: #1c2027;
  --surface-3: #242932;

  --line:   rgba(255,255,255,.07);
  --line-2: rgba(255,255,255,.12);
  --line-3: rgba(255,255,255,.20);

  /* ---- Text ---- */
  --text:   #f3f5f8;
  --text-2: #a9b0bc;
  --text-3: #6f7682;

  /* ---- Accent: one blue does the work ---- */
  --accent:        #5b7fe8;
  --accent-bright: #8aa6ff;
  --accent-deep:   #3a52b0;
  --accent-ghost:  rgba(91,127,232,.14);
  --accent-line:   rgba(91,127,232,.40);

  /* ---- Pitch green (the "featured match" motif) ---- */
  --green:        #2f9e4f;
  --green-bright: #46c86d;
  --green-card-1: #2d7e3f;
  --green-card-2: #1c5a2d;
  --green-deep:   #11331d;

  /* ---- Accents ---- */
  --gold: #f5c518;
  --pink: #efa9c6;
  --red:  #e5484d;

  /* ---- Glows ---- */
  --glow-blue:  0 0 0 1px rgba(91,127,232,.30), 0 14px 50px -10px rgba(91,127,232,.55);
  --glow-soft:  0 18px 60px -20px rgba(0,0,0,.8);

  /* ---- Shadows ---- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 24px -10px rgba(0,0,0,.6);
  --shadow-3: 0 30px 80px -30px rgba(0,0,0,.85);

  /* ---- Type ---- */
  --font-display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --font-sans:    "Archivo", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --fs-eyebrow: .8125rem;
  --fs-small:   .9375rem;
  --fs-body:    1.0625rem;
  --fs-lead:    1.1875rem;
  --h3:         1.375rem;
  --h2:         clamp(1.85rem, 3.4vw, 2.9rem);
  --display-2:  clamp(2.1rem, 4.6vw, 3.6rem);
  --display-1:  clamp(2.9rem, 7.2vw, 6.25rem);

  --leading-tight: 1.02;
  --leading-snug:  1.18;
  --leading-body:  1.6;

  /* ---- Radii ---- */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  26px;
  --r-2xl: 34px;
  --r-pill: 999px;

  /* ---- Layout ---- */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);

  /* ---- Motion ---- */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: .18s;
  --dur:      .32s;
  --dur-slow: .6s;
}