:root {
	--font-family: "InterVariable", 'Helvetica Neue', -apple-system, 'Open Sans', sans-serif;
	--border: 1px solid var(--color);
	--border-radius: 20px;
	--font-weight: 500;
	--transition-time: 0.15s;

	--base-size-4: 0.25rem;
	--base-size-8: 0.5rem;
	--base-size-16: 1rem;
	--base-size-24: 1.5rem;
	--base-size-40: 2.5rem;

	--randomColor: black;
	--hover-font-weight: 530;

	--black: rgb(15, 16, 18);
	--white: rgb(245, 245, 245);

	color-scheme: light dark;
	--backgroundColor: light-dark(var(--white), var(--black));
	--color: light-dark(var(--black), var(--white));
	--muted: light-dark(#9198a1, #59636e);

	&.dark {
		color-scheme: dark;
	}
}

@media (prefers-color-scheme: dark) {
	:root.light {
		color-scheme: light;
	}
}