/* Colour theming. Loaded after style.css so it wins on shared selectors. */

:root {
	color-scheme: light;
	--bg: #ffffff;
	--fg: #000000;
	--link: #0000ee;
	--visited: #551a8b;
	--border: #cccccc;
	--btn-bg: #f2f2f2;
	--img-filter: none;
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--bg: #16181c;
		--fg: #d4d4d4;
		--link: #7ab7ff;
		--visited: #c8a2e8;
		--border: #3a3f45;
		--btn-bg: #23272d;
		--img-filter: invert(1) hue-rotate(180deg);
	}
}

/* Explicit choice overrides the system preference in both directions. */
:root[data-theme="light"] {
	color-scheme: light;
	--bg: #ffffff;
	--fg: #000000;
	--link: #0000ee;
	--visited: #551a8b;
	--border: #cccccc;
	--btn-bg: #f2f2f2;
	--img-filter: none;
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--bg: #16181c;
	--fg: #d4d4d4;
	--link: #7ab7ff;
	--visited: #c8a2e8;
	--border: #3a3f45;
	--btn-bg: #23272d;
	--img-filter: invert(1) hue-rotate(180deg);
}

html, body {
	background-color: var(--bg);
	color: var(--fg);
}

a:link, a.white:link {
	color: var(--link);
}

a:visited, a.white:visited {
	color: var(--visited);
}

a:hover, a:link:hover, a.white:hover, a.white:link:hover {
	color: var(--link);
}

a:visited:hover, a.white:visited:hover {
	color: var(--visited);
}

/* Black-on-white PNGs would show up as glaring white blocks in dark mode. */
img[src$="email.png"] {
	filter: var(--img-filter);
}

.theme-toggle {
	position: fixed;
	top: 8px;
	right: 8px;
	z-index: 999;
	padding: 4px 8px;
	font: 9pt/1.4 Verdana, Arial, sans-serif;
	color: var(--fg);
	background-color: var(--btn-bg);
	border: 1px solid var(--border);
	border-radius: 4px;
	cursor: pointer;
	opacity: 0.7;
}

.theme-toggle:hover, .theme-toggle:focus {
	opacity: 1;
}

@media print {
	.theme-toggle { display: none; }
}