@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("./fonts/InterVariable.woff2?v=4.0") format("woff2");
}
@font-face {
	font-family: Inter;
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("./fonts/InterVariable-Italic.woff2?v=4.0") format("woff2");
}

:root {
	// Fonts - general
	--newspack-ui-font-family: "Inter", system-ui, sans-serif;
	--newspack-ui-font-weight-strong: 600;

	// Fonts - sizes
	--newspack-ui-font-size-2xs: 12px;
	--newspack-ui-font-size-xs: 14px;
	--newspack-ui-font-size-s: 16px;
	--newspack-ui-font-size-m: clamp(1.125rem, 0.929rem + 0.402vw, 1.25rem); // 18px - 20px
	--newspack-ui-font-size-l: clamp(1.25rem, 0.857rem + 0.803vw, 1.5rem); // 20px - 24px
	--newspack-ui-font-size-xl: clamp(1.375rem, 0.394rem + 2.008vw, 2rem); // 22px - 32px
	--newspack-ui-font-size-2xl: clamp(1.625rem, 0.055rem + 3.213vw, 2.625rem); // 26px - 42px
	--newspack-ui-font-size-3xl: clamp(1.75rem, -0.213rem + 4.016vw, 3rem); // 28px - 48px
	--newspack-ui-font-size-4xl: clamp(2rem, -1.141rem + 6.426vw, 4rem); // 32px - 64px
	--newspack-ui-font-size-5xl: clamp(2.125rem, -2.39rem + 9.237vw, 5rem); // 34px - 80px
	--newspack-ui-font-size-6xl: clamp(2.25rem, -3.639rem + 12.048vw, 6rem); // 36px - 96px

	// Fonts - line heights
	// TODO: would this make more sense as mixins with the accompanying font sizes?
	--newspack-ui-line-height-2xs: 1.3333;
	--newspack-ui-line-height-xs: 1.4286;
	--newspack-ui-line-height-s: 1.5;
	--newspack-ui-line-height-m: 1.6;
	--newspack-ui-line-height-l: 1.5;
	--newspack-ui-line-height-xl: 1.375;
	--newspack-ui-line-height-2xl: 1.3333;
	--newspack-ui-line-height-3xl: 1.25;
	--newspack-ui-line-height-4xl: 1.125;
	--newspack-ui-line-height-5xl: 1.1;
	--newspack-ui-line-height-6xl: 1.0833;
}
