/*
 * Dark mode.
 *
 * This LIFTS the active palette rather than replacing it. A Coral site stays
 * coral; only the grounds and the text invert. That is what lets one file
 * serve every palette — 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` and `--on-dark` are deliberately NOT touched.
 * They sit on photographs and on the black `dark` ground, both of which stay
 * dark here.
 */

.creative-agency-dark {
	color-scheme: dark;

	--wp--preset--color--base: #131417;
	--wp--preset--color--surface: #1b1c21;
	--wp--preset--color--contrast: #f2f2f3;
	--wp--preset--color--muted: #a9a9b0;
	--wp--preset--color--divider: #34363d;

	/* The services band and the footer are black in the design. On a dark page
	   they stay black, which is still a step deeper than the page. */
	--wp--preset--color--dark: #000000;

	/* A lifted `primary` is a light fill, so a white label on it would be
	   unreadable. `on-primary` only ever appears paired with `primary` (button
	   labels, the "Visit our work" band), so redefining it reaches nothing else. */
	--wp--preset--color--on-primary: #131417;
}

/*
 * The brand colours have to hold their own against a dark ground.
 *
 * Each palette's `primary` is chosen to clear AA against white; against
 * #131417 most of them do not. The lifted values are computed HERE, on the
 * root, and applied on BODY below. Doing both on one element would make a
 * variable depend on itself (`--secondary: color-mix(var(--secondary) …)`),
 * which is invalid and silently dropped — the colour then stops resolving and
 * every button or figure using it falls back to nothing.
 *
 * `primary` is mixed from the palette's `accent`, the brighter of its two
 * blues, so the lift keeps the design's own colour rather than a washed-out
 * version of the deeper one. The percentages are measured across every
 * palette by .dev/build_theme.py, which reads them from this file.
 */
.creative-agency-dark {
	--creative-agency-lift-primary: color-mix(in srgb, var(--wp--preset--color--accent) 78%, white);
	--creative-agency-lift-primary-deep: color-mix(in srgb, var(--wp--preset--color--accent) 62%, white);
	--creative-agency-lift-secondary: color-mix(in srgb, var(--wp--preset--color--secondary) 70%, white);
	--creative-agency-lift-tertiary: color-mix(in srgb, var(--wp--preset--color--tertiary) 80%, white);
}

.creative-agency-dark body {
	--wp--preset--color--primary: var(--creative-agency-lift-primary);
	--wp--preset--color--primary-deep: var(--creative-agency-lift-primary-deep);
	--wp--preset--color--secondary: var(--creative-agency-lift-secondary);
	--wp--preset--color--tertiary: var(--creative-agency-lift-tertiary);
}

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

/*
 * Form controls do not inherit the page's colours, so they have to be told.
 * Without this the contact form stays a block of white in a dark page.
 */
.creative-agency-dark .creative-agency-field__control,
.creative-agency-dark .wp-block-search__input,
.creative-agency-dark .wp-block-post-comments-form input:not([type="submit"]):not([type="checkbox"]),
.creative-agency-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);
}

/*
 * Cards and panels. A shadow barely registers against a dark page, so a blog
 * card is separated from its ground by a hairline instead.
 */
.creative-agency-dark .creative-agency-post-card {
	box-shadow: none;
	outline: 1px solid var(--wp--preset--color--divider);
}

/* Client logos are drawn in a mid grey that suits both grounds; on a dark page
   they come up a little so they do not sink. */
.creative-agency-dark .creative-agency-clients img {
	filter: brightness(1.25);
}