/* Copyright 2021 - Created and designed by Rovota */
/* ---------------------- */

/* General */
:root {
	--font-family: 'Inter', sans-serif;

	--opacity-font: 0.65;
	--opacity-disabled: 0.5;

	--radius-small: 4px;
	--radius-medium: 6px;
	--radius-large: 10px;
	--radius-infinite: 100%;
	--radius-toggle: 9px;
	--radius-checkbox: 4px;

	--color-danger: 234, 77, 77;
	--color-autofill: 37, 142, 201;
}

@media (prefers-contrast: high) {
	:root {
		--opacity-font: 0.75;
		--opacity-disabled: 0.6;
	}
}

/* Themes */
.theme-light, .theme-automatic {
	--color-base: 246, 246, 246;
	--color-shadow: 32, 33, 37;
	--color-overlay: 32, 33, 37;
	--color-card: 255, 255, 255;
	--color-input: 250, 250, 250;
	--color-font: 26, 27, 30;
	--color-font-alt: 255, 255, 255;
}

.theme-dark {
	--color-base: 26, 27, 30;
	--color-shadow: 32, 33, 37;
	--color-overlay: 40, 41, 46;
	--color-card: 32, 33, 37;
	--color-input: 40, 41, 46;
	--color-font: 233, 233, 235;
	--color-font-alt: 255, 255, 255;
}

.theme-charcoal {
	--color-base: 0, 0, 0;
	--color-shadow: 0, 0, 0;
	--color-overlay: 32, 33, 37;
	--color-card: 17, 17, 17;
	--color-input: 32, 33, 37;
	--color-font: 220, 220, 220;
	--color-font-alt: 255, 255, 255;
}

.theme-metro {
	--radius-small: 0;
	--radius-medium: 0;
	--radius-large: 0;
	--radius-infinite: 0;
	--radius-toggle: 0;
	--radius-checkbox: 0;
	--color-base: 246, 246, 246;
	--color-shadow: 32, 33, 37;
	--color-overlay: 32, 33, 37;
	--color-card: 255, 255, 255;
	--color-input: 250, 250, 250;
	--color-font: 26, 27, 30;
	--color-font-alt: 255, 255, 255;
}

.theme-bubbly {
	--radius-small: 20px;
	--radius-medium: 10px;
	--radius-large: 20px;
	--radius-infinite: 100%;
	--radius-toggle: 9px;
	--radius-checkbox: 5px;
	--color-base: 246, 246, 246;
	--color-shadow: 32, 33, 37;
	--color-overlay: 32, 33, 37;
	--color-card: 255, 255, 255;
	--color-input: 250, 250, 250;
	--color-font: 26, 27, 30;
	--color-font-alt: 255, 255, 255;
}

/* States */
.accent-neutral {
	--color-accent: 27, 127, 184;
	--color-accent-alt: 31, 147, 214;
}

.accent-success {
	--color-accent: 26, 172, 93;
	--color-accent-alt: 30, 199, 108;
}

.accent-warning {
	--color-accent: 220, 143, 28;
	--color-accent-alt: 232, 169, 74;
}

.accent-danger {
	--color-accent: 184, 46, 27;
	--color-accent-alt: 213, 53, 31;
}

/* Accents */
.accent-default {
	--color-accent: 196, 20, 66;
	--color-accent-alt: 222, 23, 75;
}

.accent-blueberry {
	--color-accent: 131, 73, 236;
	--color-accent-alt: 142, 107, 240;
}

.accent-lavender {
	--color-accent: 170, 79, 225;
	--color-accent-alt: 197, 102, 255;
}

.accent-rose {
	--color-accent: 239, 87, 142;
	--color-accent-alt: 255, 122, 170;
}

.accent-raspberry {
	--color-accent: 229, 70, 70;
	--color-accent-alt: 235, 112, 112;
}

.accent-sunrise {
	--color-accent: 246, 144, 45;
	--color-accent-alt: 248, 172, 98;
}

.accent-pineapple {
	--color-accent: 244, 181, 42;
	--color-accent-alt: 245, 199, 96;
}

.accent-lime {
	--color-accent: 139, 195, 74;
	--color-accent-alt: 167, 209, 117;
}

.accent-emerald {
	--color-accent: 20, 195, 149;
	--color-accent-alt: 22, 217, 166;
}

.accent-mint {
	--color-accent: 8, 181, 170;
	--color-accent-alt: 9, 206, 194;
}

.accent-turquoise {
	--color-accent: 55, 184, 225;
	--color-accent-alt: 100, 200, 232;
}

.accent-carolina {
	--color-accent: 13, 137, 207;
	--color-accent-alt: 14, 153, 230;
}

.accent-azure {
	--color-accent: 61, 105, 218;
	--color-accent-alt: 76, 126, 253;
}

/* Automatic Dark Mode */
@media (prefers-color-scheme: dark) {
	.theme-automatic, .theme-metro, .theme-bubbly {
		--color-base: 26, 27, 30;
		--color-shadow: 32, 33, 37;
		--color-overlay: 40, 41, 46;
		--color-card: 32, 33, 37;
		--color-input: 40, 41, 46;
		--color-font: 233, 233, 235;
		--color-font-alt: 255, 255, 255;
	}

	.theme-charcoal {
		--color-base: 0, 0, 0;
		--color-shadow: 0, 0, 0;
		--color-overlay: 32, 33, 37;
		--color-card: 26, 27, 30;
		--color-input: 32, 33, 37;
		--color-font: 220, 220, 220;
		--color-font-alt: 255, 255, 255;
	}

	.accent-default {
		--color-accent: 212, 46, 90;
		--color-accent-alt: 235, 51, 100;
	}
}

.theme-dark.accent-default, .theme-charcoal.accent-default,
.theme-dark .accent-default, .theme-charcoal .accent-default {
	--color-accent: 212, 46, 90;
	--color-accent-alt: 235, 51, 100;
}