/* =========================================================================
   SISTEMA VISUAL
   Todas las decisiones visuales ajustables están aquí: colores, tipografías,
   escalas, espaciados y medidas de la retícula. El resto de hojas solo usa
   estas variables.
   ========================================================================= */

:root {
	color-scheme: light dark;

	/* --- Color: paleta reducida ------------------------------------------ */
	--color-fondo: #f2efe8;          /* papel */
	--color-fondo-alterno: #faf8f3;  /* cartela, menú desplegado */
	--color-tinta: #191816;          /* texto principal */
	--color-tinta-suave: #5c5850;    /* metadatos, pies (contraste ≥ 4.5:1) */
	--color-linea: #191816;          /* filetes de la retícula */
	--color-linea-suave: #cbc5b9;    /* separadores secundarios */
	--color-acento: #b5321a;         /* bermellón: estado activo, foco */

	/* --- Tipografía ------------------------------------------------------- */
	/* Serif de lectura (Newsreader, OFL) y monoespaciada para navegación y
	   metadatos (DM Mono, OFL). Archivos y licencias en /fuentes/. */
	--fuente-texto: "Newsreader", Georgia, "Times New Roman", serif;
	--fuente-meta: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	/* Escala tipográfica (rem: respeta el tamaño de letra del navegador). */
	--tam-micro: 0.6875rem;   /* 11px: rótulos en versalitas */
	--tam-meta: 0.8125rem;    /* 13px: navegación, pies, cartela */
	--tam-texto: 1.1875rem;   /* 19px: texto de lectura */
	--tam-entradilla: 1.375rem;
	--tam-titulo-2: 1.625rem;
	--tam-titulo-1: clamp(2.125rem, 1.6rem + 2.2vw, 3.5rem);
	--tam-titulo-portada: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);

	--interlineado-texto: 1.55;
	--interlineado-meta: 1.45;
	--interlineado-titulo: 1.05;
	--espaciado-rotulo: 0.08em; /* tracking de los rótulos en mayúsculas */

	/* --- Espaciado -------------------------------------------------------- */
	--esp-1: 0.25rem;
	--esp-2: 0.5rem;
	--esp-3: 0.75rem;
	--esp-4: 1rem;
	--esp-5: 1.5rem;
	--esp-6: 2rem;
	--esp-7: 3rem;
	--esp-8: 4.5rem;
	--esp-9: 6.5rem;

	--filete: 1px;          /* grosor de las líneas de la retícula */
	--filete-grueso: 3px;   /* línea superior de la cartela */

	/* --- Medida de lectura ------------------------------------------------ */
	/* En Newsreader un carácter medio de texto corrido ocupa ~0,405 em.
	   26,5 em ≈ 65 caracteres por renglón completo; al cortar por palabras
	   quedan algo más de 60 de media: es el mínimo. 31 em ≈ 75 caracteres: el máximo. */
	--medida-min: calc(26.5 * var(--tam-texto)); /* ≈ 31.47rem */
	--medida-max: calc(31 * var(--tam-texto));  /* ≈ 36.8rem */
	--lamina-max: 46rem;                         /* las láminas desbordan el texto */

	/* --- Retícula de cuatro paneles (la usa reticula.css) ----------------- */
	/* Bandas: el mínimo admite las etiquetas francesas («Pièces de la salle»,
	   «Navigation principale») en DM Mono de 13px sin cortes raros. */
	--reticula-banda-min: 15rem;
	--reticula-banda-max: 19rem;
	--reticula-medida: var(--medida-min);
	--reticula-margen: 2.5rem;                   /* margen interior de la ventana central */
	--reticula-centro-max: var(--lamina-max);    /* ancho máximo del contenido central */
	--reticula-grosor: var(--filete);
	--reticula-linea: var(--color-linea);
	--reticula-fondo: var(--color-fondo);
}

/* Modo oscuro: solo cambia la paleta. */
@media (prefers-color-scheme: dark) {
	:root {
		--color-fondo: #161513;
		--color-fondo-alterno: #1f1e1b;
		--color-tinta: #ebe7de;
		--color-tinta-suave: #a7a296;
		--color-linea: #ebe7de;
		--color-linea-suave: #3d3a34;
		--color-acento: #ff8466;
	}
}