/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
	body {
		background: #1a1a1a;
		color: #e0e0e0;
	}

	.wrapper {
		background: #1f1f1f;
		color: #e0e0e0;
	}

	.container--outer {
		box-shadow: 0 0 10px rgba(0, 0, 0, .5);
	}

	/* Links */
	a {
		color: #66b3ff;
	}

	a:visited {
		color: #b399ff;
	}

	a:hover {
		color: #99d4ff;
	}

	/* Headers */
	h1, h2, h3, h4, h5, h6 {
		color: #fff;
	}

	/* Code blocks */
	pre {
		background: #2d2d2d;
		border: 1px solid #404040;
	}

	code {
		background: #2d2d2d;
		color: #d4d4d4;
	}
	
	pre code {
		color: #d4d4d4;
	}

	/* Blockquotes */
	blockquote {
		border-left-color: #555;
		color: #b0b0b0;
	}

	/* Tables */
	table {
		border-collapse: collapse;
	}

	table td,
	table th {
		border: 1px solid #404040;
	}

	/* Forms */
	input,
	textarea,
	select {
		background: #1e1e1e;
		border-color: #404040;
		color: #e0e0e0;
	}

	input:focus,
	textarea:focus,
	select:focus {
		border-color: #66b3ff;
		background: #252525;
	}

	/* Buttons */
	button,
	.button {
		background: #1e90ff;
		color: #fff;
	}

	button:hover,
	.button:hover {
		background: #1a7acc;
	}

	/* Sidebar widgets */
	.widget {
		background: #262626;
		border-color: #404040;
	}

	.widget__title {
		border-bottom-color: #404040;
		color: #fff;
	}

	/* Posts */
	.post__meta {
		color: #a0a0a0;
	}

	.post__title {
		color: #fff;
	}

	/* Comments section (if enabled) */
	.comments {
		color: #e0e0e0;
	}

	/* Navigation */
	.menu__link {
		color: #e0e0e0;
	}

	.menu__link:hover {
		color: #66b3ff;
	}

	/* Header and Footer */
	header {
		border-color: #404040;
	}

	footer {
		border-color: #404040;
		color: #a0a0a0;
	}

	/* Pagination */
	.pagination__link {
		background: #1e1e1e;
		border: 1px solid #404040;
		color: #e0e0e0;
	}

	.pagination__link:hover {
		background: #1e90ff;
		border-color: #1e90ff;
	}

	.pagination__link.active {
		background: #1e90ff;
		border-color: #1e90ff;
		color: #fff;
	}

	/* Syntax highlighting adjustments */
	.hljs {
		background: #2d2d2d;
		color: #d4d4d4;
	}
}

/* Dark mode toggle button (optional) */
.dark-mode-toggle {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1.2em;
	padding: 0.5em;
	color: inherit;
}

.dark-mode-toggle:hover {
	opacity: 0.7;
}