/* Dark Mode – nur geladen bei AGWP_DARKMODE = true.
   Die meiste Arbeit machen die Tokens: core.css legt Enfolds Farbsets auf --agwp-*. */

html[data-theme="dark"] {
	color-scheme: dark;
	--agwp-bg:      #121519;
	--agwp-bg2:     #1A1E24;
	--agwp-surf:    #232830;
	--agwp-ink:     #EDF0F3;
	--agwp-ink2:    #9BA5B1;
	--agwp-line:    rgba(255, 255, 255, .09);
	--agwp-accink:  #67D9E9;
	--agwp-accsoft: rgba(29, 168, 235, .13);
	--agwp-glow:    rgba(29, 168, 235, .32);
	--agwp-code:    #0B0E12;
}

/* Sanfter Wechsel */
html.agwp-theme-anim body#top,
html.agwp-theme-anim #top :is(#header .header_bg, .main_color, .alternate_color, #footer, #socket, .avia-section) {
	transition: background-color .45s ease, color .45s ease;
}

/* Enfold-Standardfelder, die nicht ueber Farbsets laufen */
html[data-theme="dark"] #top :is(input, textarea, select) {
	background-color: var(--agwp-bg2);
	color: var(--agwp-ink);
	border-color: var(--agwp-line);
}
html[data-theme="dark"] #top table :is(th, td) { background-color: transparent; color: var(--agwp-ink2); }
html[data-theme="dark"] #top .agwp-media img { background: var(--agwp-bg2); }

/* Logo: dunkle Variante ueber Klasse am Logo-Bild oder per Filter.
   Besser: eigenes helles Logo hinterlegen (Enfold erlaubt kein zweites Logo). */
/* html[data-theme="dark"] #top .logo img { filter: brightness(0) invert(1); } */

/* ---- Umschalter (Ausgabe in inc/header.php, Position im Header: core.css Abschnitt 05b) ---- */
.agwp-theme-toggle {
	position: relative;
	width: 64px;
	height: 34px;
	padding: 0;
	border-radius: var(--agwp-r-pill);
	border: 1px solid var(--agwp-line);
	background: var(--agwp-surf);
	cursor: pointer;
	transition: background-color .4s;
}
.agwp-theme-toggle__knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--agwp-acc);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: left .35s cubic-bezier(.6, .1, .2, 1);
}
.agwp-theme-toggle__knob > span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--agwp-onacc);
	transition: box-shadow .35s;
}
html[data-theme="dark"] .agwp-theme-toggle__knob { left: 33px; }
html[data-theme="dark"] .agwp-theme-toggle__knob > span { box-shadow: inset -4px -1px 0 0 var(--agwp-acc); }