:root {
	--font-family: sans-serif;
	--background: #fff;
	--group-background: #00000006;
	--focus-background: #0000000a;
	--color: #595959;
	--selected-background: #ddd;
	--selected-color: #454545;
	--interactive-color: #444;
	--hover-color: #000;
	--help-color: #757575;
	--focussed-help-color: #444;

	--button-background: #00000036;
	--button-hover-background: #00000044;

	--border: #ccc;

	--active-border-color: #a6a6a6;
	--unsaved-border-color: #976e00;
	--valid-active-border-color: #00883b;
	--invalid-border-color: #e10101;
	--unseen-border-color: #016ee1;
	--related-border-color: #dbdbdb;

	--invalid-background-color: #fcdfdf; /*#e1010120;*/
	--unsaved-background-color: #fdf9ef; /*#e1a50110;*/

	--error-background-color: #f00;
	--error-color: #000;
	--warning-background-color: #ffcb00;
	--warning-color: #000;
	--ok-background-color: #1acc00;
	--ok-color: #000;
	--active-background-color: #bbb;
	--active-color: #000;

	--cover-background: #ffffffa3;

	--disabled-color: #666;

	--header-background: #ccc;
	--header-color: #000;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: #000;
		--group-background: #ffffff1a;
		--focus-background: #ffffff2a;
		--color: #999;
		--selected-background: #333;
		--selected-color: #c2c2c2;
		--interactive-color: #d0d0d0;
		--hover-color: #fff;
		--help-color: #757575;
		--focussed-help-color: #d0d0d0;

		--button-background: #ffffff36;
		--button-hover-background: #ffffff44;

		--border: #333;

		--active-border-color: #606060;
		--unsaved-border-color: #976f00;
		--valid-active-border-color: #00883b;
		--invalid-border-color: #ee0000;
		--unseen-border-color: #007cb9;
		--related-border-color: #3e3e3e;

		--invalid-background-color: #260000; /*#97000040;*/
		--unsaved-background-color: #1c1500; /*#976f0030;*/

		--error-background-color: #8e0000;
		--error-color: #ddd;
		--warning-background-color: #664d00;
		--warning-color: #ddd;
		--ok-background-color: #0c5700;
		--ok-color: #ddd;
		--active-background-color: #373737;
		--active-color: #ddd;

		--cover-background: #000000c3;

		--header-background: #333;
		--header-color: #fff;
	}
}