@use './colors.scss' as colors;

$baseFont: 'Lato', sans-serif;
$codeFont: 'Source Code Pro', monospace;
$fontSizeSmall: 15px;

body {
	font-family: $baseFont;
	font-size: 18px;
	line-height: 1.65;
	font-weight: 400;
	color: colors.color(gray, 800);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;

	@media (prefers-color-scheme: dark) {
		color: colors.color(gray, 200);
	}
}

h1,
h2,
h3,
h4,
h5 {
	line-height: 1.2;
	margin: 1em 0 0.5em 0;
	color: colors.color(gray, 950);
	font-weight: 700;

	@media (prefers-color-scheme: dark) {
		color: colors.$white;
	}
}

h1 {
	font-size: 3.052em;
}
h2 {
	font-size: 2.441em;
}
h3 {
	font-size: 1.953em;
}
h4 {
	font-size: 1.563em;
}
h5 {
	font-size: 1.25em;
}

p {
	margin: 0 0 1em 0;
}

code {
	font-family: $codeFont;
}

b,
strong {
	font-weight: 700;
	color: #fff;
	color: colors.color(gray, 950);

	@media (prefers-color-scheme: dark) {
		color: colors.$white;
	}
}