:root {
	--color-error: crimson;

	--color-gray-0: hsl(0, 0%, 100%);
	--color-gray-100: hsl(0, 0%, 92.5%);
	--color-gray-200: hsl(0, 0%, 85%);
	--color-gray-300: hsl(0, 0%, 65%);
	--color-gray-400: hsl(0, 0%, 50%);
	--color-gray-500: hsl(0, 0%, 37.5%);
	--color-gray-600: hsl(0, 0%, 20%);
	--color-gray-700: hsl(0, 0%, 10%);
	--color-gray-800: hsl(0, 0%, 0%);

	--color-bordeaux: #8C0034;
	
	--color-red-400: #F71818;

	--color-yellow-100: #FFF8BF;
	--color-yellow-300: #ffc300;
	--color-yellow-400: #F7B918;
	--color-yellow-900: #6a5100;


	--color-green-100: #E1F3E0;
	--color-green-300: #04A24E;
	--color-green-350: #359752;
	--color-green-400: #1F8C3F;
	--color-green-700: #076834;
	--color-green-800: #0D6326;
	--color-green-900: #012b14;
}

.cl-green-800 {
	color: var(--color-green-800)
}

.cl-green-900 {
	color: var(--color-green-900)
}




.cl-gray-0 {
	color: var(--color-gray-0)
}

.cl-gray-1 {
	color: var(--color-gray-1)
}

.cl-gray-2 {
	color: var(--color-gray-2)
}

.cl-gray-3 {
	color: var(--color-gray-3)
}

.cl-gray-4 {
	color: var(--color-gray-4)
}

.cl-gray-5 {
	color: var(--color-gray-5)
}

.cl-gray-6 {
	color: var(--color-gray-6)
}

.cl-gray-7 {
	color: var(--color-gray-7)
}

.cl-gray-8 {
	color: var(--color-gray-8)
}





.bg-gray-0 {
	background-color: var(--color-gray-0)
}

.bg-gray-1 {
	background-color: var(--color-gray-1)
}

.bg-gray-2 {
	background-color: var(--color-gray-2)
}

.bg-gray-3 {
	background-color: var(--color-gray-3)
}

.bg-gray-4 {
	background-color: var(--color-gray-4)
}

.bg-gray-5 {
	background-color: var(--color-gray-5)
}

.bg-gray-6 {
	background-color: var(--color-gray-6)
}

.bg-gray-7 {
	background-color: var(--color-gray-7)
}

.bg-gray-8 {
	background-color: var(--color-gray-8)
}