/* ==========================================================================
   Foro de la Comunidad Informatica — Design tokens

   Fuente: sistema de diseno del brief. Todo lo que este aca tiene que estar
   espejado en theme.json, o no se ve en el editor de bloques (regla 6 del
   CLAUDE.md).
   ========================================================================== */

:root {
	/* --- Color --------------------------------------------------------- */
	--azul-primario: #0080EB;
	--azul-oscuro: #004F99;
	--azul-profundo: #00254A;
	--azul-evento: #071b3d;
	--negro: #080C12;
	--gris: #64748B;
	--gris-oscuro: #45536B; /* parrafos de cuerpo bajo un titulo (ej. tarjeta numerada); --gris queda para etiquetas/captions chicos, distincion que trae el sistema de diseño publicado */
	--azul-claro: #7FC0F5;
	--texto-sobre-oscuro: #C3D8EE; /* cuerpo de texto sobre --azul-evento / --azul-profundo, por la regla de contraste del brief */
	--azul-suave: #EAF3FD;
	--fondo-claro: #F6F9FD;
	--borde: #DDE5EE;

	/* --- Modo oscuro -----------------------------------------------------
	   El resto de la paleta ya sirve para texto/acentos sobre fondo oscuro
	   (--texto-sobre-oscuro, --azul-claro, --negro como fondo de pagina);
	   estos 4 son los unicos que no tenian ya un rol equivalente. */
	--superficie-oscura: #131B2C; /* tarjetas y superficies elevadas, reemplaza fondos blancos */
	--borde-oscuro: #2A3650; /* reemplaza var(--borde) sobre superficie oscura */
	--texto-secundario-oscuro: #A9B8CE; /* reemplaza var(--gris-oscuro) */
	--texto-terciario-oscuro: #7C8CA6; /* reemplaza var(--gris) */

	/* --- Tipografia ------------------------------------------------------
	   Gotham auto-hosteada (ver fonts.css). Inter/Nunito quedan en la pila
	   como red de contencion si el woff2 no llega a cargar. --------------- */
	--fuente: Gotham, Inter, Nunito, system-ui, sans-serif;

	--tam-display-xl: clamp(44px, 7.5vw, 104px);
	--tam-display: clamp(36px, 4.6vw, 64px);
	--tam-h1: clamp(32px, 4vw, 48px);
	--tam-h2: clamp(30px, 2.4vw, 34px);
	--tam-h3: 22px;
	--tam-body: 17px;
	--tam-cita: clamp(22px, 1.6vw, 24px);
	--tam-caption: 14px;

	/* --- Espaciado (base 4px) -------------------------------------------- */
	--espacio-1: 4px;
	--espacio-2: 8px;
	--espacio-3: 12px;
	--espacio-4: 16px;
	--espacio-6: 24px;
	--espacio-8: 32px;
	--espacio-12: 48px;
	--espacio-16: 64px;
	--espacio-24: 96px;
	--espacio-32: 128px;

	/* --- Layout ----------------------------------------------------------- */
	--contenedor-max: 1180px;
	--padding-lateral: 32px;
	--gutter: 24px;

	/* --- Forma -------------------------------------------------------------- */
	--radio-chico: 4px;
	--radio-tarjeta: 8px;
	--radio-pill: 999px;

	--boton-alto-min: 52px;

	/* --- Header -------------------------------------------------------- */
	--altura-header: 84px;

	/* El navegador dibuja sus propios controles (scrollbar, autofill, etc.)
	   en claro salvo que se le avise; se pisa por selector cuando el sitio
	   pasa a oscuro (ver tema-oscuro.css). */
	color-scheme: light;
}

html[data-tema="oscuro"] {
	color-scheme: dark;
}

@media (max-width: 599px) {
	:root {
		--padding-lateral: 16px;
	}
}