/* =========================================================
   VARIABLES — Tokens de Diseño
   =========================================================

   Custom Properties (variables CSS) que definen toda la paleta,
   tipografía y valores de layout del tema.

   Estas variables se usan en TODOS los demás archivos CSS.
   Cambiar un color aquí se refleja en todo el sitio.

   Sintaxis: --nombre-valor: valor;
   Uso:      color: var(--nombre-valor);
   ========================================================= */

:root {
	/* ── PALETA DE COLORES ─────────────────────────────────
	   Inspirada en un herbario botánico: papel viejo, tinta
	   oscura, y acentos de flores reales.
	   ────────────────────────────────────────────────────── */

	/* Fondo base: simula papel envejecido / pergamino */
	--color-cream: #f7f1e4;

	/* Fondo secundario: superficies ligeramente más oscuras
	   (tarjetas, secciones alternas, blockquotes) */
	--color-cream-deep: #efe6d0;

	/* Texto principal: verde-tinta muy oscuro, casi negro
	   pero con calidez botánica */
	--color-ink: #2b3226;

	/* Líneas finas, bordes, separadores:
	   marrón cálido que recuerda montaje artesanal */
	--color-line: #8c7a5e;

	/* Acento rosa: inspirado en la flor cosmos,
	   usado para divisores, puntos del menú, hover */
	--color-cosmos: #d98ba6;

	/* Acento naranja: caléndula, usado para
	   etiquetas de fecha, números de catálogo */
	--color-marigold: #c97a2e;

	/* Acento fuerte: magenta oscuro para hover,
	   foco de accesibilidad y elementos activos */
	--color-magenta: #a63a63;


	/* ── TIPOGRAFÍA ───────────────────────────────────────
	   Tres familias tipográficas con roles claros:

	   - display: Títulos grandes, hero, logo (Fraunces)
	   - nav:    Texto de navegación, cuerpo (Cormorant Garamond)
	   - mono:   Etiquetas, metadatos, botones (Space Mono)

	   Georgia y Courier New son fuentes "fallback" del sistema
	   por si Google Fonts no carga.
	   ────────────────────────────────────────────────────── */

	--font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--font-nav: "Cormorant Garamond", Georgia, serif;
	--font-mono: "Space Mono", "Courier New", monospace;


	/* ── LAYOUT ───────────────────────────────────────────
	   Valores de diseño que controlan el espaciado y ancho.
	   ────────────────────────────────────────────────────── */

	/* Margen exterior responsivo: crece entre 0.75rem y 1.75rem
	   según el ancho de pantalla (clamp = valor dinámico) */
	--frame-margin: clamp(0.75rem, 2vw, 1.75rem);

	/* Borde estándar de los marcos: 1px sólido color línea.
	   Se reutiliza en header, footer, tarjetas, imágenes */
	--frame-border: 1px solid var(--color-line);

	/* Ancho máximo del contenido: 1200px.
	   Evita que el texto se estire demasiado en pantallas grandes */
	--container-max: 1200px;
}