/**
 * Kuchnia — dark mode extended overrides.
 * html.dark-mode selector (specificity 0,1,1) to override :root inline vars.
 */

html.dark-mode body {
	background-image: radial-gradient(rgba(240, 232, 216, 0.03) 1px, transparent 1px);
}

html.dark-mode .hero__media,
html.dark-mode .post-card__thumb,
html.dark-mode .img-ph {
	background-color: color-mix(in oklab, var(--paper-3) 65%, var(--paper));
	background-image: repeating-linear-gradient(
		135deg,
		color-mix(in oklab, var(--ink) 8%, transparent) 0 14px,
		color-mix(in oklab, var(--ink) 14%, transparent) 14px 28px
	);
}

html.dark-mode .search-form { background: color-mix(in oklab, var(--paper-2) 60%, transparent); }
html.dark-mode .dm-toggle { background: color-mix(in oklab, var(--paper-2) 50%, transparent); }

html.dark-mode .site-header {
	background: color-mix(in oklab, var(--paper) 88%, transparent);
	border-color: var(--line);
}
html.dark-mode .site-header.is-scrolled {
	box-shadow: 0 4px 20px -10px rgba(0, 0, 0, 0.5);
}

html.dark-mode .site-footer {
	background: var(--footer-bg);
}

html.dark-mode .btn:hover,
html.dark-mode .wp-block-button__link:hover,
html.dark-mode .more-link:hover,
html.dark-mode input[type="submit"]:hover {
	background: var(--acc);
	color: var(--acc-ink);
}

html.dark-mode ::selection { background: var(--acc); color: var(--acc-ink); }

html.dark-mode .avatar {
	background: color-mix(in oklab, var(--acc) 40%, var(--paper-3));
}

html.dark-mode .comment-form input,
html.dark-mode .comment-form textarea,
html.dark-mode .search-form-full input[type="search"] {
	background: var(--paper-2);
	border-color: var(--line-2);
	color: var(--ink);
}

html.dark-mode .entry-content > p:first-of-type::first-letter {
	color: var(--acc);
}

html.dark-mode pre, html.dark-mode code {
	background: var(--paper-2);
}

html.dark-mode img:not(.no-invert):not([src*=".svg"]) {
	filter: brightness(0.92);
}

html.dark-mode blockquote,
html.dark-mode .wp-block-quote {
	color: var(--ink);
	border-left-color: var(--acc);
}

html.dark-mode .category-card {
	background: color-mix(in oklab, var(--paper-2) 60%, var(--paper));
}
html.dark-mode .category-card:hover {
	background: var(--paper-3);
}

html.dark-mode .related {
	background: var(--paper-2);
}

html.dark-mode .pagination .page-numbers.current {
	background: var(--acc);
	color: var(--acc-ink);
}

@media (prefers-contrast: more) {
	html.dark-mode {
		--ink: #ffffff;
		--muted: #cccccc;
		--line: rgba(255, 255, 255, 0.35);
	}
}