/* ===== VARIABLES CSS CENTRALIZADAS ===== */
/* Este archivo contiene todas las variables de color de la aplicación */
/* Última actualización: 2026-01-12 */

:root {
  /* ===== COLORES PRINCIPALES ===== */
  --color-primary: #c0cd29ff;        /* Turquesa - Color principal de la marca */
  --color-secondary: #666666;      /* Azul oscuro - Color secundario */
  --color-accent: #818A1C;         /* Verde azulado - Color de acento */
  
  /* ===== COLORES BASE ===== */
  --color-dark: #111111;           /* Negro principal */
  --color-dark-alt: #0b0b0b;       /* Negro alternativo */
  --color-light: #F6F8FA;          /* Gris claro de fondo */
  --color-white: #ffffff;           /* Blanco */
  
  /* ===== COLORES DE ESTADO ===== */
  --color-danger: #e84e43;         /* Rojo para badges y alertas */
  --color-danger-alt: #dc3545;      /* Rojo alternativo (Bootstrap) */
  --color-success: #5bb75b;         /* Verde de éxito */
  --color-warning: #faa732;        /* Naranja de advertencia */
  --color-warning-gradient-start: #fbb450; /* Inicio gradiente warning */
  --color-warning-gradient-end: #f89406;   /* Fin gradiente warning */
  
  /* ===== COLORES DE TEXTO ===== */
  --color-text-primary: #111111;   /* Texto principal */
  --color-text-secondary: #666;     /* Texto secundario */
  --color-text-muted: #999;        /* Texto atenuado */
  --color-text-light: #aaabab;     /* Texto claro */
  --color-text-dark: #333;         /* Texto oscuro */
  --color-text-darker: #444;       /* Texto más oscuro */
  --color-text-inverse: #ffffff;   /* Texto sobre fondos oscuros */
  
  /* ===== COLORES DE BORDE ===== */
  --color-border: #E6EAEA;          /* Borde principal */
  --color-border-dark: #ddd;       /* Borde oscuro */
  --color-border-light: #e5e5e5;   /* Borde claro */
  --color-border-medium: #ccc;     /* Borde medio */
  
  /* ===== COLORES DE FONDO ===== */
  --color-bg-light: #F6F8FA;        /* Fondo claro */
  --color-bg-white: #ffffff;       /* Fondo blanco */
  --color-bg-gray: #f5f5f5;        /* Fondo gris */
  --color-bg-gray-light: #f6f6f6;  /* Fondo gris claro */
  --color-bg-gray-medium: #eee;    /* Fondo gris medio */
  --color-bg-dark: #0e1011;        /* Fondo oscuro */
  --color-bg-dark-alt: #23282a;    /* Fondo oscuro alternativo */
  --color-bg-dark-gradient-start: #3b5998; /* Inicio gradiente azul oscuro */
  --color-bg-dark-gradient-end: #1f90bb;   /* Fin gradiente azul oscuro */
  
  /* ===== COLORES ESPECÍFICOS DE COMPONENTES ===== */
  --color-link: #111111;           /* Color de enlaces */
  --color-link-hover: #818A1C;      /* Color de enlaces al hover */
  --color-selection-bg: #c0cd29ff;   /* Fondo de selección de texto */
  --color-selection-text: #666666; /* Texto seleccionado */
  
  /* ===== COLORES DE BADGES Y ETIQUETAS ===== */
  --color-badge-pill: #e84e43;     /* Rojo para badges de "envío gratis" */
  --color-badge-destacado: #ffd700; /* Dorado para productos destacados */
  --color-badge-destacado-alt: #ffed4e; /* Dorado alternativo */
  
  /* ===== COLORES LEGACY (para compatibilidad) ===== */
  --color-legend: #666;             /* Color para leyendas */
  --color-required: #F00;           /* Color para campos requeridos */
  --color-star: #FC0;                /* Color para estrellas */
  --color-star-alt: #E69500;         /* Color alternativo para estrellas */
  --color-limegreen: limegreen;     /* Verde lima para moneda */
}