/*
 * Tokens de diseño ZELINK.
 * Colores tomados del logo oficial (azul #0016FF, tinta casi negra) y de las piezas de marca.
 */

@font-face {
	font-family: "Sora";
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url("../fonts/sora-latin-wght-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
}

:root {
	/* Color */
	--zk-marino-950: #050816;
	--zk-marino-900: #0a1024;
	--zk-marino-800: #111a3a;
	--zk-marino-700: #1b2755;
	--zk-azul-marca: #0016ff;
	--zk-azul-600: #1f3bff;
	--zk-azul-500: #3d59ff;
	--zk-azul-400: #7b90ff;
	--zk-azul-100: #e8ecff;
	--zk-azul-50: #f3f5ff;
	--zk-tinta: #0c1326;
	--zk-gris-700: #39425c;
	--zk-gris-500: #5b6580;
	--zk-gris-300: #c5cbdb;
	--zk-gris-200: #e1e5ef;
	--zk-gris-100: #eef1f7;
	--zk-niebla: #f5f7fb;
	--zk-blanco: #fff;
	--zk-verde: #0b7a4b;
	--zk-verde-claro: #e3f6ec;
	--zk-ambar: #8a5a00;
	--zk-ambar-claro: #fff4d6;
	--zk-rojo: #b3261e;
	--zk-rojo-claro: #fdecea;

	/* Sobre fondo oscuro */
	--zk-osc-texto: #e9ecf8;
	--zk-osc-suave: #aab3d0;
	--zk-osc-linea: rgb(255 255 255 / 0.12);
	--zk-osc-capa: rgb(255 255 255 / 0.05);

	/* Tipografía */
	--zk-f-titulos: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
	--zk-f-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--zk-t-xs: 0.8125rem;
	--zk-t-s: 0.9375rem;
	--zk-t-m: 1.0625rem;
	--zk-t-l: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
	--zk-t-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
	--zk-t-h2: clamp(1.7rem, 1.25rem + 2vw, 2.7rem);
	--zk-t-h1: clamp(2.1rem, 1.3rem + 3.6vw, 3.9rem);

	/* Espaciado */
	--zk-e-1: 0.25rem;
	--zk-e-2: 0.5rem;
	--zk-e-3: 0.75rem;
	--zk-e-4: 1rem;
	--zk-e-5: 1.5rem;
	--zk-e-6: 2rem;
	--zk-e-7: 3rem;
	--zk-e-8: 4.5rem;
	--zk-seccion: clamp(3.5rem, 2rem + 6vw, 7rem);
	--zk-ancho: 1200px;
	--zk-ancho-texto: 760px;
	--zk-margen: clamp(1rem, 0.5rem + 2.5vw, 2rem);
	--zk-alto-header: 72px;

	/* Radios, sombras y capas */
	--zk-r-s: 8px;
	--zk-r-m: 14px;
	--zk-r-l: 22px;
	--zk-r-pill: 999px;
	--zk-sombra-1: 0 1px 2px rgb(12 19 38 / 0.06), 0 4px 14px rgb(12 19 38 / 0.06);
	--zk-sombra-2: 0 2px 6px rgb(12 19 38 / 0.08), 0 18px 44px rgb(12 19 38 / 0.14);
	--zk-brillo: 0 0 0 1px rgb(61 89 255 / 0.5), 0 14px 40px rgb(31 59 255 / 0.35);
	--zk-z-header: 50;
	--zk-z-mega: 60;
	--zk-z-flotante: 70;
	--zk-z-dialogo: 80;

	/* Movimiento */
	--zk-m-rapido: 140ms;
	--zk-m-medio: 260ms;
	--zk-m-lento: 520ms;
	--zk-m-curva: cubic-bezier(0.2, 0.7, 0.2, 1);
}