/*
 * tokens.css — Noemí Mateos · noemimateos.es
 * Fuente de verdad en código de Identidad/filosofia-diseno.md (v0.2, 17/09/2026).
 * Copia de Identidad/tokens.css (v0.2). Se encola el primero; ninguna otra hoja define colores en hex.
 *
 * Paleta «Oliva y ocre», elegida por la clienta el 17/09/2026 a partir de la pareja de la pág. 066
 * de «A Dictionary of Color Combinations» (Sanzo Wada): 海松茶 Olive Green (n.º 80) + 油色 Olive
 * Ocher (n.º 59). Los dos colores del libro entran tal cual (--nm-verde y --nm-ocre); el resto es
 * la familia derivada para que la web se lea (ver filosofia-diseno.md, sección 4).
 */

:root {
	/* ---- Color: papeles (60 %) ---- */
	--nm-papel:         #FBF8F2; /* fondo de página, nunca #FFF. 13,6:1 con la tinta */
	--nm-papel-2:       #FFFFFF; /* tarjetas y campos sobre papel */
	--nm-arena:         #F2EEE4; /* secciones alternas, tarjetas sobre papel */
	--nm-ocre-claro:    #F3E9CA; /* la banda cálida: una sección por página como máximo */
	--nm-lino:          #D3CCBB; /* bordes, filetes */

	/* ---- Color: verdes (30 %) ---- */
	--nm-verde:         #6B7140; /* Olive Green, Wada n.º 80. Botón primario (papel encima, 4,9:1), iconos, formas. Texto solo >= 24 px */
	--nm-verde-claro:   #E4E2D6; /* fondos suaves, hover */
	--nm-verde-claro-2: #CACAB5; /* chips, filetes sobre verde claro */
	--nm-verde-profundo:#535736; /* titulares, wordmark, enlaces, texto de color. 7,1:1 */
	--nm-verde-noche:   #3B3E26; /* bloque de cierre y pie. Papel encima 10,4:1; ocre encima 5,5:1 */

	/* ---- Color: tinta y ocre (10 %) ---- */
	--nm-tinta:         #2A2A26; /* texto corrido, nunca #000 */
	--nm-tinta-2:       #5F5D56; /* secundario. 6,2:1 sobre papel, 5,1:1 sobre verde claro */
	--nm-ocre:          #D6B43E; /* Olive Ocher, Wada n.º 59. Filetes, cifras, el punto de estado. Texto solo sobre verde noche */
	--nm-ocre-texto:    #7F681B; /* el ocre cuando es texto pequeño: antetítulos, la palabra en cursiva del titular. 5,1:1 */

	/* ---- Reserva (de las hojas de muestras que eligió; no se usan en la web salvo un detalle) ---- */
	--nm-canela:        #EEB480; /* Pinkish Cinnamon, Wada n.º 45 */
	--nm-rosa-ceniza:   #D1B0A7; /* Fawn, Wada n.º 4 */

	/* ---- Roles (lo que usan las plantillas; nunca los hex directamente) ---- */
	--nm-fondo:            var(--nm-papel);
	--nm-fondo-alt:        var(--nm-arena);
	--nm-fondo-suave:      var(--nm-verde-claro);
	--nm-fondo-calido:     var(--nm-ocre-claro);
	--nm-fondo-oscuro:     var(--nm-verde-noche);
	--nm-superficie:       var(--nm-papel-2);
	--nm-texto:            var(--nm-tinta);
	--nm-texto-2:          var(--nm-tinta-2);
	--nm-titular:          var(--nm-verde-profundo);
	--nm-enlace:           var(--nm-verde-profundo);
	--nm-antetitulo:       var(--nm-ocre-texto);
	--nm-borde:            var(--nm-lino);
	--nm-foco:             var(--nm-verde);
	--nm-boton-fondo:      var(--nm-verde);
	--nm-boton-texto:      var(--nm-papel);
	--nm-boton-hover:      var(--nm-verde-profundo);
	--nm-boton-2-borde:    var(--nm-verde-profundo);

	/* ---- Tipografía ---- */
	--nm-serif: "Newsreader", "Source Serif 4", Georgia, "Times New Roman", serif;
	--nm-sans:  "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

	--nm-fs-h1:     clamp(2.375rem, 1.6rem + 3vw, 3.75rem);
	--nm-fs-h2:     clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);
	--nm-fs-h3:     clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--nm-fs-cuerpo: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
	--nm-fs-peq:    0.9375rem;
	--nm-fs-meta:   0.8125rem;

	--nm-lh-texto:   1.6;
	--nm-lh-titular: 1.12;
	--nm-medida:     68ch;

	/* ---- Espacio (múltiplos de 8) ---- */
	--nm-e-1: 4px;  --nm-e-2: 8px;   --nm-e-3: 12px;  --nm-e-4: 16px;  --nm-e-5: 24px;
	--nm-e-6: 32px; --nm-e-7: 48px;  --nm-e-8: 64px;  --nm-e-9: 96px;  --nm-e-10: 128px;
	--nm-seccion: clamp(var(--nm-e-8), 7vw, var(--nm-e-10));
	--nm-margen: max(16px, 4vw);
	--nm-contenedor: 1200px;

	/* ---- Forma ---- */
	--nm-radio-1: 8px;   /* botones, campos */
	--nm-radio-2: 16px;  /* tarjetas */
	--nm-borde-ancho: 1.5px;
	--nm-tap: 44px;      /* objetivo táctil mínimo */
	--nm-boton-alto: 48px;

	/* ---- Fotografía: la foto se funde con el papel por los cuatro bordes (máscara rectangular difuminada,
	     las dos capas se intersecan con mask-composite). El papel va teñido en la propia imagen (sharp). ---- */
	--nm-fundido-x: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
	--nm-fundido-y: linear-gradient(180deg, transparent 0, #000 7%, #000 84%, transparent 100%);

	/* ---- Movimiento ---- */
	--nm-t: 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
	:root { --nm-t: 0ms; }
}