html:not(.dark) {
	--WebsiteIcon: url('media/default-favicon.png');

	--DefaultFgColor: #000000;
	--DefaultBgColor: #E6E9EC;
	--DefaultBorderRadius: 7px;

	--MenuFgColor: #333333;
	--MenuBgColor: #FFFFFFF0;
	--MenuBorderColor: #DDDDDD;
	--MenuShadowColor: #66666633;
	--MenuSelectFgColor: #333333;
	--MenuSelectBgColor: #88B0DC33;

	--HeaderFgColor: #FFFFFF;
	--HeaderBgColor: #E6E9EC;
	--HeaderImage: url('media/default-header-image.jpg');

	--ContentFgColor: #424242;
	--ContentBgColor: #FFFFFF;
	--ContentBgImageColor: #B2C5DA;
	--ContentBgImage: url('media/default-article-image.jpg');

	--HeadingFgColor: #212121;
	--MetaDataColor: #727272;
	--AccentColor: #88B0DC;
	--LinkFgColor: #6E91B7;
	--ButtonLinkFgColor: #FFFFFF;
	--SeparatorColor: #DDDDDD;
	--ImageBorderColor: #DDDDDD;
	--NavButtonFgColor: #FFFFFF;
	--NavButtonBgColor: #AFB7BF;
	--ActiveItemBgColor: #88B0DC33;

	--InputFgColor: #666666;
	--InputBgColor: #FFFFFF;
	--InputBorderColor: #999999;

	--ErrorFgColor: red;

	--QuoteFgColor: #333333;
	--QuoteBgColor: #F3F5F7;
	--QuoteFgColorPale: #AAB6C4;
	--QuoteBorderColor: #E6E9EC;

	--TableFgColor: #333333;
	--TableBgColor: #F3F5F7;
	--TableBgColorHead: #DFE2E5;

	--MarkFgColor: black;
	--MarkBgColor: yellow;

	--BibleQuoteBgImage: url('media/default-biblequote-bg.png');
}

html.dark {
	color-scheme: dark;

	--WebsiteIcon: url('media/default-favicon.png');

	--DefaultFgColor: #E6E9EC;
	--DefaultBgColor: #202F3E;
	--DefaultBorderRadius: 7px;

	--MenuFgColor: #C4D4E4;
	--MenuBgColor: #202F3EF0;
	--MenuBorderColor: #666666;
	--MenuShadowColor: #66666633;
	--MenuSelectFgColor: #C4D4E4;
	--MenuSelectBgColor: #88B0DC66;

	--HeaderFgColor: #FFFFFF;
	--HeaderBgColor: #E6E9EC;
	--HeaderImage: url('media/default-header-image.jpg');

	--ContentFgColor: #C4D4E4;
	--ContentBgColor: #2F4559;
	--ContentBgImageColor: #B2C5DA;
	--ContentBgImage: url('media/default-article-image.jpg');

	--HeadingFgColor: #FFFFFF;
	--MetaDataColor: #9FB8D1;
	--AccentColor: #88B0DC;
	--LinkFgColor: #74A2CC;
	--ButtonLinkFgColor: #FFFFFF;
	--SeparatorColor: #4A6B8A;
	--ImageBorderColor: #DDDDDD;
	--NavButtonFgColor: #FFFFFF;
	--NavButtonBgColor: #AFB7BF;
	--ActiveItemBgColor: #88B0DC33;

	--InputFgColor: #CCCCCC;
	--InputBgColor: #1E2B38;
	--InputBorderColor: #666666;
	--InputAccentColor: #FFD100;

	--ErrorFgColor: red;

	--QuoteFgColor: #C4D4E4;
	--QuoteBgColor: #415F7B;
	--QuoteFgColorPale: #AAB6C4;
	--QuoteBorderColor: #74A2CC;

	--TableFgColor: #C4D4E4;
	--TableBgColor: #415F7B;
	--TableBgColorHead: #3A556E;

	--MarkFgColor: black;
	--MarkBgColor: yellow;

	--BibleQuoteFgColor: #FFFFFF;
	--BibleQuoteBgImage: url('media/darkblue-biblequote-bg.png');

	blockquote.bibelzitat,
	blockquote.biblequote {
		color: var(--BibleQuoteFgColor);
	}

	input {
		accent-color: var(--InputAccentColor);
	}

	/* make bg image darker */
	header {
		background-image: linear-gradient(rgba(32, 47, 62, 0.33), rgba(32, 47, 62, 0.33)), var(--HeaderImage);
	}
}

