/*
 * Dark mode.
 *
 * This LIFTS the active palette rather than replacing it. A South site in
 * Terracotta stays terracotta; only the grounds and the text turn over. That
 * is what lets one file serve all eight palettes, and it is why these rules
 * redefine the preset variables themselves rather than restyling components:
 * everything in the theme, patterns and user content alike, reads them.
 *
 * `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.
 *
 * `primary` is a FILL (buttons, tags, the search tab, pagination). Against a
 * #15161a page four of the eight palettes' fills measured under 3:1 (Charcoal
 * 1.89:1): a button that does not read as a button. So the fill is lifted from
 * the palette's `accent` toward white and its label, `on-primary`, turns dark
 * with it. `on-primary` only ever appears on `primary`, so redefining it here
 * reaches nothing else. The audit holds the fill at 3:1 against the page and
 * the label at 4.5:1 on the fill, in every palette.
 *
 * `primary-text` is brown TEXT on the page ground. Against #15161a the light
 * palettes' readable browns fail, so it is lifted from the palette's own
 * decorative `accent` toward white. 62% is measured, not chosen by eye: the
 * audit holds it at 4.5:1 on both `base` and `surface` here for every palette.
 * build_theme.py reads the percentage from THIS file and refuses to build if
 * it names a slug the palette does not define (Unioncorp shipped dark mode
 * mixing a slug its palette lacked; every button went transparent).
 */

.south-dark {
	color-scheme: dark;
	--wp--preset--color--base: #15161a;
	--wp--preset--color--surface: #1c1e23;
	--wp--preset--color--panel: #202227;
	--wp--preset--color--contrast: #f2f1ef;
	--wp--preset--color--copy: #b9b6b1;
	--wp--preset--color--muted: #aaa7a2;
	--wp--preset--color--divider: #34363d;
	--wp--preset--color--dark: #0b0c0e;
	--wp--preset--color--primary-text: color-mix(in srgb, var(--wp--preset--color--accent) 62%, white);
	--wp--preset--color--primary: color-mix(in srgb, var(--wp--preset--color--accent) 80%, white);
	--wp--preset--color--on-primary: #15161a;
}

/* Photographs are a touch bright against a dark page. */
.south-dark img:not(.wp-block-cover__image-background) {
	filter: brightness(0.92);
}

/*
 * The toggle. A core/button with a class, so it can be dropped anywhere in the
 * editor; inc/scheme.php gives it button semantics and a label.
 */
.wp-block-button.south-scheme-toggle > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-width: 0;
	height: 44px;
	padding: 0;
	border: 0;
	background-color: transparent;
	color: var(--wp--preset--color--overlay);
	line-height: 1;
}

.wp-block-button.south-scheme-toggle > .wp-block-button__link:hover,
.wp-block-button.south-scheme-toggle > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

.wp-block-button.south-scheme-toggle > .wp-block-button__link::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--south-scheme-icon) center / contain no-repeat;
	mask: var(--south-scheme-icon) center / contain no-repeat;
	--south-scheme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z'/%3E%3C/svg%3E");
}

.south-dark .wp-block-button.south-scheme-toggle > .wp-block-button__link::before {
	--south-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 page colours, so they are told. */
.south-dark .south-field__control,
.south-dark .wp-block-search__input,
.south-dark .wp-block-post-comments-form input:not([type="submit"]),
.south-dark .wp-block-post-comments-form textarea,
.south-dark .south-search select,
.south-dark .south-search input[type="search"],
.south-dark .south-search input[type="text"] {
	background-color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--divider);
	color: var(--wp--preset--color--contrast);
}

/* A card on a dark page is separated by its border; the hover shadow deepens. */
.south-dark .south-card:hover,
.south-dark .south-card:focus-within {
	box-shadow: 0 0 50px rgb(0 0 0 / 0.6);
}

.south-dark .south-search__box {
	box-shadow: 0 5px 30px rgb(0 0 0 / 0.5);
}