:root {
	--color-bg-main: #f4f5f7;
	--color-bg-nav: rgba(244, 245, 247, 0.86);
	--color-bg-card: #ffffff;
	--color-bg-chip: #f0f1f3;
	--color-border: #e3e6ea;
	--color-shadow: rgba(23, 31, 45, 0.08);

	--color-text-primary: #20242a;
	--color-text-secondary: #5f6671;
	--color-accent: #0969da;
	--color-scrollbar: #5c5e70;
	
	--color-title: #171a20;
	--red-mark: #ff0000;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-bg-main: #111317;
		--color-bg-nav: rgba(17, 19, 23, 0.88);
		--color-bg-card: #191c22;
		--color-bg-chip: #242832;
		--color-border: #2b313b;
		--color-shadow: rgba(0, 0, 0, 0.28);

		--color-text-primary: #f5f7fb;
		--color-text-secondary: #aeb6c2;
		--color-accent: #58a6ff;
		--color-scrollbar: #5c5e5e;

		--color-title: #ffffff;
	}

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