@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap');

:root {
  /* Colors - Light Theme (Fresh Sushi) */
  --color-primary: #D32F2F; /* Crimson Red / Rising Sun */
  --color-primary-hover: #B71C1C;
  --color-secondary: #FA8072; /* Salmon / Fresh Fish */
  --color-secondary-light: #FFEBEE; /* Light red for backgrounds */
  --color-bg: #FDFBF7; /* Raw White / Sushi Rice */
  --color-surface: #FFFFFF; /* Pure White */
  --color-text: #121212;
  --color-text-muted: #555555;
  --color-border: #EEEEEE;
  
  /* Accent */
  --color-accent: #2E7D32; /* Seaweed Green / Wasabi */
  
  /* Typography */
  --font-primary: 'Inter', system-ui, -apple-system, sans-serif; /* Bold & Modern */
  --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 - Clean cuts like a chef's knife */
  --radius-sm: 4px; 
  --radius-md: 8px; 
  --radius-lg: 16px;
  --radius-full: 9999px;
  
  --shadow-sm: 0 4px 10px rgba(211, 47, 47, 0.08); 
  --shadow-md: 0 10px 25px rgba(18, 18, 18, 0.1);
  --shadow-lg: 0 20px 40px rgba(211, 47, 47, 0.15); 
  
  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
  
  /* Glassmorphism / Header */
  --glass-bg: rgba(253, 251, 247, 0.9);
  --glass-border: rgba(238, 238, 238, 0.6);
}

[data-theme="dark"] {
  /* Colors - Dark Theme (Nori Black / Night Market) */
  --color-primary: #FF5252; /* Bright Red */
  --color-primary-hover: #FF1744;
  --color-secondary: #FF8A65; 
  --color-secondary-light: #2A1313; /* Deep red-black */
  --color-bg: #121212; /* Nori Black */
  --color-surface: #1E1E1E; 
  --color-text: #FDFBF7;
  --color-text-muted: #9E9E9E;
  --color-border: #333333;
  
  --glass-bg: rgba(18, 18, 18, 0.9);
  --glass-border: rgba(51, 51, 51, 0.6);
  
  --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.5); 
  --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 20px 40px rgba(255, 82, 82, 0.2); 
}