/* Main Color */
:root {
	--bg-dark: hsl(0 0% 0%);
	--bg: hsl(0 0% 5%);
	--bg-light: hsl(0 0% 10%);

	--text: hsl(0 0% 95%);
	--text-muted: hsl(0 0% 70%);

	--loadingStart: hsl(200, 20%, 70%);
	--loadingEnd: hsl(200, 20%, 95%);
	--red: #d44a4a;

	color: var(--text);

	--alert-color-red: rgba(155, 19, 19, 0.7);
	--alert-color-green: rgba(68, 147, 81, 0.7);
	--alert-color-yellow: rgba(255, 211, 44, 0.7);
}

.light-theme {
	--bg-dark: hsl(0 0% 100%);
	--bg: hsl(0 0% 95%);
	--bg-light: hsl(0 0% 90%);

	--text: hsl(0 0% 5%);
	--text-muted: hsl(0 0% 30%);

	--loadingStart: hsl(200, 9%, 47%);
	--loadingEnd: hsl(200, 2%, 63%);
	--red: #fd8e8e;

	--alert-color-red: rgba(255, 168, 150, 0.7); //rgba(204, 136, 137, 0.6);
	--alert-color-green: rgba(133, 198, 143, 0.7); //rgba(52, 167, 100, .6);
	--alert-color-yellow: rgba(255, 234, 153, 0.7); //rgba(174, 147, 40, 0.6)
}

.primary-purple {
	--primary: #8957ff;
	--active-text: #7a4de4;
	&.light-theme {
		--active-text: #aa9ff6;
	}
}

.primary-pink {
	--primary: #fa8abb;
	--active-text: #dc80a7;
	&.light-theme {
		--active-text: #ffdbdb;
	}
}

.primary-red {
	--primary: #ff3366;
	--active-text: #e02d5a;
	&.light-theme {
		--active-text: #fcccd8;
	}
}

.primary-yellow {
	--primary: #ffbb00;
	--active-text: #e4a701;
	&.light-theme {
		--active-text: #fde9b8;
	}
}

.primary-blue {
	--primary: #02bbff;
	--active-text: #02a0d9;
	&.light-theme {
		--active-text: #a0e1f8;
	}
}

.primary-green {
	--primary: #00cc88;
	--active-text: #01a26c;
	&.light-theme {
		--active-text: #a5f8dc;
	}
}
