/* The dark stylesheet is the only place we set custom colors besides
 * border colors for inline text. Make sure the perceptual contrast
 * stays within the ideal APCA ranges, not lower and preferably not
 * higher either. */
@media (prefers-color-scheme: dark) {
	button,
	html,
	input {
		/* Pure white on black causes halation.
		 * "background" is short for a bunch of unnecessary CSS rules
		 * background-color is all I need.
		 * This is the brightest background that still achieves an APCA
		 * contrast of 90 Lc.*/
		background-color: #191919;
		/* Dimming the default text color is not the same as reducing screen
		 * brightness, since other colors in this stylesheet have brighter
		 * red and blue channels than the default text. */
		color: #e6e6e6;
	}

	mark {
		color: #000;
		background-color: #eee7b2;
	}

	/* Only color <a> if it's a link; if href is empty, let it be. */
	a:link {
		color: #eee7b2;
	}

	a:visited {
		color: #ffdaff;
	}

	/* For users who request less contrast, target ACPA Lc of -85 to -86 */
	@media (prefers-contrast: less) {
		html {
			background-color: #333;
		}
	}

	/* Small text needs higher contrast. */
	@media not (prefers-contrast: less) {
		sup a:link:not(:active) {
			color: #feb;
		}

		sup a:visited:not(:active) {
			color: #ffe6ff;
		}
	}

	/* For users who request more contrast, target ACPA Lc near -96 */
	@media (prefers-contrast: more) {
		html {
			background-color: #111;
			color: #eee;
		}

		a:link {
			color: #feb;
		}
		a:visited {
			color: #ffe6ff;
		}
	}

	/* Specified last so it overrides :visited. I chose this color because
	 * it's dimmer, so it's noticeable even without color vision. */
	a:active {
		color: #f83;
	}
}