//
// Color system
//

$color1:             #ec6609;
$color1-trans1:      rgba(236, 102, 9,.8);
$color1-trans2:      rgba(236, 102, 9,.5);
$color1-trans3:      rgba(236, 102, 9,.2);

$color2:             #1dbae9;
$color2-trans1:      rgba(29, 186, 233,.8);
$color2-trans2:      rgba(29, 186, 233,.5);
$color2-trans3:      rgba(29, 186, 233,.2);

$color3:             #5a5a5a;
$color3-trans1:      rgba(90, 90, 90,.8);
$color3-trans2:      rgba(90, 90, 90,.5);
$color3-trans3:      rgba(90, 90, 90,.2);

$color4:             #313131;
$color4-trans1:      rgba(49, 49, 49,.8);
$color4-trans2:      rgba(49, 49, 49,.5);
$color4-trans3:      rgba(49, 49, 49,.2);

$color5:             #2a2a2a;
$color5-trans1:      rgba(42, 42, 42,.8);
$color5-trans2:      rgba(42, 42, 42,.5);
$color5-trans3:      rgba(42, 42, 42,.2);

$color6:             #ffffff;
$color6-trans1:      rgba(255, 255, 255,.8);
$color6-trans2:      rgba(255, 255, 255,.5);
$color6-trans3:      rgba(255, 255, 255,.2);

$color7:             #f0f0f0;
$color7-trans1:      rgba(240,240,240,.8);
$color7-trans2:      rgba(240,240,240,.5);
$color7-trans3:      rgba(240,240,240,.2);


//
// Class to id assignment
//

$orange:             $color1;
$orange-trans1:      $color1-trans1;
$orange-trans2:      $color1-trans2;
$orange-trans3:      $color1-trans3;

$lightblue:             $color2;
$lightblue-trans1:      $color2-trans1;
$lightblue-trans2:      $color2-trans2;
$lightblue-trans3:      $color2-trans3;

$lightgrey:             $color3;
$lightgrey-trans1:      $color3-trans1;
$lightgrey-trans2:      $color3-trans2;
$lightgrey-trans3:      $color3-trans3;

$grey:             $color4;
$grey-trans1:      $color4-trans1;
$grey-trans2:      $color4-trans2;
$grey-trans3:      $color4-trans3;

$darkgrey:             $color5;
$darkgrey-trans1:      $color5-trans1;
$darkgrey-trans2:      $color5-trans2;
$darkgrey-trans3:      $color5-trans3;

$white:             $color6;
$white-trans1:      $color6-trans1;
$white-trans2:      $color6-trans2;
$white-trans3:      $color6-trans3;

$ultralightgrey:             $color7;
$ultralightgrey-trans1:      $color7-trans1;
$ultralightgrey-trans2:      $color7-trans2;
$ultralightgrey-trans3:      $color7-trans3;

//
// Background color classes
//

.bg-color1,
.bg-orange {
	background-color: $orange;
}

.bg-color2,
.bg-lightblue {
	background-color: $lightblue;
}

.bg-color3,
.bg-lightgrey {
	background-color: $lightgrey;
}

.bg-color4,
.bg-grey {
	background-color: $grey;
}

.bg-color5,
.bg-darkgrey {
	background-color: $darkgrey;
}

.bg-color6,
.bg-white {
	background-color: $white;
}

.bg-color7,
.bg-ultralightgrey {
	background-color: $ultralightgrey;
}


//
// Copy&paste colors for _styleguide.scss
//

&.bg-color1 {
	background-color: $orange;
}

&.bg-color2 {
	background-color: $lightblue;
}

&.bg-color3 {
	background-color: $lightgrey;
}

&.bg-color4 {
	background-color: $grey;
}

&.bg-color5 {
	background-color: $darkgrey;
}

&.bg-color6 {
	background-color: $white;
}

&.bg-color7 {
	background-color: $ultralightgrey;
}