/* ════════════════════════════════════════
   TOKENS · G7Z — sistema "Editorial Motion"
   Foto B&W protagonista + rojo señal + capa Y2K.
   Display: Archivo variable Expanded (wdth 125).
   Regla de contraste: --ink-dim solo en secundario.
═══════════════════════════════════════ */

/* ── FUENTES ── */
@font-face {
	font-family: 'Archivo Exp';
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 125%;
	font-display: swap;
	src: url('../fonts/archivo-expanded-var.v1.woff2') format('woff2');
}
@font-face {
	font-family: 'Satoshi';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/satoshi-500.v1.woff2') format('woff2');
}
@font-face {
	font-family: 'Satoshi';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/satoshi-700.v1.woff2') format('woff2');
}
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/jetbrains-mono-400.v1.woff2') format('woff2');
}

/* Fallback métrico del display (evita saltos en el swap) */
@font-face {
	font-family: 'Archivo Exp Fallback';
	src: local('Arial Narrow Bold'), local('Arial');
	size-adjust: 122%;
	ascent-override: 74%;
	descent-override: 16%;
	line-gap-override: 0%;
}

:root {
	/* ── PALETA ── */
	--bg: #0A0A0A;
	--bg-panel: #101010;
	--paper: #EDEBE6;          /* bloques claros editoriales */
	--ink: #F2F0EB;
	--ink-dim: #9C9A94;
	--ink-on-paper: #111111;
	--red: #E62020;            /* gráficos, fills grandes, display */
	--red-deep: #B81212;       /* fondos con texto blanco (AA) */
	--red-text: #FF4646;       /* texto chico rojo sobre negro (AA) */
	--line: rgba(242, 240, 235, 0.14);
	--line-strong: rgba(242, 240, 235, 0.28);
	--line-on-paper: rgba(17, 17, 17, 0.18);

	/* ── TIPOGRAFÍA ── */
	--font-display: 'Archivo Exp', 'Archivo Exp Fallback', 'Arial Narrow', sans-serif;
	--font-body: 'Satoshi', -apple-system, 'Helvetica Neue', sans-serif;
	--font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

	--size-brand: clamp(4.4rem, 17vw, 15rem);
	--size-h2: clamp(2.4rem, 6.5vw, 5.6rem);
	--size-lead: clamp(1.1rem, 2vw, 1.4rem);
	--size-body: 1.0625rem;
	--size-small: 0.875rem;
	--size-micro: 0.75rem;

	/* ── LAYOUT ── */
	--gutter: clamp(1.25rem, 4vw, 4rem);
	--space-section: clamp(6rem, 14vh, 10rem);
	--content-max: 88rem;

	/* ── MOTION · cortes ── */
	--cut: steps(6, end);
	--dur-cut: 0.4s;
	--dur-hover: 0.16s;

	--z-chrome: 60;

	color-scheme: dark;
}

/* Mobile: secciones más compactas (los aires de desktop
   en el teléfono se leen como página vacía) */
@media (max-width: 860px) {
	:root {
		--space-section: clamp(3.5rem, 8vh, 5.5rem);
	}
}