:root {
	--main-background: #f8f8f8;
	--main-text-color: #222;

	--second-background: #fff;
	--second-background-transparent: rgba(255, 255, 255, 0);

	--brand-color: #1473e6;
	--brand-color-text: #fff;
	--brand-darken-color: #095aba;
	--brand-darken-color-text: #fff;
	--brand-lighten-color: #2680eb;

	--second-color: #247b5e;

	--gray-color: #6e6e6e;
	--gray-lighten-color: #cacaca;

	--button-background-color: var(--brand-color);
	--footer-link-color: var(--brand-darken-color);

	--function-shadow: rgba(0, 0, 0, 0.05);
	--function-shadow-active: rgba(0, 0, 0, 0.2);

	--card-overlay: rgba(0, 0, 0, 0.7);
	--card-overlay-text: #fff;

	--transparent-color: rgba(0, 0, 0, 0);
	--transparent-color-5: rgba(0, 0, 0, 0.05);
	--transparent-color-20: rgba(0, 0, 0, 0.2);
	--transparent-invert-color: rgba(255, 255, 255, 0);

	--transition-time: 0.2s;
	--transition-small-time: 0.1s;
	--transition-card-time: 1s;
	--transition-show-time: 1.5s;

	--line-height: 1.4;
	--line-height-code: 1.5;
	--general-line-height: 22px;

	--code-fonts: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

@media (prefers-color-scheme: dark) {
	:root {
		--main-background: #222;
		--main-text-color: #fff;

		--second-background: rgb(17, 17, 17);
		--second-background-transparent: rgba(17, 17, 17, 0);

		--brand-color: #227dec;

		--second-color: #298e6d;

		--button-background-color: #136edd;
		--footer-link-color: #4993ee;

		--function-shadow: rgba(255, 255, 255, 0.05);
		--function-shadow-active: rgba(255, 255, 255, 0.2);

		--transparent-color: rgba(255, 255, 255, 0);
		--transparent-color-5: rgba(255, 255, 255, 0.05);
		--transparent-color-20: rgba(255, 255, 255, 0.2);
		--transparent-invert-color: rgba(0, 0, 0, 0);
	}
}
