/* ============================================
   ZAA CAPITAL — Tokens de diseño
   Única fuente de colores, fuentes y tamaños.
   Se carga en el sitio y en la página de login.
   ============================================ */

:root {
	/* Colores */
	--zaa-black: #0D0D0C;
	--zaa-white: #FFFFFF;
	--zaa-gray-700: #4A4A4A;   /* texto secundario sobre blanco */
	--zaa-gray-500: #8C8578;   /* piedra: etiquetas y textos de apoyo */
	--zaa-gray-300: #A6A6A6;   /* texto secundario sobre negro */
	--zaa-gray-200: #C7C7C7;   /* etiquetas sobre negro (métricas del hero) */
	--zaa-gray-100: #F5F5F5;   /* superficies claras (paneles, login) */
	--zaa-line: #E5E5E5;       /* líneas sobre blanco */
	--zaa-line-strong: #CFCFCF;
	--zaa-line-dark: rgba(255, 255, 255, 0.15); /* líneas sobre negro */
	--zaa-line-dark-strong: rgba(255, 255, 255, 0.25);
	--zaa-surface-dark: #121211; /* paneles sobre negro (entradas) */
	--zaa-accent: #A88B5A;     /* dorado de acento */
	--zaa-error: #E53935;

	/* Fuentes: cada una con un único rol */
	--zaa-font-display: 'Unbounded', sans-serif;      /* títulos, etiquetas, botones, menú */
	/* Titulares y acentos en cursiva. Si Sanomat no está disponible se usa Times New Roman */
	--zaa-font-serif: 'Sanomat', 'Times New Roman', Times, serif;
	--zaa-font-num: 'Bai Jamjuree', sans-serif;        /* cifras y títulos de artículos */
	--zaa-font-text: 'Manrope', sans-serif;            /* párrafos */

	/* Escala tipográfica */
	--zaa-fs-display: clamp(32px, 3.6vw, 52px);
	--zaa-fs-h2: clamp(28px, 3.5vw, 40px);
	--zaa-fs-h3: 18px;
	--zaa-fs-lead: 17px;
	--zaa-fs-body: 15px;
	--zaa-fs-small: 13px;
	--zaa-fs-label: 11px;      /* mínimo legible: nada por debajo */
	--zaa-fs-eyebrow: 13px;    /* etiqueta de sección */
	--zaa-ls-label: 2px;       /* espaciado de etiquetas en mayúsculas */
	--zaa-ls-eyebrow: 5px;

	/* Layout */
	--zaa-container: 1400px;
	--zaa-side-padding: 30px;
	--zaa-section-pad: clamp(72px, 12vh, 140px);
	--zaa-ease: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 1100px) {
	:root { --zaa-side-padding: 60px; }
}
@media (max-width: 600px) {
	:root { --zaa-side-padding: 24px; }
}