:root {
	--black: #222;
	--white: rgb(var(--white-rgb), var(--white-transparancy, 1));
	--white-rgb: var(--white-rgb-var);
	--white-rgb-var: 248, 249, 250;
	--bright-grey: 240, 242, 245;
	--less-bright-grey: 232, 234, 238;
	--grey: 213, 217, 222;
	--dark-grey: 159, 163, 168;
	--dim-grey: 91, 92, 94;
	--black-grey: 11, 12, 12;
	--black-grey-alt: 24, 25, 25;
	--transparent-black: #05060722;
	--default-button-color: royalblue;
	--default-button-color-rgb: 65, 105, 225;
	--primary-bg-rgb: 231 240 255;
	--error: #e14141;
	--error-light: #e7aaaa;
	--real-white-rgb-var: 255, 255, 255;
	--real-black-rgb-var: 0, 0, 0;
	--real-white: rgb(var(--real-white-rgb-var));
	--real-black: rgb(var(--real-black-rgb-var));
	--real-white-rgb: var(--real-white-rgb-var);
	--real-black-rgb: var(--real-black-rgb-var);
	--background: var(--real-white);
	--svelte-text: #4a4a55;
	--header-height: 80px;

	--radius-xs: 4px;
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;

	--label-size-md: 1em;
	--label-size-lg: 1.2em;
	--label-size-xl: 1.5em;
}
html[data-theme='dark'] {
	--black: #eee;
	--white-rgb: 15, 16, 17;
	--transparent-black: rgba(250, 251, 252, 0.133);
	--bright-grey: 28, 29, 31;
	--less-bright-grey: var(--black-grey-alt);
	--grey: 91, 95, 99;
	--dark-grey: 100, 103, 108;
	--dim-grey: 149, 151, 153;
	--real-white-rgb: var(--real-black-rgb-var);
	--real-black-rgb: var(--real-white-rgb-var);
	--real-white: rgb(var(--real-black-rgb-var));
	--real-black: rgb(var(--real-white-rgb-var));
	--background: rgb(var(--black-grey));
	--svelte-text: lab(88.83% 2.55 -6.5);
	--primary-bg-rgb: 28 34 43;
}

.radius-xs {
	--radius: var(--radius-xs);
}
.radius-sm {
	--radius: var(--radius-sm);
}
.radius-md {
	--radius: var(--radius-md);
}
.radius-lg {
	--radius: var(--radius-lg);
}

.label-size-md {
	--label-size: var(--label-size-md);
}
.label-size-lg {
	--label-size: var(--label-size-lg);
}
.label-size-xl {
	--label-size: var(--label-size-xl);
}

@media (prefers-color-scheme: dark) {
	:root {
		--black: #eee;
		--white-rgb-var: 15, 16, 17;
		--transparent-black: rgba(250, 251, 252, 0.133);
		--bright-grey: 28, 29, 31;
		--less-bright-grey: var(--black-grey-alt);
		--grey: 91, 95, 99;
		--dark-grey: 100, 103, 108;
		--dim-grey: 149, 151, 153;
		--real-white-rgb: var(--real-black-rgb-var);
		--real-black-rgb: var(--real-white-rgb-var);
		--real-white: rgb(var(--real-black-rgb-var));
		--real-black: rgb(var(--real-white-rgb-var));
		--background: rgb(var(--black-grey));
		--svelte-text: lab(88.83% 2.55 -6.5);
		--primary-bg-rgb: 28 34 43;
	}
	html[data-theme='light'] {
		--black: #222;
		--white-rgb-var: 248, 249, 250;
		--bright-grey: 240, 242, 245;
		--less-bright-grey: 232, 234, 238;
		--grey: 213, 217, 222;
		--dark-grey: 159, 163, 168;
		--dim-grey: 91, 92, 94;
		--transparent-black: #05060722;
		--real-white-rgb: var(--real-white-rgb-var);
		--real-black-rgb: var(--real-black-rgb-var);
		--real-white: rgb(var(--real-white-rgb-var));
		--real-black: rgb(var(--real-black-rgb-var));
		--background: var(--real-white);
		--svelte-text: #4a4a55;
		--primary-bg-rgb: 231 240 255;
	}
}