/* ============================================
   SISTEMA DE COLORES - ESTRATEGIA DE CONTRASTE
   ============================================
   
   Este archivo define un sistema de colores robusto
   que garantiza legibilidad y contraste adecuado.
   
   Todos los colores cumplen con WCAG AA (mínimo 4.5:1)
   para texto normal y 3:1 para texto grande.
*/

:root {
  /* ============================================
     COLORES PRIMARIOS
     ============================================ */
  --primary-color: #2a8473;
  --primary-dark: #1f5f52;
  --primary-light: #3f8e81;
  --primary-lighter: #5aa896;
  
  --secondary-color: #00a650;
  --secondary-dark: #00843d;
  --secondary-light: #1aaf62;
  
  /* ============================================
     FONDOS - ESTRATEGIA DE CONTRASTE
     ============================================
     Fondos claros con suficiente contraste
     para texto oscuro
     */
  
  /* Fondo principal - Blanco puro para máximo contraste */
  --bg-primary: #ffffff;
  
  /* Fondo secundario - Gris muy claro para diferenciar áreas */
  --bg-secondary: #f8f9fa;
  
  /* Fondo terciario - Gris claro para hover/estados */
  --bg-tertiary: #f1f3f5;
  
  /* Fondo de tarjetas - Blanco con borde sutil */
  --bg-card: #ffffff;
  
  /* Fondo de inputs - Blanco para legibilidad */
  --bg-input: #ffffff;
  
  /* Fondo hover - Gris muy claro */
  --bg-hover: #f1f3f5;
  
  /* Fondo activo - Gris claro */
  --bg-active: #e9ecef;
  
  /* Fondo deshabilitado - Gris muy claro */
  --bg-disabled: #f8f9fa;
  
  /* ============================================
     TEXTOS - ESTRATEGIA DE CONTRASTE
     ============================================
     Textos oscuros con suficiente contraste
     sobre fondos claros
     */
  
  /* Texto principal - Casi negro para máximo contraste */
  --text-primary: #1a1a1a;
  
  /* Texto secundario - Gris oscuro para jerarquía */
  --text-secondary: #4a5568;
  
  /* Texto terciario - Gris medio para información menos importante */
  --text-tertiary: #718096;
  
  /* Texto muted - Gris para texto deshabilitado/placeholder */
  --text-muted: #a0aec0;
  
  /* Texto sobre fondo primario - Blanco */
  --text-on-primary: #ffffff;
  
  /* Texto sobre fondo secundario - Blanco */
  --text-on-secondary: #ffffff;
  
  /* ============================================
     BORDES - ESTRATEGIA DE CONTRASTE
     ============================================
     Bordes visibles pero sutiles
     */
  
  /* Borde principal - Gris claro visible */
  --border-primary: #e2e8f0;
  
  /* Borde secundario - Gris medio para énfasis */
  --border-secondary: #cbd5e0;
  
  /* Borde hover - Color primario */
  --border-hover: var(--primary-color);
  
  /* Borde focus - Color primario más oscuro */
  --border-focus: var(--primary-dark);
  
  /* Borde error - Rojo */
  --border-error: #e53e3e;
  
  /* Borde success - Verde */
  --border-success: var(--secondary-color);
  
  /* ============================================
     ESTADOS Y ACCIONES
     ============================================ */
  
  /* Success - Verde con buen contraste */
  --success-color: #00a650;
  --success-bg: #d1fae5;
  --success-text: #065f46;
  --success-border: #6ee7b7;
  
  /* Error - Rojo con buen contraste */
  --error-color: #dc2626;
  --error-bg: #fee2e2;
  --error-text: #991b1b;
  --error-border: #fca5a5;
  
  /* Warning - Amarillo con buen contraste */
  --warning-color: #d97706;
  --warning-bg: #fef3c7;
  --warning-text: #92400e;
  --warning-border: #fcd34d;
  
  /* Info - Azul con buen contraste */
  --info-color: #2563eb;
  --info-bg: #dbeafe;
  --info-text: #1e40af;
  --info-border: #93c5fd;
  
  /* ============================================
     SOMBRAS
     ============================================ */
  
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* ============================================
     GRADIENTES
     ============================================ */
  
  --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  --gradient-success: linear-gradient(135deg, var(--success-color) 0%, var(--secondary-dark) 100%);
  --gradient-hero: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 50%, var(--primary-light) 100%);
  
  /* ============================================
     UTILIDADES DE CONTRASTE
     ============================================
     Clases helper para garantizar contraste
     */
  
  /* Combinaciones garantizadas de fondo + texto */
  --combo-primary: var(--bg-primary) var(--text-primary);
  --combo-secondary: var(--bg-secondary) var(--text-primary);
  --combo-card: var(--bg-card) var(--text-primary);
  --combo-input: var(--bg-input) var(--text-primary);
}

/* ============================================
   CLASES UTILITARIAS DE CONTRASTE
   ============================================ */

/* Garantiza contraste en cualquier fondo */
.text-high-contrast {
  color: var(--text-primary) !important;
  font-weight: 500;
}

.text-medium-contrast {
  color: var(--text-secondary) !important;
}

.text-low-contrast {
  color: var(--text-tertiary) !important;
}

/* Fondos con contraste garantizado */
.bg-high-contrast {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.bg-medium-contrast {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

/* Bordes visibles */
.border-visible {
  border: 1px solid var(--border-primary) !important;
}

.border-strong {
  border: 1px solid var(--border-secondary) !important;
}

/* ============================================
   UTILIDADES DE FONDO
   ============================================ */

.bg-primary { background: var(--bg-primary) !important; }
.bg-secondary { background: var(--bg-secondary) !important; }
.bg-tertiary { background: var(--bg-tertiary) !important; }
.bg-card { background: var(--bg-card) !important; }
.bg-input { background: var(--bg-input) !important; }
.bg-hover { background: var(--bg-hover) !important; }
.bg-disabled { background: var(--bg-disabled) !important; }

/* ============================================
   UTILIDADES DE TEXTO
   ============================================ */

.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-on-primary { color: var(--text-on-primary) !important; }

/* ============================================
   UTILIDADES DE BORDE
   ============================================ */

.border-primary { border-color: var(--border-primary) !important; }
.border-secondary { border-color: var(--border-secondary) !important; }
.border-hover { border-color: var(--border-hover) !important; }
.border-focus { border-color: var(--border-focus) !important; }

/* ============================================
   UTILIDADES DE SOMBRA
   ============================================ */

.shadow-xs { box-shadow: var(--shadow-xs) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }