/**
 * ============================================================================
 * NINFA BOUTIQUE - Brand Colors System v1.0
 * ============================================================================
 *
 * Sistema de colores basado en BRAND_GUIDELINES.md
 * NO MODIFICAR sin consultar la guía de branding oficial
 *
 * Última actualización: Noviembre 2024
 * Mantenedor: Equipo de desarrollo Ninfa
 * ============================================================================
 */

:root {
  /* ==========================================================================
     COLORES PRIMARIOS
     ========================================================================== */

  /**
   * Vinotinto Ninfa - Color principal de marca
   * Uso: Botones CTA, enlaces activos, badges de lencería
   * Psicología: Sensualidad, elegancia, misterio, pasión refinada
   * Contraste WCAG AAA con blanco: 11.4:1
   */
  --burgundy-ninfa: #5C0A34;
  --burgundy-ninfa-dark: #3D0620;
  --burgundy-ninfa-light: #8B3A5D;

  /**
   * Negro Profundo
   * Uso: Textos principales, elementos estructurales, tipografía
   * Nota: No es #000 puro para mejor legibilidad en pantallas OLED
   */
  --deep-black: #0A0A0A;

  /**
   * Blanco Puro
   * Uso: Backgrounds principales, textos sobre fondos oscuros
   */
  --pure-white: #FFFFFF;

  /* ==========================================================================
     COLORES SECUNDARIOS (Sistema de Categorías)
     ========================================================================== */

  /**
   * Terracota Cálido - Categoría Lubricantes
   * Reemplaza: Naranja fuerte anterior (#FF6B00 aprox)
   * Mejora: Más sofisticado, menos agresivo
   */
  --warm-terracotta: #C65D3B;

  /**
   * Azul Nocturno - Categoría Juguetes
   * Reemplaza: Azul claro anterior
   * Mejora: Más elegante y premium
   */
  --midnight-blue: #1C3A50;

  /**
   * Rosa Empolvado - Acentos delicados
   * Uso: Badges "nuevo", highlights sutiles, detalles femeninos
   * Nota: NO es el rosa Instagram eliminado
   */
  --dusty-rose: #C9A0A0;

  /* ==========================================================================
     ESCALA DE GRISES CÁLIDOS (Neutral)
     ========================================================================== */

  /**
   * Sistema de grises con toque cálido (beige/arena)
   * Temperatura de color: Cálida (~2700K-3000K equivalente)
   */
  --warm-grey-100: #F5F3F0;  /* Backgrounds alternos, cards sutiles */
  --warm-grey-200: #E8E4DE;  /* Bordes, separadores, inputs */
  --warm-grey-300: #D1CBC3;  /* Líneas divisorias visibles */
  --warm-grey-400: #9B948C;  /* Textos secundarios, placeholders */
  --warm-grey-500: #7D7770;  /* Textos terciarios */
  --warm-grey-600: #5C5751;  /* Textos de contraste medio */

  /* ==========================================================================
     COLORES FUNCIONALES (Estados del Sistema)
     ========================================================================== */

  /**
   * Success - Verde Bosque
   * Uso: Confirmaciones, producto agregado, operaciones exitosas
   */
  --success: #2D5016;
  --success-light: #4A7C2C;      /* Para fondos claros */
  --success-bg: #F0F5F0;         /* Background de alerts success */

  /**
   * Error - Burdeos
   * Uso: Errores, validaciones fallidas, alertas críticas
   * Nota: Mantiene familia vinotinto para coherencia visual
   */
  --error: #8B1E3F;
  --error-light: #B02D52;
  --error-bg: #FCF0F0;

  /**
   * Warning - Ámbar Oscuro
   * Uso: Advertencias, stock bajo, confirmaciones necesarias
   */
  --warning: #A66B2B;
  --warning-light: #C9853F;
  --warning-bg: #FFFBF0;

  /**
   * Info - Azul Acero
   * Uso: Información general, tooltips, mensajes informativos
   */
  --info: #3D5A73;
  --info-light: #577B98;
  --info-bg: #F0F5F9;

  /* ==========================================================================
     ALIASES SEMÁNTICOS (Para uso en componentes)
     ========================================================================== */

  /* Colores primarios con nombres semánticos */
  --color-primary: var(--burgundy-ninfa);
  --color-primary-hover: var(--burgundy-ninfa-dark);
  --color-primary-light: var(--burgundy-ninfa-light);

  /* Sistema de texto */
  --color-text: var(--deep-black);
  --color-text-secondary: var(--warm-grey-400);
  --color-text-tertiary: var(--warm-grey-600);
  --color-text-inverse: var(--pure-white);

  /* Backgrounds */
  --color-bg: var(--pure-white);
  --color-bg-alt: var(--warm-grey-100);
  --color-bg-dark: var(--deep-black);

  /* Bordes y separadores */
  --color-border: var(--warm-grey-200);
  --color-border-dark: var(--warm-grey-300);
  --color-border-focus: var(--burgundy-ninfa);

  /* Estados interactivos */
  --color-hover: var(--burgundy-ninfa-dark);
  --color-active: var(--burgundy-ninfa);
  --color-disabled: var(--warm-grey-400);

  /* ==========================================================================
     SISTEMA DE ESPACIADO (Grid de 8px)
     ========================================================================== */

  --space-xs: 4px;      /* 0.5 unidades - Mínimo (iconos inline) */
  --space-sm: 8px;      /* 1 unidad - Pequeño (padding badges) */
  --space-md: 16px;     /* 2 unidades - Medio (padding cards) */
  --space-lg: 24px;     /* 3 unidades - Grande (márgenes secciones) */
  --space-xl: 32px;     /* 4 unidades - Extra grande */
  --space-2xl: 48px;    /* 6 unidades - Separación bloques */
  --space-3xl: 64px;    /* 8 unidades - Secciones principales */
  --space-4xl: 96px;    /* 12 unidades - Hero sections */

  /* ==========================================================================
     TIPOGRAFÍA
     ========================================================================== */

  /**
   * Familias tipográficas con fallbacks completos
   */
  --font-primary: 'Barlow Semi Condensed', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --font-elegant: 'EB Garamond', Georgia, 'Times New Roman', serif;

  /**
   * Pesos tipográficos
   */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /**
   * Tamaños base (escala modular 1.250 - Major Third)
   */
  --font-size-xs: 12px;      /* Caption, legal */
  --font-size-sm: 13px;      /* Small text, labels */
  --font-size-base: 15px;    /* Body text */
  --font-size-md: 16px;      /* Lead text */
  --font-size-lg: 18px;      /* H5 */
  --font-size-xl: 22px;      /* H4 */
  --font-size-2xl: 28px;     /* H3 */
  --font-size-3xl: 36px;     /* H2 */
  --font-size-4xl: 48px;     /* H1 */

  /**
   * Line heights (interlineado)
   */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /**
   * Letter spacing
   */
  --letter-spacing-tight: -0.5px;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.5px;
  --letter-spacing-wider: 1px;
  --letter-spacing-widest: 1.5px;

  /* ==========================================================================
     TRANSICIONES Y ANIMACIONES
     ========================================================================== */

  /**
   * Duraciones estándar
   */
  --transition-fast: 0.15s;
  --transition-normal: 0.3s;
  --transition-slow: 0.5s;

  /**
   * Easing functions (curvas de animación)
   */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);     /* Material Design */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);            /* Aceleración */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);           /* Desaceleración */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);      /* Suave ambos lados */

  /* ==========================================================================
     Z-INDEX (Capas de elementos)
     ========================================================================== */

  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ==========================================================================
     SOMBRAS (Solo para overlays - Flat Design)
     ========================================================================== */

  /**
   * NOTA: En flat design no usamos sombras excepto para modals/overlays
   * Estas están definidas pero NO deben usarse en cards/botones
   */
  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.05);
  --shadow-md: 0 4px 6px rgba(10, 10, 10, 0.1);
  --shadow-lg: 0 10px 15px rgba(10, 10, 10, 0.1);
  --shadow-xl: 0 20px 25px rgba(10, 10, 10, 0.15);
  --shadow-overlay: 0 0 40px rgba(10, 10, 10, 0.15);  /* Solo modals */

  /* ==========================================================================
     BORDER RADIUS (Flat Design = 0px)
     ========================================================================== */

  /**
   * IMPORTANTE: Flat design puro = sin border-radius
   * Estas variables están para elementos circulares específicos
   */
  --radius-none: 0;        /* Default para TODO */
  --radius-full: 50%;      /* Solo para círculos (avatars, dots) */

  /* ==========================================================================
     BREAKPOINTS RESPONSIVE
     ========================================================================== */

  --breakpoint-xs: 360px;   /* Móviles pequeños */
  --breakpoint-sm: 576px;   /* Móviles */
  --breakpoint-md: 768px;   /* Tablets */
  --breakpoint-lg: 992px;   /* Desktop pequeño */
  --breakpoint-xl: 1200px;  /* Desktop */
  --breakpoint-2xl: 1440px; /* Desktop grande */
}

/* =============================================================================
   MODO OSCURO (Dark Mode) - Preparado para futuro
   ============================================================================= */

/**
 * Variables para dark mode (no implementado aún)
 * Mantener comentado hasta implementación oficial
 */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--deep-black);
    --color-bg-alt: #1A1A1A;
    --color-text: var(--warm-grey-100);
    --color-text-secondary: var(--warm-grey-400);
    --color-border: #2A2A2A;
    --burgundy-ninfa: #8B3A5D;
  }
}
*/

/* =============================================================================
   COMPATIBILIDAD IE11 (Fallbacks)
   ============================================================================= */

/**
 * Para IE11 que no soporta CSS Variables
 * Mantener solo si hay reportes de usuarios en IE11
 */
@supports not (--css: variables) {
  body {
    color: #0A0A0A;
    background: #FFFFFF;
    font-family: 'Barlow Semi Condensed', sans-serif;
  }

  .btn-primary,
  .button-primary {
    background: #5C0A34;
    color: #FFFFFF;
  }
}

/* =============================================================================
   FIN DEL SISTEMA DE COLORES
   ============================================================================= */