:root {
  /* Colors - Light Theme (Clean & Fresh) */
  --color-primary: #007AFF; /* Pure Aqua Blue - Trust & Cleanliness */
  --color-primary-hover: #0056B3;
  --color-secondary: #5AC8FA; /* Bright Cyan - Bubbles / Water */
  --color-secondary-light: #E5F1FF; /* Very light blue for backgrounds */
  --color-bg: #FFFFFF; /* Pure White */
  --color-surface: #F2F2F7; /* Apple-like light grey for cards */
  --color-text: #1C1C1E;
  --color-text-muted: #8E8E93;
  --color-border: #E5E5EA;
  
  /* Accent */
  --color-accent: #34C759; /* Eco Green for biodegradable options */
  
  /* Typography */
  --font-primary: 'Inter', system-ui, -apple-system, sans-serif; /* Clinical, clean, startup */
  --font-secondary: 'Inter', system-ui, -apple-system, sans-serif;
  
  /* 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 - Bubbly and very round */
  --radius-sm: 12px; 
  --radius-md: 24px; 
  --radius-lg: 32px;
  --radius-full: 9999px;
  
  --shadow-sm: 0 4px 12px rgba(0, 122, 255, 0.08); 
  --shadow-md: 0 12px 30px rgba(0, 122, 255, 0.12);
  --shadow-lg: 0 24px 50px rgba(0, 122, 255, 0.2); 
  
  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-normal: 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
  
  /* Glassmorphism / Header */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(229, 229, 234, 0.6);
}

[data-theme="dark"] {
  /* Colors - Dark Theme (Night Wash / Premium) */
  --color-primary: #0A84FF; /* iOS Blue */
  --color-primary-hover: #409CFF;
  --color-secondary: #64D2FF; 
  --color-secondary-light: #1C2C3D; /* Dark blue-grey */
  --color-bg: #000000; /* Pure Black */
  --color-surface: #1C1C1E; /* Dark Grey */
  --color-text: #F2F2F7;
  --color-text-muted: #98989D;
  --color-border: #38383A;
  
  --glass-bg: rgba(0, 0, 0, 0.85);
  --glass-border: rgba(56, 56, 58, 0.6);
  
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.5); 
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 24px 50px rgba(10, 132, 255, 0.15); 
}