:root {
  /* Colors - Light Theme (Appetizing & Fresh) */
  --color-primary: #E63946; /* Crimson Red - Stimulates appetite */
  --color-primary-hover: #D62828;
  --color-secondary: #F4A261; /* Warm Orange / Saffron */
  --color-secondary-light: #FFF3E0; /* Creamy background for cards */
  --color-bg: #FDFBF7; /* Off-white / Cream for main background */
  --color-surface: #FFFFFF; /* Pure white for cards */
  --color-text: #1D1D1D;
  --color-text-muted: #6B705C; /* Olive grey */
  --color-border: #EAE2D6;
  
  /* Accent */
  --color-accent: #2A9D8F; /* Fresh Green for vegetarian/healthy tags */
  
  /* Typography */
  --font-primary: 'Poppins', system-ui, -apple-system, sans-serif; /* Bold & Friendly */
  --font-secondary: 'Inter', system-ui, -apple-system, sans-serif; /* Clean text */
  
  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;
  
  /* Radius & Shadows - Soft and approachable */
  --radius-sm: 8px; 
  --radius-md: 16px; 
  --radius-lg: 24px;
  --radius-full: 9999px;
  
  --shadow-sm: 0 4px 10px rgba(230, 57, 70, 0.05); 
  --shadow-md: 0 10px 25px rgba(29, 29, 29, 0.08);
  --shadow-lg: 0 20px 40px rgba(230, 57, 70, 0.15); 
  
  /* Transitions */
  --transition-fast: 0.2s ease-out;
  --transition-normal: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy feel */
  
  /* Glassmorphism / Header */
  --glass-bg: rgba(253, 251, 247, 0.9);
  --glass-border: rgba(234, 226, 214, 0.5);
}

[data-theme="dark"] {
  /* Colors - Dark Theme (Premium Night Delivery) */
  --color-primary: #FF4D4D; /* Brighter red for dark mode */
  --color-primary-hover: #FF6B6B;
  --color-secondary: #F4A261; 
  --color-secondary-light: #2A1C14; 
  --color-bg: #121212; /* Deep charcoal */
  --color-surface: #1E1E1E; /* Lighter charcoal */
  --color-text: #F8F9FA;
  --color-text-muted: #ADB5BD;
  --color-border: #2D2D2D;
  
  --glass-bg: rgba(18, 18, 18, 0.9);
  --glass-border: rgba(45, 45, 45, 0.5);
  
  --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.4); 
  --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 20px 40px rgba(255, 77, 77, 0.15); 
}