:root {
  /* Colores por defecto (se sobrescriben dinámicamente desde Firebase) */
  --hero-bg: #1F4788;
  --form-bg: #FFFFFF;
  --primary-text: #333333;
  --secondary-text: #666666;
  --button-bg: #1F4788;
  --button-text: #FFFFFF;
  
  /* Gradiente glassmorphism (se sobrescribe dinámicamente) */
  --gradient-color1: rgba(255, 255, 255, 0.15);
  --gradient-color2: rgba(255, 255, 255, 0.05);
  --gradient-angle: 135deg;
  
  /* Tipografía */
  --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 28px;
  --font-size-2xl: 36px;
  
  /* Espaciado */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 64px;
  
  /* Bordes */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  
  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.2);
  
  /* Glassmorphism */
  --glass-border: 1px solid rgba(255, 255, 255, 0.2);
  --glass-blur: blur(20px);
  
  /* Transiciones */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Z-index */
  --z-modal: 1000;
  --z-loader: 1100;
  --z-header: 100;
}