/*
 * DNews dark mode. Every dark value lives in theme.json settings.custom.dark
 * (--wp--custom--dark--*); this file maps them onto the presets. The
 * same declarations appear twice, as the whole dark mechanism:
 *   1. the visitor's OS preference, unless the page was forced to light;
 *   2. an explicit data-theme="dark" (toggle, saved choice, ?dnews-theme).
 * Both blocks beat WordPress's :root preset output on specificity, so load
 * order does not matter. Nothing here applies in light mode. The header,
 * footer and compact header stay dark in both modes (ink, black, charcoal).
 */
:root {
	color-scheme: light dark;
}

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

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

	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--wp--preset--color--surface: var(--wp--custom--dark--surface);
		--wp--preset--color--surface-muted: var(--wp--custom--dark--surface-muted);
		--wp--preset--color--skeleton: var(--wp--custom--dark--skeleton);
		--wp--preset--color--line: var(--wp--custom--dark--line);
		--wp--preset--color--line-strong: var(--wp--custom--dark--line-strong);
		--wp--preset--color--heading: var(--wp--custom--dark--heading);
		--wp--preset--color--body: var(--wp--custom--dark--body);
		--wp--preset--color--article: var(--wp--custom--dark--article);
		--wp--preset--color--ui: var(--wp--custom--dark--ui);
		--wp--preset--color--muted-text: var(--wp--custom--dark--muted-text);
		--wp--preset--color--accent-text: var(--wp--custom--dark--accent-text);
		--wp--preset--color--tag-ink: var(--wp--custom--dark--tag-ink);
		--wp--preset--color--on-chrome: var(--wp--custom--dark--on-chrome);
		--wp--preset--color--text-strong: var(--wp--custom--dark--text-strong);
		--wp--preset--color--accent-fill: var(--wp--custom--dark--accent-fill);
		--wp--preset--color--button-bg: var(--wp--custom--dark--button-bg);
		--wp--preset--color--button-text: var(--wp--custom--dark--button-text);
		--wp--preset--color--button-hover-bg: var(--wp--custom--dark--button-hover-bg);
		--wp--preset--color--button-hover-text: var(--wp--custom--dark--button-hover-text);
		--wp--preset--color--rank-bg: var(--wp--custom--dark--rank-bg);
		--wp--preset--color--rank-decor: var(--wp--custom--dark--rank-decor);
		--wp--preset--color--input-border: var(--wp--custom--dark--input-border);
		--wp--preset--shadow--menu: var(--wp--custom--dark--shadow-menu);
		--wp--preset--shadow--popup: var(--wp--custom--dark--shadow-popup);
		--wp--preset--shadow--control: var(--wp--custom--dark--shadow-control);
		--dnews-fb-ring: 0 0 0 1px var(--wp--custom--dark--line-strong);
		--dnews-fb-radius: var(--wp--custom--radius--image);
		--dnews-image-backing: var(--wp--custom--dark--on-chrome);
		--dnews-image-backing-pad: var(--wp--preset--spacing--space-2);
		--dnews-image-backing-radius: var(--wp--custom--radius--image);
	}

	/* A hairline separates dark art from the dark page. */
	:root:not([data-theme="light"]) :where(.dnews-thumb, .dnews-card__thumb, .dnews-popular__thumb) {
		outline: 1px solid var(--wp--custom--dark--thumb-outline);
		outline-offset: -1px;
	}
}

/* Print stays light: the data-theme rules apply to screens only. */
@media screen {

	:root[data-theme="dark"] {
		color-scheme: dark;
		--wp--preset--color--surface: var(--wp--custom--dark--surface);
		--wp--preset--color--surface-muted: var(--wp--custom--dark--surface-muted);
		--wp--preset--color--skeleton: var(--wp--custom--dark--skeleton);
		--wp--preset--color--line: var(--wp--custom--dark--line);
		--wp--preset--color--line-strong: var(--wp--custom--dark--line-strong);
		--wp--preset--color--heading: var(--wp--custom--dark--heading);
		--wp--preset--color--body: var(--wp--custom--dark--body);
		--wp--preset--color--article: var(--wp--custom--dark--article);
		--wp--preset--color--ui: var(--wp--custom--dark--ui);
		--wp--preset--color--muted-text: var(--wp--custom--dark--muted-text);
		--wp--preset--color--accent-text: var(--wp--custom--dark--accent-text);
		--wp--preset--color--tag-ink: var(--wp--custom--dark--tag-ink);
		--wp--preset--color--on-chrome: var(--wp--custom--dark--on-chrome);
		--wp--preset--color--text-strong: var(--wp--custom--dark--text-strong);
		--wp--preset--color--accent-fill: var(--wp--custom--dark--accent-fill);
		--wp--preset--color--button-bg: var(--wp--custom--dark--button-bg);
		--wp--preset--color--button-text: var(--wp--custom--dark--button-text);
		--wp--preset--color--button-hover-bg: var(--wp--custom--dark--button-hover-bg);
		--wp--preset--color--button-hover-text: var(--wp--custom--dark--button-hover-text);
		--wp--preset--color--rank-bg: var(--wp--custom--dark--rank-bg);
		--wp--preset--color--rank-decor: var(--wp--custom--dark--rank-decor);
		--wp--preset--color--input-border: var(--wp--custom--dark--input-border);
		--wp--preset--shadow--menu: var(--wp--custom--dark--shadow-menu);
		--wp--preset--shadow--popup: var(--wp--custom--dark--shadow-popup);
		--wp--preset--shadow--control: var(--wp--custom--dark--shadow-control);
		--dnews-fb-ring: 0 0 0 1px var(--wp--custom--dark--line-strong);
		--dnews-fb-radius: var(--wp--custom--radius--image);
		--dnews-image-backing: var(--wp--custom--dark--on-chrome);
		--dnews-image-backing-pad: var(--wp--preset--spacing--space-2);
		--dnews-image-backing-radius: var(--wp--custom--radius--image);
	}

	:root[data-theme="dark"] :where(.dnews-thumb, .dnews-card__thumb, .dnews-popular__thumb) {
		outline: 1px solid var(--wp--custom--dark--thumb-outline);
		outline-offset: -1px;
	}

	/*
	 * Legacy tables carry border="1", which the browser paints light grey on the
	 * dark page; the drawer scrim is heavier so the panel edge still reads.
	 */
	@media screen and (prefers-color-scheme: dark) {

		:root:not([data-theme="light"]) .wp-block-post-content table[border] {
			border-color: var(--wp--custom--dark--line-strong);
		}

		:root:not([data-theme="light"])
		.wp-block-navigation__responsive-container.is-menu-open.disable-default-overlay {
			background: rgb(0 0 0 / 0.8);
		}
	}

	:root[data-theme="dark"] .wp-block-post-content table[border] {
		border-color: var(--wp--custom--dark--line-strong);
	}

	:root[data-theme="dark"]
	.wp-block-navigation__responsive-container.is-menu-open.disable-default-overlay {
		background: rgb(0 0 0 / 0.8);
	}

	/* A theme switch repaints at once: no color transitions during the change. */
	:root[data-theme-switching] *,
	:root[data-theme-switching] *::before,
	:root[data-theme-switching] *::after {
		transition: none !important;
	}
}

/*
 * Safety net for five legacy posts with literal dark inline text colors
 * (scripts/fix-legacy-inline-colors.php removes them from the content). Only
 * those four exact values inside post content, so other colors stay.
 */
@media screen and (prefers-color-scheme: dark) {

	:root:not([data-theme="light"]) .wp-block-post-content :is(
		[style*="color: #212121"],
		[style*="color: #333333"],
		[style*="color: #1c1e29"],
		[style*="color: #7b7b7b"]
	) {
		color: inherit !important;
	}
}

@media screen {

	:root[data-theme="dark"] .wp-block-post-content :is(
		[style*="color: #212121"],
		[style*="color: #333333"],
		[style*="color: #1c1e29"],
		[style*="color: #7b7b7b"]
	) {
		color: inherit !important;
	}
}