/* ==========================================================================
 * PAP Construcciones · Contrato de design tokens (--tnt-*)
 * --------------------------------------------------------------------------
 * Theme exclusivo #11 — "plano de obra": base Hormigón (gris frío con un
 * toque verde, NO crema) + texto Tinta (negro verdoso, NO #000) + Verde PAP
 * de marca en bandas y botones + Monte para las bandas oscuras + Señal
 * (amarillo de seguridad, el de las barandas de sus obras) solo como detalle.
 * Fuente única de los --tnt-* que lee el motor. Los hex ESPEJAN la paleta de
 * theme.json. Fuentes por Google Fonts CDN (CLAUDE.md §3).
 * ========================================================================== */

/* Fallback con métricas aproximadas (anti-CLS) para Archivo condensada:
   mientras carga con display=swap, Arial Narrow ocupa ~lo mismo. */
@font-face {
	font-family: 'Archivo Fallback';
	src: local('Arial Narrow Bold'), local('Arial Narrow'), local('Arial');
	font-weight: 800;
	size-adjust: 96%;
	ascent-override: 92%;
	descent-override: 22%;
	line-gap-override: 0%;
}

:root {
	/* ---- COLOR — enlazados a los presets de theme.json (§13.1) ---- */
	--tnt-color-bg:         var(--wp--preset--color--bg, #ECEEEA);         /* Hormigón */
	--tnt-color-surface:    var(--wp--preset--color--surface, #F7F8F5);    /* Losa */
	--tnt-color-text:       var(--wp--preset--color--foreground, #16201B); /* Tinta */
	--tnt-color-text-muted: var(--wp--preset--color--text-muted, #58645D); /* Tinta suave */
	--tnt-color-primary:    var(--wp--preset--color--primary, #00693E);    /* Verde PAP (texto claro encima) */
	--tnt-color-accent:     var(--wp--preset--color--accent, #0D3323);     /* Monte */
	--tnt-color-accent-2:   var(--wp--preset--color--accent-2, #F2C230);   /* Señal */
	--tnt-color-border:     var(--wp--preset--color--line, #C8CEC6);       /* Junta */
	--tnt-color-sprout:     var(--wp--preset--color--sprout, #66CC66);     /* Verde obra — solo sobre oscuro */

	/* Fijos (no siguen a la variación) — bandas siempre oscuras, §13.1. */
	--tnt-color-ink:         #0D3323;
	--tnt-color-on-ink:      #ECEEEA;
	--tnt-color-ink-primary: var(--tnt-brand-primary, #00693E);
	--tnt-color-signal:      #F2C230;
	--tnt-color-star:        #F2C230;
	/* Verde PAP como FONDO de banda (CTA, botones): identidad de marca, fijo. */
	--tnt-color-brand:       #00693E;
	--tnt-color-on-brand:    #F7F8F5;

	/* ---- TIPOGRAFÍA (Archivo condensada + Instrument Sans + IBM Plex Mono, CDN) ---- */
	--tnt-font-display: 'Archivo', 'Archivo Fallback', 'Arial Narrow', sans-serif;
	--tnt-font-body:    'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--tnt-font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
	--pap-display-stretch: 75%;   /* ancho del eje wdth de Archivo en titulares */

	--tnt-text-xs:   clamp(0.72rem, 0.7rem + 0.12vw, 0.78rem);
	--tnt-text-sm:   clamp(0.88rem, 0.84rem + 0.2vw, 0.95rem);
	--tnt-text-base: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);
	--tnt-text-md:   clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
	--tnt-text-lg:   clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
	--tnt-text-xl:   clamp(2.4rem, 1.4rem + 4.4vw, 5rem);
	--tnt-text-2xl:  clamp(3.4rem, 1rem + 10.5vw, 11rem);   /* hero display (condensada: cabe grande) */

	--tnt-leading-tight:  0.88;
	--tnt-leading-body:   1.65;
	--tnt-tracking-tight: -0.01em;
	--tnt-tracking-wide:  0.12em;

	/* ---- ESPACIO (misma escala fluida que Atrio/Lilt) ---- */
	--tnt-space-1:  clamp(0.25rem, 0.24rem + 0.05vw, 0.3125rem);
	--tnt-space-2:  clamp(0.5rem,  0.48rem + 0.1vw,  0.625rem);
	--tnt-space-3:  clamp(0.8rem,  0.75rem + 0.22vw, 1rem);
	--tnt-space-4:  clamp(1.1rem,  1.0rem  + 0.3vw,  1.4rem);
	--tnt-space-5:  clamp(1.6rem,  1.45rem + 0.6vw,  2.2rem);
	--tnt-space-6:  clamp(2.2rem,  1.9rem  + 1.2vw,  3.4rem);
	--tnt-space-7:  clamp(3rem,    2.4rem  + 2.4vw,  5rem);
	--tnt-space-8:  clamp(4rem,    3.1rem  + 3.8vw,  6.8rem);
	--tnt-space-9:  clamp(5rem,    3.7rem  + 5.4vw,  9rem);
	--tnt-space-10: clamp(6.5rem,  4.7rem  + 7.6vw, 11rem);
	--tnt-space-11: clamp(8rem,    5.7rem  + 9.6vw, 14rem);
	--tnt-space-12: clamp(9.5rem,  6.3rem  + 13.5vw,18rem);

	/* ---- FORMA (aristas de obra: radios cortos, nunca 0 absoluto) ---- */
	--tnt-radius-sm:   3px;
	--tnt-radius-md:   6px;
	--tnt-radius-lg:   12px;
	--tnt-radius-pill: 999px;

	/* Sombras multicapa teñidas de Monte. */
	--tnt-shadow-1: 0 1px 2px rgba(13, 51, 35, 0.08), 0 4px 14px rgba(13, 51, 35, 0.07);
	--tnt-shadow-2: 0 10px 24px -10px rgba(13, 51, 35, 0.24), 0 22px 48px -20px rgba(13, 51, 35, 0.18);
	--tnt-shadow-3: 0 34px 70px -28px rgba(13, 51, 35, 0.42), 0 12px 26px -14px rgba(0, 105, 62, 0.2);

	/* ---- MOVIMIENTO (firme: expo al entrar, power3 en hover) ---- */
	--tnt-ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);
	--tnt-ease-power3: cubic-bezier(0.215, 0.61, 0.355, 1);
	--tnt-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
	--tnt-ease-circ:   cubic-bezier(0.85, 0, 0.15, 1);
	--tnt-dur-fast: 240ms;
	--tnt-dur-base: 700ms;
	--tnt-dur-slow: 1100ms;

	/* ---- MARCA (block blokino/brand en 'auto'): base CLARA → logo principal. */
	--tnt-brand-main-display: var(--wp--custom--brand-main-display, block);
	--tnt-brand-alt-display:  var(--wp--custom--brand-alt-display, none);
}

@media ( prefers-reduced-motion: reduce ) {
	:root {
		--tnt-dur-fast: 0.01ms;
		--tnt-dur-base: 0.01ms;
		--tnt-dur-slow: 0.01ms;
	}
}