/* ================================
   Variables Globales — Regalos ARI
   ================================ */

   :root {
    /* 🎨 Colores principales */
    --color-primario:   #e91e63;     /* Rosa fuerte */
    --color-secundario: #00bcd4;     /* Turquesa */
    --color-acento:     #ff4081;     /* Rosa neón */
    --color-fondo:      #ffffff;     /* Fondo base */
    --color-fondo-alt:  #fdf7fa;     /* Fondo suave rosado */
    --color-texto:      #333333;     /* Texto principal */
    --color-texto-claro:#ffffff;     /* Texto claro */
    --color-borde:      #e0e0e0;     /* Bordes y divisores */
    --color-exito:      #4caf50;     /* Verde para confirmaciones */
    --color-alerta:     #ff5722;     /* Naranja para avisos */
    --color-error:      #f44336;     /* Rojo para errores */
  
    /* Aliases (para consistencia con base.css) */
    --brand:      var(--color-primario);
    --brand-600:  #c2185b;
    --accent:     var(--color-acento);
    --accent-600: #e91e63;
    --surface:    var(--color-fondo);
  
    /* 🖋️ Tipografía */
    --fuente-base:    'Inter', 'Helvetica Neue', Arial, sans-serif;
    --fuente-titulos: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  
    /* 📏 Tamaños de fuente */
    --font-xs:  0.8rem;
    --font-sm:  0.9rem;
    --font-md:  1rem;
    --font-lg:  1.25rem;
    --font-xl:  1.5rem;
    --font-xxl: 2rem;
  
    /* Alturas de línea y pesos */
    --lh-tight:   1.2;
    --lh-normal:  1.5;
    --fw-regular: 400;
    --fw-bold:    700;
  
    /* 📐 Espaciados */
    --espacio-xxs: 4px;
    --espacio-xs:  8px;
    --espacio-sm:  12px;
    --espacio-md:  16px;
    --espacio-lg:  24px;
    --espacio-xl:  32px;
    --espacio-xxl: 48px;
  
    /* 🖼️ Radios */
    --radio-sm:    6px;
    --radio-md:    12px;
    --radio-lg:    20px;
    --radio-round: 50%;
  
    /* 🌑 Sombras */
    --sombra-sm: 0 1px 3px rgba(0,0,0,.12);
    --sombra-md: 0 3px 6px rgba(0,0,0,.16);
    --sombra-lg: 0 8px 16px rgba(0,0,0,.20);
  
    /* ⏱️ Transiciones */
    --transicion-base: all .3s ease;
  
    /* 📱 Breakpoints */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
  
    /* 🌈 Gradientes */
    --gradiente-brand: linear-gradient(135deg, var(--color-primario), var(--color-acento));
  }