Use $body-background to remove color duplication

We're using `background: #fff` and `background: $white` in many places.
Sometimes we mean "use the same background as the body", which means if
we change the body background so it's, let's say, dark, we'll also have
to change all these places.

So now we're using `$body-background` in more places, so changing the
general background color is easier.

There are still some places where we use `#fff` or `$white`. Sometimes
it's hard to tell whether the intention is "use a white background here"
or "use the same background as the body here". When in doubt, I've left
it the way it was.

Just for testing purposes, I've tested locally how things would look
like if we added this code to `_consul_custom_overrides.scss`:

```
$body-background: #fea;
$card-background: $body-background;
$tab-background: $body-background;
$tab-content-background: $body-background;
$table-background: $body-background;
```

Or:

```
$body-background: #333;
$text: #fcfcfc;
$body-font-color: $text;
$card-background: $body-background;
$tab-background: $body-background;
$tab-content-background: $body-background;
$table-background: $body-background;
```

Testing shows we've still got a long way to go to make it easy to add
custom color themes, since there are many custom colors in the code.
Hopefully these changes bring us one step closer.

app/assets/stylesheets/admin.scss

@@ -711,7 +711,7 @@ table {
 // ---------------
 
 .markdown-editor {
-  background-color: #fff;
+  background-color: $body-background;
 
   .markdown-area,
   .markdown-preview {

app/assets/stylesheets/autocomplete_overrides.scss

@@ -14,7 +14,7 @@
   list-style: none;
   padding: $line-height / 4 $line-height / 3;
   display: block;
-  background: #fff;
+  background: $body-background;
   border: 1px solid $border;
   font-size: $small-font-size;
 

app/assets/stylesheets/budgets/phases.scss

@@ -74,7 +74,7 @@
     }
 
     a {
-      background: $white;
+      background: $body-background;
       color: inherit;
       height: 100%;
       padding: $line-height $line-height * 1.5;

app/assets/stylesheets/dashboard.scss

@@ -234,7 +234,7 @@
   position: relative;
 
   &::before {
-    background: #fff;
+    background: $body-background;
     border: 1px solid $border;
     border-radius: rem-calc(36);
     content: "\77";

app/assets/stylesheets/layout.scss

@@ -569,7 +569,7 @@ body > header,
 
       @include breakpoint(medium) {
         @include brand-text;
-        background: #fff;
+        background: $body-background;
         text-align: center;
       }
     }
@@ -585,7 +585,7 @@ body > header,
   .menu {
 
     &.is-dropdown-submenu {
-      background: #fff;
+      background: $body-background;
       color: $text;
       margin: 0;
       margin-top: rem-calc(-12);
@@ -685,7 +685,7 @@ body > header,
 .subnavigation {
 
   @include breakpoint(medium) {
-    background: #fff;
+    background: $body-background;
     color: $text;
     padding-bottom: 0;
   }
@@ -966,7 +966,7 @@ footer {
   text-align: center;
 
   span {
-    background: #fff;
+    background: $body-background;
     box-decoration-break: clone;
     font-weight: bold;
     padding: 0 $line-height / 2;
@@ -991,7 +991,7 @@ footer {
   select {
 
     option {
-      background: #fff;
+      background: $body-background;
       color: $text;
       border: 0;
       outline: none;
@@ -1352,7 +1352,7 @@ form {
   }
 
   &::before {
-    background: #fff;
+    background: $body-background;
     color: $brand;
     content: "\4d";
     font-family: "icons" !important;
@@ -1773,7 +1773,7 @@ table {
     position: relative;
 
     .icon-letter {
-      background: #fff;
+      background: $body-background;
       color: $color-info;
       font-size: rem-calc(24);
       margin-left: -27px;
@@ -1788,7 +1788,7 @@ table {
 // ------------
 
 .comments {
-  background: #fff;
+  background: $body-background;
   background-repeat: repeat-x;
   padding-bottom: $line-height * 4;
 
@@ -2266,7 +2266,7 @@ table {
   }
 
   .recommendation {
-    background: #fff;
+    background: $body-background;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
     display: block;
     margin-bottom: $line-height / 4;
@@ -2688,9 +2688,9 @@ table {
     }
 
     span {
-      background: #fff;
+      background: $body-background;
       border-radius: rem-calc(4);
-      color: #000;
+      color: $text;
       display: inline-block;
       font-size: $small-font-size;
       font-weight: bold;

app/assets/stylesheets/participation.scss

@@ -539,7 +539,7 @@
 .fixed-mobile-content {
 
   @include breakpoint(medium down) {
-    background: #fff;
+    background: $body-background;
     margin-bottom: rem-calc(-1) !important;
     padding-top: $line-height / 2;
   }
@@ -598,7 +598,7 @@
 }
 
 %panel {
-  background: #fff;
+  background: $body-background;
   border: 1px solid;
   border-color: #e5e6e9 #dfe0e4 #d0d1d5;
   border-radius: 0;
@@ -1086,7 +1086,7 @@
       margin-top: 0;
 
       &:hover {
-        background: #fff;
+        background: $body-background;
         color: $text;
       }
     }
@@ -1202,7 +1202,7 @@
 }
 
 .jumbo-budget {
-  background: $white;
+  background: $body-background;
   border-bottom: 2px solid $border;
 
   &.budget-heading {
@@ -1405,7 +1405,7 @@
     transition: height 0.3s;
 
     &.is-fixed {
-      background: $white;
+      background: $body-background;
       border-bottom: 2px solid $border;
       height: auto;
       left: 0;
@@ -1631,9 +1631,9 @@
 }
 
 .zoom-link {
-  background: #fff;
+  background: $body-background;
   border-radius: rem-calc(48);
-  color: #000;
+  color: $text;
   font-size: rem-calc(24);
   font-weight: bold;
   height: rem-calc(48);