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

:root {
  /* Colors - Light Theme (Tropical Mango) */
  --color-primary: #64DD17; /* Verde Biche / Ácido */
  --color-primary-hover: #76FF03;
  --color-secondary: #FFEA00; /* Amarillo Mango Dulce */
  --color-secondary-light: #F9FBE7; /* Fondo verdoso muy claro */
  --color-accent: #D50000; /* Rojo Tajín / Pimienta / Chamoy */
  
  --color-bg: #FFFFFF; /* Pure White to make colors pop */
  --color-surface: #FAFAFA; /* Off white for cards */
  --color-text: #263238; /* Dark charcoal */
  --color-text-muted: #546E7A;
  --color-border: #EEEEEE;
  
  /* Typography - Fun & Rounded */
  --font-primary: 'Fredoka', cursive, sans-serif; /* Jugoso y redondo */
  --font-secondary: 'Nunito', 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 - Very rounded, "bubble" like */
  --radius-sm: 12px; 
  --radius-md: 24px; 
  --radius-lg: 32px;
  --radius-full: 9999px;
  
  --shadow-sm: 0 8px 15px rgba(100, 221, 23, 0.15); 
  --shadow-md: 0 15px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 25px 50px rgba(213, 0, 0, 0.12); 
  
  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy */
  --transition-normal: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); 
  
  /* Glassmorphism / Header */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(100, 221, 23, 0.3);
}

[data-theme="dark"] {
  /* Colors - Dark Theme (Neon Night Market) */
  --color-primary: #76FF03; 
  --color-primary-hover: #B2FF59;
  --color-secondary: #FFEA00; 
  --color-secondary-light: #1A2016; 
  --color-accent: #FF1744; 
  
  --color-bg: #121212; 
  --color-surface: #1E1E1E; 
  --color-text: #FFFFFF;
  --color-text-muted: #B0BEC5;
  --color-border: #333333;
  
  --glass-bg: rgba(18, 18, 18, 0.85);
  --glass-border: rgba(118, 255, 3, 0.3);
  
  --shadow-sm: 0 8px 15px rgba(118, 255, 3, 0.2); 
  --shadow-md: 0 15px 30px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 25px 50px rgba(255, 23, 68, 0.3); 
}