/**
 * Sistema de diseño.
 *
 * Paleta anclada en el propio tema: el verde procede de la esmeralda de Muzo
 * (Boyacá) y no de la bandera, que sería la respuesta obvia y chillona junto a
 * fotografías. El papel es frío para que ninguna imagen se vea amarillenta.
 *
 * Nada de fuentes externas: cero peticiones a terceros y cero bloqueo de
 * renderizado. La familia display es Palatino, que en las pilas del sistema
 * está presente en todas las plataformas y aporta más carácter que Georgia.
 */

.cig {
	/* --- Color --- */
	--cig-paper:        #F4F5F3;
	--cig-surface:      #FFFFFF;
	--cig-ink:          #12211D;
	--cig-ink-soft:     #55635E;
	--cig-line:         #DDE1DE;

	--cig-emerald:      #0F6E4F;
	--cig-emerald-dark: #0A4B36;
	--cig-gold:         #B08A2E;

	/* Escala coroplética: de sabana pálida a esmeralda profunda. */
	--cig-scale-0:      #E4E7E4;
	--cig-scale-1:      #C4DACE;
	--cig-scale-2:      #8FBFA9;
	--cig-scale-3:      #4E9B79;
	--cig-scale-4:      #0F6E4F;

	/* Relleno de un municipio sin fotografías. Algo más oscuro que
	   --cig-scale-0 para que los separadores blancos se distingan cuando
	   decenas de municipios vacíos aparecen juntos. */
	--cig-muni-empty:   #D6DCD7;

	/* --- Tipografía --- */
	--cig-font-display: "Palatino Linotype", Palatino, "Iowan Old Style", "Book Antiqua", Georgia, serif;
	--cig-font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--cig-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--cig-text-xs:      0.75rem;
	--cig-text-sm:      0.875rem;
	--cig-text-base:    1rem;
	--cig-text-lg:      1.25rem;
	--cig-text-xl:      1.75rem;
	--cig-text-2xl:     clamp( 2.25rem, 6vw, 4rem );

	/* --- Espaciado --- */
	--cig-space-1:      0.25rem;
	--cig-space-2:      0.5rem;
	--cig-space-3:      0.75rem;
	--cig-space-4:      1rem;
	--cig-space-6:      1.5rem;
	--cig-space-8:      2rem;
	--cig-space-12:     3rem;

	/* --- Formas --- */
	--cig-radius:       10px;
	--cig-radius-sm:    6px;
	--cig-shadow:       0 1px 2px rgba( 18, 33, 29, .06 ), 0 8px 24px rgba( 18, 33, 29, .08 );
	--cig-shadow-lift:  0 2px 6px rgba( 18, 33, 29, .10 ), 0 18px 40px rgba( 18, 33, 29, .16 );

	/* --- Movimiento --- */
	--cig-ease:         cubic-bezier( .2, .7, .3, 1 );
	--cig-fast:         160ms;
	--cig-slow:         420ms;
}

/* Modo oscuro. Se activa por preferencia del sistema o por el ajuste del
   plugin, que imprime data-theme en el contenedor. */
@media ( prefers-color-scheme: dark ) {
	.cig[data-theme="auto"] {
		--cig-paper:    #0E1512;
		--cig-surface:  #16201C;
		--cig-ink:      #ECF0EE;
		--cig-ink-soft: #9BA8A3;
		--cig-line:     #26332E;
		--cig-scale-0:  #1E2A26;
		--cig-scale-1:  #24463A;
		--cig-scale-2:  #2F6B53;
		--cig-scale-3:  #3E9370;
		--cig-scale-4:  #58BE93;
		--cig-muni-empty: #202D28;
		--cig-shadow:   0 1px 2px rgba( 0, 0, 0, .5 ), 0 8px 24px rgba( 0, 0, 0, .4 );
	}
}

.cig[data-theme="dark"] {
	--cig-paper:    #0E1512;
	--cig-surface:  #16201C;
	--cig-ink:      #ECF0EE;
	--cig-ink-soft: #9BA8A3;
	--cig-line:     #26332E;
	--cig-scale-0:  #1E2A26;
	--cig-scale-1:  #24463A;
	--cig-scale-2:  #2F6B53;
	--cig-scale-3:  #3E9370;
	--cig-scale-4:  #58BE93;
	--cig-muni-empty: #202D28;
	--cig-shadow:   0 1px 2px rgba( 0, 0, 0, .5 ), 0 8px 24px rgba( 0, 0, 0, .4 );
}

/* Si el visitante pidió menos movimiento, se lo damos: no es una animación
   más lenta, es ninguna animación. */
@media ( prefers-reduced-motion: reduce ) {
	.cig *,
	.cig *::before,
	.cig *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}