/**
 * Light palette for dita-nova-theme.
 *
 * The theme defines its dark colors as CSS custom properties on `body`
 * (see main.css). Redefining the same properties under `html.mode-light
 * body` overrides them for every element that already reads var(--x) —
 * which is almost the whole theme. The declarations below this section
 * patch the handful of places that used a hardcoded hex/rgba instead of a
 * variable (mostly pastel text colors that read fine on near-black but
 * fail contrast on white).
 */
html.mode-light body,
html.mode-light body.mode-light {
	--bg: #ffffff;
	--bg2: #f4f5fb;
	--surface: #ffffff;
	--surface2: #eef0f8;
	--border: #e3e5f0;
	--border2: #d3d6ea;
	--accent: #3b6fed;
	--accent2: #b5567e;
	--accent3: #4d7fa3;
	--accent-hover: #4f46e5;
	--text: #14162a;
	--text2: #4a4f6b;
	--text3: #666b8c;
	--green: #0d9488;

	background: #ffffff !important;
	color: #14162a !important;
}

/* Nav bar translucency was tuned for a near-black background. */
html.mode-light nav {
	background: rgba(255, 255, 255, 0.75);
	border-bottom: 1px solid rgba(20, 22, 42, 0.08);
}

@media (max-width: 620px) {
	html.mode-light .nav-links {
		background: rgba(255, 255, 255, 0.97);
	}
}

/* Soften the background glow orbs a touch on a light background. */
html.mode-light .orb {
	opacity: 0.08;
}

/* Hardcoded gradient stops, deepened for contrast on white. */
html.mode-light .gradient-text {
	background: linear-gradient(135deg, #4f46e5 0%, #9333ea 50%, #0891b2 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

/* Pink-tinted badges (hero badge / "in development" status pill). */
html.mode-light .hero-badge,
html.mode-light .status-dev {
	background: rgba(181, 86, 126, 0.08);
	border-color: rgba(181, 86, 126, 0.25);
	color: #a83f70;
}

/* Cyan category/tag labels. */
html.mode-light .ctag-ai,
html.mode-light .pillar-tag-ai,
html.mode-light .tag-tc {
	color: #0e7490;
}

/* Pale blue category/tag labels. */
html.mode-light .ctag-ba,
html.mode-light .pillar-tag-ba,
html.mode-light .stag,
html.mode-light .pill.strong,
html.mode-light .offer-tag,
html.mode-light .tag-us {
	color: #3d6a8a;
}

/* Pale purple category/tag labels. */
html.mode-light .ctag-mind,
html.mode-light .pillar-tag-mind {
	color: #9333ea;
}

/* Form error text. */
html.mode-light .form-error {
	color: #dc2626;
}

/* CTA banner gradient used a hardcoded dark-mode accent2 rgb triplet. */
html.mode-light .cta-banner {
	background: linear-gradient(135deg, rgba(59, 111, 237, 0.1), rgba(181, 86, 126, 0.07));
	border-color: rgba(59, 111, 237, 0.18);
}

/* ─── Toggle button ─── */
.dlmode-toggle {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 9999;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--surface);
	border: 1px solid var(--border2);
	color: var(--text2);
	cursor: pointer;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
	transition: border-color 0.2s, color 0.2s, transform 0.15s;
}
.dlmode-toggle:hover {
	border-color: var(--accent-hover);
	color: var(--text);
	transform: translateY(-2px);
}
html.mode-light .dlmode-toggle {
	box-shadow: 0 4px 20px rgba(20, 22, 42, 0.12);
}

.dlmode-toggle .dlmode-icon-sun { display: block; }
.dlmode-toggle .dlmode-icon-moon { display: none; }
html.mode-light .dlmode-toggle .dlmode-icon-sun { display: none; }
html.mode-light .dlmode-toggle .dlmode-icon-moon { display: block; }

@media (max-width: 620px) {
	.dlmode-toggle {
		bottom: 16px;
		right: 16px;
	}
}