/* ==========================================================================
   PERFUMES DESIGN SYSTEM — VARIABLES & DESIGN TOKENS
   Arquitectura CSS Senior: Modular, performante y escalable
   ========================================================================== */

:root {
  /* --- PALETA DE COLOR DE LUJO CONTEMPORÁNEO --- */
  /* Fondo blanco puro enriquecido con degradados radiales etéreos */
  --bg-primary: #FFFFFF;
  --bg-surface: rgba(255, 255, 255, 0.82);
  --bg-card: #FFFFFF;
  --bg-card-hover: #FCFDFF;
  --bg-translucent: rgba(255, 255, 255, 0.65);
  
  /* Gradientes Radiales Modernos (Lavanda Eléctrica + Cian Hielo sobre Blanco Puro) */
  --radial-tint-1: rgba(233, 229, 255, 0.75); /* Lavanda moderna suave */
  --radial-tint-2: rgba(220, 243, 255, 0.65); /* Cian polar cristal */
  --radial-ambient: radial-gradient(circle at 18% 12%, var(--radial-tint-1) 0%, transparent 45%),
                    radial-gradient(circle at 82% 85%, var(--radial-tint-2) 0%, transparent 45%),
                    #FFFFFF;
  
  /* Tintas y Tipografía (Alto contraste sin negros plásticos) */
  --text-main: #0B0D14;
  --text-muted: #5F6676;
  --text-light: #94A3B8;
  --text-inverse: #FFFFFF;

  /* Acentos de Alta Gama */
  --accent-gold: #C5A059;
  --accent-gold-light: #E5CCA0;
  --accent-gold-dark: #8F6D2C;
  --accent-purple: #6366F1;
  --accent-cyan: #0EA5E9;
  
  /* WhatsApp Oficial */
  --whatsapp-green: #25D366;
  --whatsapp-hover: #20BD5A;
  --whatsapp-glow: rgba(37, 211, 102, 0.35);

  /* Borde Hairline Líquido & Sombras 3D Finas */
  --hairline-color: rgba(15, 23, 42, 0.07);
  --hairline-gradient: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(15,23,42,0.06) 50%, rgba(255,255,255,0.4));
  --card-shadow-rest: 0 10px 30px -10px rgba(15, 23, 42, 0.06), 0 4px 12px -2px rgba(15, 23, 42, 0.03);
  --card-shadow-hover: 0 24px 48px -12px rgba(99, 102, 241, 0.12), 0 12px 24px -6px rgba(15, 23, 42, 0.07);
  --modal-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.3);

  /* Tipografía */
  --font-display: 'Space Grotesk', 'Cabinet Grotesk', system-ui, -apple-system, sans-serif;
  --font-body: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Bodoni Moda', 'Playfair Display', Georgia, serif;

  /* Radios de Curvatura Suaves */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 9999px;

  /* Transiciones y Easing Fino */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.2s var(--ease-smooth);
  --transition-normal: 0.35s var(--ease-smooth);
  --transition-slow: 0.7s var(--ease-spring);

  /* Z-Index Hierarchy */
  --z-base: 1;
  --z-sticky: 10;
  --z-nav: 50;
  --z-floating: 80;
  --z-modal: 100;
  --z-loader: 999;
}