$normal-weight: 400;
$emphasized-weight: 600;

// This is the major third type scale.
$base-size: 1rem;
$title-size: 2.44rem;
$heading-size: 1.95rem;
$subheading-size: 1.56rem;

$base-line-height: 1.5;
$heading-line-height: 1.3;

$comfortaa-weights: (
	'Light': 300,
	'Regular': 400,
	'Medium': 500,
	'Semi-bold': 600,
	'Bold': 700,
);

@mixin root-config {
	@each $name, $weight in $comfortaa-weights {
		@font-face {
			font-family: 'Comfortaa';
			font-style: normal;
			font-weight: $weight;
			font-display: swap;
			src: url('/assets/fonts/Comfortaa-#{$name}.ttf') format('truetype');
		}
	}

	@font-face {
		font-family: 'Comfortaa Variable';
		font-style: normal;
		font-display: swap;
		src: url('/assets/fonts/Comfortaa-VariableFont_wght.ttf') format('truetype');
	}

	html {
		$fallback-fonts: Roboto, Arial, sans-serif;

		font-size: 125%; // Scale from 16px to 20px
		font-family: Comfortaa, $fallback-fonts;
		font-weight: $normal-weight;

		@supports (font-variation-settings: normal) {
			font-family: 'Comfortaa Variable', $fallback-fonts;
		}
	}

	body {
		font-size: $base-size;
		line-height: $base-line-height;
	}
}