/* Interlink Marketing — design tokens. Use these, nothing else. */

@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); }

:root {
	/* Colour */
	--navy-950: #061329;
	--navy-900: #0B1D3F;
	--navy-800: #132A57;
	--green-600: #1E8F45;
	--green-500: #23A24F;
	--green-300: #5FD58A;
	--ink-600: #4A5872;
	--ink-200: #D5DCE8;
	--line-200: #DDE3EC;
	--ground-50: #F3F5F8;
	--amber-500: #F5A623;
	--alert-600: #B4410E;
	--white: #FFFFFF;

	/* Type */
	--font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	/* Fluid between 390px (mobile value) and 1440px (desktop value). */
	--fs-display: clamp(56px, 41.14px + 3.81vw, 96px);
	--fs-h1: clamp(40px, 28.11px + 3.048vw, 72px);
	--fs-h2: clamp(34px, 28.8px + 1.333vw, 48px);
	--fs-h3: clamp(24px, 21.77px + 0.571vw, 30px);
	--fs-h4: clamp(20px, 19.26px + 0.19vw, 22px);
	--fs-lede: clamp(18px, 17.26px + 0.19vw, 20px);
	--fs-body: 16px;
	--fs-small: 14px;
	--fs-label: 15px;

	/* Space */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;
	--s-8: 64px;
	--s-9: 96px;
	--s-10: 128px;

	--section: 96px;
	--section-xl: 112px;
	--container: 1200px;
	--gutter: 32px;
	--header-h: 76px;

	/* Shape */
	--r-sm: 12px;
	--r-md: 20px;
	--r-lg: 28px;
	--r-pill: 999px;

	--el-1: 0 8px 24px rgba(11, 29, 63, .10);
	--el-2: 0 24px 60px rgba(11, 29, 63, .25);

	/* Motion */
	--ease-in: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-state: cubic-bezier(0.65, 0, 0.35, 1);
	--t-press: 80ms;
	--t-hover: 150ms;
	--t-state: 250ms;
	--t-reveal: 600ms;
}

@media (max-width: 819.98px) {
	:root {
		--section: 64px;
		--section-xl: 64px;
		--gutter: 16px;
		--header-h: 64px;
	}
}
