/*
 * Overrides the same custom properties theme.json generates from the light
 * palette (--wp--preset--color--*), so every block/utility class already
 * using them (has-primary-color, has-background-background-color, etc.)
 * and every inline var() reference in this theme's CSS picks up the dark
 * values automatically — nothing else needs to change per-component.
 *
 * Two ways dark mode activates:
 *  1. System preference, unless the visitor has explicitly chosen light
 *     mode (a future toggle sets [data-theme="light"] on the root element).
 *  2. An explicit choice via the toggle in the header (patterns/header.php)
 *     — its logic is in js/theme-toggle.js, and a tiny inline script in
 *     wp_head (functions.php) applies any stored choice before first paint
 *     to avoid a flash of the wrong theme.
 *
 * Warm palette (revised from an earlier all-blue version): a muted navy
 * background, a bright warm cream for text (AAA, ~9.6:1), a dimmer warm
 * beige for secondary/large-text/UI elements (AA, ~6.6:1), a blue-grey for
 * decoration only (~2:1), and a terracotta accent (~4.2:1) used for hover
 * states rather than as a fifth palette role.
 */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--wp--preset--color--primary: #F3E9DD;
		--wp--preset--color--secondary: #D2C1B6;
		--wp--preset--color--tertiary: #456882;
		--wp--preset--color--background: #1B3C53;
		--wp--preset--color--accent: #D08C72;
		--mariadb-card-shadow-color: rgba(208, 140, 114, 0.35);
		--mariadb-card-bg: color-mix(in srgb, var(--wp--preset--color--tertiary) 40%, var(--wp--preset--color--background) 60%);
		--mariadb-band-light: #2B5470;
	}
}

:root[data-theme="dark"] {
	--wp--preset--color--primary: #F3E9DD;
	--wp--preset--color--secondary: #D2C1B6;
	--wp--preset--color--tertiary: #456882;
	--wp--preset--color--background: #1B3C53;
	--wp--preset--color--accent: #D08C72;
	--mariadb-card-bg: color-mix(in srgb, var(--wp--preset--color--tertiary) 40%, var(--wp--preset--color--background) 60%);
	--mariadb-band-light: #2B5470;
}

/* Accent hover rules live in style.css (mode-agnostic). */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .mariadb-btn-accent {
		border-color: var(--wp--preset--color--secondary);
	}

	:root:not([data-theme="light"]) .mariadb-poll .wpforms-container .wpforms-submit {
		border-color: var(--wp--preset--color--secondary) !important;
	}
}

:root[data-theme="dark"] .mariadb-btn-accent {
	border-color: var(--wp--preset--color--secondary);
}

:root[data-theme="dark"] .mariadb-poll .wpforms-container .wpforms-submit {
	border-color: var(--wp--preset--color--secondary) !important;
}

/* Homepage hero: radial glow behind the heading/buttons; Get involved: tertiary band instead of light-mode beige.
   !important beats the blocks' inline gradient and preset color classes. */
:root {
	--mariadb-hero-glow: radial-gradient(ellipse 70% 90% at 50% 45%, #3D6684 0%, var(--mariadb-band-light) 45%, var(--wp--preset--color--background) 100%);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .mariadb-hero {
		background: var(--mariadb-hero-glow) !important;
		color: var(--wp--preset--color--primary) !important;
	}

	:root:not([data-theme="light"]) .mariadb-get-involved {
		background: var(--wp--preset--color--tertiary) !important;
		color: var(--wp--preset--color--primary) !important;
	}

	:root:not([data-theme="light"]) .mariadb-hero-buttons .wp-block-button.is-style-outline .wp-block-button__link,
	:root:not([data-theme="light"]) .mariadb-hero-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover {
		color: var(--wp--preset--color--primary) !important;
	}

	/* Announcement bar above the header. */
	:root:not([data-theme="light"]) .mariadb-announcement {
		background-color: var(--mariadb-band-light) !important;
	}
}

:root[data-theme="dark"] .mariadb-announcement {
	background-color: var(--mariadb-band-light) !important;
}

:root[data-theme="dark"] .mariadb-hero {
	background: var(--mariadb-hero-glow) !important;
	color: var(--wp--preset--color--primary) !important;
}

:root[data-theme="dark"] .mariadb-get-involved {
	background: var(--wp--preset--color--tertiary) !important;
	color: var(--wp--preset--color--primary) !important;
}

:root[data-theme="dark"] .mariadb-hero-buttons .wp-block-button.is-style-outline .wp-block-button__link,
:root[data-theme="dark"] .mariadb-hero-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover {
	color: var(--wp--preset--color--primary) !important;
}

/* Content images with transparency (graphs, diagrams) were drawn for a light page: give them
   a light backdrop, which only shows through transparent areas. Opt out per image with the
   "mariadb-image-keep-dark" class; emoji and the sponsor lanes (own white backdrop) are skipped. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .wp-block-post-content img:not(.emoji, .mariadb-image-keep-dark, :where(.mariadb-image-keep-dark *, .mariadb-sponsors-marquee *, .mariadb-promo-banner *)) {
		background-color: #F7F8F0;
	}
}

:root[data-theme="dark"] .wp-block-post-content img:not(.emoji, .mariadb-image-keep-dark, :where(.mariadb-image-keep-dark *, .mariadb-sponsors-marquee *, .mariadb-promo-banner *)) {
	background-color: #F7F8F0;
}

/* Promo card, "auto" variant: the light card on the dark page. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .mariadb-promo-banner--auto .mariadb-promo-banner-light {
		display: block;
	}
	:root:not([data-theme="light"]) .mariadb-promo-banner--auto .mariadb-promo-banner-dark {
		display: none;
	}
}

:root[data-theme="dark"] .mariadb-promo-banner--auto .mariadb-promo-banner-light {
	display: block;
}

:root[data-theme="dark"] .mariadb-promo-banner--auto .mariadb-promo-banner-dark {
	display: none;
}

/* Logo swap: mariadb_org_rgb_h.svg (light) / mariadb_org_inv_rgb_h.svg (dark).
   Base visibility (light shown, dark hidden) lives in style.css. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .mariadb-site-logo-light {
		display: none;
	}
	:root:not([data-theme="light"]) .mariadb-site-logo-dark {
		display: block;
	}
}

:root[data-theme="dark"] .mariadb-site-logo-light {
	display: none;
}

:root[data-theme="dark"] .mariadb-site-logo-dark {
	display: block;
}

.mariadb-theme-toggle {
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex-shrink: 0;
	color: var(--wp--preset--color--primary);
}

.mariadb-theme-toggle-track {
	display: inline-block;
	position: relative;
	width: 40px;
	height: 22px;
	border-radius: 999px;
	background: var(--wp--preset--color--secondary);
	transition: background 0.2s ease;
}

.mariadb-theme-toggle-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--wp--preset--color--background);
	transition: transform 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--primary);
}

/* The knob shows the active mode's icon. */
.mariadb-theme-toggle-thumb svg {
	width: 12px;
	height: 12px;
}

.mariadb-theme-toggle-moon {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .mariadb-theme-toggle-sun {
		display: none;
	}
	:root:not([data-theme="light"]) .mariadb-theme-toggle-moon {
		display: block;
	}
}

:root[data-theme="dark"] .mariadb-theme-toggle-sun {
	display: none;
}

:root[data-theme="dark"] .mariadb-theme-toggle-moon {
	display: block;
}

/* Driven by data-theme, not aria-pressed — avoids a slide-in flash on load. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .mariadb-theme-toggle-thumb {
		transform: translateX(18px);
	}
}

:root[data-theme="dark"] .mariadb-theme-toggle-thumb {
	transform: translateX(18px);
}