/* ==========================================================================
   Dark mode — explicit toggle, system preference and high-contrast safety
   ========================================================================== */

/*
 * The palette itself is injected as inline custom properties by
 * inc/enqueue.php for both [data-theme="dark"] and prefers-color-scheme.
 * This file handles surfaces that need more than a token swap.
 */

html[data-theme="dark"] {
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) {
		color-scheme: dark;
	}
}

/* --------------------------------------------------------------------------
   Shared surfaces
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .lm-card,
html[data-theme="dark"] .page-hero__stats > span,
html[data-theme="dark"] .term-pill,
html[data-theme="dark"] .listen-links a,
html[data-theme="dark"] .artist-socials a,
html[data-theme="dark"] .lm-share__link,
html[data-theme="dark"] .language-chip,
html[data-theme="dark"] .collection-card,
html[data-theme="dark"] .pagination__item .page-numbers,
html[data-theme="dark"] .annotation,
html[data-theme="dark"] .lm-back-to-top {
	background: var(--lm-surface);
}

html[data-theme="dark"] .lm-card:hover,
html[data-theme="dark"] .collection-card:hover {
	background: var(--lm-surface-alt);
	border-color: color-mix(in srgb, var(--lm-border) 55%, var(--lm-text) 45%);
}

html[data-theme="dark"] .page-hero {
	background: var(--lm-surface);
}

html[data-theme="dark"] .page-hero--page,
html[data-theme="dark"] .page-hero--archive {
	background: var(--lm-background);
}

html[data-theme="dark"] .page-hero--blog,
html[data-theme="dark"] .page-hero--search,
html[data-theme="dark"] .page-hero--trending {
	background: linear-gradient(180deg, var(--lm-surface), var(--lm-background));
}

html[data-theme="dark"] .song-header,
html[data-theme="dark"] .artist-hero,
html[data-theme="dark"] .album-hero {
	background: linear-gradient(180deg, var(--lm-surface), var(--lm-background));
}

html[data-theme="dark"] .song-info,
html[data-theme="dark"] .artist-facts,
html[data-theme="dark"] .album-artist-note,
html[data-theme="dark"] .album-listen,
html[data-theme="dark"] .annotation-form,
html[data-theme="dark"] .comment-respond,
html[data-theme="dark"] .author-box,
html[data-theme="dark"] .archive-filters,
html[data-theme="dark"] .search-filters,
html[data-theme="dark"] .chart-tabs,
html[data-theme="dark"] .home-search-section__inner {
	background: var(--lm-surface);
}

html[data-theme="dark"] .home-search-section__inner {
	background:
		radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--lm-primary) 32%, transparent), transparent 46%),
		var(--lm-surface-alt);
	color: var(--lm-text);
}

html[data-theme="dark"] .home-search-section__text p {
	color: var(--lm-muted);
}

html[data-theme="dark"] .home-search-section__chips .term-pill {
	border-color: var(--lm-border);
	color: var(--lm-text);
}

html[data-theme="dark"] .chart-tab.is-active {
	background: var(--lm-surface-alt);
	color: var(--lm-text);
}

html[data-theme="dark"] .annotation__quote,
html[data-theme="dark"] .annotation-form__quote {
	background: var(--lm-surface-alt);
}

html[data-theme="dark"] .song-credits {
	background: var(--lm-surface-alt);
	color: var(--lm-text);
}

html[data-theme="dark"] .song-credits__inner,
html[data-theme="dark"] .song-credits h2 {
	color: var(--lm-text);
}

html[data-theme="dark"] .lyrics-notice {
	background: color-mix(in srgb, var(--lm-accent) 14%, var(--lm-background));
}

html[data-theme="dark"] .lyrics-text {
	background: var(--lm-surface);
	border-color: var(--lm-border);
}

/* --------------------------------------------------------------------------
   Header, drawer and overlays
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .site-header {
	background: var(--lm-header-bg);
	color: var(--lm-header-text);
}

html[data-theme="dark"] .lm-logo__mark {
	color: var(--lm-primary);
}

html[data-theme="dark"] .mobile-drawer {
	background: var(--lm-surface);
	border-color: var(--lm-border);
	box-shadow: -30px 0 80px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .primary-menu .sub-menu {
	background: var(--lm-surface);
	border-color: var(--lm-border);
}

html[data-theme="dark"] .primary-menu .sub-menu a:hover,
html[data-theme="dark"] .primary-menu .sub-menu .current-menu-item > a {
	background: var(--lm-surface-alt);
}

html[data-theme="dark"] .lm-search-overlay__panel {
	background: var(--lm-surface);
	border-color: var(--lm-border);
}

html[data-theme="dark"] .lm-search-overlay__backdrop {
	background: rgba(0, 0, 0, 0.72);
}

html[data-theme="dark"] .lm-search-overlay .lm-search-form__field {
	background: var(--lm-background);
}

html[data-theme="dark"] .lm-search-result:hover,
html[data-theme="dark"] .lm-search-result.is-active {
	background: var(--lm-surface-alt);
}

html[data-theme="dark"] .home-hero {
	background-color: #0f0d0b;
	color: #f6f1e9;
}

html[data-theme="dark"] .home-hero__search .lm-search-form__field {
	background: #f6f1e9;
	color: #17130f;
}

html[data-theme="dark"] .home-hero__search .lm-search-form__field input {
	color: #17130f;
}

html[data-theme="dark"] .home-hero .lm-btn--primary {
	background: #e64b32;
	color: #fffaf4;
}

/* --------------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------------- */

html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
	background: var(--lm-surface);
	border-color: var(--lm-border);
	color: var(--lm-text);
}

html[data-theme="dark"] select {
	background-image: linear-gradient(45deg, transparent 50%, var(--lm-text) 50%), linear-gradient(135deg, var(--lm-text) 50%, transparent 50%);
	background-color: var(--lm-surface);
}

html[data-theme="dark"] .site-footer .widget-search input[type="search"] {
	color: var(--lm-footer-text);
}

html[data-theme="dark"] .lm-search-form__field {
	background: var(--lm-surface);
	border-color: var(--lm-border);
}

html[data-theme="dark"] .lm-search-form__field input[type="search"] {
	background: transparent;
}

/* --------------------------------------------------------------------------
   Typography accents
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .eyebrow {
	color: var(--lm-primary-strong);
}

html[data-theme="dark"] .post-card__category,
html[data-theme="dark"] .search-result__type,
html[data-theme="dark"] .updated-list__type,
html[data-theme="dark"] .collection-card__type {
	color: var(--lm-primary-strong);
}

html[data-theme="dark"] ::selection {
	background: var(--lm-selection);
	color: var(--lm-text);
}

html[data-theme="dark"] mark,
html[data-theme="dark"] .search-highlight {
	background: var(--lm-selection);
	color: var(--lm-text);
}

html[data-theme="dark"] .lm-prose pre {
	background: #0b0907;
	color: #f3eee7;
}

html[data-theme="dark"] .lm-prose code {
	background: var(--lm-surface-alt);
	border-color: var(--lm-border);
}

/* --------------------------------------------------------------------------
   Generated artwork and photography
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .lm-cover__art {
	filter: saturate(0.92) brightness(0.9);
}

html[data-theme="dark"] .lm-prose img,
html[data-theme="dark"] .lm-cover__img {
	filter: brightness(0.93);
}

html[data-theme="dark"] .lm-prose img:hover,
html[data-theme="dark"] .lm-cover__img:hover {
	filter: brightness(1);
}

/* --------------------------------------------------------------------------
   Toggle icon state (kept in sync with aria-pressed)
   -------------------------------------------------------------------------- */

.lm-theme-toggle[aria-pressed="true"] {
	color: var(--lm-primary-strong);
}

html[data-theme="dark"] .lm-theme-toggle {
	color: var(--lm-accent);
}

/* --------------------------------------------------------------------------
   Scrollbar
   -------------------------------------------------------------------------- */

html[data-theme="dark"] {
	scrollbar-color: #4a423a var(--lm-background);
}

html[data-theme="dark"] ::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
	background: var(--lm-background);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
	background: #4a423a;
	border: 3px solid var(--lm-background);
	border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Auto dark mode mirrors the explicit rules without duplicating tokens
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .lm-card,
	html:not([data-theme="light"]) .page-hero__stats > span,
	html:not([data-theme="light"]) .term-pill,
	html:not([data-theme="light"]) .listen-links a,
	html:not([data-theme="light"]) .artist-socials a,
	html:not([data-theme="light"]) .lm-share__link,
	html:not([data-theme="light"]) .language-chip,
	html:not([data-theme="light"]) .collection-card,
	html:not([data-theme="light"]) .pagination__item .page-numbers,
	html:not([data-theme="light"]) .annotation,
	html:not([data-theme="light"]) .lm-back-to-top {
		background: var(--lm-surface);
	}

	html:not([data-theme="light"]) .page-hero {
		background: var(--lm-surface);
	}

	html:not([data-theme="light"]) input[type="text"],
	html:not([data-theme="light"]) input[type="email"],
	html:not([data-theme="light"]) input[type="url"],
	html:not([data-theme="light"]) input[type="search"],
	html:not([data-theme="light"]) input[type="tel"],
	html:not([data-theme="light"]) input[type="number"],
	html:not([data-theme="light"]) input[type="password"],
	html:not([data-theme="light"]) select,
	html:not([data-theme="light"]) textarea {
		background: var(--lm-surface);
		border-color: var(--lm-border);
		color: var(--lm-text);
	}

	html:not([data-theme="light"]) .lm-search-overlay__panel {
		background: var(--lm-surface);
	}

	html:not([data-theme="light"]) .lm-theme-toggle {
		color: var(--lm-accent);
	}
}