.dark {
	:root {
		--color-bg: #121212;
		--color-surface: #1e1e1e;
		--color-primary: #00bcd4;
		--color-text: #f0f0f0;
		--color-muted: #aaa;
		--color-border: #333;
		--color-hover: #2a2a2a;
		--color-placeholder: #444;
	}

	body {
		background-color: var(--color-bg);
		color: var(--color-text);
	}

	header,
	footer,
	.hero,
	.intro,
	.carousel,
	.contact {
		background-color: var(--color-surface);
	}

	.logo span {
		color: var(--color-primary);
	}

	.nav-links a,
	.nav-links button,
	.footer a {
		color: var(--color-text);
	}

	.nav-links a:hover,
	.footer a:hover {
		color: var(--color-primary);
	}

	.btn {
		background-color: var(--color-primary);
		color: var(--color-bg);
	}

	.btn-secondary {
		background-color: transparent;
		border: 1px solid var(--color-primary);
		color: var(--color-primary);
	}

	.btn:hover,
	.btn-secondary:hover {
		opacity: 0.9;
	}

	input,
	textarea {
		background-color: var(--color-surface);
		border: 1px solid var(--color-border);
		color: var(--color-text);
	}

	input::placeholder,
	textarea::placeholder {
		color: var(--color-muted);
	}

	.categories button {
		background-color: var(--color-hover);
		color: var(--color-text);
		border: 1px solid var(--color-placeholder);
	}

	.categories button.active {
		background-color: var(--color-primary);
		color: var(--color-bg);
	}

	.image-placeholder {
		background-color: var(--color-border);
	}
}