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

:root {
  /* Colors - Light Mode */
  --color-bg: hsl(45, 30%, 96%);
  --color-bg-alt: hsl(45, 25%, 92%);
  --color-bg-card: hsl(0, 0%, 100%);
  --color-text: hsl(210, 30%, 15%);
  --color-text-muted: hsl(210, 15%, 40%);
  --color-text-light: hsl(210, 10%, 55%);
  --color-accent: hsl(0, 80%, 50%);      /* Red Ketchup */
  --color-accent-hover: hsl(0, 80%, 42%);
  --color-accent-light: hsl(0, 80%, 95%);
  --color-secondary: hsl(45, 90%, 50%);  /* Yellow Mustard */
  --color-secondary-hover: hsl(45, 90%, 42%);
  --color-secondary-light: hsl(45, 90%, 92%);
  --color-success: hsl(140, 60%, 40%);
  --color-border: hsl(45, 20%, 85%);
  --color-shadow: hsla(210, 30%, 15%, 0.08);
  --color-overlay: hsla(210, 30%, 15%, 0.6);
  --color-header-bg: hsla(45, 30%, 96%, 0.95);
  
  /* Typography */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Plus Jakarta Sans', 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);
  
  /* 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);
  
  /* Layout */
  --max-width: 1200px;
  --header-height: 72px;
}

/* Dark Mode */
[data-theme="dark"] {
  --color-bg: hsl(210, 30%, 10%);
  --color-bg-alt: hsl(210, 25%, 14%);
  --color-bg-card: hsl(210, 25%, 16%);
  --color-text: hsl(45, 30%, 92%);
  --color-text-muted: hsl(210, 10%, 65%);
  --color-text-light: hsl(210, 10%, 50%);
  --color-accent: hsl(0, 75%, 55%);
  --color-accent-hover: hsl(0, 75%, 48%);
  --color-accent-light: hsl(0, 60%, 18%);
  --color-secondary: hsl(45, 85%, 55%);
  --color-secondary-hover: hsl(45, 85%, 48%);
  --color-secondary-light: hsl(45, 60%, 18%);
  --color-border: hsl(210, 15%, 25%);
  --color-shadow: hsla(0, 0%, 0%, 0.3);
  --color-overlay: hsla(0, 0%, 0%, 0.7);
  --color-header-bg: hsla(210, 30%, 10%, 0.95);
}

/* Reduced Motion */
@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;
  }
}