/*
  variables.css
  ---------------------------------------------------------
  Aquí guardamos "variables CSS" (también llamadas custom
  properties). Son valores reutilizables en todo el sitio.
  Si algún día quieres cambiar el color principal, solo
  necesitas editar el valor UNA vez aquí y se actualiza en
  todas las páginas automáticamente.

  Los colores están inspirados en la identidad visual de
  QGIS (verde característico del proyecto). Si cuentas con
  los códigos hexadecimales oficiales exactos, solo
  reemplázalos abajo.
*/

:root {
  /* Colores principales de marca QGIS */
  --color-primario: #589632;         /* Verde QGIS (botones, enlaces, acentos) */
  --color-primario-oscuro: #3d6b25;  /* Verde oscuro para hover/estados activos */
  --color-primario-claro: #e7f2df;   /* Verde muy claro para fondos suaves */
  --color-acento: #2f8f7a;           /* Verde-azulado de acento para detalles modernos (degradados, focos) */

  /* Colores neutros para texto y fondos */
  --color-texto: #1f2a17;            /* Gris verdoso muy oscuro, buen contraste */
  --color-texto-suave: #5c6b52;      /* Para textos secundarios */
  --color-fondo: #ffffff;            /* Fondo general de las páginas */
  --color-fondo-alterno: #f3f7ee;    /* Fondo para secciones o tarjetas */
  --color-borde: #dfe8d6;            /* Bordes suaves en tarjetas y tablas */

  /* Colores de retroalimentación (trivia) */
  --color-correcto: #2e7d32;
  --color-correcto-fondo: #e6f4ea;
  --color-incorrecto: #c62828;
  --color-incorrecto-fondo: #fdecea;

  /* Colores para bloques de código Python (estilo "editor de código") */
  --codigo-fondo: #1e1e1e;           /* Gris casi negro, tipo editor de código */
  --codigo-fondo-barra: #111111;
  --codigo-texto: #d4d4d4;           /* Color de texto por defecto (puntuación, símbolos) */
  --codigo-comentario: #6a9955;      /* Comentarios: verde apagado */
  --codigo-palabra-clave: #569cd6;   /* Palabras reservadas: azul (def, class, return, if...) */
  --codigo-cadena: #ce9178;         /* Cadenas de texto (strings): naranja */
  --codigo-numero: #b5cea8;         /* Números: verde claro */
  --codigo-clase: #4ec9b0;          /* Nombres de clase / tipos: verde azulado */
  --codigo-funcion: #dcdcaa;        /* Nombres de función/método: amarillo */
  --codigo-variable: #9cdcfe;       /* Nombres de variable: azul claro */
  --codigo-self: #c586c0;           /* self / cls: morado */

  /* Degradado moderno usado en el encabezado y algunos acentos visuales */
  --degradado-primario: linear-gradient(135deg, var(--color-primario) 0%, var(--color-acento) 100%);

  /* Tipografías genéricas del sistema operativo (no requieren descarga) */
  --fuente-texto: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fuente-codigo: "Cascadia Code", Consolas, "Courier New", monospace;

  /* Espaciados reutilizables */
  --espacio-xs: 0.35rem;
  --espacio-sm: 0.5rem;
  --espacio-md: 1rem;
  --espacio-lg: 2rem;
  --espacio-xl: 3rem;

  /* Bordes redondeados: más generosos para una apariencia moderna */
  --radio-sm: 8px;
  --radio-md: 16px;
  --radio-lg: 22px;

  /* Sombras reutilizables, sutiles y consistentes en todo el sitio */
  --sombra-sm: 0 2px 8px rgba(31, 42, 23, 0.08);
  --sombra-md: 0 10px 24px rgba(31, 42, 23, 0.12);
  --sombra-lg: 0 18px 40px rgba(31, 42, 23, 0.18);
}