/*
 * Colour schemes. WordPress puts the member's choice on <html data-nm-color-scheme>:
 * light, dark or system (follow the device; also every visitor). Each palette colour becomes
 * light-dark(light, dark), so `color-scheme` picks the value: the dark values are theme.json's
 * settings.custom.dark. The light values are copied on :root before body redefines the
 * palette. Areas that are dark by design set `color-scheme: light` and keep their look in both
 * schemes. Without the attribute (wp-admin, the editor) nothing changes.
 */
:root {
	--nm-light-deep-teal: var(--wp--preset--color--deep-teal);
	--nm-light-studio-white: var(--wp--preset--color--studio-white);
	--nm-light-signal-red: var(--wp--preset--color--signal-red);
	--nm-light-workshop-teal: var(--wp--preset--color--workshop-teal);
	--nm-light-soft-brass: var(--wp--preset--color--soft-brass);
	--nm-light-white-surface: var(--wp--preset--color--white-surface);
	--nm-light-subtle-surface: var(--wp--preset--color--subtle-surface);
	--nm-light-muted-text: var(--wp--preset--color--muted-text);
	--nm-light-default-border: var(--wp--preset--color--default-border);
	--nm-light-primary-hover: var(--wp--preset--color--primary-hover);
	--nm-light-primary-pressed: var(--wp--preset--color--primary-pressed);
	--nm-light-secondary-hover: var(--wp--preset--color--secondary-hover);
	--nm-light-status-success: var(--wp--preset--color--status-success);
	--nm-light-status-warning: var(--wp--preset--color--status-warning);
	--nm-light-prose-ink: var(--wp--preset--color--prose-ink);
	--nm-light-deep-teal-pressed: var(--wp--preset--color--deep-teal-pressed);
	--nm-light-mistake-surface: var(--wp--preset--color--mistake-surface);
	--nm-light-mistake-border: var(--wp--preset--color--mistake-border);
	--nm-light-mistake-ink: var(--wp--preset--color--mistake-ink);
	--nm-light-brass-ink: var(--wp--preset--color--brass-ink);
	--nm-light-control-border: var(--wp--preset--color--control-border);
	--nm-light-placeholder: var(--wp--preset--color--placeholder);
	--nm-light-on-dark-muted: var(--wp--preset--color--on-dark-muted);
}

:root[data-nm-color-scheme="light"] {
	color-scheme: light;
}

:root[data-nm-color-scheme="dark"] {
	color-scheme: dark;
}

:root[data-nm-color-scheme="system"] {
	color-scheme: light dark;
}

:root[data-nm-color-scheme] body {
	--wp--preset--color--deep-teal: light-dark(var(--nm-light-deep-teal), var(--wp--custom--dark--deep-teal));
	--wp--preset--color--studio-white: light-dark(var(--nm-light-studio-white), var(--wp--custom--dark--studio-white));
	--wp--preset--color--signal-red: light-dark(var(--nm-light-signal-red), var(--wp--custom--dark--signal-red));
	--wp--preset--color--workshop-teal: light-dark(var(--nm-light-workshop-teal), var(--wp--custom--dark--workshop-teal));
	--wp--preset--color--soft-brass: light-dark(var(--nm-light-soft-brass), var(--wp--custom--dark--soft-brass));
	--wp--preset--color--white-surface: light-dark(var(--nm-light-white-surface), var(--wp--custom--dark--white-surface));
	--wp--preset--color--subtle-surface: light-dark(var(--nm-light-subtle-surface), var(--wp--custom--dark--subtle-surface));
	--wp--preset--color--muted-text: light-dark(var(--nm-light-muted-text), var(--wp--custom--dark--muted-text));
	--wp--preset--color--default-border: light-dark(var(--nm-light-default-border), var(--wp--custom--dark--default-border));
	--wp--preset--color--primary-hover: light-dark(var(--nm-light-primary-hover), var(--wp--custom--dark--primary-hover));
	--wp--preset--color--primary-pressed: light-dark(var(--nm-light-primary-pressed), var(--wp--custom--dark--primary-pressed));
	--wp--preset--color--secondary-hover: light-dark(var(--nm-light-secondary-hover), var(--wp--custom--dark--secondary-hover));
	--wp--preset--color--status-success: light-dark(var(--nm-light-status-success), var(--wp--custom--dark--status-success));
	--wp--preset--color--status-warning: light-dark(var(--nm-light-status-warning), var(--wp--custom--dark--status-warning));
	--wp--preset--color--prose-ink: light-dark(var(--nm-light-prose-ink), var(--wp--custom--dark--prose-ink));
	--wp--preset--color--deep-teal-pressed: light-dark(var(--nm-light-deep-teal-pressed), var(--wp--custom--dark--deep-teal-pressed));
	--wp--preset--color--mistake-surface: light-dark(var(--nm-light-mistake-surface), var(--wp--custom--dark--mistake-surface));
	--wp--preset--color--mistake-border: light-dark(var(--nm-light-mistake-border), var(--wp--custom--dark--mistake-border));
	--wp--preset--color--mistake-ink: light-dark(var(--nm-light-mistake-ink), var(--wp--custom--dark--mistake-ink));
	--wp--preset--color--brass-ink: light-dark(var(--nm-light-brass-ink), var(--wp--custom--dark--brass-ink));
	--wp--preset--color--control-border: light-dark(var(--nm-light-control-border), var(--wp--custom--dark--control-border));
	--wp--preset--color--placeholder: light-dark(var(--nm-light-placeholder), var(--wp--custom--dark--placeholder));
	--wp--preset--color--on-dark-muted: light-dark(var(--nm-light-on-dark-muted), var(--wp--custom--dark--on-dark-muted));
	/* Aliases resolve where they are declared, so :root's would stay light: declare them again. */
	--nm-color-canvas: var(--wp--preset--color--studio-white);
	--nm-color-text: var(--wp--preset--color--deep-teal);
	--nm-color-link: var(--wp--preset--color--workshop-teal);
	--nm-color-action: var(--wp--preset--color--signal-red);
	--nm-color-border: var(--wp--preset--color--default-border);
	--nm-color-accent-text: var(--wp--preset--color--primary-hover);
}

/*
 * Dark by design: these keep their deep teal look in both schemes. Overlays on photos and video
 * stay dark too, so their light text stays readable on the image. Core prints the navigation's
 * overlay colour (has-deep-teal-background-color) on its container even while the menu is closed,
 * so only the open overlay counts; otherwise the desktop menu would take light colours in a dark
 * header.
 */
:root[data-nm-color-scheme] :where(
	.nm-site-footer,
	.wp-block-group.is-style-nm-dark,
	.nm-dark-band,
	.has-deep-teal-background-color:not(.wp-block-navigation__responsive-container),
	.wp-block-navigation__responsive-container.is-menu-open,
	.nm-category-card--featured,
	.nm-home-video,
	.nm-project-video__panel
) {
	color-scheme: light;
}

/*
 * Sheets and dialogs sit on the page: in the dark scheme they take the raised surface and a
 * border, because a shadow does not show on a dark page.
 */
:root[data-nm-color-scheme] :where(
	.nm-sheet
) {
	border-top: 1px solid var(--wp--preset--color--default-border);
	background: light-dark(var(--wp--preset--color--studio-white), var(--wp--preset--color--white-surface));
}

/*
 * Logo: the dark-mode logo (Customizer → Site Identity, otherwise the theme's own
 * assets/images/logo-dark.svg). A logo the dark copy could not be added to sits on a light badge.
 * "Dark" is the dark choice, or "system" on a device in dark mode.
 */
.wp-block-site-logo .nm-logo-dark {
	display: none;
}

:root[data-nm-color-scheme="dark"] .wp-block-site-logo.has-dark-logo .nm-logo-light {
	display: none;
}

:root[data-nm-color-scheme="dark"] .wp-block-site-logo.has-dark-logo .nm-logo-dark {
	display: block;
}

:root[data-nm-color-scheme="dark"] .wp-block-site-logo:not(.has-dark-logo) img {
	box-sizing: content-box;
	padding: 4px 8px;
	border-radius: var(--nm-radius-button, 6px);
	background-color: var(--nm-light-studio-white);
}

@media (prefers-color-scheme: dark) {
	:root[data-nm-color-scheme="system"] .wp-block-site-logo.has-dark-logo .nm-logo-light {
		display: none;
	}

	:root[data-nm-color-scheme="system"] .wp-block-site-logo.has-dark-logo .nm-logo-dark {
		display: block;
	}

	:root[data-nm-color-scheme="system"] .wp-block-site-logo:not(.has-dark-logo) img {
		box-sizing: content-box;
		padding: 4px 8px;
		border-radius: var(--nm-radius-button, 6px);
		background-color: var(--nm-light-studio-white);
	}
}

/*
 * Placeholder images: the dark copy in the dark scheme. `content` swaps the image without new
 * markup, so pattern content already saved in the database follows too.
 */
:root[data-nm-color-scheme="dark"] img[src$="/placeholders/project-generic.svg"] {
	content: url("../images/placeholders/project-generic-dark.svg");
}

:root[data-nm-color-scheme="dark"] img[src$="/placeholders/download-generic.svg"] {
	content: url("../images/placeholders/download-generic-dark.svg");
}

:root[data-nm-color-scheme="dark"] img[src$="/placeholders/home-hero-orrery.svg"] {
	content: url("../images/placeholders/home-hero-orrery-dark.svg");
}

:root[data-nm-color-scheme="dark"] img[src$="/placeholders/about-profile.svg"] {
	content: url("../images/placeholders/about-profile-dark.svg");
}

:root[data-nm-color-scheme="dark"] img[src$="/placeholders/about-workshop.svg"] {
	content: url("../images/placeholders/about-workshop-dark.svg");
}

@media (prefers-color-scheme: dark) {
	:root[data-nm-color-scheme="system"] img[src$="/placeholders/project-generic.svg"] {
		content: url("../images/placeholders/project-generic-dark.svg");
	}

	:root[data-nm-color-scheme="system"] img[src$="/placeholders/download-generic.svg"] {
		content: url("../images/placeholders/download-generic-dark.svg");
	}

	:root[data-nm-color-scheme="system"] img[src$="/placeholders/home-hero-orrery.svg"] {
		content: url("../images/placeholders/home-hero-orrery-dark.svg");
	}

	:root[data-nm-color-scheme="system"] img[src$="/placeholders/about-profile.svg"] {
		content: url("../images/placeholders/about-profile-dark.svg");
	}

	:root[data-nm-color-scheme="system"] img[src$="/placeholders/about-workshop.svg"] {
		content: url("../images/placeholders/about-workshop-dark.svg");
	}
}