/* Dark Mode Styles */
[data-theme='dark'] {
	--color-bg: #121212;
	--color-bg-alt: #1E1E1E;
	--color-surface: #2A2A2A;
	--color-text: #F5F0E8;
	--color-text-secondary: #C4C0B8;
	--color-text-muted: #8A8680;
	--color-accent: #D4B878;
	--color-accent-hover: #E6CC98;
	--color-accent-light: rgba(212,184,120,0.1);
	--color-border: #333333;
	--color-border-light: #444444;
	--shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
	--shadow-md: 0 4px 12px rgba(0,0,0,0.4);
	--shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
}

[data-theme='dark'] img {
	filter: brightness(0.9);
}

[data-theme='dark'] .site-header {
	background: rgba(18, 18, 18, 0.9);
	border-bottom-color: var(--color-border);
}

[data-theme='dark'] .hero::before {
	background: linear-gradient(to top, rgba(18,18,18,0.9), rgba(18,18,18,0.4));
}

[data-theme='dark'] blockquote {
	background: var(--color-surface);
}

[data-theme='dark'] input, 
[data-theme='dark'] textarea, 
[data-theme='dark'] select {
	background: var(--color-bg-alt);
	color: var(--color-text);
	border-color: var(--color-border);
}

[data-theme='dark'] code, 
[data-theme='dark'] pre {
	background: var(--color-bg-alt);
	border-color: var(--color-border);
}