@font-face {
	font-family: "Lora";
	src: url("/fonts/Lora-VariableFont_wght.ttf") format("truetype");
	font-display: fallback;
}

@font-face {
	font-family: "Gorton";
	src: url("/fonts/GortonPerfectedVF.woff2") format("woff2");
	font-display: fallback;
}

/* Defaults */
:root {
	--syntax-tab-size: 2;
	--font-family: "Gorton";
	--secondary-font-family: "Lora";
	--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono,
		Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono,
		Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New,
		Courier, monospace;
}

/* Theme colors */
:root {
	--colour-black: hsla(0, 0%, 0%, 1);
	--colour-yellow: hsla(61, 76%, 72%, 1);
	--colour-blue: hsla(165, 56%, 71%, 1);
	--colour-purple: hsla(300, 60%, 82%, 1);
	--colour-green: hsla(94, 48%, 80%, 1);
	--colour-red: hsla(0, 97%, 77%, 1);
	--colour-white: hsla(60, 51%, 91%, 1);
	--colour-paper: hsla(60, 100%, 98%, 1);
	--colour-orange: hsla(17, 89%, 60%, 1);

	--colour-night: hsla(60, 6%, 9%, 1);
	--colour-dusk: hsla(60, 5%, 15%, 1);

	--background-colour: light-dark(var(--colour-white), var(--colour-night));
	--header-colour: light-dark(var(--colour-yellow), var(--colour-dusk));
	--surface-colour: light-dark(var(--colour-paper), var(--colour-dusk));
	--border-colour: light-dark(var(--colour-black), var(--colour-white));

	--text-colour: light-dark(var(--colour-black), var(--colour-white));
	--subtle-text-colour: light-dark(var(--colour-black), var(--colour-white));
	--text-colour-link: light-dark(var(--colour-black), var(--colour-white));
	--text-colour-header: light-dark(var(--colour-black), var(--colour-yellow));

	--hover-link-background-colour: light-dark(var(--colour-black), var(--colour-yellow));
	--hover-link-text-colour: light-dark(var(--colour-yellow), var(--colour-black));

	--icon-fill-colour: light-dark(var(--colour-black), var(--colour-white));

	--postlist-item-background-one-colour: light-dark(var(--colour-black), var(--colour-green));
	--postlist-item-background-two-colour: light-dark(var(--colour-black), var(--colour-purple));
	--postlist-item-background-three-colour: light-dark(var(--colour-black), var(--colour-blue));
	--postlist-item-background-four-colour: light-dark(var(--colour-black), var(--colour-red));

	color-scheme: light dark;
}
:root[data-theme="light"] {
	color-scheme: light;
}
:root[data-theme="dark"] {
	color-scheme: dark;
}