/* Colors */

/* Let's start by defining each theme once with custom properties specific to each theme. 
** Each color scheme will have to defined more than once, because grouping selectors 
** together would break the code whenever one wasn't recognized. Also, the @media
** queries cannot be combined with the other selectors anyway. To make the code more
** maintainable, each color scheme definition uses these custom properties to identify 
** the colors. This allows each color to be changed in one location, and it allows 
** page authors to make modifications to the color schemes for specific pages or to
** use the color from a specific color scheme if it's appropriate. */

:root {
	--light-bgcolor: #FFFFF0;
	--light-fgcolor: black;
	--light-highlight-color: #E9AB17;
	--light-alt-bgcolor: #FEDEAD;
	--light-nav-bgcolor: beige;
	--light-nav-fgcolor: black;
	--light-nav-border-color: #909040;
	--light-nav-highlight-color: darkkhaki;
	--light-piece-bgcolor: #FFFFF0;
	--light-private-highlight: pink;
	--light-members-highlight: yellow;
	--light-link-color: #0000AE; /* color-mix(in oklab, #000000, blue 75%) */
	--light-visited-link-color: #300056; /* color-mix(in oklab, #000000, indigo 75%) */
	--light-focus-link-color: #005500; /* color-mix(in oklab, #000000, green 75%) */
	--light-logo: url('/graphics.dir/cvp-logo-light-2.png');

	--dark-bgcolor: #2B0F01;
	--dark-fgcolor: #CCBBAA;
	--dark-highlight-color: #381040;
	--dark-alt-bgcolor: midnightblue;
	--dark-nav-bgcolor: #202020;
	--dark-nav-fgcolor: #E9E9E9;
	--dark-nav-border-color: #381060;
	--dark-nav-highlight-color: #582060;
	--dark-piece-bgcolor: #999999;
	--dark-private-highlight: maroon;
	--dark-members-highlight: darkslateblue;
	--dark-link-color: #74A3FF; /* color-mix(in oklab, #ffffff, blue) */
	--dark-visited-link-color: #9F88C3; /* color-mix(in oklab, #ffffff, indigo) */
	--dark-focus-link-color: #90C08C; /* color-mix(in oklab, #ffffff, green) */
	--dark-logo: url('/graphics.dir/cvp-logo-dark-2.png');

	--darker-bgcolor: #101010;
	--darker-fgcolor: #F0F0F0;
	--darker-highlight-color: #381040;
	--darker-alt-bgcolor: midnightblue;
	--darker-nav-bgcolor: #202020;
	--darker-nav-fgcolor: #EEEEEE;
	--darker-nav-border-color: #1C0830;
	--darker-nav-highlight-color: #583060;
	--darker-piece-bgcolor: #888888;
	--darker-private-highlight: maroon;
	--darker-members-highlight: darkslateblue;
	--darker-link-color: #B8D2FF; /* color-mix(in oklab, #ffffff 75%, blue) */
	--darker-visited-link-color: #CEC3E2; /* color-mix(in oklab, #ffffff 75%, indigo) */
	--darker-focus-link-color: #C7DFC5; /* color-mix(in oklab, #ffffff 75%, green) */
	--darker-logo: url('/graphics.dir/cvp-logo-darker-2.png');

	--print-dark-scheme: 0;
	--print-bgcolor: white;
	--print-fgcolor: black;
	--print-highlight-color: silver;
	--print-alt-bgcolor: white;
	--print-nav-bgcolor: white;
	--print-nav-fgcolor: black;
	--print-nav-border-color: grey;
	--print-nav-highlight-color: silver;
	--print-private-highlight: pink;
	--print-piece-bgcolor: white;
	--print-members-highlight: yellow;
	--print-link-color: black;
	--print-visited-link-color: black;
	--print-focus-link-color: black;
	--print-dark-bgcolor: grey;
	--print-logo: url('/graphics.dir/cvp-logo-print-1.png');
}

/* The Light scheme is made default, and in case prefers-color-scheme is not supported,
** it is defined without reference to any @media query. */

:root {
	color-scheme: light;
	--dark-scheme: 0;
	--bgcolor: var(--light-bgcolor);
	--fgcolor: var(--light-fgcolor);
	--highlight-color: var(--light-highlight-color);
	--alt-bgcolor: var(--light-alt-bgcolor);
	--nav-bgcolor: var(--light-nav-bgcolor);
	--nav-fgcolor: var(--light-nav-fgcolor);
	--nav-border-color: var(--light-nav-border-color);
	--nav-highlight-color: var(--light-nav-highlight-color);
	--piece-bgcolor: var(--light-piece-bgcolor);
	--private-highlight: var(--light-private-highlight);
	--members-highlight: var(--light-members-highlight);
	--link-color: var(--light-link-color);
	--visited-link-color: var(--light-visited-link-color);
	--focus-link-color: var(--light-focus-link-color);
}

/* If prefers-color-scheme is supported, it only needs to check if it is dark.
** If it is light, then there is no need to change it from above. */

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--dark-scheme: 1;
		--bgcolor: var(--dark-bgcolor);
		--fgcolor: var(--dark-fgcolor);
		--highlight-color: var(--dark-highlight-color);
		--alt-bgcolor: var(--dark-alt-bgcolor);
		--nav-bgcolor: var(--dark-nav-bgcolor);
		--nav-fgcolor: var(--dark-nav-fgcolor);
		--nav-border-color: var(--dark-nav-border-color);
		--nav-highlight-color: var(--dark-nav-highlight-color);
		--piece-bgcolor: var(--dark-piece-bgcolor);
		--private-highlight: var(--dark-private-highlight);
		--members-highlight: var(--dark-members-highlight);
		--link-color: var(--dark-link-color);
		--visited-link-color: var(--dark-visited-link-color);
		--focus-link-color: var(--dark-focus-link-color);
		#message0 b {background-color: maroon !important;}
		ul#gcavlist li:first-child {background-color: maroon !important;}
	}
}

/* These three will override the system preference if JavaScript can change the body class. */

.light-theme {
	color-scheme: light;
	--dark-scheme: 0;
	--bgcolor: var(--light-bgcolor);
	--fgcolor: var(--light-fgcolor);
	--highlight-color: var(--light-highlight-color);
	--alt-bgcolor: var(--light-alt-bgcolor);
	--nav-bgcolor: var(--light-nav-bgcolor);
	--nav-fgcolor: var(--light-nav-fgcolor);
	--nav-border-color: var(--light-nav-border-color);
	--nav-highlight-color: var(--light-nav-highlight-color);
	--piece-bgcolor: var(--light-piece-bgcolor);
	--private-highlight: var(--light-private-highlight);
	--members-highlight: var(--light-members-highlight);
	--link-color: var(--light-link-color);
	--visited-link-color: var(--light-visited-link-color);
	--focus-link-color: var(--light-focus-link-color);
}

.print-theme {
	color-scheme: light;
	--dark-scheme: 0;
	--bgcolor: var(--print-bgcolor);
	--fgcolor: var(--print-fgcolor);
	--highlight-color: var(--print-highlight-color);
	--alt-bgcolor: var(--print-alt-bgcolor);
	--nav-bgcolor: var(--print-nav-bgcolor);
	--nav-fgcolor: var(--print-nav-fgcolor);
	--nav-border-color: var(--print-nav-border-color);
	--nav-highlight-color: var(--print-nav-highlight-color);
	--piece-bgcolor: var(--print-piece-bgcolor);
	--private-highlight: var(--print-private-highlight);
	--members-highlight: var(--print-members-highlight);
	--link-color: var(--print-link-color);
	--visited-link-color: var(--print-visited-link-color);
	--focus-link-color: var(--print-focus-link-color);
}

.dark-theme {
	color-scheme: dark;
	--bgcolor: var(--dark-bgcolor);
	--fgcolor: var(--dark-fgcolor);
	--highlight-color: var(--dark-highlight-color);
	--alt-bgcolor: var(--dark-alt-bgcolor);
	--nav-bgcolor: var(--dark-nav-bgcolor);
	--nav-fgcolor: var(--dark-nav-fgcolor);
	--nav-border-color: var(--dark-nav-border-color);
	--nav-highlight-color: var(--dark-nav-highlight-color);
	--piece-bgcolor: var(--dark-piece-bgcolor);
	--private-highlight: var(--dark-private-highlight);
	--members-highlight: var(--dark-members-highlight);
	--link-color: var(--dark-link-color);
	--visited-link-color: var(--dark-visited-link-color);
	--focus-link-color: var(--dark-focus-link-color);
	#message0 b {background-color: maroon !important;}
	ul#gcavlist li:first-child {background-color: maroon !important;}
}

.darker-theme {
	color-scheme: dark;
	--dark-scheme: 1;
	--bgcolor: var(--darker-bgcolor);
	--fgcolor: var(--darker-fgcolor);
	--highlight-color: var(--darker-highlight-color);
	--alt-bgcolor: var(--darker-alt-bgcolor);
	--nav-bgcolor: var(--darker-nav-bgcolor);
	--nav-fgcolor: var(--darker-nav-fgcolor);
	--nav-border-color: var(--darker-nav-border-color);
	--nav-highlight-color: var(--darker-nav-highlight-color);
	--piece-bgcolor: var(--darker-piece-bgcolor);
	--private-highlight: var(--darker-private-highlight);
	--members-highlight: var(--darker-members-highlight);
	--link-color: var(--darker-link-color);
	--visited-link-color: var(--darker-visited-link-color);
	--focus-link-color: var(--darker-focus-link-color);
	#message0 b {background-color: maroon !important;}
	ul#gcavlist li:first-child {background-color: maroon !important;}
}

/* These use the :has function of CSS to set the color scheme without using JavaScript.
** Since these will not work on older browsers, they cannot be combined with the classes
** without breaking the classes on browsers that do not support :has. To have higher
** precedence than the classes, they assign custom properties to body instead of :root.*/

body:has(#colorscheme [value="light"]:checked) {
	color-scheme: light;
	--bgcolor: var(--light-bgcolor);
	--fgcolor: var(--light-fgcolor);
	--highlight-color: var(--light-highlight-color);
	--alt-bgcolor: var(--light-alt-bgcolor);
	--nav-bgcolor: var(--light-nav-bgcolor);
	--nav-fgcolor: var(--light-nav-fgcolor);
	--nav-border-color: var(--light-nav-border-color);
	--nav-highlight-color: var(--light-nav-highlight-color);
	--piece-bgcolor: var(--light-piece-bgcolor);
	--private-highlight: var(--light-private-highlight);
	--members-highlight: var(--light-members-highlight);
	--link-color: var(--light-link-color);
	--visited-link-color: var(--light-visited-link-color);
	--focus-link-color: var(--light-focus-link-color);
}

body:has(#colorscheme [value="print"]:checked) {
	color-scheme: light;
	--bgcolor: var(--print-bgcolor);
	--fgcolor: var(--print-fgcolor);
	--highlight-color: var(--print-highlight-color);
	--alt-bgcolor: var(--print-alt-bgcolor);
	--nav-bgcolor: var(--print-nav-bgcolor);
	--nav-fgcolor: var(--print-nav-fgcolor);
	--nav-border-color: var(--print-nav-border-color);
	--nav-highlight-color: var(--print-nav-highlight-color);
	--piece-bgcolor: var(--print-piece-bgcolor);
	--private-highlight: var(--print-private-highlight);
	--members-highlight: var(--print-members-highlight);
	--link-color: var(--print-link-color);
	--visited-link-color: var(--print-visited-link-color);
	--focus-link-color: var(--print-focus-link-color);
}

body:has(#colorscheme [value="dark"]:checked) {
	color-scheme: dark;
	--dark-scheme: 1;
	--bgcolor: var(--dark-bgcolor);
	--fgcolor: var(--dark-fgcolor);
	--highlight-color: var(--dark-highlight-color);
	--alt-bgcolor: var(--dark-alt-bgcolor);
	--nav-bgcolor: var(--dark-nav-bgcolor);
	--nav-fgcolor: var(--dark-nav-fgcolor);
	--nav-border-color: var(--dark-nav-border-color);
	--nav-highlight-color: var(--dark-nav-highlight-color);
	--piece-bgcolor: var(--dark-piece-bgcolor);
	--private-highlight: var(--dark-private-highlight);
	--members-highlight: var(--dark-members-highlight);
	--link-color: var(--dark-link-color);
	--visited-link-color: var(--dark-visited-link-color);
	--focus-link-color: var(--dark-focus-link-color);
	#message0 b {background-color: maroon !important;}
	ul#gcavlist li:first-child {background-color: maroon !important;}
}

body:has(#colorscheme [value="darker"]:checked) {
	color-scheme: dark;
	--dark-scheme: 1;
	--bgcolor: var(--darker-bgcolor);
	--fgcolor: var(--darker-fgcolor);
	--highlight-color: var(--darker-highlight-color);
	--alt-bgcolor: var(--darker-alt-bgcolor);
	--nav-bgcolor: var(--darker-nav-bgcolor);
	--nav-fgcolor: var(--darker-nav-fgcolor);
	--nav-border-color: var(--darker-nav-border-color);
	--nav-highlight-color: var(--darker-nav-highlight-color);
	--piece-bgcolor: var(--darker-piece-bgcolor);
	--private-highlight: var(--darker-private-highlight);
	--members-highlight: var(--darker-members-highlight);
	--link-color: var(--darker-link-color);
	--visited-link-color: var(--darker-visited-link-color);
	--focus-link-color: var(--darker-focus-link-color);
	#message0 b {background-color: maroon !important;}
	ul#gcavlist li:first-child {background-color: maroon !important;}
}

/* Used specifically for printing, this uses !important on each item to allow it to
** overwrite any already specified value. */
@media print {
	body {
	color-scheme: light;
	--bgcolor: var(--print-bgcolor);
	--fgcolor: var(--print-fgcolor);
	--highlight-color: var(--print-highlight-color);
	--alt-bgcolor: var(--print-alt-bgcolor);
	--nav-bgcolor: var(--print-nav-bgcolor);
	--nav-fgcolor: var(--print-nav-fgcolor);
	--nav-border-color: var(--print-nav-border-color);
	--nav-highlight-color: var(--print-nav-highlight-color);
	--piece-bgcolor: var(--print-piece-bgcolor);
	--private-highlight: var(--print-private-highlight);
	--members-highlight: var(--print-members-highlight);
	--link-color: var(--print-link-color);
	--visited-link-color: var(--print-visited-link-color);
	--focus-link-color: var(--print-focus-link-color);
		a:link, a:visited {text-decoration: none !important};
	}
}