/* ===================================
   CSS VARIABLES - CHRISTMAS GLOW EVENT
   =================================== */

:root {
  /* === COLORES PRINCIPALES === */
  --primary-green: #2d5436;
  --primary-green-dark: #1e3a26;
  --primary-green-light: rgba(45, 84, 54, 0.1);
  --primary-gold: #D4AF37;
  --primary-gold-dark: #948727;
  --bg-secondary: #ffe8ba;
  --primary-text-color: #5d3010;
  --footer-bg-color: #dbcbac;
  --color-footer-text: white;

  /* === COLORES SECUNDARIOS === */
  --brown-primary: #654321;
  --brown-overlay: rgba(101, 67, 33, 0.8);
  
  /* === COLORES DE FONDO === */
  --bg-cream: #f5f5dc;
  --bg-light-cream: #e8dcc0;
  --bg-white: #ffffff;
  --bg-light-gray: #f9f9f9;
  
  /* === COLORES DE TEXTO === */
  --text-dark: #333333;
  --text-medium: #555555;
  --text-light: #666666;
  --text-white: #ffffff;
  
  /* === TIPOGRAFÍA === */
  --font-primary: 'Georgia', serif;
  --font-size-hero: 3.5rem;
  --font-size-section: 2.5rem;
  --font-size-card: 1.5rem;
  --font-size-body: 1rem;
  --font-size-small: 0.9rem;
  
  /* === TIPOGRAFÍA RESPONSIVA === */
  --font-size-hero-mobile: 2.5rem;
  --font-size-body-mobile: 1.2rem;
  
  /* === ESPACIADO === */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 30px;
  --spacing-xl: 40px;
  --spacing-xxl: 50px;
  --spacing-section: 80px;
  
  /* === CONTENEDORES === */
  --container-max-width: 1200px;
  --container-padding: 20px;
  --container-padding-mobile: 15px;
  
  /* === BORDES Y SOMBRAS === */
  --border-radius-sm: 5px;
  --border-radius-md: 10px;
  --border-radius-lg: 50%;
  
  --shadow-light: 0 5px 15px rgba(0,0,0,0.1);
  --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.15);
  --shadow-heavy: 0 6px 25px rgba(0, 0, 0, 0.2);
  --shadow-text: 2px 2px 4px rgba(0,0,0,0.5);
  --shadow-text-light: 1px 1px 2px rgba(0,0,0,0.5);
  --shadow-drop: 0 10px 20px rgba(0,0,0,0.2);
  
  /* === TRANSICIONES === */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* === ELEMENTOS HERO === */
  --hero-min-height: 500px;
  --hero-family-width: 300px;
  --hero-family-height: 350px;
  --hero-santa-width: 280px;
  --hero-santa-height: 380px;
  --hero-mug-width: 350px;
  --hero-mug-height: 400px;
  
  /* === GRID Y LAYOUT === */
  --grid-gap: 40px;
  --grid-gap-small: 30px;
  --grid-min-width: 250px;
  --grid-min-width-small: 200px;
  --grid-min-width-schedule: 300px;
  
  /* === LOGO FLOTANTE === */
  --floating-logo-size: 60px;
  --floating-logo-size-mobile: 50px;
  --floating-logo-padding: 10px;
  --floating-logo-padding-mobile: 8px;
  --floating-logo-position: 20px;
  --floating-logo-position-mobile: 15px;
  
  /* === NAVBAR === */
  --navbar-height: 80px;
  --navbar-height-mobile: 70px;
  --navbar-logo-size: 50px;
  --navbar-logo-size-mobile: 40px;
  --navbar-padding: 0 var(--spacing-lg);
  --navbar-padding-mobile: 0 var(--spacing-md);
  --navbar-bg: rgba(255, 255, 255, 0.95);
  --navbar-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  
  /* === MENU === */
  --menu-gap: var(--spacing-lg);
  --menu-gap-mobile: var(--spacing-md);
  --menu-link-padding: var(--spacing-sm) var(--spacing-md);
  --menu-link-border-radius: var(--border-radius-sm);
  
  /* === HAMBURGER === */
  --hamburger-size: 30px;
  --hamburger-line-height: 3px;
  --hamburger-gap: 6px;
  
  /* === EFECTOS === */
  --backdrop-blur: blur(10px);
  --scale-hover: 1.05;
  
  /* === Z-INDEX === */
  --z-floating-logo: 1000;
  --z-hero-family: 2;
  --z-hero-santa: 3;
  --z-hero-mug: 1;
  
  /* === BREAKPOINTS === */
  --breakpoint-mobile: 768px;
}

/* === VARIABLES PARA MODO OSCURO (OPCIONAL) === */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-white: #1a1a1a;
    --bg-light-gray: #2a2a2a;
    --text-dark: #ffffff;
    --text-medium: #cccccc;
    --text-light: #aaaaaa;
  }
}