/*--Variables--*/
:root{

	/*White*/
	--white-h:0;
	--white-s:0%;
	--white-l:100%;
	--white:var(--white-h), var(--white-s), var(--white-l);
	
	/*Black*/
	--black-h:0;
	--black-s:0%;
	--black-l:0%;
	--black:var(--black-h), var(--black-s), var(--black-l);
	
	/*Dark Gray*/
	--dark-gray-h:240;
	--dark-gray-s:3%;
	--dark-gray-l:11%;
	--dark-gray:var(--dark-gray-h), var(--dark-gray-s), var(--dark-gray-l);
	
	/*Primary*/
	--primary-h:6;
	--primary-s:70%;
	--primary-l:84%;
	--primary:var(--primary-h), var(--primary-s), var(--primary-l);
	
	/*Primary Dark*/
	--primary-dark-h:14;
	--primary-dark-s:36%;
	--primary-dark-l:58%;
	--primary-dark:var(--primary-dark-h), var(--primary-dark-s), var(--primary-dark-l);	
	
	/*Light Gray*/
	--light-gray-h:0;
	--light-gray-s:0%;
	--light-gray-l:98%;
	--light-gray:var(--light-gray-h), var(--light-gray-s), var(--light-gray-l);	
	
	--primary-gradient:linear-gradient(to bottom, hsl(var(--primary)) 0%, hsl(var(--primary-dark)) 100%);
	
}

/*Color*/
.white{color:hsl(var(--white));}
.black{color:hsl(var(--black));}
.dark-gray{color:hsl(var(--dark-gray));}
.primary{color:hsl(var(--primary));}
.primary-dark{color:hsl(var(--primary-dark));}
.light-gray{color:hsl(var(--light-gray));}

/*Background Color*/
.white-bg{background-color:hsl(var(--white));}
.black-bg{background-color:hsl(var(--black));}
.dark-gray-bg{background-color:hsl(var(--dark-gray));}
.primary-bg{background-color:hsl(var(--primary));}
.primary-dark-bg{background-color:hsl(var(--primary-dark));}
.light-gray-bg{background-color:hsl(var(--light-gray));}