/* ===== GOOGLE FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Colors - Dark Mode Default (sporty dark) */
  --color-bg: hsl(220, 25%, 7%);
  --color-bg-alt: hsl(220, 20%, 12%);
  --color-bg-card: hsl(220, 20%, 14%);
  --color-text: hsl(0, 0%, 95%);
  --color-text-muted: hsl(220, 10%, 60%);
  --color-text-light: hsl(220, 10%, 45%);
  --color-accent: hsl(150, 80%, 45%);       /* Neon green - pitch */
  --color-accent-hover: hsl(150, 80%, 38%);
  --color-accent-light: hsl(150, 60%, 15%);
  --color-secondary: hsl(45, 85%, 55%);     /* Gold */
  --color-secondary-hover: hsl(45, 85%, 48%);
  --color-secondary-light: hsl(45, 60%, 15%);
  --color-success: hsl(150, 60%, 45%);
  --color-border: hsl(220, 15%, 20%);
  --color-shadow: hsla(220, 30%, 5%, 0.4);
  --color-overlay: hsla(220, 30%, 5%, 0.8);
  --color-header-bg: hsla(220, 25%, 7%, 0.95);
  
  /* Typography */
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
  --fs-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  --fs-sm: clamp(0.8rem, 0.75rem + 0.3vw, 0.9rem);
  --fs-base: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
  --fs-md: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
  --fs-lg: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  --fs-xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  --fs-2xl: clamp(2rem, 1.5rem + 2vw, 3rem);
  --fs-3xl: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  
  /* Spacing */
  --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem;
  --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem;
  --space-section: clamp(4rem, 3rem + 4vw, 7rem);
  
  /* Borders & Radius */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
  --radius-xl: 24px; --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px var(--color-shadow);
  --shadow-md: 0 4px 12px var(--color-shadow);
  --shadow-lg: 0 8px 30px var(--color-shadow);
  --shadow-xl: 0 16px 50px var(--color-shadow);
  --shadow-glow: 0 0 20px hsla(150, 80%, 45%, 0.15);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  
  --max-width: 1200px;
  --header-height: 72px;
}

/* Light Mode */
[data-theme="light"] {
  --color-bg: hsl(210, 20%, 98%);
  --color-bg-alt: hsl(210, 15%, 94%);
  --color-bg-card: hsl(0, 0%, 100%);
  --color-text: hsl(220, 25%, 10%);
  --color-text-muted: hsl(220, 10%, 40%);
  --color-text-light: hsl(220, 10%, 55%);
  --color-accent: hsl(150, 70%, 38%);
  --color-accent-hover: hsl(150, 70%, 30%);
  --color-accent-light: hsl(150, 60%, 92%);
  --color-secondary: hsl(45, 80%, 50%);
  --color-secondary-hover: hsl(45, 80%, 42%);
  --color-secondary-light: hsl(45, 70%, 92%);
  --color-border: hsl(220, 15%, 88%);
  --color-shadow: hsla(220, 20%, 10%, 0.08);
  --color-overlay: hsla(220, 20%, 10%, 0.6);
  --color-header-bg: hsla(210, 20%, 98%, 0.95);
}

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