Add variables to customize main layout colors

Until now, we didn't have specific variables for the headers and were
using the brand colors instead. Now we maintain the brand colors as
default values, but allow overwriting them.

For the navigation and footer, we didn't even have variables.

app/assets/stylesheets/_consul_settings.scss

@@ -14,6 +14,7 @@
 $black: #222 !default;
 $white: #fdfdfd !default;
 
+$body-background: $white;
 $body-font-family: "Source Sans Pro", "Helvetica", "Arial", sans-serif !important !default;
 
 $closebutton-color: $black !default;
@@ -89,7 +90,11 @@ $highlight-soft:    #f3f8fd !default;
 $light:             #f5f7fa !default;
 $featured:          #ffdc5c !default;
 
+$footer:            #f1f1f1 !default;
 $footer-border:     #bfc1c3 !default;
+$main-header:       $brand !default;
+$subnavigation:     $body-background !default;
+$top-links:         $brand-secondary !default;
 
 $success-bg:        #dff0d8 !default;
 $success-border:    #d6e9c6 !default;

app/assets/stylesheets/layout.scss

@@ -547,7 +547,7 @@ body > header,
   }
 
   .top-bar {
-    @extend %brand-background;
+    @include background-with-text-contrast($main-header);
   }
 }
 
@@ -690,7 +690,7 @@ body > header,
 }
 
 .top-links {
-  @include background-with-text-contrast($brand-secondary);
+  @include background-with-text-contrast($top-links);
   display: flex;
   flex-wrap: wrap;
   font-size: $small-font-size;
@@ -734,6 +734,7 @@ body > header,
   flex-direction: column;
 
   @include breakpoint(medium) {
+    @include background-with-text-contrast($subnavigation);
     flex-direction: row;
     padding-bottom: 0;
 
@@ -909,7 +910,7 @@ footer {
 }
 
 .footer {
-  background: #f1f1f1;
+  @include background-with-text-contrast($footer);
   clear: both;
   margin-top: $line-height * 2;
   padding-bottom: $line-height;