/**
 * Tokens de diseño de TAVER.
 *
 * Colores: muestreados del logo real (taversa-logo-original.webp), no elegidos
 * a ojo. Verde #0A8137 y azul #1E59AE son los dos colores de la marca.
 * Las superficies oscuras se derivan del azul de marca (hue 215°) bajando
 * luminosidad, de modo que el navy sea *el mismo azul* y no un gris azulado
 * arbitrario.
 *
 * Escala tipográfica y ritmo de espaciado: extraídos del template kit Voltex
 * (theme-source/templates/global.json y home.json), que es la referencia
 * visual del proyecto.
 */

:root {
	/* ----- Marca ----- */
	--taver-blue: #1E59AE;
	--taver-blue-600: #17458A;
	--taver-blue-100: #E8EEF8;
	--taver-green: #0A8137;
	--taver-green-600: #076129;
	--taver-green-100: #E6F2EB;
	/* Verde aclarado para usar sobre navy: el verde de marca sobre fondo
	   oscuro queda por debajo del contraste mínimo. */
	--taver-green-300: #45B571;

	/* ----- Superficies oscuras ----- */
	--taver-navy-900: #0C1C31;
	--taver-navy-800: #172E4F;

	/* ----- Neutros ----- */
	--taver-ink: #101828;
	--taver-body: #475467;
	--taver-muted: #667085;
	--taver-border: #E9EBEE;
	--taver-surface: #F7F9FB;
	--taver-white: #FFFFFF;

	/* ----- Roles funcionales -----
	   Las plantillas usan estos, no los colores crudos: cambiar el acento
	   del sitio es cambiar una línea acá. */
	--taver-cta: var(--taver-green);
	--taver-cta-hover: var(--taver-green-600);
	--taver-cta-text: var(--taver-white);
	--taver-link: var(--taver-blue);
	--taver-focus: var(--taver-blue);

	/* ----- Tipografía ----- */
	--taver-font-head: 'Stack Sans Headline', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--taver-font-body: 'Google Sans Flex', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

	--taver-fs-h1: 4.5rem;    /* 72px */
	--taver-fs-h2: 3rem;      /* 48px */
	--taver-fs-h3: 1.5rem;    /* 24px */
	--taver-fs-h4: 1.25rem;   /* 20px */
	--taver-fs-body: 1.0625rem; /* 17px — un punto sobre el kit: el lector acá
	                               son directores de proyecto leyendo párrafos
	                               técnicos, no consumo rápido. */
	--taver-fs-small: 0.875rem; /* 14px */
	--taver-fs-eyebrow: 0.75rem; /* 12px */

	--taver-lh-tight: 1.1;
	--taver-lh-head: 1.2;
	--taver-lh-body: 1.6;

	--taver-ls-eyebrow: 0.09375rem; /* 1.5px */

	/* ----- Espaciado -----
	   Escala del kit: 10/20/30/40/60/80/100/140. */
	--taver-space-1: 0.625rem;  /* 10 */
	--taver-space-2: 1.25rem;   /* 20 */
	--taver-space-3: 1.875rem;  /* 30 */
	--taver-space-4: 2.5rem;    /* 40 */
	--taver-space-6: 3.75rem;   /* 60 */
	--taver-space-8: 5rem;      /* 80 */
	--taver-space-10: 6.25rem;  /* 100 */
	--taver-space-14: 8.75rem;  /* 140 */

	--taver-section-y: var(--taver-space-14);

	/* ----- Layout ----- */
	--taver-container: 1140px;
	--taver-gutter: 1.5rem;
	--taver-header-h: 84px;

	/* ----- Formas -----
	   El botón píldora que muta a esquina blanda en hover es un gesto
	   distintivo del kit; se conserva. */
	--taver-radius-pill: 50px;
	--taver-radius-pill-hover: 10px;
	--taver-radius-card: 14px;
	--taver-radius-sm: 8px;

	--taver-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
	--taver-shadow-lift: 0 4px 8px rgba(16, 24, 40, 0.06), 0 16px 40px rgba(16, 24, 40, 0.1);

	--taver-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tablet */
@media (max-width: 1024px) {
	:root {
		--taver-fs-h1: 3.5rem;   /* 56px */
		--taver-fs-h2: 2.75rem;  /* 44px — interpolado: el kit define H2 solo
		                            para desktop y mobile. */
		--taver-section-y: var(--taver-space-8);
		--taver-header-h: 76px;
	}
}

/* Mobile */
@media (max-width: 767px) {
	:root {
		--taver-fs-h1: 3rem;     /* 48px */
		--taver-fs-h2: 2rem;     /* 32px */
		--taver-fs-h3: 1.25rem;  /* 20px */
		--taver-fs-body: 0.9375rem; /* 15px */
		--taver-section-y: var(--taver-space-6);
		--taver-gutter: 1.25rem;
		--taver-header-h: 68px;
	}
}