/**
 * COVIPRO — design tokens.
 *
 * Extraídos nodo por nodo del Figma (el archivo no define variables de Figma,
 * así que esto es la fuente de verdad). Al agregar un token nuevo, dejá
 * anotado el nodo de donde salió.
 *
 * @package covipro
 */

:root {
	/* --- Color -------------------------------------------------------- */
	--cvp-navy: #004696;        /* base institucional — header, stats, títulos */
	--cvp-yellow: #fec526;      /* acento — subrayados, panel 02, popup */
	--cvp-green: #74b94e;       /* panel 03 Revista (nodo 1:144) */
	--cvp-orange: #fe6e00;      /* botón del Big CTA (nodo 1:149) */
	--cvp-sky: #dce8f7;         /* fondo del Big CTA (nodo 1:147) */
	--cvp-grey: #bfbfbf;        /* texto secundario sobre navy */
	--cvp-white: #fff;
	--cvp-black: #111;

	/* Roles semánticos: usá estos en los componentes, no los crudos de arriba. */
	--cvp-bg: var(--cvp-white);
	--cvp-bg-invert: var(--cvp-navy);
	--cvp-text: var(--cvp-navy);
	--cvp-text-invert: var(--cvp-white);
	--cvp-text-muted: var(--cvp-grey);
	--cvp-accent: var(--cvp-yellow);
	--cvp-rule: var(--cvp-yellow);

	/* --- Tipografía --------------------------------------------------- */
	--cvp-font-display: 'Rubik', system-ui, -apple-system, sans-serif;
	--cvp-font-text: 'Sofia Sans Condensed', 'Arial Narrow', system-ui, sans-serif;

	/* Escala observada en el Figma: 13 · 14 · 16 · 20 · 28 · 40 · 64 */
	--cvp-fs-xs: 0.8125rem;   /* 13 — botón del header */
	--cvp-fs-sm: 0.875rem;    /* 14 — nav */
	--cvp-fs-base: 1rem;      /* 16 — cuerpo */
	--cvp-fs-md: 1.25rem;     /* 20 — numeración de paneles */
	--cvp-fs-lg: 1.75rem;     /* 28 — título de panel */
	--cvp-fs-xl: 2.5rem;      /* 40 — título de sección */
	--cvp-fs-2xl: 4rem;       /* 64 — cifras de stats */

	--cvp-lh-tight: 1.05;
	--cvp-lh-normal: 1.5;
	--cvp-tracking-nav: 0.05em;   /* 0.7px sobre 14px */
	--cvp-tracking-btn: 0.04em;   /* 0.64px sobre 16px */

	/* --- Espaciado ---------------------------------------------------- */
	--cvp-sp-1: 0.625rem;  /* 10 */
	--cvp-sp-2: 1rem;      /* 16 */
	--cvp-sp-3: 1.375rem;  /* 22 */
	--cvp-sp-4: 2rem;      /* 32 */
	--cvp-sp-5: 2.25rem;   /* 36 */
	--cvp-sp-6: 3rem;      /* 48 — gutter horizontal estándar */
	--cvp-sp-7: 3.5rem;    /* 56 */
	--cvp-sp-8: 5rem;      /* 80 */

	/* --- Layout ------------------------------------------------------- */
	--cvp-container: 1536px;   /* ancho de los frames del Figma */
	--cvp-gutter: var(--cvp-sp-6);
	--cvp-header-h: 84px;      /* alto del Header / Master */

	/* --- Otros -------------------------------------------------------- */
	--cvp-border-w: 1.5px;     /* borde del CTA del header */
	--cvp-rule-h: 3px;         /* subrayado amarillo de las stats */
	--cvp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--cvp-dur: 220ms;
}

/* El diseño no tiene frames mobile. Reducimos la escala grande y el gutter
   en pantallas chicas; el resto se decide componente por componente. */
@media (max-width: 900px) {
	:root {
		--cvp-fs-2xl: 2.75rem;
		--cvp-fs-xl: 1.875rem;
		--cvp-fs-lg: 1.375rem;
		--cvp-gutter: 1.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--cvp-dur: 0.01ms;
	}
}