// colors chart

$blue: #386ede;
$blue-dusty: #215D9C;
$blue-dark: #003388;
$cyan: #00d6eb;
$orange: hsl(30, 100%, 46%);
$red: hsl(355, 80%, 45%);
$brown: hsl(10, 70%, 30%);
$yellow-dark: hsl(60, 98%, 30%);
$green: hsl(120, 57%, 35%);
$green-dark: hsl(150, 57%, 25%);
$green-light: hsl(110, 60%, 60%);
$pink: hsl(320, 70%, 60%);

html {
	--blue: #{$blue};
	--blue-dusty: #{$blue-dusty};
	--blue-dark: #{$blue-dark};
	--cyan: #{$cyan};
	--orange: #{$orange};
	--red: #{$red};
	--brown: #{$brown};
	--yellow-dark: #{$yellow-dark};
	--green: #{$green};
	--green-dark: #{$green-dark};
	--green-light: #{$green-light};
	--pink: #{$pink};
}

// colors attribution

$font-color: #3c3c33;
$primary-color: $blue; 
$secondary-color: $cyan;
$link-color: $primary-color;
$highlight-gradient: linear-gradient(to right, var(--primary-color) 30%, var(--secondary-color) 100%);

html {
	--primary-color: #{$primary-color};
	--secondary-color: #{$secondary-color};
	--font-color: #{$font-color};
	--font-color-light: #666;
	--link-color: #{$primary-color};
	--link-hover-color: #{$blue-dark};
	--link-disabled-color: #aaa;
	--background: #ecf0f3;
	--highlight-gradient: #{$highlight-gradient};
}
