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

:root {
  /* HSL Colors: Barbería Oscura Clásica */
  --bg-color: hsl(210, 15%, 12%);
  --bg-color-alt: hsl(210, 15%, 16%);
  
  --text-color: hsl(40, 20%, 95%);
  --text-color-light: hsl(40, 10%, 75%);
  
  --accent-1: hsl(40, 60%, 50%); /* Latón / Oro vintage */
  --accent-1-hover: hsl(40, 60%, 60%);
  --accent-2: hsl(350, 70%, 45%); /* Rojo Barbería */
  --accent-3: hsl(220, 60%, 30%); /* Azul Barbería */
  
  --border-color: hsl(210, 15%, 25%);
  --card-bg: hsl(210, 15%, 15%);
  --modal-bg: rgba(26, 31, 36, 0.95);

  /* Typography */
  --font-title: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;

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

  /* Border Radius & Shadow */
  --radius-sm: 2px;
  --radius-md: 4px; /* Bordes más rectos/clásicos */
  --radius-lg: 8px;
  --radius-round: 50%;
  
  --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 20px rgba(0, 0, 0, 0.5);
  --shadow-focus: 0 0 0 3px hsl(40, 60%, 40%);

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

[data-theme="light"] {
  /* Modo Claro (Menos usado en barberías vintage, pero implementado por accesibilidad) */
  --bg-color: hsl(40, 20%, 95%);
  --bg-color-alt: hsl(40, 20%, 90%);
  
  --text-color: hsl(210, 15%, 12%);
  --text-color-light: hsl(210, 15%, 35%);
  
  --accent-1: hsl(40, 80%, 40%); 
  --accent-1-hover: hsl(40, 80%, 30%);
  --accent-2: hsl(350, 70%, 45%);
  --accent-3: hsl(220, 60%, 30%);
  
  --border-color: hsl(40, 20%, 80%);
  --card-bg: hsl(40, 20%, 100%);
  --modal-bg: rgba(242, 240, 235, 0.95);
  
  --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 10px 20px rgba(0, 0, 0, 0.15);
}