homepage/styles/base.scss

@use "sass:math";
@use "lib/fluids" with (
	$lower-harmonic-ratio: 1.25,
	$upper-harmonic-ratio: 1.3
);
@use "lib/reset";

@use 'components/markup';
@use 'components/site';
@use 'components/page';
@use 'components/banner';

@layer reset {
	@include reset.setup;
}

$-comfortaa-weights: (
	'Light': 300,
	'Regular': 400,
	'Medium': 500,
	'Semi-bold': 600,
	'Bold': 700,
);
@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');
}

:root {
	$-text-lower-base: math.div(1rem, 20) * 16;
	$-text-upper-base: 1rem;
	--text-m: #{fluids.harmonic-value(0, $-text-lower-base, $-text-upper-base)};
	--text-l: #{fluids.harmonic-value(1, $-text-lower-base, $-text-upper-base)};
	--text-xl: #{fluids.harmonic-value(2, $-text-lower-base, $-text-upper-base)};
	--text-2xl: #{fluids.harmonic-value(3, $-text-lower-base, $-text-upper-base)};

	$-line-height-factor: 1.5;
	--scale-s: #{0.8 * $-line-height-factor};
	--scale-m: #{$-line-height-factor};
	--scale-l: #{1.5 * $-line-height-factor};
	--scale-xl: #{1.7 * $-line-height-factor};

	$-gap-lower-base: $-text-lower-base * $-line-height-factor;
	$-gap-upper-base: $-text-upper-base * $-line-height-factor;
	--gap-xs: #{fluids.harmonic-value(-3, $-gap-lower-base, $-gap-upper-base)};
	--gap-s: #{fluids.harmonic-value(-2, $-gap-lower-base, $-gap-upper-base)};
	--gap-m: #{fluids.harmonic-value(0, $-gap-lower-base, $-gap-upper-base)};
	--gap-l: #{fluids.harmonic-value(2, $-gap-lower-base, $-gap-upper-base)};
	--gap-xl: #{fluids.harmonic-value(3, $-gap-lower-base, $-gap-upper-base)};
	--gap-2xl: #{fluids.harmonic-value(5, $-gap-lower-base, $-gap-upper-base)};

	--weight-normal: 400;
	--weight-emph: 600;
}

html {
	font-size: 125%; // Scale from 16px to 20px
	font-family: var(--font-override, Comfortaa, var(--system-fonts));
	font-weight: var(--weight-normal);

	@supports (font-variation-settings: normal) {
		font-family: var(--font-override, 'Comfortaa Variable', var(--system-fonts));
	}
}

body {
	font-size: var(--text-m);
	line-height: var(--scale-m);
}