/* ============================================
   APEX FC CHICAGO — Design tokens
   Single source of truth for colors, type, spacing.
   Phase 2: these will map to WordPress Customizer / theme.json
   ============================================ */

:root {
  /* Brand colors */
  --color-primary: #C8102E;
  --color-primary-dark: #9B0C24;
  --color-primary-light: #E63946;

  /* Neutrals
     Softened on 2026-04-30: pure #0D0D0D felt too heavy across the site.
     --color-dark is now a warm near-black that still reads as "dark"
     but lets the brand red and white breathe. */
  --color-dark: #1F1F22;
  --color-charcoal: #2A2A2E;
  --color-gray-900: #3A3A3F;
  --color-gray-700: #555558;
  --color-gray-500: #8A8A8A;
  --color-gray-300: #C9C9C9;
  --color-gray-200: #E5E5E5;
  --color-gray-100: #F0F0F0;
  --color-light: #F5F5F5;
  --color-white: #FFFFFF;

  /* Accent (use sparingly) */
  --color-accent: #FFC72C;

  /* Semantic */
  --color-text: var(--color-charcoal);
  --color-text-muted: var(--color-gray-500);
  --color-text-inverse: var(--color-white);
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-light);
  --color-bg-dark: var(--color-dark);
  --color-border: var(--color-gray-200);

  /* Typography */
  --font-display: "Bebas Neue", "Anton", "Oswald", Impact, sans-serif;
  --font-heading: "Oswald", "Bebas Neue", Impact, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.125rem, 1vw + 1rem, 1.25rem);
  --text-xl: clamp(1.25rem, 1.5vw + 1rem, 1.5rem);
  --text-2xl: clamp(1.5rem, 2vw + 1rem, 2rem);
  --text-3xl: clamp(2rem, 3vw + 1rem, 3rem);
  --text-4xl: clamp(2.5rem, 4vw + 1rem, 4rem);
  --text-5xl: clamp(3rem, 5vw + 1rem, 5rem);
  --text-hero: clamp(3rem, 7vw + 1rem, 7rem);

  /* Spacing scale (4-based) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --container-max: 1280px;
  --container-narrow: 960px;
  --container-wide: 1440px;
  --container-padding: clamp(1.25rem, 4vw, 2.5rem);

  /* Section spacing */
  --section-py: clamp(4rem, 8vw, 8rem);

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(13,13,13,0.06), 0 1px 3px rgba(13,13,13,0.08);
  --shadow-md: 0 4px 12px rgba(13,13,13,0.08), 0 2px 6px rgba(13,13,13,0.06);
  --shadow-lg: 0 16px 40px rgba(13,13,13,0.12), 0 4px 12px rgba(13,13,13,0.08);
  --shadow-xl: 0 32px 80px rgba(13,13,13,0.18);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 180ms;
  --duration: 280ms;
  --duration-slow: 480ms;

  /* Z-index */
  --z-nav: 100;
  --z-modal: 1000;
  --z-overlay: 999;

  /* Header */
  --nav-height: 80px;
  --nav-height-mobile: 64px;
}

@media (max-width: 768px) {
  :root {
    --section-py: clamp(3rem, 10vw, 5rem);
  }
}