:root {
	--color-bg-main: #ffffff;
	--color-bg-nav: #f6f8fa;
	--color-bg-card: #fafaff;
	--color-border: #e0e0e0;
	--color-shadow: rgba(0, 0, 0, 0.1);

	--color-text-primary: #2c3e50;
	--color-text-secondary: #7f8c8d;
	--color-accent: #3498db;
	--color-scrollbar: #5c5e70;
	
	--color-title: #2c3e50;
	--red-mark: #ff0000;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-bg-main: #1a1a1a;
		--color-bg-nav: #2d2d2d;
		--color-bg-card: #000000;
		--color-border: #404040;
		--color-shadow: rgba(0, 0, 0, 0.3);

		--color-text-primary: #ffffff;
		--color-text-secondary: #b0b0b0;
		--color-accent: #58a6ff;
		--color-scrollbar: #5c5e5e;

		--color-title: #e0e0ef;
	}

	.avatar {
		border: var(--color-text-secondary);
	}
}