/*--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);	
	
	/*Teal — primary brand color (#00c2cb). Kept under the --blue name so
	  existing heading/accent rules pick it up without rewiring every selector.*/
	--blue-h:183;
	--blue-s:100%;
	--blue-l:40%;
	--blue:var(--blue-h), var(--blue-s), var(--blue-l);

	/*Light Teal — accent (underlines, CTA fills, icon chips)*/
	--light-blue-h:183;
	--light-blue-s:100%;
	--light-blue-l:45%;
	--light-blue:var(--light-blue-h), var(--light-blue-s), var(--light-blue-l);

	/*Primary color tokens consumed by SiteOrigin rows/accordions*/
	--primary-color:#00c2cb;
	--primary-light-color:#33d6de;

}

/*--Colors--*/
.black{color:hsl(var(--black));}
.white{color:hsl(var(--white));}
.blue{color:hsl(var(--blue));}
.light-blue{color:hsl(var(--light-blue));}

/*--Background Colors--*/
.black-bg{background-color:hsl(var(--black));}
.white-bg{background-color:hsl(var(--white));}
.blue-bg{background-color:hsl(var(--blue));}
.light-blue-bg{background-color:hsl(var(--light-blue));}