/* ==========================================================================
   GP Dark Mode — core framework
   Reusable light/dark layer for GeneratePress: CSS variables, base content
   application, forms, and the toggle component. Site-specific tweaks for
   third-party widgets live in site-overrides.css.

   Edit the palette below to recolor the whole theme.
   ========================================================================== */

/* =========================
   Theme-init: prevent flash transitions on first paint
   ========================= */
html.theme-init * {
	transition: none !important;
}

/* =========================
   Base (light mode variables)
   ========================= */
:root {
	--bg: #ffffff;
	--bg-2: #e7edf7;      /* hover / alternate surfaces in both modes */
	--surface: #ffffff;
	--surface-2: #f7f8f9;
	--text: #222222;
	--text-muted: #575760;
	--border: #d0d0d7;
	--link: #1d428a;

	/* Toggle accent (the track color). */
	--dm-accent: #1d428a;

	/* Only sets --accent if your theme hasn't already defined one. */
	--accent: var(--accent, #1d428a);
}

/* =========================
   Dark mode variables
   ========================= */
html[data-theme="dark"] {
	--bg: #0f0f12;
	--bg-2: #17284f;
	--surface: #0f0f12;
	--surface-2: #17284f;
	--text: #f0f0f0;
	--text-muted: #b2b2be;
	--border: #333340;
	--link: #9ad;
}

/* =========================
   Global application (both modes)
   ========================= */
body {
	background-color: var(--bg) !important;
	color: var(--text) !important;
}
blockquote,
p {
	color: var(--text) !important;
}
a { color: var(--link); }
body.single .container a { color: var(--link); }

html[data-theme="dark"] #disqus_thread {
	background: var(--bg) !important;
	color: var(--text);
}

/* =========================
   Content surfaces only
   ========================= */
.site-content .inside-article,
.site-content .widget,
.site-content .site-info {
	background-color: var(--surface);
}

/* =========================
   Forms
   ========================= */
.site-content input,
.site-content textarea,
.site-content select {
	background-color: var(--surface-2);
	color: var(--text);
	border-color: var(--border);
}

/* =========================
   Toggle component
   ========================= */
.dm-toggle {
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
	margin: 0 2px 0 10px;
	line-height: 0;
	-webkit-tap-highlight-color: transparent;
}

.dm-track {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;

	width: 56px;
	height: 30px;
	border-radius: 999px;

	background: var(--dm-accent);
	border: 1px solid var(--border);

	padding: 0 8px;

	box-shadow: inset 0 0 50px var(--dm-accent), inset 0 0 50px 50px var(--dm-accent);
	transition: box-shadow 0.3s ease-in-out;
}

.dm-track:hover {
	box-shadow: inset 0 0 10px 5px var(--dm-accent), inset 0 0 0 20px #0056ff;
}

html[data-theme="dark"] .dm-track {
	background: var(--bg);
	box-shadow: inset 0 0 50px #000000, inset 0 0 50px 50px #000000;
}

html[data-theme="dark"] .dm-track:hover {
	box-shadow: inset 0 0 10px 0 #000000, inset 0 0 0 20px #122666;
}

.dm-icon {
	font-size: 14px;
	opacity: 1;
	user-select: none;
}

.dm-knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: 999px;

	background: #fff;
	border: 1px solid var(--border);

	box-shadow:
		0 10px 18px rgba(0, 0, 0, .18),
		0 2px 4px rgba(0, 0, 0, .12);

	transform: translateX(0);
}

html[data-theme="dark"] .dm-knob {
	transform: translateX(26px);
}

/* Focus ring */
.dm-toggle:focus-visible .dm-track {
	outline: 3px solid rgba(100, 150, 255, .55);
	outline-offset: 2px;
}

/* Subtle "alive" hover */
.dm-toggle:hover .dm-track {
	filter: brightness(1.03);
}

/* Make the active icon pop a bit */
html[data-theme="dark"] .dm-moon { opacity: 1; }
html:not([data-theme="dark"]) .dm-sun { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
	.dm-knob { transition: transform .22s ease; }
	.dm-track { transition: filter .15s ease, background-color .2s ease, border-color .2s ease; }
	.dm-icon { transition: opacity .15s ease; }
}

/* =========================
   Motion safety
   ========================= */
@media (prefers-reduced-motion: no-preference) {
	body,
	a {
		transition: background-color .2s ease, color .2s ease;
	}
}