/* ==========================================================================
   Mobile First Theme - Dark Mode
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	:root {
		--text-dark: #f9fafb;
		--text-light: #d1d5db;
		--border-color: #374151;
		--light-color: #374151;
	}

	html {
		background-color: #111827;
	}

	body {
		background-color: #111827;
		color: var(--text-dark);
	}

	/* Headers */
	h1, h2, h3, h4, h5, h6 {
		color: var(--text-dark);
	}

	p {
		color: var(--text-light);
	}

	/* Links */
	a {
		color: #60a5fa;
	}

	a:hover {
		color: var(--secondary-color);
	}

	/* Site Header */
	.site-header {
		background: #1f2937;
		border-bottom-color: #374151;
	}

	.header-wrapper {
		background: #1f2937;
	}

	.site-title a {
		color: var(--text-dark);
	}

	.mobile-menu-toggle .hamburger {
		background-color: var(--text-dark);
	}

	/* Navigation */
	.main-navigation a {
		color: var(--text-dark);
		border-bottom-color: #374151;
	}

	.main-navigation a:hover,
	.main-navigation a.current {
		background-color: var(--primary-color);
		color: white;
	}

	/* Bottom Navigation */
	.bottom-navigation {
		background: #1f2937;
		border-top-color: #374151;
	}

	.bottom-nav-wrapper a {
		color: var(--text-light);
	}

	.bottom-nav-wrapper a:hover,
	.bottom-nav-wrapper a.current {
		color: var(--primary-color);
	}

	/* Forms */
	input,
	textarea,
	select {
		background-color: #374151;
		color: var(--text-dark);
		border-color: #4b5563;
	}

	input:focus,
	textarea:focus,
	select:focus {
		border-color: var(--primary-color);
		box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
	}

	input::placeholder,
	textarea::placeholder {
		color: #9ca3af;
	}

	/* Buttons */
	.btn-secondary,
	.btn.secondary {
		background-color: #374151;
		color: var(--text-dark);
		border-color: #4b5563;
	}

	.btn-secondary:hover,
	.btn.secondary:hover {
		background-color: #4b5563;
		border-color: var(--primary-color);
		color: var(--text-dark);
	}

	/* Articles */
	article.post-archive {
		background: #1f2937;
		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
	}

	article.post-archive:hover {
		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
	}

	.entry-title a {
		color: var(--text-dark);
	}

	.entry-title a:hover {
		color: var(--primary-color);
	}

	.entry-meta {
		color: var(--text-light);
	}

	.entry-meta a {
		color: var(--text-light);
	}

	.entry-meta a:hover {
		color: var(--primary-color);
	}

	.entry-summary {
		color: var(--text-light);
	}

	.entry-footer {
		color: var(--text-light);
		border-top-color: #374151;
	}

	.entry-footer a {
		color: var(--text-light);
	}

	.entry-footer a:hover {
		color: var(--primary-color);
	}

	/* Sidebar */
	.widget {
		background: #374151;
		color: var(--text-dark);
	}

	.widget-title {
		color: var(--text-dark);
		border-bottom-color: var(--primary-color);
	}

	.widget li {
		border-bottom-color: #4b5563;
	}

	.widget a {
		color: var(--text-light);
	}

	.widget a:hover {
		color: var(--primary-color);
	}

	/* Comments */
	.comments-area {
		background: #374151;
		color: var(--text-dark);
	}

	.comment-list .comment {
		background: #1f2937;
		border-left-color: var(--primary-color);
		color: var(--text-dark);
	}

	/* Footer */
	.site-footer {
		background: #0f172a;
		color: #d1d5db;
	}

	.site-info {
		border-top-color: rgba(255, 255, 255, 0.1);
	}

	/* Pagination */
	.pagination .page-numbers,
	.pager a,
	.pager .page-numbers {
		background: #374151;
		color: var(--text-dark);
		border-color: #4b5563;
	}

	.pagination .page-numbers:hover,
	.pager a:hover,
	.pagination .page-numbers.current {
		background: var(--primary-color);
		color: white;
		border-color: var(--primary-color);
	}

	/* Search Form */
	.search-form input {
		background: #374151;
		color: var(--text-dark);
		border-color: #4b5563;
	}

	/* Code blocks */
	code,
	pre {
		background: #374151;
		color: #a1e8ff;
		border-color: #4b5563;
	}

	/* Blockquotes */
	blockquote {
		border-left-color: var(--primary-color);
		color: var(--text-light);
	}

	/* Horizontal rules */
	hr {
		border-color: #374151;
	}

	/* Tables */
	table {
		border-color: #374151;
		color: var(--text-dark);
	}

	th {
		background: #374151;
		color: var(--text-dark);
	}

	td {
		border-color: #374151;
	}

	/* Install Prompt */
	.install-prompt {
		background: #1f2937;
		color: var(--text-dark);
		border: 1px solid #374151;
	}

	.install-prompt-content {
		color: var(--text-dark);
	}

	/* No results message */
	.no-results {
		color: var(--text-light);
	}

	.no-results h1 {
		color: var(--text-dark);
	}

	/* Link underlines */
	a:not(.btn):not(.button)::after {
		background-color: #60a5fa;
	}

	/* Smooth dark mode transitions */
	html,
	body,
	h1, h2, h3, h4, h5, h6,
	p,
	a,
	input,
	textarea,
	select,
	button,
	.site-header,
	.site-footer,
	.widget,
	article.post-archive {
		transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	}
}

/* Dark mode toggle button styles */
.dark-mode-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--spacing-sm);
	color: inherit;
	font-size: 1.2rem;
	transition: transform 0.3s ease, color 0.3s ease;
}

.dark-mode-toggle:hover {
	transform: rotate(20deg);
	color: var(--primary-color);
}

.dark-mode-toggle::before {
	content: '☀️';
}

@media (prefers-color-scheme: dark) {
	.dark-mode-toggle::before {
		content: '🌙';
	}
}