/*
 * Dark mode.
 *
 * This LIFTS the active palette rather than replacing it. A Teal site stays
 * teal; only the grounds and the text invert. That is what lets one file
 * serve all eight palettes — and it is why the rules redefine the preset
 * variables themselves rather than restyling components: everything in the
 * theme, patterns and user content alike, already reads from those variables.
 *
 * `--wp--preset--color--overlay` is deliberately NOT touched. It is near-white
 * in every palette because it sits on photographs and on the `dark` ground,
 * both of which stay dark here.
 *
 * .dev/build_theme.py reads this file and audits the result, so the numbers
 * below are measured, not chosen by eye.
 */

.docmed-dark {
	color-scheme: dark;

	--wp--preset--color--base: #11161c;
	--wp--preset--color--surface: #19212a;
	--wp--preset--color--contrast: #eef2f6;
	--wp--preset--color--muted: #a7b0ba;
	--wp--preset--color--divider: #2c3742;

	/* `dark` is the ground under the dimmed photographs. On a dark page it has
	   to go deeper than the page, or a band stops being a separate thing. */
	--wp--preset--color--dark: #090d11;
}

/*
 * The brand colours have to hold their own against a dark ground.
 *
 * Each palette's `primary` is chosen to clear AA against white; against
 * #11161c most of them do not. Mixing the palette's own `accent` toward white
 * lifts each one without flattening the differences between them.
 *
 * The slugs mixed here are load-bearing: a colour-mix on an undefined variable
 * makes the whole declaration invalid, so `primary` would stop resolving and
 * every button would render as bare text while every text check still passed.
 * build_theme.py refuses to build if this file names a slug the palette does
 * not define.
 *
 * `on-primary` turns over with the fill. A lifted `primary` is a light fill,
 * so a white label on it is unreadable; `on-primary` only ever appears paired
 * with a primary fill, so redefining it here reaches nothing else.
 */
.docmed-dark {
	--wp--preset--color--primary: color-mix(in srgb, var(--wp--preset--color--accent) 72%, white);
	--wp--preset--color--primary-deep: color-mix(in srgb, var(--wp--preset--color--accent) 56%, white);
	--wp--preset--color--on-primary: #11161c;
}

/* Photographs are a touch bright against a dark page. */
@media (prefers-reduced-motion: no-preference) {
	.docmed-dark img:not(.wp-block-cover__image-background):not([src$=".svg"]) {
		filter: brightness(0.94);
		transition: filter 0.2s ease;
	}
}

/* The toggle shows a sun once the page is dark (its moon is in style.css). */
.docmed-dark .wp-block-button.docmed-scheme-toggle > .wp-block-button__link::before {
	--docmed-scheme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9 17 7M7 17l-2.1 2.1' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/*
 * Form controls do not inherit the page's colours, so they have to be told.
 * Without this the appointment form stays a block of white in a dark page.
 */
.docmed-dark .docmed-field__control,
.docmed-dark .wp-block-search__input,
.docmed-dark .wp-block-post-comments-form input,
.docmed-dark .wp-block-post-comments-form textarea {
	background-color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--divider);
	color: var(--wp--preset--color--contrast);
}

/* A native date picker draws its own indicator in black. */
.docmed-dark input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1);
}

/* A shadow barely registers against a dark page: cards and the form box sit
   on the surface colour instead, with a hairline. */
.docmed-dark .is-style-docmed-card,
.docmed-dark .is-style-docmed-form-box,
.docmed-dark .docmed-post {
	background-color: var(--wp--preset--color--surface);
	box-shadow: 0 0 0 1px var(--wp--preset--color--divider);
}

/* The dialog and its backdrop. */
.docmed-dark .docmed-dialog {
	background-color: var(--wp--preset--color--surface);
}

/* The sticky header's shadow likewise. */
.docmed-dark .docmed-header.is-scrolled .docmed-header__main {
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.55);
}