Use css variables for colours. Move color, font and variable files to sass root folder.

assets/sass/components/box/_box.scss

@@ -20,7 +20,7 @@
 .box,
 %box {
   @include margin-bottom(1);
-  border: 5px solid $border;
+  border: 5px solid var(--color-border);
   padding: 1em;
 
   // Sass compiles this to the selector: .box__title, %box__title {}
@@ -44,7 +44,7 @@
   &:hover,
   &.is-focus,
   &--is-focus {
-    border-color: $text;
+    border-color: var(--color-text);
   }
 
   // Sass compiles this to the selector: .box--highlight, %box--highlight {}
@@ -52,6 +52,6 @@
   // the "highlight" is a _modifier_, creating a new variation of the standard
   // "box" component.
   &--highlight {
-    border-color: $link;
+    border-color: var(--color-link);
   }
 }

assets/sass/components/button/_button.scss

@@ -29,7 +29,7 @@ button,
   text-decoration: none;
   // Improve usability and consistency of cursor style between image-type `input` and others.
   cursor: pointer;
-  color: $button;
+  color: var(--color-button);
   text-align: center;
   background-image: linear-gradient(#f6f6f6, #e2e2e2);
   border: 1px solid #e4e4e4;
@@ -60,14 +60,14 @@ button,
   &:active {
     // Override any link underlines and color changes.
     text-decoration: none;
-    color: $button;
+    color: var(--color-button);
   }
 
   &:active {
     border-color: #555;
-    text-shadow: $button 0 -1px 0;
-    background: $grey-dark;
-    color: $text-bg;
+    text-shadow: var(--color-button 0 -1px 0)  0 -1px 0;
+    background: var(--color-grey-dark);
+    color: var(--color-text-bg);
   }
 }
 
@@ -91,9 +91,9 @@ button,
 %button--disabled[disabled] {
   // Re-set default cursor for disabled elements.
   cursor: default;
-  color: $button-disabled;
-  background-color: $grey-extra-light;
-  border-color: $grey-extra-light;
+  color: var(--color-button-disabled);
+  background-color: var(--color-grey-extra-light);
+  border-color: var(--color-grey-extra-light);
   background-image: none;
   text-shadow: none;
 
@@ -101,6 +101,6 @@ button,
   &:focus,
   &:active {
     // Override any link underlines and color changes.
-    color: $button-disabled;
+    color: var(--color-button-disabled);
   }
 }

assets/sass/components/cookieconsent/_cookieconsent.scss

@@ -5,9 +5,9 @@
   position: sticky;
   bottom: 0;
   width: 100%;
-  color: $warning;
-  background-color: $warning-bg;
-  border-top: 4px solid $warning-border;
+  color: var(--color-warning);
+  background-color: var(--color-warning-bg);
+  border-top: 4px solid var(--color-warning-border);
   text-align: center;
   transform: translateY(100vh);
   transition: all 130ms ease-in;
@@ -19,11 +19,11 @@
 
 .button {
   &--accept {
-    border-color: $status;
+    border-color: var(--color-status);
   }
 
   &--decline {
-    border-color: $warning-border;
+    border-color: var(--color-warning-border);
   }
 }
 

assets/sass/components/divider/_divider.scss

@@ -6,7 +6,7 @@
 %divider {
   @include margin(1 0);
   border: 0;
-  border-top: 1px solid $border;
+  border-top: 1px solid var(--color-border);
 
   // If used as a container, add a top margin to the first child.
   > :first-child {

assets/sass/components/header/_header.scss

@@ -31,7 +31,7 @@
   &__site-link {
     &:link,
     &:visited {
-      color: $text;
+      color: var(--color-text);
       text-decoration: none;
     }
 

assets/sass/components/highlight-mark/_highlight-mark.scss

@@ -6,7 +6,7 @@
 
 .highlight-mark,
 %highlight-mark {
-  color: $mark-highlight;
+  color: var(--color-mark-highlight);
   // Remove background highlighting from <mark> in normalize.
   background-color: transparent;
 }

assets/sass/components/inverted-box/_inverted-box.scss

@@ -3,13 +3,13 @@
 .inverted-box,
 %inverted-box {
   @include padding(.5);
-  background: $brand;
-  color: $text-bg;
+  background: var(--color-brand);
+  color: var(--color-text-bg);
   border-radius: 5px;
 
   :link,
   :visited {
-    color: $text-bg;
+    color: var(--color-text-bg);
   }
 
   p,

assets/sass/components/messages/_messages.scss

@@ -7,20 +7,20 @@
   width: 95%;
 
   &.status {
-    background-color: $status-bg;
-    color: $status;
-    border-color: $status;
+    background-color: var(--color-status-bg);
+    color: var(--color-status);
+    border-color: var(--color-status);
   }
 
   &.warning {
-    background-color: $warning-bg;
-    color: $warning;
-    border-color: $warning;
+    background-color: var(--color-warning-bg);
+    color: var(--color-warning);
+    border-color: var(--color-warning);
   }
 
   &.error {
-    background-color: $error-bg;
-    color: $error;
-    border-color: $error;
+    background-color: var(--color-error-bg);
+    color: var(--color-error);
+    border-color: var(--color-error);
   }
 }

assets/sass/components/watermark/_watermark.scss

@@ -10,7 +10,7 @@
   overflow: visible;
   // Remove background highlighting from <mark> in normalize.
   background-color: transparent;
-  color: $watermark;
+  color: var(--color-watermark);
   font-size: 75px;
   line-height: 1;
   text-align: center;

assets/sass/components/wireframe/_wireframe.scss

@@ -11,7 +11,7 @@ $with-wireframes: false !default;
 @if $with-wireframes {
   .wireframe,
   %wireframe {
-    outline: 1px solid $border;
+    outline: 1px solid var(--color-border);
   }
 
   //