/*
 * Dark mode: follows the visitor's OS/browser color-scheme preference by
 * default, and can be forced either way via the toggle button (adds
 * html.theme-dark or html.theme-light, set in inc/class-init.php).
 *
 * Overrides the theme.json palette's CSS custom properties, which every
 * template/pattern already consumes via has-*-color / has-*-background-color
 * utility classes, so this cascades site-wide without per-template edits.
 */

/* -- Auto (system preference), unless explicitly overridden by the toggle -- */
@media (prefers-color-scheme: dark) {
	:root:not(.theme-light):not(.theme-dark) {
		--wp--preset--color--base: #14171c !important;
		--wp--preset--color--base-2: #1e2229 !important;
		--wp--preset--color--contrast: #f5f6f8 !important;
		--wp--preset--color--contrast-2: #a7afb9 !important;
		--wp--preset--color--contrast-3: #e8e8e8 !important;
	}

	/*
	 * Cover blocks (post headers/hero cards) always render text over a
	 * photo with a dark gradient scrim, in both light and dark site mode.
	 * Keep their base/base-2/contrast values at the original light-mode
	 * palette so that light-on-dark-overlay text stays legible.
	 */
	:root:not(.theme-light):not(.theme-dark) .wp-block-cover {
		--wp--preset--color--base: #ffffff !important;
		--wp--preset--color--base-2: #F7F8FE !important;
		--wp--preset--color--contrast: #283749 !important;
		--wp--preset--color--contrast-2: #939BA4 !important;
		--wp--preset--color--contrast-3: #303030 !important;
	}

	/*
	 * Plain links use the brand accent (#3858E9) as text color, which only
	 * measures ~3.2:1 against the dark background above (WCAG AA needs
	 * 4.5:1 for text). Lighten it for reading text specifically; leave the
	 * --accent variable itself untouched so button/pill backgrounds (white
	 * text on accent, ~5.6:1) are unaffected.
	 */
	:root:not(.theme-light):not(.theme-dark) a:where(:not(.wp-element-button)):not(.wp-block-cover *),
	:root:not(.theme-light):not(.theme-dark) .has-accent-color:not(.wp-block-cover *) {
		color: #92A3F3 !important;
	}

	/*
	 * Same accent-as-decoration issue as the links above: image/embed
	 * captions' bottom border and the has-accent-border-color utility both
	 * use the brand accent at only ~3.2:1 (passes WCAG's 3:1 floor for
	 * non-text UI, but is faint). Punch it up to match the link color.
	 */
	:root:not(.theme-light):not(.theme-dark) :where(.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption):not(.wp-block-cover *),
	:root:not(.theme-light):not(.theme-dark) .has-accent-border-color:not(.wp-block-cover *) {
		border-color: #92A3F3 !important;
	}
}

/* -- Forced dark via toggle, regardless of system preference -- */
html.theme-dark {
	--wp--preset--color--base: #14171c !important;
	--wp--preset--color--base-2: #1e2229 !important;
	--wp--preset--color--contrast: #f5f6f8 !important;
	--wp--preset--color--contrast-2: #a7afb9 !important;
	--wp--preset--color--contrast-3: #e8e8e8 !important;
}

html.theme-dark .wp-block-cover {
	--wp--preset--color--base: #ffffff !important;
	--wp--preset--color--base-2: #F7F8FE !important;
	--wp--preset--color--contrast: #283749 !important;
	--wp--preset--color--contrast-2: #939BA4 !important;
	--wp--preset--color--contrast-3: #303030 !important;
}

html.theme-dark a:where(:not(.wp-element-button)):not(.wp-block-cover *),
html.theme-dark .has-accent-color:not(.wp-block-cover *) {
	color: #92A3F3 !important;
}

html.theme-dark :where(.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption):not(.wp-block-cover *),
html.theme-dark .has-accent-border-color:not(.wp-block-cover *) {
	border-color: #92A3F3 !important;
}

/* -- Manual toggle button -- */
.theme-toggle {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 999;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--contrast-2);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.theme-toggle svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
	display: none;
}

.theme-toggle[data-effective="dark"] .icon-sun,
.theme-toggle[data-effective="light"] .icon-moon {
	display: block;
}