/**
 * Nicole di Bella - Sistema de Diseño Premium
 * Sistema de variables CSS para una experiencia de marca consistente y elegante
 * Versión: 1.0
 * Fecha: 2025-01-22
 */

:root {
  /* ============================================
     COLORES PRINCIPALES - Paleta Premium
     ============================================ */
  --primary-purple: #FFB6D5;
  --primary-pink: #F4C2C2;
  --background-cream: #FDF8F5;
  --background-light: #F8F0F5;
  --background-accent: #F4F0F8;
  --text-dark: #2D2D2D;
  --text-medium: #4A4A4A;
  --text-light: #6B6B6B;
  --white-soft: rgba(255, 255, 255, 0.95);
  
  /* Escala de grises */
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;
  --white: #FFFFFF;
  
  /* ============================================
     GRADIENTES PREMIUM - Efectos Elegantes
     ============================================ */
  --gradient-primary: linear-gradient(135deg, #FFB6D5 0%, #F4C2C2 100%);
  --gradient-background: linear-gradient(135deg, #FDF8F5 0%, #F8F0F5 100%);
  --gradient-accent: linear-gradient(135deg, #F8F0F5 0%, #F4F0F8 100%);
  
  /* Nuevos gradientes específicos */
  --gradient-header-top: #DAC2F5;
  --gradient-footer: #DAC2F5;
  --gradient-bestseller-badge: linear-gradient(135deg, #B794F4 0%, #D6BCFA 100%);
  --gradient-add-to-cart: linear-gradient(135deg, #23BBB7 0%, #D3EDEF 100%);
  
  /* ============================================
     VARIABLES DE SECCIONES INDEPENDIENTES
     ============================================ */
  /* Header */
  --header-top-gradient: var(--gradient-header-top);
  --header-top-text: #000000;
  --header-main-bg: #FFFFFF;
  --header-menu-text: #000000;
  --header-menu-hover: #B794F4;
  
  /* Hero */
  --hero-title-gradient: var(--gradient-primary);
  --hero-overlay-opacity: 0.1;
  
  /* Features */
  --features-bg: #F8F5F2;
  --features-icon: var(--gradient-primary);
  --features-title: #7046B9;
  --features-text: #000000;
  
  /* Products */
  --products-bg: #FFB6D5;
  --product-card-bg: var(--white-soft);
  --products-title-color: #6a47b9;
  --product-subtitle-color: var(--text-medium);
  --product-title-color: #6A47B9;
  --product-price-color: #C084FC;
  --product-btn-gradient: var(--gradient-primary);
  
  /* Collections */
  --collections-bg: #FFFFFF;
  --collections-overlay-opacity: 0.7;
  --collections-text: #FFFFFF;
  --collections-title-color: #6a47b9;
  --collections-subtitle-color: var(--text-medium);
  
  /* Bestsellers */
  --bestsellers-bg: #FFFFFF;
  --bestseller-badge-gradient: var(--gradient-bestseller-badge);
  --bestsellers-product-name-color: #6A47B9;
  --bestsellers-product-price-color: #C084FC;
  
  /* Footer */
  --footer-gradient: var(--gradient-footer);
  --footer-text: #000000;
  
  /* ============================================
     TIPOGRAFÍAS - Jerarquía Elegante
     ============================================ */
  --font-heading: 'League Spartan', serif;
  --font-body: 'Montserrat', sans-serif;
  
  /* Tamaños de fuente escalables */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px */
  
  /* Pesos de fuente */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* ============================================
     SOMBRAS ELEGANTES - Profundidad Premium
     ============================================ */
  --shadow-soft: 0 8px 25px rgba(212, 175, 200, 0.3);
  --shadow-hover: 0 15px 35px rgba(212, 175, 200, 0.4);
  --shadow-card: 0 10px 30px rgba(212, 175, 200, 0.1);
  --shadow-light: 0 4px 15px rgba(212, 175, 200, 0.2);
  --shadow-inset: inset 0 2px 4px rgba(212, 175, 200, 0.1);
  
  /* ============================================
     ESPACIADO PREMIUM - Ritmo Visual
     ============================================ */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 60px;
  --spacing-2xl: 80px;
  --spacing-3xl: 120px;
  
  /* ============================================
     BORDER RADIUS - Suavidad Elegante
     ============================================ */
  --radius-xs: 8px;
  --radius-sm: 15px;
  --radius-md: 20px;
  --radius-lg: 25px;
  --radius-xl: 30px;
  --radius-full: 50%;
  
  /* ============================================
     TRANSICIONES - Animaciones Suaves
     ============================================ */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-elastic: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* ============================================
     Z-INDEX - Capas de Profundidad
     ============================================ */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-tooltip: 1070;
  
  /* ============================================
     CONTENEDORES - Anchos Responsive
     ============================================ */
  --container-xs: 540px;
  --container-sm: 720px;
  --container-md: 960px;
  --container-lg: 1140px;
  --container-xl: 1320px;
  
  /* ============================================
     UTILIDADES ADICIONALES
     ============================================ */
  /* Opacidades */
  --opacity-light: 0.7;
  --opacity-medium: 0.8;
  --opacity-heavy: 0.9;
  
  /* Líneas y bordes */
  --border-width: 1px;
  --border-color: rgba(212, 175, 200, 0.2);
  --border-color-light: rgba(212, 175, 200, 0.1);
  
  /* Estados de hover */
  --hover-opacity: 0.8;
  --hover-scale: 1.05;
  
  /* ============================================
     PRODUCTOS - Variables Independientes
     ============================================ */
  /* Fondos */
  --products-bg: #FFB6D5;
  --product-card-bg: var(--white-soft);
  
  /* Colores de texto */
  --products-title-color: var(--text-dark);
  --product-title-color: var(--text-dark);
  --product-description-color: var(--text-medium);
  --product-price-color: var(--primary-purple);
  
  /* Gradientes */
  --products-title-gradient: var(--gradient-primary);
  --product-card-accent-gradient: var(--gradient-primary);
  --product-btn-gradient: var(--gradient-primary);
  
  /* Botones */
  --product-btn-text-color: var(--white-soft);
  
  /* Bordes */
  --product-card-border: var(--border-color-light);
  --product-card-hover-border: var(--primary-purple);
  
  /* Sombras */
  --product-card-shadow: var(--shadow-card);
  --product-card-hover-shadow: var(--shadow-hover);
  
  /* Colores adicionales de productos */
  --product-subtitle-color: var(--gray-600);
  --product-price-old-color: var(--gray-400);
  --product-rating-color: var(--gray-600);
  --product-action-btn-bg: var(--white);
}

/* ============================================
   CLASES UTILITARIAS PREMIUM
   ============================================ */

/* Fondos con gradientes */
.bg-gradient-primary {
  background: var(--gradient-primary);
}

.bg-gradient-background {
  background: var(--gradient-background);
}

.bg-gradient-accent {
  background: var(--gradient-accent);
}

/* Sombras aplicables */
.shadow-soft {
  box-shadow: var(--shadow-soft);
}

.shadow-hover {
  box-shadow: var(--shadow-hover);
}

.shadow-card {
  box-shadow: var(--shadow-card);
}

.shadow-light {
  box-shadow: var(--shadow-light);
}

/* Transiciones premium */
.transition-smooth {
  transition: all var(--transition-base);
}

.transition-elastic {
  transition: all var(--transition-elastic);
}

/* Estados de hover elegantes */
.hover-lift {
  transition: transform var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-2px);
}

.hover-scale {
  transition: transform var(--transition-base);
}

.hover-scale:hover {
  transform: scale(var(--hover-scale));
}

/* ============================================
   COMPONENTES BASE PREMIUM
   ============================================ */

/* Botón premium base */
.btn-premium {
  background: var(--gradient-primary);
  color: var(--white-soft);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
  box-shadow: var(--shadow-soft);
  transition: all var(--transition-base);
  cursor: pointer;
}

.btn-premium:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

/* Tarjeta premium base */
.card-premium {
  background: var(--white-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--spacing-lg);
  transition: all var(--transition-base);
}

.card-premium:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* Texto premium */
.text-premium {
  font-family: var(--font-body);
  color: var(--text-medium);
  line-height: 1.6;
}

.heading-premium {
  font-family: var(--font-heading);
  color: var(--text-dark);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

@media (max-width: 768px) {
  :root {
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-2xl: 64px;
    --spacing-3xl: 96px;
  }
}

@media (max-width: 480px) {
  :root {
    --spacing-lg: 24px;
    --spacing-xl: 36px;
    --spacing-2xl: 48px;
    --spacing-3xl: 72px;
    
    --font-size-3xl: 1.5rem;   /* 24px en móvil */
    --font-size-4xl: 1.875rem; /* 30px en móvil */
    --font-size-5xl: 2.25rem;  /* 36px en móvil */
  }
}

/* ============================================
   NOTAS DE IMPLEMENTACIÓN
   ============================================ */

/*
Este sistema de diseño está optimizado para:
- Consistencia visual premium
- Experiencia de marca elegante
- Escalabilidad responsive
- Mantenimiento sencillo
- Rendimiento optimizado

Para usar:
1. Importa este archivo ANTES que otros CSS
2. Usa exclusivamente estas variables CSS
3. Aprovecha las clases utilitarias
4. Mantén la coherencia del sistema

Ejemplo de uso:
.mi-componente {
  background: var(--gradient-primary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  transition: all var(--transition-base);
}
*/