/**
 * Strata Toolkit — dark mode (front end). Loaded only while dark mode is
 * on (Strata Toolkit → Colors). The dark values themselves come from the
 * inline :root block printed with this file (inc/color-mode.php): every
 * palette variable becomes light-dark(light, dark), and `color-scheme`
 * below decides which side the browser uses.
 */

/* =========================================================
   WHICH SIDE IS SHOWING
   ========================================================= */

/* Fallback, same as "visitors can switch / their device's setting". */
html:root {
	color-scheme: light dark;
}

/* Dark only. */
body.st-color-mode-dark {
	color-scheme: dark;
}

/* Visitors can switch, no choice made yet: the configured first-time
   default. Scoped to :root:not([data-theme]) on purpose — <body> is a
   different element from <html>, so a color-scheme set on body would
   always beat the visitor's choice (data-theme on <html>). Once they
   have chosen, body sets nothing and inherits it from <html>. */
:root:not([data-theme]) body.st-color-mode-default-system {
	color-scheme: light dark;
}

:root:not([data-theme]) body.st-color-mode-default-light {
	color-scheme: light;
}

:root:not([data-theme]) body.st-color-mode-default-dark {
	color-scheme: dark;
}

/* The visitor's own choice, set on <html> by the boot script and the
   toggle. */
html:root[data-theme="light"] {
	color-scheme: light;
}

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

/* `--st-invert`: 0 while light is showing, 1 while dark is — for the few
   things a light-dark() color can't reach (e.g. logo images). The theme
   reads it with a fallback of 0. Mirrors the rules above exactly. */
body {
	--st-invert: 0;
}

body.st-color-mode-dark,
:root:not([data-theme]) body.st-color-mode-default-dark,
:root[data-theme="dark"] body {
	--st-invert: 1;
}

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

	:root:not([data-theme]) body.st-color-mode-default-system {
		--st-invert: 1;
	}
}

/* =========================================================
   VISITOR TOGGLE — bottom-left, the opposite corner from the theme's
   back-to-top button. Both icons are always in the markup; CSS shows the
   one for the mode a click switches TO (moon → dark, sun → light).
   ========================================================= */

.st-color-mode-toggle {
	position: fixed;
	left: var(--st-toolkit-space-lg);
	bottom: var(--st-toolkit-space-lg);
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--st-toolkit-color-divider);
	border-radius: var(--st-toolkit-radius-full);
	background-color: var(--st-toolkit-color-surface);
	color: var(--st-toolkit-color-foreground);
	cursor: pointer;
	transition:
		background-color var(--st-toolkit-transition-fast),
		box-shadow        var(--st-toolkit-transition-fast);
}

.st-color-mode-toggle:hover {
	box-shadow: var(--st-toolkit-shadow-md);
}

.st-color-mode-toggle:focus-visible {
	outline: 2px solid var(--st-toolkit-color-brand-text);
	outline-offset: 2px;
}

.st-color-mode-toggle__icon {
	width: 20px;
	height: 20px;
}

.st-color-mode-toggle__icon--moon {
	display: block;
}

.st-color-mode-toggle__icon--sun {
	display: none;
}

/* No choice yet: follow the first-time default — dark, or the device's
   setting when that is dark. */
:root:not([data-theme]) body.st-color-mode-default-dark .st-color-mode-toggle__icon--moon {
	display: none;
}

:root:not([data-theme]) body.st-color-mode-default-dark .st-color-mode-toggle__icon--sun {
	display: block;
}

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

	:root:not([data-theme]) body.st-color-mode-default-system .st-color-mode-toggle__icon--moon {
		display: none;
	}

	:root:not([data-theme]) body.st-color-mode-default-system .st-color-mode-toggle__icon--sun {
		display: block;
	}
}

/* The visitor's choice wins. */
:root[data-theme="dark"] .st-color-mode-toggle__icon--moon {
	display: none;
}

:root[data-theme="dark"] .st-color-mode-toggle__icon--sun {
	display: block;
}

:root[data-theme="light"] .st-color-mode-toggle__icon--moon {
	display: block;
}

:root[data-theme="light"] .st-color-mode-toggle__icon--sun {
	display: none;
}