@charset "UTF-8";

/* color */
:root {
	--red-color-h: 349;
	--red-color-s: 63%;
	--red-color-l: 47%;

	--yellow-color-h: 36;
	--yellow-color-s: 84%;
	--yellow-color-l: 45%;

	--orange-color-h: 22;
	--orange-color-s: 82%;
	--orange-color-l: 47%;

	--green-color-h: 162;
	--green-color-s: 48%;
	--green-color-l: 24%;
  
	--blue-color-h: 231;
	--blue-color-s: 63%;
	--blue-color-l: 47%;

	--indigo-color-h: 227;
	--indigo-color-s: 79%;
	--indigo-color-l: 30%;

	--purple-color-h: 256;
	--purple-color-s: 70%;
	--purple-color-l: 46%;

	--pink-color-h: 333;
	--pink-color-s: 64%;
	--pink-color-l: 53%;

	--black-color-h: 210;
	--black-color-s: 9%;
	--black-color-l: 22%;

	--red-color: hsl(var(--red-color-h), calc(var(--red-color-s) + 8%), calc(var(--red-color-l) + 7%)); 
	--red-color-100: hsl(var(--red-color-h), calc(var(--red-color-s) + 37%), calc(var(--red-color-l) + 47%));
	--red-color-300: hsl(var(--red-color-h), calc(var(--red-color-s) + 37%), calc(var(--red-color-l) + 37%));
	--red-color-900: hsl(var(--red-color-h), var(--red-color-s), var(--red-color-l));

	--yellow-color: hsl(var(--yellow-color-h), calc(var(--yellow-color-s) + 16%), calc(var(--yellow-color-l) + 3%));
	--yellow-color-100: hsl(var(--yellow-color-h), calc(var(--yellow-color-s) + 16%), calc(var(--yellow-color-l) + 49%));
	--yellow-color-300: hsl(var(--yellow-color-h), var(--yellow-color-s), calc(var(--yellow-color-l) + 29%));
	--yellow-color-900: hsl(var(--yellow-color-h), calc(var(--yellow-color-s) + 16%), var(--yellow-color-l));
	
	--orange-color: hsl(calc(var(--orange-color-h) + 3), calc(var(--orange-color-s) + 5%), calc(var(--orange-color-l) + 7%));
	--orange-color-100: hsl(var(--orange-color-h), calc(var(--orange-color-s) + 18%), calc(var(--orange-color-l) + 48%));
	--orange-color-300: hsl(var(--orange-color-h), calc(var(--orange-color-s) + 8%), calc(var(--orange-color-l) + 33%));
	--orange-color-900: hsl(calc(var(--orange-color-h) + 3), var(--orange-color-s), var(--orange-color-l));

	--green-color: hsl(var(--green-color-h), calc(var(--green-color-s) + 52%), calc(var(--green-color-l) + 4%));
	--green-color-100: hsl(calc(var(--green-color-h) + 4), calc(var(--green-color-s) + 12%), calc(var(--green-color-l) + 70%));
	--green-color-300: hsl(var(--green-color-h), var(--green-color-s),  calc(var(--green-color-l) + 46%));
	--green-color-900: hsl(var(--green-color-h), calc(var(--green-color-s) + 52%), var(--green-color-l));
 
	--blue-color: hsl(var(--blue-color-h), calc(var(--blue-color-s) + 11%), calc(var(--blue-color-l) + 7%));
	--blue-color-900: hsl(var(--blue-color-h), var(--blue-color-s), var(--blue-color-l));
	--blue-color-300: hsl(calc(var(--blue-color-h) + 1), calc(var(--blue-color-s) + 37%), calc(var(--blue-color-l) + 38%));
	--blue-color-100: hsl(calc(var(--blue-color-h) + 1), calc(var(--blue-color-s) + 37%), calc(var(--blue-color-l) + 48%));

	--indigo-color: hsl(var(--indigo-color-h), calc(var(--indigo-color-s) + 1%), calc(var(--indigo-color-l) + 4%));
	--indigo-color-900: hsl(var(--indigo-color-h), var(--indigo-color-s), var(--indigo-color-l));
	--indigo-color-300: hsl(var(--indigo-color-h), calc(var(--indigo-color-s) + 12%), calc(var(--indigo-color-l)  + 55%));
	--indigo-color-100: hsl(calc(var(--indigo-color-h) + 3), calc(var(--indigo-color-s) + 21%), calc(var(--indigo-color-l) + 66%));
	
	--purple-color: hsl(var(--purple-color-h), calc(var(--purple-color-s) + 10%), calc(var(--purple-color-l) + 7%));
	--purple-color-900: hsl(var(--purple-color-h), var(--purple-color-s), var(--purple-color-l));
	--purple-color-300: hsl(var(--purple-color-h), calc(var(--purple-color-s) + 20%), calc(var(--purple-color-l) + 40%));
	--purple-color-100: hsl(var(--purple-color-h), calc(var(--purple-color-s) + 20%), calc(var(--purple-color-l)  + 50%));
	
	--black-color: hsl(calc(var(--black-color-h) - 210), calc(var(--black-color-s) - 9%), calc(var(--black-color-l) - 22%));
	--black-color-900: hsl(calc(var(--black-color-h) + 6), var(--black-color-s), calc(var(--black-color-l)  + 3%));
	--black-color-300: hsl(var(--black-color-h), calc(var(--black-color-s) + 8%), calc(var(--black-color-l)  + 56%));
	--black-color-100: hsl(calc(var(--black-color-h) + 3), calc(var(--black-color-s) + 24%), calc(var(--black-color-l)  + 72%));

	--pink-color: hsl(var(--pink-color-h), calc(var(--pink-color-s) + 26%), calc(var(--pink-color-l) + 8%));
	--pink-color-900: hsl(var(--pink-color-h), var(--pink-color-s), var(--pink-color-l));
	--pink-color-300: hsl(var(--pink-color-h), calc(var(--pink-color-s) + 36%), calc(var(--pink-color-l)  + 34%));
	--pink-color-100: hsl(var(--pink-color-h), calc(var(--pink-color-s) + 36%), calc(var(--pink-color-l)  + 41%));
	--pink-color-50: hsl(var(--pink-color-h), calc(var(--pink-color-s) + 36%), calc(var(--pink-color-l)  + 45%));

	--black-color: hsl(calc(var(--black-color-h) - 210), calc(var(--black-color-s) - 9%), calc(var(--black-color-l) - 22%));
	--black-color-900: hsl(calc(var(--black-color-h) + 6), var(--black-color-s), calc(var(--black-color-l)  + 3%));
	--black-color-300: hsl(var(--black-color-h), calc(var(--black-color-s) + 8%), calc(var(--black-color-l)  + 56%));
	--black-color-100: hsl(calc(var(--black-color-h) + 3), calc(var(--black-color-s) + 24%), calc(var(--black-color-l)  + 72%));

 
 /* App Theme / Brand */
 --primary-color: var(--pink-color);
 --primary-border-color: var(--pink-color);
 --primary-hover-color: var(--pink-color-900);
 --primary-outline-hover-color: var(--pink-color-100);
 --primary-bg-color : var(--pink-color-100);
 --primary-bg-color-300 : var(--pink-color-300);
}