// #################################################################################################
// fonts
// https://npm.im/inter-ui

$font-display: swap;
$font-family: "Inter";
$font-path: "https://cdn.jsdelivr.net/npm/inter-ui/Inter%20(web)/";

// #################################################################################################
@mixin fontface($weight, $style, $name) {
	@font-face {
		font-display: $font-display;
		font-family: $font-family;
		font-style: $style;
		font-weight: $weight;
		src: url("#{$font-path}Inter-#{$name}.woff2") format("woff2"),
			url("#{$font-path}Inter-#{$name}.woff") format("woff");
	}
}

// include fonts
@include fontface(100, italic, ThinItalic);
@include fontface(100, normal, Thin);
@include fontface(200, italic, ExtraLightItalic);
@include fontface(200, normal, ExtraLight);
@include fontface(300, italic, LightItalic);
@include fontface(300, normal, Light);
@include fontface(400, italic, Italic);
@include fontface(400, normal, Regular);
@include fontface(500, italic, MediumItalic);
@include fontface(500, normal, Medium);
@include fontface(600, italic, SemiBoldItalic);
@include fontface(600, normal, SemiBold);
@include fontface(700, italic, BoldItalic);
@include fontface(700, normal, Bold);
@include fontface(800, italic, ExtraBoldItalic);
@include fontface(800, normal, ExtraBold);
@include fontface(900, italic, BlackItalic);
@include fontface(900, normal, Black);

// variable fonts
@font-face {
	font-display: $font-display;
	font-family: "#{$font-family} var";
	font-style: normal;
	font-weight: 100 900;
	font-named-instance: "Regular";
	src: url("#{$font-path}Inter-roman.var.woff2") format("woff2");
}

@font-face {
	font-display: $font-display;
	font-family: "#{$font-family} var";
	font-style: italic;
	font-weight: 100 900;
	font-named-instance: "Italic";
	src: url("#{$font-path}Inter-italic.var.woff2") format("woff2");
}

/*
[EXPERIMENTAL] Multi-axis, single variable font.

Slant axis is not yet widely supported (as of February 2019) and thus this
multi-axis single variable font is opt-in rather than the default.

When using this, you will probably need to set font-variation-settings
explicitly, e.g.

	* {
		font-variation-settings: "slnt" 0deg;
	}
	.italic {
		font-variation-settings: "slnt" 10deg;
	}
*/

@font-face {
	font-display: $font-display;
	font-family: "#{$font-family} var experimental";
	font-style: oblique 0deg 10deg;
	font-weight: 100 900;
	src: url("#{$font-path}Inter.var.woff2") format("woff2");
}

// #################################################################################################
:root {
	--fnt-def: -apple-system, BlinkMacSystemFont, "Inter var", "Inter", "Segoe UI", "Helvetica Neue",
		Helvetica, Arial, Roboto, Ubuntu, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
		"Segoe UI Symbol";
	--fnt-mon: SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
}

html {
	font-family: var(--fnt-def);
	font-size: 10px;
}

body {
	font-size: 1.3rem;
}