:root {
	color-scheme: light dark;

	--primary-colour-hue: 320;
	--primary-colour-lighter: hsl(320, 37%, 68%);
	--primary-colour-light: hsl(320, 41%, 54%);
	--primary-colour-normal: hsl(320, 55%, 40%);
	--primary-colour-dark: hsl(320, 71%, 37%);
	--primary-colour-darker: hsl(320, 90%, 29%);

	--secondary-colour-hue: 136;
	--secondary-colour-lighter: hsl(136, 70%, 73%);
	--secondary-colour-light: hsl(136, 61%, 60%);
	--secondary-colour-normal: hsl(136, 55%, 48%);
	--secondary-colour-dark: hsl(136, 71%, 37%);
	--secondary-colour-darker: hsl(136, 91%, 26%);

	--tertiary-colour-hue: 51;
	--tertiary-colour-lighter: hsl(51, 100%, 79%);
	--tertiary-colour-light: hsl(51, 83%, 67%);
	--tertiary-colour-normal: hsl(51, 64%, 54%);
	--tertiary-colour-dark: hsl(51, 71%, 41%);
	--tertiary-colour-darker: hsl(51, 91%, 29%);

	--complementary-colour-hue: 68;
	--complementary-colour-lighter: hsl(68, 69%, 94%);
	--complementary-colour-light: hsl(68, 45%, 81%);
	--complementary-colour-normal: hsl(68, 32%, 64%);
	--complementary-colour-dark: hsl(68, 27%, 50%);
	--complementary-colour-darker: hsl(68, 35%, 36%);
	--complementary-colour-dark-sat: 45%;
	--complementary-colour-dark-lum: 81%;

	--font-family-primary: "lora", serif;
	--font-family-alternative: "scriptorama-hostess-jf", cursive;
	--font-family-alternative-vertical-align-correction: -14%;

	/* no preference / default configuration */
	--button-text-colour: var(--complementary-colour-lighter);
	--button-fill-colour: var(--primary-colour-normal);
	--button-hover-fill-colour: var(--primary-colour-light);

	--logo-text-colour: var(--primary-colour-normal);
	--menu-button-colour: var(--tertiary-colour-light);

	--header-colour: var(--primary-colour-normal);
	--header-background-colour: var(--complementary-colour-normal);

	--text-colour-primary: hsl(var(--complementary-colour-hue), 100%, 5%);
	--text-colour-secondary: var(--primary-colour-darker);
	--text-colour-tertiary: var(--secondary-colour-darker);

	--page-background-primary: hsl(var(--complementary-colour-hue), 16%, 95%);
	--page-background-secondary: var(--complementary-colour-normal);
	--page-background-tertiary: hsl(var(--complementary-colour-hue), 32%, 57%);

	--menu-background-colour: hsla(var(--complementary-colour-hue), var(--complementary-colour-dark-sat), var(--complementary-colour-dark-lum), 0.75);
	--menu-item-button-background-colour: hsla(var(--primary-colour-hue), 90%, 29%, .8);
	--menu-item-button-colour: var(--complementary-colour-lighter);

	--menu-current-page-background-colour: var(--primary-colour-dark);
	--menu-current-page-colour: var(--complementary-colour-normal);

	--shadow-colour: hsla(0, 0%, 0%, 0.2);
	--backdrop-filter-blur-amount: 7px;

}

@media (prefers-color-scheme: light) {
	:root {
		--button-text-colour: var(--complementary-colour-lighter);
		--button-fill-colour: var(--primary-colour-normal);
		--button-hover-fill-colour: var(--primary-colour-light);

		--logo-text-colour: var(--primary-colour-normal);
		--menu-button-colour: var(--tertiary-colour-light);

		--header-colour: var(--primary-colour-normal);
		--header-background-colour: var(--complementary-colour-normal);

		--text-colour-primary: hsl(var(--complementary-colour-hue), 100%, 5%);
		--text-colour-secondary: var(--primary-colour-darker);
		--text-colour-tertiary: var(--secondary-colour-darker);

		--page-background-primary: hsl(var(--complementary-colour-hue), 16%, 95%);
		--page-background-secondary: var(--complementary-colour-normal);
		--page-background-tertiary: hsl(var(--complementary-colour-hue), 32%, 57%);

		--menu-background-colour: hsla(var(--complementary-colour-hue), var(--complementary-colour-dark-sat), var(--complementary-colour-dark-lum), 0.75);
		--menu-item-button-background-colour: hsla(var(--primary-colour-hue), 90%, 29%, .6);
		--menu-item-button-background-colour-hover: hsla(var(--primary-colour-hue), 90%, 29%, 1);
		--menu-item-button-colour: var(--complementary-colour-lighter);
		--menu-item-button-colour-hover: var(--complementary-colour-lighter);

		--menu-current-page-background-colour: var(--primary-colour-dark);
		--menu-current-page-colour: var(--complementary-colour-normal);

		--shadow-colour: hsla(0, 0%, 0%, 0.2);
		--backdrop-filter-blur-amount: 7px;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--button-text-colour: var(--complementary-colour-lighter);
		--button-fill-colour: var(--complementary-colour-darker);
		--button-hover-fill-colour: var(--complementary-colour-normal);

		--logo-text-colour: var(--primary-colour-lighter);
		--menu-button-colour: var(--complementary-colour-lighter);

		--header-colour: var(--primary-colour-lighter);
		--header-background-colour: var(--complementary-colour-darker);

		--text-colour-primary: hsl(var(--complementary-colour-hue), 100%, 95%);
		--text-colour-secondary: var(--primary-colour-lighter);
		--text-colour-tertiary: var(--secondary-colour-lighter);

		--page-background-primary: hsl(var(--complementary-colour-hue), 34%, 10%);
		--page-background-secondary: hsl(var(--tertiary-colour-hue), 34%, 15%);
		--page-background-tertiary: hsl(var(--tertiary-colour-hue), 34%, 25%);

		--menu-background-colour: hsla(var(--complementary-colour-hue), 29%, 15%, 0.75);
		--menu-item-button-background-colour: hsla(var(--complementary-colour-hue), 19%, 20%, .6);
		--menu-item-button-background-colour-hover: hsla(var(--complementary-colour-hue), 9%, 30%, 1);
		--menu-item-button-colour: var(--primary-colour-lighter);
		--menu-item-button-colour-hover: var(--complementary-colour-lighter);

		--shadow-colour: hsla(0, 0%, 0%, 0.6);
		--backdrop-filter-blur-amount: 15px;
	}
}