$titleFontStack: 'Beiruti', 'Arial', system-ui, sans-serif;
$mainFontStack: 'Sen Variable', 'Arial', system-ui, sans-serif;
$monoFontStack: 'Fira Code', 'Consolas', monospace;

$accent: hsl(209, 94%, 42%);
$accentLight: hsl(215, 90%, 60%);
$accentDark: hsl(215, 90%, 30%);
$secondary: hsl(48, 100%, 50%);
$dark: hsl(340, 13%, 5%);

$background: hsl(210, 40%, 96%);
$light: hsl(214, 64%, 98%);
$lightAlt: hsl(0, 0%, 100%);

$noteBackground: hsl(210, 40%, 96%);
$noteText: hsl(210, 40%, 40%);

$warningBackground: hsl(40, 100%, 90%);
$warningText: hsl(40, 100%, 30%);

$shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);

$floatingRadius: 0.5rem;

$breakpointTablet: 480px;
$breakpointDesktop: 1024px;

:root {
	font: 400 16px/1.65 $mainFontStack;
}

%heading {
	font-family: $titleFontStack;
	line-height: 1.25;
	margin-block-start: 0.75em;
	margin-block-end: 0.25em;
}

h1 {
	@extend %heading;
	font-size: 3.25rem;
}

h2 {
	@extend %heading;
	font-size: 2.5rem;
}

h3 {
	@extend %heading;
	font-size: 1.5rem;
}

h4 {
	@extend %heading;
	font-size: 1.25rem;
}