:root {
	/* hue, saturation(%), lightness(%) */
	--black: 							hsla(0, 0%, 0%, 1);
	--grey-50:							hsla(0, 0%, 6%, 1);
	--grey-100: 						hsla(0, 0%, 10%, 1);
  	--grey-200: 						hsla(0, 0%, 20%, 1);
  	--grey-300: 						hsla(0, 0%, 30%, 1);
  	--grey-400: 						hsla(0, 0%, 40%, 1);
  	--grey-500: 						hsla(0, 0%, 50%, 1);
  	--grey-600: 						hsla(0, 0%, 60%, 1);
  	--grey-700: 						hsla(0, 0%, 70%, 1);
  	--grey-800: 						hsla(0, 0%, 80%, 1);
  	--grey-900: 						hsla(0, 0%, 90%, 1);
  	--grey-950: 						hsla(0, 0%, 95%, 1);
  	--white: 							hsla(0, 0%, 100%, 1);
  	--border-radius: 					24px;
  	--heading-weight:					420;
  	--heading-weight-s:					440;
}

.light-mode {
	/* hue, saturation(%), lightness(%) */
	--brand-color:						hsl(
    									var(--brand-color-h),
    									var(--brand-color-s),
    									var(--brand-color-l));
	--brand-color-h: 					65;	 
    --brand-color-s: 					100%; 
    --brand-color-l: 					50%;
  	--background:						var(--grey-900);
  	--background-alt:					var(--grey-950);
  	--background-inverted:				var(--grey-50);
  	--background-inverted-alt:			var(--grey-100);		
  	--border-primary:					var(--grey-600);
  	--border-alt:					    var(--grey-700);
  	--text-main:						var(--grey-50);
  	--text-alt:							var(--grey-300);
  	--text-inverted:					var(--white);
  	--text-inverted-alt:				var(--grey-600);
  	--button-primary-bg:				var(--grey-100);
  	--button-primary-bg-hover:			var(--grey-200);
  	--button-primary-border:			var(--grey-100);
  	--button-primary-border-hover:		var(--grey-200);
  	--button-secondary-bg:				var(--white);
  	--button-secondary-bg-over:			var(--grey-100);
  	--button-secondary-border:			var(--grey-100);
  	--button-secondary-border-hover:	var(--grey-100);
  	--primary-link:						hsl(
    									var(--brand-color-h),
    									var(--brand-color-s),
    									calc(var(--brand-color-l) - 25%));
  	--primary-link-hover: 				hsl(
    									var(--brand-color-h),
    									var(--brand-color-s),
    									calc(var(--brand-color-l) - 35%));
   	--secondary-link:					var(--grey-400);
  	--secondary-link-hover:				var(--grey-200);
  	/*--state-ok: 						green;
	--state-warn: 						orange;
	--state-danger: 					red;*/
}

.dark-mode {
	/* hue, saturation(%), lightness(%) */
	--brand-color:						hsl(
    									var(--brand-color-h),
    									var(--brand-color-s),
    									var(--brand-color-l));
	--brand-color-h: 					224;	 
    --brand-color-s: 					100%; 
    --brand-color-l: 					50%;
  	--background: 						var(--grey-50);
  	--background-alt: 					var(--grey-100);
  	--background-inverted:				var(--white);
  	--background-inverted-alt:			var(--grey-950);					
  	--border-primary:					var(--grey-300);
  	--border-alt:					    var(--grey-200);
  	--text-main:						var(--white);
  	--text-alt:							var(--grey-700);
  	--text-inverted:					var(--grey-50);
  	--text-inverted-alt:				var(--grey-400);
  	--button-primary-bg:				var(--white);
  	--button-primary-bg-hover:			var(--grey-900);
  	--button-primary-border:			var(--white);
  	--button-primary-border-hover: 		var(--grey-900);
  	--button-secondary-bg:				var(--grey-50);
  	--button-secondary-bg-hover:		var(--white);
  	--button-secondary-border:			var(--white);
  	--button-secondary-border-hover:	var(--white);
  	--primary-link:						hsl(
    									var(--brand-color-h),
    									var(--brand-color-s),
    									calc(var(--brand-color-l) + 25%));
  	--primary-link-hover: 				hsl(
    									var(--brand-color-h),
    									var(--brand-color-s),
    									calc(var(--brand-color-l) + 35%));
   	--secondary-link:					var(--grey-600);
  	--secondary-link-hover:				var(--grey-800);
  	/*--state-ok: 						green;
		--state-warn: 					orange;
		--state-danger: 				red;*/
}