/* Design System */
:root {
  /* Typography Scale */
  --font-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --font-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --font-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --font-md: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --font-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --font-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --font-2xl: clamp(2rem, 1.8rem + 1.25vw, 2.5rem);
  --font-3xl: clamp(2.5rem, 2.2rem + 1.5vw, 3.5rem);

  /* Spacing Scale */
  --space-2xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
  --space-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  --space-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1rem);
  --space-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --space-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --space-xl: clamp(2rem, 1.6rem + 2vw, 3.5rem);
  --space-2xl: clamp(3rem, 2.4rem + 3vw, 5rem);

  /* Color Palettes */
  --color-primary-50: hsl(240, 100%, 97%);
  --color-primary-100: hsl(240, 95%, 92%);
  --color-primary-200: hsl(240, 90%, 85%);
  --color-primary-300: hsl(240, 85%, 75%);
  --color-primary-400: hsl(240, 80%, 65%);
  --color-primary-500: hsl(240, 75%, 55%);
  --color-primary-600: hsl(240, 70%, 45%);
  --color-primary-700: hsl(240, 65%, 35%);
  --color-primary-800: hsl(240, 60%, 25%);
  --color-primary-900: hsl(240, 55%, 15%);

  --color-accent-50: hsl(330, 100%, 97%);
  --color-accent-100: hsl(330, 95%, 92%);
  --color-accent-200: hsl(330, 90%, 85%);
  --color-accent-300: hsl(330, 85%, 75%);
  --color-accent-400: hsl(330, 80%, 65%);
  --color-accent-500: hsl(330, 75%, 55%);
  --color-accent-600: hsl(330, 70%, 45%);
  --color-accent-700: hsl(330, 65%, 35%);
  --color-accent-800: hsl(330, 60%, 25%);
  --color-accent-900: hsl(330, 55%, 15%);

  /* Semantic Colors - Light Theme */
  --color-bg: hsl(0, 0%, 100%);
  --color-bg-alt: hsl(240, 25%, 98%);
  --color-surface: hsl(240, 20%, 99%);
  --color-surface-alt: hsl(240, 15%, 97%);
  --color-surface-hover: hsl(240, 12%, 95%);
  --color-border: hsl(240, 10%, 90%);
  --color-text: hsl(240, 25%, 15%);
  --color-text-secondary: hsl(240, 15%, 35%);
  --color-text-tertiary: hsl(240, 10%, 45%);

  /* Motion & Animation */
  --motion-fast: 150ms;
  --motion-medium: 300ms;
  --motion-slow: 500ms;
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-emphasis: cubic-bezier(0.2, 0.6, 0.3, 1);

  /* Elevation & Shadows */
  --shadow-sm: 0 1px 2px hsl(240 3.8% 46.1% / 0.06);
  --shadow-md: 0 1px 3px hsl(240 4.9% 83.9% / 0.12),
    0 1px 2px hsl(240 3.8% 46.1% / 0.12);
  --shadow-lg: 0 10px 15px -3px hsl(240 3.8% 46.1% / 0.1),
    0 4px 6px -4px hsl(240 3.8% 46.1% / 0.1);
  --shadow-xl: 0 20px 25px -5px hsl(240 3.8% 46.1% / 0.1),
    0 8px 10px -6px hsl(240 3.8% 46.1% / 0.1);

  /* Layout & Grid */
  --container-max: 1280px;
  --container-padding: max(1rem, 5vw);
  --grid-gap: clamp(1rem, 2.5vw, 2rem);
  --section-spacing: clamp(3rem, 10vw, 8rem);

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
}

/* Dark Theme Colors */
[data-theme="dark"] {
  --color-bg: hsl(240, 25%, 8%);
  --color-bg-alt: hsl(240, 20%, 10%);
  --color-surface: hsl(240, 15%, 12%);
  --color-surface-alt: hsl(240, 12%, 15%);
  --color-surface-hover: hsl(240, 10%, 18%);
  --color-border: hsl(240, 8%, 20%);
  --color-text: hsl(240, 15%, 95%);
  --color-text-secondary: hsl(240, 10%, 80%);
  --color-text-tertiary: hsl(240, 8%, 65%);
}

/* High Contrast Theme */
[data-theme="high-contrast"] {
  --color-primary-500: hsl(240, 100%, 45%);
  --color-accent-500: hsl(330, 100%, 45%);
  --color-text: hsl(0, 0%, 100%);
  --color-text-secondary: hsl(0, 0%, 90%);
  --color-text-tertiary: hsl(0, 0%, 80%);
  --color-bg: hsl(240, 100%, 0%);
  --color-bg-alt: hsl(240, 100%, 5%);
  --color-surface: hsl(240, 100%, 3%);
  --color-surface-alt: hsl(240, 100%, 8%);
  --color-surface-hover: hsl(240, 100%, 10%);
  --color-border: hsl(240, 100%, 15%);
}