@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap');

:root {
  /* Typography */
  --font-primary: 'Outfit', sans-serif;
  --font-serif: 'Merriweather', serif;
  
  /* Core Palette (Premium Athletic Light Mode) */
  --color-bg: #f4f5f7;
  --color-surface: #ffffff;
  --color-surface-hover: #f0f0f0;
  --color-border: rgba(0, 0, 0, 0.08);
  
  /* Brand Accents */
  --color-accent: #00b341; /* Classic DSG Green */
  --color-accent-glow: rgba(0, 179, 65, 0.3);
  
  /* Text */
  --color-text-primary: #1a1a24;
  --color-text-secondary: #6e6e73;
  --color-text-inverse: #ffffff;

  /* Glassmorphism Tokens */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-blur: blur(16px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.5);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08);

  /* Spacing Rhythm */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  
  /* Layout */
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-pill: 999px;
  
  /* Motion */
  --transition-fast: 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}