starter/public/theme.css

@font-face {
	font-family: 'mononoki';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src:
		local('mononoki'),
		url(fonts/mononoki/mononoki-Regular.woff2) format('woff2');
}

@font-face {
	font-family: 'mononoki';
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src:
		local('mononoki Bold'),
		local('mononoki'),
		url(fonts/mononoki/mononoki-Bold.woff2) format('woff2');
}

@font-face {
	font-family: 'mononoki';
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	src:
		local('mononoki Italic'),
		local('mononoki'),
		url(fonts/mononoki/mononoki-Italic.woff2) format('woff2');
}

@font-face {
	font-family: 'mononoki';
	font-weight: 700;
	font-style: italic;
	font-display: swap;
	src:
		local('mononoki Bold Italic'),
		local('mononoki BoldItalic'),
		local('mononoki'),
		url(fonts/mononoki/mononoki-BoldItalic.woff2) format('woff2');
}

:root {
	--font-family-base: 'Encode Sans', system-ui;
	--font-stretch-base: semi-expanded;
	--font-weight-base: 400;
	--line-height-base: 1.75em;
	--font-family-headings: 'Encode Sans', system-ui;
	--font-stretch-headings: condensed;
	--font-weight-headings: 100;
	--line-height-headings: 1.125em;
	--font-family-monospace: 'mononoki';
	--font-size-root: 16px;
	--opacity-light: 0.25;
	--opacity-lighter: 0.5;
	--opacity-lightest: 0.75;
}

:root {
	--color-bg: var(--color-negative, white);
	--color-fg: var(--color-positive, black);
	--color-accent: var(--color-primary, blue);
	--color-active: var(--color-secondary, red);
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-bg: var(--color-negative, black);
		--color-fg: var(--color-positive, white);
	}
}

:root {
	font-size: var(--font-size-root);
	font-family: var(--font-family-base), sans-serif;
	font-stretch: var(--font-stretch-base, normal);
	font-weight: var(--font-weight-base, 400);
	line-height: var(--line-height-base, 1.75em);
	transition-property: color, background-color;
	transition-timing-function: ease;
	transition-duration: 350ms;
}

@media only screen {
	:root {
		background-color: var(--color-bg);
		color: var(--color-fg);
	}
}

h1 {
	font-family: var(--font-family-headings), sans-serif;
	font-stretch: var(--font-stretch-headings, normal);
	font-weight: var(--font-weight-headings, 400);
	line-height: var(--line-height-headings, 1.5);
}

h2 {
	font-family: var(--font-family-headings), sans-serif;
	font-stretch: var(--font-stretch-headings, normal);
	font-weight: calc(var(--font-weight-headings, 400) / 100 * 150);
	line-height: var(--line-height-headings, 1.5);
}

h3 {
	font-family: var(--font-family-headings), sans-serif;
	font-stretch: var(--font-stretch-headings, normal);
	font-weight: calc(var(--font-weight-headings, 400) / 100 * 250);
	line-height: var(--line-height-headings, 1.5);
}

h4 {
	font-family: var(--font-family-headings), sans-serif;
	font-stretch: var(--font-stretch-headings, normal);
	font-weight: var(--font-weight-headings, 400);
	line-height: var(--line-height-headings, 1.5);
}

h5 {
	font-family: var(--font-family-headings), sans-serif;
	font-stretch: var(--font-stretch-headings, normal);
	font-weight: var(--font-weight-headings, 400);
	line-height: var(--line-height-headings, 1.5);
}

h6 {
	font-family: var(--font-family-headings), sans-serif;
	font-stretch: var(--font-stretch-headings, normal);
	font-weight: var(--font-weight-headings, 400);
	line-height: var(--line-height-headings, 1.5);
}

code {
	font-family: var(--font-family-monospace), monospace;
}

pre {
	font-family: var(--font-family-monospace), monospace;
}

a {
	color: inherit;
	text-decoration: none;
}

@media only screen {
	a {
		color: var(--color-accent);
		text-decoration: underline;
	}

	a:focus {
		color: var(--color-active);
	}
}

::selection {
	background-color: var(--color-active);
	color: var(--color-fg);
}

:root {
	caret-color: var(--color-active);
}