@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Montserrat:wght@300;400;500&display=swap');

:root {
  /* HSL Colors: Peluquería Luminosa / Chic */
  --bg-color: hsl(340, 20%, 97%); /* Rosa empolvado muy claro / perla */
  --bg-color-alt: hsl(0, 0%, 100%); /* Blanco puro */
  
  --text-color: hsl(0, 0%, 25%); /* Gris carbón suave (menos pesado que el negro) */
  --text-color-light: hsl(0, 0%, 45%);
  
  --accent-1: hsl(340, 40%, 65%); /* Rose Gold / Rosa Palo */
  --accent-1-hover: hsl(340, 40%, 55%);
  --accent-2: hsl(140, 15%, 55%); /* Verde Salvia / Eucalipto */
  
  --border-color: hsl(340, 20%, 90%);
  --card-bg: hsl(0, 0%, 100%);
  --modal-bg: rgba(250, 245, 247, 0.95);

  /* Typography */
  --font-title: 'Cormorant Garamond', serif;
  --font-body: 'Montserrat', sans-serif;

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

  /* Border Radius & Shadow */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-round: 50%;
  
  /* Sombras etéreas y suaves */
  --shadow-sm: 0 10px 25px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 15px 35px rgba(0, 0, 0, 0.06);
  --shadow-focus: 0 0 0 3px hsl(340, 40%, 80%);

  /* Transitions */
  --transition-fast: 0.2s ease-in-out;
  --transition-normal: 0.4s ease-in-out;
}

[data-theme="dark"] {
  /* Modo Oscuro: Muy sutil para peluquería, enfocado en descanso visual pero chic */
  --bg-color: hsl(340, 15%, 15%);
  --bg-color-alt: hsl(340, 15%, 12%);
  
  --text-color: hsl(340, 20%, 90%);
  --text-color-light: hsl(340, 15%, 70%);
  
  --accent-1: hsl(340, 40%, 70%); 
  --accent-1-hover: hsl(340, 40%, 80%);
  --accent-2: hsl(140, 15%, 65%);
  
  --border-color: hsl(340, 15%, 25%);
  --card-bg: hsl(340, 15%, 18%);
  --modal-bg: rgba(38, 32, 34, 0.95);
  
  --shadow-sm: 0 10px 25px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 15px 35px rgba(0, 0, 0, 0.3);
}