/* Lemon World Cup 2026 — design tokens */
/* Palette pulled from logo.webp: stadium-night dark, lemon gold, pitch green */

:root {
  /* ----- Color: base ----- */
  --color-bg:           #0b0d07;   /* near-black, warm olive tint */
  --color-bg-elev:      #11140d;   /* card / surface base */
  --color-surface:      #1a1e13;   /* raised surface */
  --color-surface-hi:   #242a18;   /* hovered / active */
  --color-border:       #2d331f;
  --color-border-hi:    #4a5230;

  /* ----- Color: brand ----- */
  --color-gold:         #f5c518;   /* Lemon gold, primary accent */
  --color-gold-hot:     #ffd537;
  --color-gold-dim:     #b48c0e;
  --color-pitch:        #0e6b3a;   /* deep pitch green */
  --color-pitch-bright: #16a04e;
  --color-pitch-dim:    #074521;

  /* ----- Color: signal ----- */
  --color-live:         #ff3b30;
  --color-win:          #16a04e;
  --color-draw:         #f5c518;
  --color-loss:         #8a8f76;

  /* ----- Color: text ----- */
  --color-text:         #f5f3e9;   /* warm off-white */
  --color-text-dim:     #a8a99a;
  --color-text-mute:    #6a6e5a;
  --color-text-invert:  #0b0d07;

  /* ----- Color: accent set for variety ----- */
  --color-accent-pink:  #ff3d7f;
  --color-accent-blue:  #3da5ff;
  --color-accent-orange:#ff9a3d;

  /* ----- Gradients ----- */
  --grad-hero:    radial-gradient(ellipse at 50% 0%, rgba(245,197,24,0.20) 0%, rgba(11,13,7,0) 60%);
  --grad-gold:    linear-gradient(135deg, #ffd537 0%, #f5c518 40%, #b48c0e 100%);
  --grad-pitch:   linear-gradient(180deg, #16a04e 0%, #0e6b3a 100%);
  --grad-winner:  linear-gradient(135deg, #ffd537 0%, #f5c518 30%, #ff9a3d 100%);

  /* ----- Shadows / glows ----- */
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.35);
  --shadow-md:    0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg:    0 20px 60px rgba(0,0,0,0.55);
  --glow-gold:    0 0 0 1px rgba(245,197,24,0.4), 0 8px 28px rgba(245,197,24,0.20);
  --glow-pitch:   0 0 0 1px rgba(22,160,78,0.4),  0 8px 28px rgba(22,160,78,0.20);
  --glow-live:    0 0 0 2px rgba(255,59,48,0.6),  0 0 18px rgba(255,59,48,0.45);

  /* ----- Typography ----- */
  --font-body:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display:  "Anton", "Bebas Neue", "Arial Narrow", sans-serif;
  --font-mono:     ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-2xl:   36px;
  --fs-3xl:   48px;
  --fs-4xl:   64px;
  --fs-5xl:   88px;

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-base:  1.5;

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

  /* ----- Spacing scale (per brief: 4/8/16/24/32/48) ----- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ----- Radii ----- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ----- Motion ----- */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 120ms;
  --t-med:  220ms;
  --t-slow: 420ms;

  /* ----- Layout ----- */
  --max-w: 1100px;
  --tap:   44px;     /* min tap target */
}