/*
 * Celestine -- automatic dark mode.
 *
 * The theme ships a single palette. Rather than duplicating every style rule,
 * this file repaints the six colour presets that theme.json emits, so anything
 * referencing a preset slug follows the visitor's system preference. Style
 * variations set --celestine-dark-* so the dark remap follows the active set.
 *
 * The doubled :root selector raises specificity to (0,2,0) so these values win
 * over the global-styles block regardless of stylesheet order. This file is
 * enqueued on the front end only -- the editor keeps the canonical light
 * palette so colour choices in Styles stay legible.
 *
 * Contrast ratios against Paper (light) / Ink (dark) grounds:
 *   ink on base     16.6 : 1  |  15.9 : 1
 *   muted on base    6.5 : 1  |   7.2 : 1
 *   accent on base   6.2 : 1  |   5.5 : 1
 * All exceed the WCAG 2.1 AA threshold of 4.5:1 for body text. The hairline
 * rule is decorative and sits at 2.26 : 1 / 2.05 : 1 -- quiet, but not invisible.
 * Run `npm run lint:contrast` to verify these against what actually ships.
 */

@media (prefers-color-scheme: dark) {

	:root:root {
		--wp--preset--color--base: var(--celestine-dark-base, #121211);
		--wp--preset--color--surface: var(--celestine-dark-surface, #1C1B18);
		--wp--preset--color--ink: var(--celestine-dark-ink, #EDECE8);
		--wp--preset--color--muted: var(--celestine-dark-muted, #A3A09A);
		--wp--preset--color--accent: var(--celestine-dark-accent, #D07060);
		--wp--preset--color--rule: var(--celestine-dark-rule, #4A4842);

		/* Let the browser paint form controls, scrollbars and
		   spellcheck underlines to match. */
		color-scheme: dark;
	}

	/* Photographic content is left untouched, but a logo strip sitting on a
	   dark ground needs its marks lightened rather than darkened. */
	.is-style-celestine-logo img {
		filter: grayscale(100%) invert(100%);
	}

	.is-style-celestine-logo:hover img,
	.is-style-celestine-logo:focus-within img {
		filter: grayscale(0%);
	}
}