Extract variable for SDG text color

We were using `#fff` in some places and `$white` in others. We're
choosing `#fff` because it has a better contrast against the lighter SDG
colors and because it's the one officially used by the United Nations.

app/assets/stylesheets/_consul_settings.scss

@@ -124,6 +124,7 @@ $off-screen-left: -1000rem !default;
 
 $sdg-icon-min-width: 45px !default;
 
+$sdg-text: #fff;
 $sdg-colors: (
   1: #e5243b,
   2: #dda63a,

app/assets/stylesheets/sdg/goals/show.scss

@@ -4,7 +4,7 @@
 
     > header {
       align-items: center;
-      color: #fff;
+      color: $sdg-text;
       display: flex;
       margin: $line-height / 2 0;
       text-shadow: 0 0 1px $black;

app/assets/stylesheets/sdg/related_list_selector.scss

@@ -6,7 +6,7 @@
   }
 
   .amsify-suggestags-area .amsify-select-tag {
-    color: $white;
+    color: $sdg-text;
 
     @each $code, $color in $sdg-colors {
       &[data-val^="#{$code}"] {
@@ -72,7 +72,7 @@
   }
 
   .remove-tag {
-    color: $white;
+    color: $sdg-text;
   }
 
   h3 {

app/assets/stylesheets/sdg/tag_list.scss

@@ -13,7 +13,7 @@
 
     a:not(.more-targets),
     span {
-      color: $white;
+      color: $sdg-text;
     }
 
     @each $code, $color in $sdg-colors {