/**
 * Tokens de diseno de Mazaseg.
 *
 * Fuente de verdad del sistema visual. Ningun otro archivo debe declarar
 * colores, tamanos de fuente ni espaciados en crudo: siempre a traves de
 * estas variables.
 *
 * ORIGEN DE LOS VALORES
 *
 * El azul y el cian salen de la identidad corporativa entregada por el
 * cliente, no de una propuesta. El azul se tomo del propio arte del logotipo
 * (#0C78BD) y no del hexadecimal impreso en el manual, que dice #030404
 * (practicamente negro) y contradice tanto su propia muestra como su CMYK
 * 85 45 0 0: es una errata del manual.
 *
 * El coral se conserva del sistema anterior por decision expresa: la
 * identidad del cliente no incluye ningun color calido, y sin el no habria
 * color de accion que destaque sobre el azul. Es una divergencia deliberada
 * respecto al manual, no un descuido.
 *
 * Todos los niveles estan verificados contra WCAG AA en tests/color.test.php.
 */

@layer tokens {

	/* --- Tipografia autoalojada ----------------------------------------
	   La identidad especifica Aeonik Medium, que es comercial y requiere
	   licencia web de pago. General Sans es una grotesca geometrica muy
	   proxima, gratuita para uso comercial y autoalojable. Si el cliente
	   adquiere la licencia de Aeonik, este es el unico bloque a cambiar. */

	@font-face {
		font-family: "General Sans";
		font-style: normal;
		font-weight: 400;
		font-display: swap;
		src: url("../fonts/general-sans-400.woff2") format("woff2");
	}

	@font-face {
		font-family: "General Sans";
		font-style: normal;
		font-weight: 500;
		font-display: swap;
		src: url("../fonts/general-sans-500.woff2") format("woff2");
	}

	@font-face {
		font-family: "General Sans";
		font-style: normal;
		font-weight: 600;
		font-display: swap;
		src: url("../fonts/general-sans-600.woff2") format("woff2");
	}

	@font-face {
		font-family: "General Sans";
		font-style: normal;
		font-weight: 700;
		font-display: swap;
		src: url("../fonts/general-sans-700.woff2") format("woff2");
	}

	:root {

		/* Altura de la cabecera sticky (dos filas en escritorio, ~73px). Se usa
		   como offset para elementos sticky y para el salto a anclas, de modo
		   que nada quede tapado por el header. */
		--altura-cabecera: 4.6rem;

		/* --- Azul de marca -------------------------------------------
		   El 500 es el color exacto del logotipo. El resto es la misma
		   tonalidad a distintas luminosidades. */
		--color-primary-900: #052e48;
		--color-primary-800: #074973;
		--color-primary-700: #095e95;
		--color-primary-500: #0c78bd;
		--color-primary-100: #bce2fb;
		--color-primary-50: #ecf7fe;

		/* --- Cian secundario ------------------------------------------
		   Sobre blanco da 2.61:1: no vale como color de texto ni de icono.
		   Solo como fondo con texto oscuro (6.13:1) o sobre azul oscuro. */
		--color-cian: #18ace3;

		/* Degradado de marca, definido en el manual para fondos. */
		--degradado-marca: linear-gradient(135deg, var(--color-primary-500), var(--color-cian));

		/* --- Coral de accion -------------------------------------------
		   Fuera de la identidad del cliente, conservado para los CTA. */
		--color-accent-700: #c2481f;
		--color-accent-500: #f26b3f;
		--color-accent-300: #f9a488;
		--color-accent-100: #fde4da;
		--color-accent-800: #b5431d;

		/* --- Neutros --- */
		--color-ink: #16232e;
		--color-body: #3a4a56;
		--color-muted: #6a7782;
		--color-border: #dce4ea;
		--color-surface: #f4f7fa;
		--color-surface-neutra: #f7f7f7;
		--color-white: #ffffff;

		/* --- Verde de WhatsApp -----------------------------------------
		   El verde oficial de la marca (#25D366) da 1.98:1 con el icono
		   blanco: no llega ni al 3:1 que la WCAG exige a un objeto grafico.
		   Hacen falta dos, y no por capricho:

		   El claro es el mas claro que cumple ese 3:1 con margen (3.39:1).
		   Vale para el flotante de escritorio, que solo lleva el icono.

		   El oscuro es para el boton de la barra de movil, que ademas lleva
		   la palabra "WhatsApp" escrita: eso ya es texto y exige 4.5:1
		   (4.70:1). Sirve tambien de hover del flotante. */
		--color-whatsapp: #17a055;
		--color-whatsapp-oscuro: #118548;

		/* --- Semanticos --- */
		--color-success: #1c8655;
		--color-success-100: #dff2e8;
		--color-success-800: #1a7b4e;
		--color-warning: #e0a21b;
		--color-error: #d33a2c;
		--color-info: #0c78bd;

		/* --- Tipografia --- */
		--font-heading: "General Sans", "Segoe UI", system-ui, sans-serif;
		--font-body: "General Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

		--text-display: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
		--text-h1: clamp(2rem, 1.5rem + 2.2vw, 2.75rem);
		--text-h2: clamp(1.625rem, 1.35rem + 1.2vw, 2rem);
		--text-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
		--text-h4: 1.25rem;
		--text-body-l: 1.125rem;
		--text-body: 1rem;
		--text-small: 0.875rem;
		--text-overline: 0.8125rem;

		--leading-tight: 1.15;
		--leading-heading: 1.25;
		--leading-body: 1.6;

		/* --- Espaciado, escala de 4 --- */
		--space-1: 0.25rem;
		--space-2: 0.5rem;
		--space-3: 0.75rem;
		--space-4: 1rem;
		--space-6: 1.5rem;
		--space-8: 2rem;
		--space-12: 3rem;
		--space-16: 4rem;
		--space-24: 6rem;

		--section-y: clamp(3rem, 2rem + 5vw, 6rem);

		/* --- Radios --- */
		--radius-sm: 6px;
		--radius-md: 10px;
		--radius-lg: 16px;
		--radius-pill: 999px;

		/* --- Sombras --- */
		--shadow-sm: 0 1px 2px rgb(16 35 46 / 6%);
		--shadow-md: 0 6px 18px rgb(16 35 46 / 10%);
		--shadow-lg: 0 16px 40px rgb(16 35 46 / 14%);

		/* --- Layout --- */
		--container-max: 1200px;
		--content-max: 720px;
		--gutter: clamp(1rem, 0.5rem + 2vw, 2rem);

		/* --- Interaccion --- */
		--touch-min: 44px;
		--transition: 160ms ease;
	}
}