:root {
  /* Paleta de colores principal */
  --color-primary: #0070D9;
  --color-primary-light: #2592FC;
  --color-primary-dark: #00519F;
  --color-secondary: #7D65E6;
  --color-secondary-light: #C6BBF9;
  --color-secondary-dark: #6045D9;
  --color-accent: #FFC300;
  --color-accent-light: #FFDA63;
  --color-accent-dark: #C59700;
  --color-dark: #1E2836;
}

/* Clases de utilidad para fondos */
.bg-primary { background-color: var(--color-primary); }
.bg-primary-light { background-color: var(--color-primary-light); }
.bg-primary-dark { background-color: var(--color-primary-dark); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-secondary-light { background-color: var(--color-secondary-light); }
.bg-secondary-dark { background-color: var(--color-secondary-dark); }
.bg-accent { background-color: var(--color-accent); }
.bg-accent-light { background-color: var(--color-accent-light); }
.bg-accent-dark { background-color: var(--color-accent-dark); }
.bg-dark { background-color: var(--color-dark); }

/* Clases de utilidad para texto */
.text-primary { color: var(--color-primary); }
.text-primary-light { color: var(--color-primary-light); }
.text-primary-dark { color: var(--color-primary-dark); }
.text-secondary { color: var(--color-secondary); }
.text-secondary-light { color: var(--color-secondary-light); }
.text-secondary-dark { color: var(--color-secondary-dark); }
.text-accent { color: var(--color-accent); }
.text-accent-light { color: var(--color-accent-light); }
.text-accent-dark { color: var(--color-accent-dark); }
.text-dark { color: var(--color-dark); }

/* Clases de utilidad para bordes */
.border-primary { border-color: var(--color-primary); }
.border-primary-light { border-color: var(--color-primary-light); }
.border-primary-dark { border-color: var(--color-primary-dark); }
.border-secondary { border-color: var(--color-secondary); }
.border-secondary-light { border-color: var(--color-secondary-light); }
.border-secondary-dark { border-color: var(--color-secondary-dark); }
.border-accent { border-color: var(--color-accent); }
.border-accent-light { border-color: var(--color-accent-light); }
.border-accent-dark { border-color: var(--color-accent-dark); }
.border-dark { border-color: var(--color-dark); }

/* Estilos personalizados utilizando la paleta de colores */
.btn-primary {
  background-color: var(--color-primary);
  color: white;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: white;
  transition: background-color 0.3s ease;
}

.btn-secondary:hover {
  background-color: var(--color-secondary-dark);
}

.btn-accent {
  background-color: var(--color-accent);
  color: var(--color-dark);
  transition: background-color 0.3s ease;
}

.btn-accent:hover {
  background-color: var(--color-accent-dark);
}

/* Gradientes con la paleta */
.gradient-primary {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

.gradient-secondary {
  background: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%);
}

.gradient-primary-secondary {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

/* Personalización de componentes comunes */
.navbar-custom {
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar-custom .nav-link-active {
  color: var(--color-primary);
  font-weight: bold;
}

.footer-custom {
  background-color: var(--color-dark);
  color: white;
}