/* Paleta de colores global de JITKey */

/* Importar fuente global */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Colores principales */
  --color-primary-dark: #182440;     /* Azul oscuro */
  --color-primary-medium: #2c4a73;   /* Azul oscuro claro */
  --color-primary-light: #19a7ce;    /* Azul claro/turquesa */
  --color-accent: #ffbd59;           /* Amarillo */
  --color-white: #ffffff;            /* Blanco */
  
  /* Variaciones de los colores principales */
  --color-primary-dark-90: rgba(24, 36, 64, 0.9);
  --color-primary-dark-80: rgba(24, 36, 64, 0.8);
  --color-primary-dark-70: rgba(24, 36, 64, 0.7);
  --color-primary-dark-50: rgba(24, 36, 64, 0.5);
  --color-primary-dark-30: rgba(24, 36, 64, 0.3);
  --color-primary-dark-10: rgba(24, 36, 64, 0.1);
  
  --color-primary-medium-90: rgba(44, 74, 115, 0.9);
  --color-primary-medium-80: rgba(44, 74, 115, 0.8);
  --color-primary-medium-70: rgba(44, 74, 115, 0.7);
  --color-primary-medium-50: rgba(44, 74, 115, 0.5);
  --color-primary-medium-30: rgba(44, 74, 115, 0.3);
  --color-primary-medium-10: rgba(44, 74, 115, 0.1);
  
  --color-primary-light-90: rgba(25, 167, 206, 0.9);
  --color-primary-light-80: rgba(25, 167, 206, 0.8);
  --color-primary-light-70: rgba(25, 167, 206, 0.7);
  --color-primary-light-50: rgba(25, 167, 206, 0.5);
  --color-primary-light-30: rgba(25, 167, 206, 0.3);
  --color-primary-light-10: rgba(25, 167, 206, 0.1);
  
  --color-accent-90: rgba(255, 189, 89, 0.9);
  --color-accent-80: rgba(255, 189, 89, 0.8);
  --color-accent-70: rgba(255, 189, 89, 0.7);
  --color-accent-50: rgba(255, 189, 89, 0.5);
  --color-accent-30: rgba(255, 189, 89, 0.3);
  --color-accent-10: rgba(255, 189, 89, 0.1);
  
  /* Colores de texto */
  --text-primary: var(--color-primary-dark);
  --text-secondary: var(--color-primary-light);
  --text-accent: var(--color-accent);
  --text-white: var(--color-white);
  
  /* Colores de fondo */
  --bg-primary: var(--color-white);
  --bg-secondary: var(--color-primary-light-10);
  --bg-dark: var(--color-primary-dark);
  --bg-accent: var(--color-accent);
  
  /* Colores de borde */
  --border-primary: var(--color-primary-light);
  --border-accent: var(--color-accent);
  --border-light: var(--color-primary-light-30);
  
  /* Fuentes */
  --font-primary: 'Nunito Sans', sans-serif;
}

/* Clases de utilidad para colores */
.text-primary-dark { color: var(--color-primary-dark) !important; }
.text-primary-medium { color: var(--color-primary-medium) !important; }
.text-primary-light { color: var(--color-primary-light) !important; }
.text-accent { color: var(--color-accent) !important; }
.text-white { color: var(--color-white) !important; }

.bg-primary-dark { background-color: var(--color-primary-dark) !important; }
.bg-primary-medium { background-color: var(--color-primary-medium) !important; }
.bg-primary-light { background-color: var(--color-primary-light) !important; }
.bg-accent { background-color: var(--color-accent) !important; }
.bg-white { background-color: var(--color-white) !important; }

.border-primary-dark { border-color: var(--color-primary-dark) !important; }
.border-primary-medium { border-color: var(--color-primary-medium) !important; }
.border-primary-light { border-color: var(--color-primary-light) !important; }
.border-accent { border-color: var(--color-accent) !important; }

/* Clases para hover states */
.hover-primary-dark:hover { 
  background-color: var(--color-primary-dark) !important; 
  color: var(--color-white) !important;
}

.hover-primary-medium:hover { 
  background-color: var(--color-primary-medium) !important; 
  color: var(--color-white) !important;
}

.hover-primary-light:hover { 
  background-color: var(--color-primary-light) !important; 
  color: var(--color-white) !important;
}

.hover-accent:hover { 
  background-color: var(--color-accent) !important; 
  color: var(--color-primary-dark) !important;
}

/* Clases de utilidad para fuentes */
.font-primary { 
  font-family: var(--font-primary) !important; 
}