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

:root {
  /* HSL Colors: Heladería Dulce / Pastel */
  --bg-color: hsl(45, 80%, 96%); /* Crema Vainilla */
  --bg-color-alt: hsl(0, 0%, 100%); /* Blanco Nata */
  
  --text-color: hsl(25, 40%, 25%); /* Marrón Chocolate Oscuro */
  --text-color-light: hsl(25, 30%, 45%);
  
  --accent-1: hsl(345, 80%, 75%); /* Fresa (Rosa Pastel) */
  --accent-1-hover: hsl(345, 80%, 65%);
  --accent-2: hsl(160, 60%, 70%); /* Menta (Verde Pastel) */
  --accent-3: hsl(200, 70%, 80%); /* Cielo / Chicle (Azul Pastel) */
  
  --border-color: hsl(45, 50%, 85%);
  --card-bg: hsl(0, 0%, 100%);
  --modal-bg: rgba(255, 250, 240, 0.95);

  /* Typography */
  --font-title: 'Fredoka One', cursive; /* Redondeada y gruesa */
  --font-body: 'Nunito', sans-serif; /* Redondeada pero legible */

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 3rem;
  --spacing-xl: 5rem;

  /* Border Radius - Todo es muy redondo en una heladería */
  --radius-sm: 12px;
  --radius-md: 24px;
  --radius-lg: 40px;
  --radius-pill: 100px;
  --radius-round: 50%;
  
  /* Sombras coloreadas */
  --shadow-sm: 0 8px 16px rgba(230, 150, 160, 0.15);
  --shadow-md: 0 12px 24px rgba(230, 150, 160, 0.25);
  --shadow-focus: 0 0 0 4px hsl(345, 80%, 85%);

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote */
  --transition-normal: 0.4s ease;
}

[data-theme="dark"] {
  /* Modo Oscuro: Chocolate Oscuro / Neón Pastel */
  --bg-color: hsl(25, 40%, 15%); /* Fondo chocolate oscuro */
  --bg-color-alt: hsl(25, 40%, 12%);
  
  --text-color: hsl(45, 80%, 95%);
  --text-color-light: hsl(45, 50%, 75%);
  
  --accent-1: hsl(345, 80%, 70%); 
  --accent-1-hover: hsl(345, 80%, 60%);
  --accent-2: hsl(160, 60%, 65%);
  
  --border-color: hsl(25, 30%, 25%);
  --card-bg: hsl(25, 40%, 20%);
  --modal-bg: rgba(45, 35, 30, 0.95);
  
  --shadow-sm: 0 8px 16px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 12px 24px rgba(0, 0, 0, 0.3);
}