/*==========================================================
DARK MODE — component patches.
Most of the theme already uses semantic tokens (var(--text),
var(--background), var(--surface)...) so it inherits dark mode
automatically from the overrides in variables.css. This file
only patches components that use a hardcoded color instead of
a token, plus the toggle button itself.
==========================================================*/

:root[data-theme="dark"] .site-header {
	background: rgba(15, 23, 42, 0.92);
	border-bottom-color: var(--gray-800);
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .card-appealing {
	background: var(--surface);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
	background: var(--surface);
	color: var(--text);
	border-color: var(--border);
}

:root[data-theme="dark"] .kbm-mobile-panel-inner {
	background: var(--background);
}

:root[data-theme="dark"] .top-bar {
	background: var(--gray-900);
}

/* Toggle button */
.dark-mode-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--heading);
	cursor: pointer;
	transition: background var(--transition), border-color var(--transition);
}
.dark-mode-toggle:hover {
	background: var(--primary-light);
}
.dark-mode-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .dark-mode-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .dark-mode-toggle .icon-moon { display: inline-block; }