/* ── Dark Mode: 6 Palette-Variablen-Overrides ────────────────────────────────
 * Alle theme.json-Styles referenzieren ausschließlich Palette-Slugs,
 * daher genügt das Überschreiben der Preset-Variablen. */

/* Explizites color-scheme: natives Browser-UI (Scrollbalken, Formulare)
 * wechselt mit — und light-dark() steht künftig zur Verfügung. */
:root {
	color-scheme: light;
}

[data-theme="dark"] {
	--wp--preset--color--base: #1B1C1F;
	--wp--preset--color--base-2: #232428;
	--wp--preset--color--contrast: #E8E6E1;
	--wp--preset--color--contrast-2: #A5A29B;
	--wp--preset--color--accent: #FF6EB0;
	--wp--preset--color--border: #34353A;

	color-scheme: dark;
}

[data-theme="dark"] body {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Sanfter Übergang beim Umschalten */
html {
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* ── Toggle-Button ──────────────────────────────────────────────────────────── */

#jl-theme-toggle {
	position: fixed;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 9999;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.6;
	transition: opacity 0.2s ease, transform 0.2s ease;
	color: inherit;
	padding: 0;
}

/* Unter 600px blendet das Navigation-Block-Overlay den Hamburger oben rechts
 * ein — der Toggle weicht ihm nach links aus. */
@media (max-width: 599px) {
	#jl-theme-toggle {
		right: 4.5rem;
	}
}

#jl-theme-toggle:hover {
	opacity: 1;
	transform: scale(1.1);
}

#jl-theme-toggle:active {
	transform: scale(0.92);
}

/* Sonne/Mond-Icon-Wechsel */
#jl-theme-toggle .icon-sun  { display: block; }
#jl-theme-toggle .icon-moon { display: none;  }

[data-theme="dark"] #jl-theme-toggle .icon-sun  { display: none;  }
[data-theme="dark"] #jl-theme-toggle .icon-moon { display: block; }