/* 1. Declaramos las variables en la raíz (root) del documento */
:root {
  --color-primario: #006FA6;
  --color-secundario: #00B5E2;
  --color-fondo: #FFFFFF;
  --color-texto: #333333;
  --color-fondo-alterno: #F4F7F6;
}

/* 2. Aplicamos las reglas generales basadas en nuestro esquema */
body {
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: Arial, sans-serif;
}

h1, h2 {
  color: var(--color-primario);
}

a {
  color: var(--color-secundario);
  text-decoration: none;
}

/* 3. Ejemplo de uso en la barra de navegación */
nav {
  background-color: var(--color-primario);
  color: var(--color-fondo); /* Letras blancas sobre azul */
  padding: 1rem;
}

/* 4. Ejemplo de un botón interactivo */
.boton-principal {
  background-color: var(--color-primario);
  color: var(--color-fondo);
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.boton-principal:hover {
  background-color: var(--color-secundario); /* Cambia a celeste al pasar el mouse */
}