/* ==========================================================================
   Dark Mode: Variable overrides, toggle button, transition utility
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variable Overrides
   -------------------------------------------------------------------------- */

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

	/* Backgrounds */
	--wp--preset--color--bg-primary: #0F1117;
	--wp--preset--color--bg-secondary: #1A1D27;
	--wp--preset--color--bg-tertiary: #242836;

	/* Text */
	--wp--preset--color--text-primary: #F0F1F3;
	--wp--preset--color--text-secondary: #9CA3AF;
	--wp--preset--color--text-tertiary: #9CA3AF;
	--wp--preset--color--text-on-dark: #FFFFFF;

	/* Accent — purple stays #53389E, only backgrounds adapt */
	--wp--preset--color--accent-primary-light: #2A2547;
	--wp--preset--color--accent-primary-bg: #1E1B33;

	/* Borders */
	--wp--preset--color--border: #2D3344;
	--wp--preset--color--border-light: #1F2433;
	--wp--preset--color--border-primary: #2D3344;

	/* Semantic — danger */
	--wp--preset--color--danger: #F87171;
	--wp--preset--color--danger-light: #2D1B1B;
	--wp--preset--color--danger-text: #FCA5A5;

	/* Semantic — success */
	--wp--preset--color--success: #34D399;
	--wp--preset--color--success-light: #1B2D24;
	--wp--preset--color--success-text: #6EE7B7;

	/* Semantic — warning */
	--wp--preset--color--warning: #FBBF24;
	--wp--preset--color--warning-light: #2D2714;
	--wp--preset--color--warning-text: #FCD34D;

	/* Semantic — neutral / info */
	--wp--preset--color--neutral: #60A5FA;
	--wp--preset--color--neutral-light: #1B2338;
	--wp--preset--color--neutral-text: #93C5FD;
	--wp--preset--color--neutral-border: #1E3A5F;

	/* Surface — keep dark in dark mode (used as dark backgrounds for CTA boxes) */
	--wp--preset--color--surface-strong: #1F2937;
	--wp--preset--color--surface-strong-soft: #374151;
	--wp--preset--color--surface-placeholder: #374151;

	/* Shadows & focus */
	--ktv-shadow-sm: 0 0.25rem 1rem -0.125rem rgba(0, 0, 0, 0.3);
	--ktv-shadow-lg: 0 0.5rem 1.5rem -0.25rem rgba(0, 0, 0, 0.4);
	--ktv-focus-outline: 0.125rem solid rgba(83, 56, 158, 0.4);
	--ktv-focus-outline-strong: 0.125rem solid rgba(83, 56, 158, 0.5);

	/* Custom color vars */
	--ktv-color-surface-strong: #1F2937;
	--ktv-color-surface-strong-soft: #374151;
	--ktv-color-surface-placeholder: #374151;
	--ktv-color-success-border: #065F46;
	--ktv-color-neutral-border: #1E3A5F;
	--ktv-color-danger-border: #7F1D1D;
}

/* --------------------------------------------------------------------------
   2. Links — white in dark mode (purple #53389E is too low contrast on dark bg)
   -------------------------------------------------------------------------- */

html[data-ktv-theme="dark"] a {
	color: #F0F1F3;
}

html[data-ktv-theme="dark"] a:hover {
	color: #FFFFFF;
}

/* .ktv-link styled links */
html[data-ktv-theme="dark"] .ktv-link {
	color: #F0F1F3;
}

html[data-ktv-theme="dark"] .ktv-link:hover {
	color: #FFFFFF;
}

/* Section labels (accent text on dark bg) */
html[data-ktv-theme="dark"] .ktv-section__label {
	color: #B8A9E0;
}

/* --------------------------------------------------------------------------
   3. Buttons — outline/ghost need lighter text in dark mode
   -------------------------------------------------------------------------- */

html[data-ktv-theme="dark"] .ktv-btn--outline {
	color: #F0F1F3;
	border-color: #2D3344;
}

html[data-ktv-theme="dark"] .ktv-btn--outline:hover {
	border-color: var(--wp--preset--color--accent-primary, #53389E);
	background-color: var(--wp--preset--color--accent-primary-light);
	color: #FFFFFF;
}

html[data-ktv-theme="dark"] .ktv-btn--ghost {
	color: #F0F1F3;
}

html[data-ktv-theme="dark"] .ktv-btn--ghost:hover {
	background-color: var(--wp--preset--color--accent-primary-light);
	color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   4. Review upvote & report — consistent icon colors, dark-friendly border
   -------------------------------------------------------------------------- */

html[data-ktv-theme="dark"] .ktv-review__upvote {
	border-color: #2D3344;
	color: #9CA3AF;
}

html[data-ktv-theme="dark"] .ktv-review__upvote:hover {
	border-color: #4B5563;
	color: #D1D5DB;
}

html[data-ktv-theme="dark"] .ktv-review__upvote.is-active {
	border-color: #4B5563;
	background-color: #1A1D27;
	color: #F0F1F3;
}

html[data-ktv-theme="dark"] .ktv-review__report {
	color: #9CA3AF;
}

html[data-ktv-theme="dark"] .ktv-review__report:hover {
	color: #D1D5DB;
}

/* Review sort buttons */
html[data-ktv-theme="dark"] .ktv-review-sort__btn {
	border-color: #2D3344;
}

html[data-ktv-theme="dark"] .ktv-review-sort__btn:hover {
	border-color: #4B5563;
}

/* Upvote & report tooltips */
html[data-ktv-theme="dark"] .ktv-review__upvote::after,
html[data-ktv-theme="dark"] .ktv-review__report::after {
	background-color: #F0F1F3;
	color: #0F1117;
}

/* --------------------------------------------------------------------------
   5. Article sidebar CTA — keep dark surface in dark mode
   -------------------------------------------------------------------------- */

html[data-ktv-theme="dark"] .ktv-article-sidebar-cta {
	background: #1F2937;
	color: #FFFFFF;
}

html[data-ktv-theme="dark"] .ktv-article-sidebar-cta__title {
	color: #FFFFFF;
}

html[data-ktv-theme="dark"] .ktv-article-sidebar-cta__desc {
	color: rgba(255, 255, 255, 0.72);
}

html[data-ktv-theme="dark"] .ktv-article-sidebar-cta__btn {
	color: #FFFFFF;
}

html[data-ktv-theme="dark"] .ktv-article-sidebar-cta__btn:hover {
	color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   6. Logo — invert black SVG to white
   -------------------------------------------------------------------------- */

html[data-ktv-theme="dark"] .ktv-header__logo-img {
	filter: invert(1) brightness(2);
}

/* --------------------------------------------------------------------------
   7. Smooth transition utility (applied by JS during toggle)
   -------------------------------------------------------------------------- */

.ktv-theme-transitioning,
.ktv-theme-transitioning *,
.ktv-theme-transitioning *::before,
.ktv-theme-transitioning *::after {
	transition: background-color 0.3s ease, color 0.3s ease,
	            border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* --------------------------------------------------------------------------
   8. Theme Toggle Button
   -------------------------------------------------------------------------- */

.ktv-theme-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--ktv-radius-md);
	color: var(--wp--preset--color--text-secondary, #6B7280);
	transition: color var(--ktv-transition), background-color var(--ktv-transition);
	-webkit-tap-highlight-color: transparent;
}

.ktv-theme-toggle:hover {
	color: var(--wp--preset--color--text-primary, #111827);
	background-color: var(--wp--preset--color--bg-tertiary, #F3F4F6);
}

.ktv-theme-toggle:focus-visible {
	outline: var(--ktv-focus-outline);
}

/* Icon visibility: light mode shows moon, dark mode shows sun */
.ktv-theme-toggle__icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ktv-theme-toggle__icon--sun {
	display: none;
}

html[data-ktv-theme="dark"] .ktv-theme-toggle__icon--sun {
	display: flex;
}

html[data-ktv-theme="dark"] .ktv-theme-toggle__icon--moon {
	display: none;
}

/* Mobile: push toggle next to burger */
@media (max-width: 767px) {
	.ktv-theme-toggle {
		margin-left: auto;
	}
}

/* --------------------------------------------------------------------------
   Activity Heatmap
   -------------------------------------------------------------------------- */

html[data-ktv-theme="dark"] .ktv-heatmap__cell[data-level="1"] { background-color: #352F5E; }
html[data-ktv-theme="dark"] .ktv-heatmap__cell[data-level="2"] { background-color: #5B4B9E; }
html[data-ktv-theme="dark"] .ktv-heatmap__cell[data-level="3"] { background-color: #8B72D4; }
html[data-ktv-theme="dark"] .ktv-heatmap__cell[data-level="4"] { background-color: #C4B5F0; }

html[data-ktv-theme="dark"] .ktv-heatmap__legend-cell[data-level="1"] { background-color: #352F5E; }
html[data-ktv-theme="dark"] .ktv-heatmap__legend-cell[data-level="2"] { background-color: #5B4B9E; }
html[data-ktv-theme="dark"] .ktv-heatmap__legend-cell[data-level="3"] { background-color: #8B72D4; }
html[data-ktv-theme="dark"] .ktv-heatmap__legend-cell[data-level="4"] { background-color: #C4B5F0; }

html[data-ktv-theme="dark"] .ktv-heatmap__cell:hover::after {
	background-color: var(--wp--preset--color--text-primary, #F0F1F3);
	color: #0F1117;
}

@media (max-width: 479px) {
	html[data-ktv-theme="dark"] .ktv-heatmap__day,
	html[data-ktv-theme="dark"] .ktv-heatmap__corner {
		background-color: var(--wp--preset--color--bg-primary, #0F1117);
	}
}