diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0e0f0a643..85bef5259 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -36,7 +36,15 @@ Introducing theme variables! CSS variables beginning with `--theme-` will adjust
 
 ## Color
 
-* To come in follow up PR.
+* Modernization:
+  * Default to CSS vars for all color values
+  * Removed `@supports` declarations if they only had color declarations
+* Reorganization:
+  * Added `--theme-` prefix to color variables expected to morph between light/dark modes
+  * Renamed `-title-` to `-heading-` in (to match typography naming)
+  * Added new form color variables (`--theme-form-*`, `--theme-field-*`)
+  * Added status color variables (`--theme-color-success-*`, `--theme-color-error-*`, `--theme-color-warning-*`, `--theme-color-info-*`)
+* Removed Sass color variables from `_themes-sass.scss` (use CSS variables instead)
 
 ## Migration Tips
 
@@ -91,6 +99,18 @@ See the [Migration Guide](https://protocol.mozilla.org/docs/usage/migration) for
     - `multi-column*`
     - `transform`, `transform-origin`, `transform-style`
     - `transition`, `transition-property`, `transition-duration`, `transition-delay`
+* Rename CSS color variables to use `--theme-` prefix:
+  * `--(background-color|body-text-color|link-color|heading-text-color)(-*)` → `--theme-$1$2`
+* Removed Sass color variables (use CSS variables instead):
+  * `$(background-color|body-text-color|link-color)(-*)` → `var(--theme-$1$2)`
+  * `$title-text-color(-inverse)?` → `var(--theme-heading-text-color$1)` (note: renamed to `heading`)
+* Removed form Sass variables (use CSS variables instead):
+  * `forms.$form-red` → `var(--theme-form-red)`
+  * `forms.$form-text` → `var(--theme-form-text-color)`
+  * `forms.$form-inactive` → `var(--theme-form-text-color-inactive)`
+  * `forms.$(field-border-color|field-border|field-focus-ring)(-*)` → `var(--theme-$1$2)`
+  * `forms.$button-border-color-focus` → `var(--theme-button-border-color-focus)`
+* You can remove `@supports (--css: variables)` blocks that only contain color declarations, as CSS custom properties are now required.
 
 # 22.0.0
 
diff --git a/assets/sass/protocol/base/elements/_document.scss b/assets/sass/protocol/base/elements/_document.scss
index c866bcf0d..8c94bed87 100644
--- a/assets/sass/protocol/base/elements/_document.scss
+++ b/assets/sass/protocol/base/elements/_document.scss
@@ -6,20 +6,15 @@
 
 html {
     font-size: 100%;
-    background: $color-white;
+    background: var(--theme-background-color);
 }
 
 body {
-    background: $background-color;
-    color: $body-text-color;
+    background: var(--theme-background-color);
+    color: var(--theme-body-text-color);
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     @include text-body-md;
-
-    @supports (--css: variable) {
-        background: var(--background-color);
-        color: var(--body-text-color);
-    }
 }
 
 // A few places use a class to hide elements. We should try to avoid that.
diff --git a/assets/sass/protocol/base/elements/_forms.scss b/assets/sass/protocol/base/elements/_forms.scss
index f1bd343ac..b00601d8c 100644
--- a/assets/sass/protocol/base/elements/_forms.scss
+++ b/assets/sass/protocol/base/elements/_forms.scss
@@ -3,6 +3,7 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 @use '../../includes/lib' as *;
+@use '../../includes/tokens' as tokens;
 @use '../../includes/forms';
 
 // * -------------------------------------------------------------------------- */
@@ -47,7 +48,7 @@ textarea {
 
     /* stylelint-disable-next-line no-duplicate-selectors */
     & {
-        // needs to come after @includes to over-ride value
+        // needs to come after @include text-body-md to over-ride value
         line-height: var(--theme-button-line-height);
     }
 }
@@ -134,45 +135,45 @@ input[type='url'] {
     @include forms.form-input;
 
     &::placeholder {
-        color: forms.$form-inactive;
+        color: var(--theme-form-text-color-inactive);
     }
 
     &:hover {
-        border-color: forms.$field-border-color-hover;
+        border-color: var(--theme-field-border-color-hover);
     }
 
     &:focus {
         outline: none;
-        border-color: forms.$field-border-color-focus;
-        box-shadow: forms.$field-focus-ring;
+        border-color: var(--theme-field-border-color-focus);
+        box-shadow: var(--theme-field-focus-ring);
 
         .mzp-t-dark & {
-            box-shadow: forms.$field-focus-ring-dark;
+            box-shadow: var(--theme-field-focus-ring-dark);
         }
     }
 
     .mzp-is-error & {
-        border-color: forms.$field-border-color-error;
+        border-color: var(--theme-field-border-color-error);
         box-shadow: none;
 
         &:hover {
-            border-color: forms.$field-border-color-error-hover;
+            border-color: var(--theme-field-border-color-error-hover);
         }
 
         &:focus {
-            border-color: forms.$form-red;
-            box-shadow: forms.$field-focus-ring-error;
+            border-color: var(--theme-form-red);
+            box-shadow: var(--theme-field-focus-ring-error);
         }
     }
 
     &:disabled,
     &[aria-disabled='true'] {
-        background: $color-marketing-gray-10;
-        border-color: forms.$field-border-color-disabled;
-        color: forms.$form-inactive;
+        background: var(--theme-background-color-secondary);
+        border-color: var(--theme-field-border-color-disabled);
+        color: var(--theme-form-text-color-inactive);
 
         &:focus {
-            border-color: forms.$field-border-color-disabled-focus;
+            border-color: var(--theme-field-border-color-disabled-focus);
         }
     }
 }
@@ -247,44 +248,44 @@ input[type='search'] {
 
 input[type='color'],
 input[type='file'] {
-    background: $color-white;
+    background: var(--theme-background-color);
     border-radius: forms.$field-border-radius;
-    border: forms.$field-border;
+    border: var(--theme-field-border);
     line-height: var(--theme-button-line-height);
     margin: 0 0 forms.$field-v-spacing;
 
     &:hover {
-        border-color: forms.$field-border-color-hover;
+        border-color: var(--theme-field-border-color-hover);
     }
 
     &:focus {
-        border-color: forms.$field-border-color-focus;
-        box-shadow: forms.$field-focus-ring;
+        border-color: var(--theme-field-border-color-focus);
+        box-shadow: var(--theme-field-focus-ring);
         outline: none;
     }
 
     .mzp-is-error & {
-        border-color: forms.$field-border-color-error;
+        border-color: var(--theme-field-border-color-error);
         box-shadow: none;
 
         &:hover {
-            border-color: forms.$field-border-color-error-hover;
+            border-color: var(--theme-field-border-color-error-hover);
         }
 
         &:focus {
-            border-color: forms.$form-red;
-            box-shadow: forms.$field-focus-ring-error;
+            border-color: var(--theme-form-red);
+            box-shadow: var(--theme-field-focus-ring-error);
         }
     }
 
     &:disabled,
     &[aria-disabled='true'] {
-        background: forms.$field-border-color-disabled;
-        border-color: forms.$field-border-color-disabled;
-        color: forms.$form-inactive;
+        background: var(--theme-field-border-color-disabled);
+        border-color: var(--theme-field-border-color-disabled);
+        color: var(--theme-form-text-color-inactive);
 
         &:focus {
-            border-color: forms.$field-border-color-disabled-focus;
+            border-color: var(--theme-field-border-color-disabled-focus);
         }
     }
 }
@@ -319,7 +320,7 @@ select {
         &,
         &:hover,
         &:focus {
-            background: $color-white;
+            background: var(--theme-background-color);
             padding: forms.$field-padding;
         }
     }
@@ -329,48 +330,48 @@ select {
     }
 
     &:hover {
-        border-color: forms.$field-border-color-hover;
+        border-color: var(--theme-field-border-color-hover);
         background-image: $url-image-caret-down-link-hover, forms.$select-bg;
     }
 
     &:focus {
-        border-color: forms.$field-border-color-focus;
+        border-color: var(--theme-field-border-color-focus);
         background-image: $url-image-caret-down-link, forms.$select-bg;
-        box-shadow: forms.$field-focus-ring;
-        color: #222;
+        box-shadow: var(--theme-field-focus-ring);
+        color: var(--theme-body-text-color);
         outline: none;
 
         .mzp-t-dark & {
-            box-shadow: forms.$field-focus-ring-dark;
+            box-shadow: var(--theme-field-focus-ring-dark);
         }
     }
 
     .mzp-is-error & {
-        border-color: forms.$field-border-color-error;
+        border-color: var(--theme-field-border-color-error);
         box-shadow: none;
 
         &:hover {
-            border-color: forms.$field-border-color-error-hover;
+            border-color: var(--theme-field-border-color-error-hover);
         }
 
         &:focus {
-            border-color: forms.$form-red;
-            box-shadow: forms.$field-focus-ring-error;
+            border-color: var(--theme-form-red);
+            box-shadow: var(--theme-field-focus-ring-error);
         }
     }
 
     &:disabled,
     &[aria-disabled='true'] {
         background-image: $url-image-caret-down-form, forms.$select-bg-disabled;
-        border-color: forms.$field-border-color-disabled;
-        color: forms.$form-inactive;
+        border-color: var(--theme-field-border-color-disabled);
+        color: var(--theme-form-text-color-inactive);
 
         &:hover {
-            border-color: forms.$field-border-color-disabled;
+            border-color: var(--theme-field-border-color-disabled);
         }
 
         &:focus {
-            border-color: forms.$field-border-color-disabled-focus;
+            border-color: var(--theme-field-border-color-disabled-focus);
         }
     }
 
@@ -386,7 +387,7 @@ select {
     @include forms.form-info;
 
     .mzp-is-error & {
-        color: forms.$form-red;
+        color: var(--theme-form-red);
     }
 }
 
@@ -395,9 +396,9 @@ select {
 
 .mzp-c-form-errors {
     @include white-links;
-    background-color: forms.$form-red;
+    background-color: var(--theme-form-red);
     border-radius: forms.$field-border-radius;
-    color: $color-white;
+    color: var(--theme-body-text-color-inverse);
     padding: $spacing-sm;
     margin-bottom: $spacing-xl;
 
@@ -418,6 +419,6 @@ select {
     input[type='checkbox'],
     input[type='radio'] {
         border-radius: forms.$field-border-radius;
-        box-shadow: forms.$field-focus-ring-error;
+        box-shadow: var(--theme-field-focus-ring-error);
     }
 }
diff --git a/assets/sass/protocol/base/elements/_links.scss b/assets/sass/protocol/base/elements/_links.scss
index 7b0e96941..295ec2e15 100644
--- a/assets/sass/protocol/base/elements/_links.scss
+++ b/assets/sass/protocol/base/elements/_links.scss
@@ -11,36 +11,23 @@
 // 4. Focus
 
 a {
-    color: $link-color;
+    color: var(--theme-link-color);
     text-decoration: underline;
 
     // where is used to decrease specificity to avoid conflicts with button styles
     &:where(:visited) {
-        color: $link-color-visited;
+        color: var(--theme-link-color-visited);
     }
 
     &:hover,
     &:active {
-        color: $link-color-hover;
+        color: var(--theme-link-color-hover);
         text-decoration: none;
     }
 
     &:active {
         background-color: rgb(0, 0, 0, 0.05);
     }
-
-    @supports (--css: variables) {
-        color: var(--link-color);
-
-        &:where(:visited) {
-            color: var(--link-color-visited);
-        }
-
-        &:hover,
-        &:active {
-            color: var(--link-color-hover);
-        }
-    }
 }
 
 .mzp-t-dark {
diff --git a/assets/sass/protocol/base/elements/_quotes.scss b/assets/sass/protocol/base/elements/_quotes.scss
index 8e9c72869..1fd48007b 100644
--- a/assets/sass/protocol/base/elements/_quotes.scss
+++ b/assets/sass/protocol/base/elements/_quotes.scss
@@ -9,14 +9,14 @@ blockquote {
     @include text-heading-sm;
     border-color: $color-marketing-gray-20;
     border-style: solid;
-    color: $title-text-color;
+    color: var(--theme-heading-text-color);
     font-weight: bold;
     margin: $spacing-lg auto;
     padding: $spacing-sm $spacing-lg;
 
     cite {
         @include text-heading-xs;
-        color: $body-text-color-secondary;
+        color: var(--theme-body-text-color-secondary);
 
         &::before {
             content: '— ';
@@ -26,12 +26,4 @@ blockquote {
     & > :last-child {
         margin-bottom: 0;
     }
-
-    @supports (--css: variables) {
-        color: var(--heading-text-color);
-
-        cite {
-            color: var(--body-text-color-secondary);
-        }
-    }
 }
diff --git a/assets/sass/protocol/base/elements/_titles.scss b/assets/sass/protocol/base/elements/_titles.scss
index 0764ac7f2..b416826b2 100644
--- a/assets/sass/protocol/base/elements/_titles.scss
+++ b/assets/sass/protocol/base/elements/_titles.scss
@@ -12,7 +12,7 @@ h3,
 h4,
 h5,
 h6 {
-    color: $title-text-color;
+    color: var(--theme-heading-text-color);
     font-family: var(--theme-heading-font-family);
     font-variant-ligatures: var(--theme-heading-font-ligatures);
     letter-spacing: var(--theme-heading-letter-spacing);
@@ -20,15 +20,7 @@ h6 {
     margin: 0 0 0.5em;
 
     .mzp-t-dark & {
-        color: $title-text-color-inverse;
-    }
-
-    @supports (--css: variables) {
-        color: var(--heading-text-color);
-
-        .mzp-t-dark & {
-            color: var(--heading-text-color-inverse);
-        }
+        color: var(--theme-heading-text-color-inverse);
     }
 }
 
diff --git a/assets/sass/protocol/base/utilities/_backgrounds.scss b/assets/sass/protocol/base/utilities/_backgrounds.scss
index 8440df3cc..767a5a396 100644
--- a/assets/sass/protocol/base/utilities/_backgrounds.scss
+++ b/assets/sass/protocol/base/utilities/_backgrounds.scss
@@ -7,45 +7,24 @@
 // Theme classes for background colors
 
 .mzp-t-background-secondary {
-    background-color: $background-color-secondary;
-
-    @supports (--css: variables) {
-        background-color: var(--background-color-secondary);
-    }
+    background-color: var(--theme-background-color-secondary);
 }
 
 .mzp-t-background-tertiary {
-    background-color: $background-color-tertiary;
-
-    @supports (--css: variables) {
-        background-color: var(--background-color-tertiary);
-    }
+    background-color: var(--theme-background-color-tertiary);
 }
 
 .mzp-t-dark {
-    background-color: $background-color-inverse;
-    color: $body-text-color-inverse;
-
-    @supports (--css: variables) {
-        background-color: var(--background-color-inverse);
-        color: var(--body-text-color-inverse);
-    }
+    background-color: var(--theme-background-color-inverse);
+    color: var(--theme-body-text-color-inverse);
 }
 
 .mzp-t-dark.mzp-t-background-secondary,
 .mzp-t-dark .mzp-t-background-secondary {
-    background-color: $background-color-secondary-inverse;
-
-    @supports (--css: variables) {
-        background-color: var(--background-color-secondary-inverse);
-    }
+    background-color: var(--theme-background-color-secondary-inverse);
 }
 
 .mzp-t-dark.mzp-t-background-tertiary,
 .mzp-t-dark .mzp-t-background-tertiary {
-    background-color: $background-color-tertiary-inverse;
-
-    @supports (--css: variables) {
-        background-color: var(--background-color-tertiary-inverse);
-    }
+    background-color: var(--theme-background-color-tertiary-inverse);
 }
diff --git a/assets/sass/protocol/base/utilities/_rich-text.scss b/assets/sass/protocol/base/utilities/_rich-text.scss
index 94ffc58b9..7b1aadc92 100644
--- a/assets/sass/protocol/base/utilities/_rich-text.scss
+++ b/assets/sass/protocol/base/utilities/_rich-text.scss
@@ -3,6 +3,7 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 @use '../../includes/lib' as *;
+@use '../../includes/tokens' as tokens;
 @use '../../base/elements/tables' as *;
 
 .mzp-u-rich-text {
@@ -89,7 +90,7 @@
     }
 
     pre {
-        background-color: $color-light-gray-20;
+        background-color: tokens.$color-light-gray-20;
         margin-bottom: 1.25em;
         overflow-x: auto;
         padding: $spacing-md;
diff --git a/assets/sass/protocol/components/_breadcrumb.scss b/assets/sass/protocol/components/_breadcrumb.scss
index c68363a87..f539ee758 100644
--- a/assets/sass/protocol/components/_breadcrumb.scss
+++ b/assets/sass/protocol/components/_breadcrumb.scss
@@ -5,7 +5,7 @@
 @use '../includes/lib' as *;
 
 .mzp-c-breadcrumb {
-    background-color: $background-color-secondary;
+    background-color: var(--theme-background-color-secondary);
     padding: $spacing-md 0;
 
     .mzp-c-breadcrumb-list {
@@ -50,14 +50,6 @@
     }
 
     &.mzp-t-dark {
-        background-color: $background-color-secondary-inverse;
-    }
-
-    @supports (--css: variables) {
-        background-color: var(--background-color-secondary);
-
-        &.mzp-t-dark {
-            background-color: var(--background-color-secondary-inverse);
-        }
+        background-color: var(--theme-background-color-secondary-inverse);
     }
 }
diff --git a/assets/sass/protocol/components/_button.scss b/assets/sass/protocol/components/_button.scss
index 7c4d424ac..ff9604cd9 100644
--- a/assets/sass/protocol/components/_button.scss
+++ b/assets/sass/protocol/components/_button.scss
@@ -32,8 +32,8 @@
     }
 
     &:focus {
-        border-color: forms.$button-border-color-focus;
-        box-shadow: forms.$field-focus-ring;
+        border-color: var(--theme-button-border-color-focus);
+        box-shadow: var(--theme-field-focus-ring);
         outline-offset: 1px;
     }
 
@@ -72,28 +72,28 @@
 .mzp-c-button { /* stylelint-disable-line no-duplicate-selectors */
     // * ---------------------------------------------------------------------- */
     // Primary
-    background-color: $color-moz-black;
-    border: 2px solid $color-black;
-    color: $color-white;
+    background-color: var(--theme-body-text-color);
+    border: 2px solid var(--theme-body-text-color);
+    color: var(--theme-background-color);
 
     &:hover,
     &:active {
-        background-color: $color-white;
-        border-color: $color-black;
-        color: $color-black;
+        background-color: var(--theme-background-color);
+        border-color: var(--theme-body-text-color);
+        color: var(--theme-body-text-color);
     }
 
     // dark
     &.mzp-t-dark {
-        background-color: $color-white;
-        border-color: $color-white;
-        color: $color-black;
+        background-color: var(--theme-body-text-color-inverse);
+        border-color: var(--theme-body-text-color-inverse);
+        color: var(--theme-background-color-inverse);
 
         &:hover,
         &:active {
-            background-color: $color-moz-black;
-            border-color: $color-white;
-            color: $color-white;
+            background-color: var(--theme-background-color-inverse);
+            border-color: var(--theme-body-text-color-inverse);
+            color: var(--theme-body-text-color-inverse);
         }
     }
 
@@ -102,27 +102,27 @@
 
     &.mzp-t-secondary {
         background-color: transparent;
-        border-color: $color-black;
-        color: $color-black;
+        border-color: var(--theme-body-text-color);
+        color: var(--theme-body-text-color);
 
         &:hover,
         &:active {
-            background-color: $color-moz-black;
-            border-color: $color-black;
-            color: $color-white;
+            background-color: var(--theme-body-text-color);
+            border-color: var(--theme-body-text-color);
+            color: var(--theme-background-color);
         }
 
         // dark
         &.mzp-t-dark {
             background-color: transparent;
-            border-color: $color-white;
-            color: $color-white;
+            border-color: var(--theme-body-text-color-inverse);
+            color: var(--theme-body-text-color-inverse);
 
             &:hover,
             &:active {
-                background-color: $color-white;
-                border-color: $color-white;
-                color: $color-black;
+                background-color: var(--theme-body-text-color-inverse);
+                border-color: var(--theme-body-text-color-inverse);
+                color: var(--theme-background-color-inverse);
             }
         }
     }
@@ -133,15 +133,15 @@
     &.mzp-t-product {
         &,
         &.mzp-t-dark {
-            background-color: $color-blue-50;
-            border-color: $color-blue-50;
-            color: $color-white;
+            background-color: var(--theme-link-color);
+            border-color: var(--theme-link-color);
+            color: var(--theme-background-color);
 
             &:hover,
             &:active {
-                background-color: $color-white;
-                border-color: $color-blue-50;
-                color: $color-blue-50;
+                background-color: var(--theme-background-color);
+                border-color: var(--theme-link-color);
+                color: var(--theme-link-color);
             }
         }
 
@@ -149,14 +149,14 @@
         &.mzp-t-secondary {
             &,
             &.mzp-t-dark {
-                background-color: $color-white;
-                border-color: $color-blue-50;
-                color: $color-blue-50;
+                background-color: var(--theme-background-color);
+                border-color: var(--theme-link-color);
+                color: var(--theme-link-color);
 
                 &:hover,
                 &:active {
-                    background-color: $color-blue-50;
-                    color: $color-white;
+                    background-color: var(--theme-link-color);
+                    color: var(--theme-background-color);
                 }
             }
         }
@@ -180,13 +180,13 @@
         &.mzp-t-dark {
             background-color: rgba($color-white, 0.1);
             border-color: rgba($color-white, 0.6);
-            color: $color-white;
+            color: var(--theme-body-text-color-inverse);
 
             &:hover,
             &:active {
                 background-color: rgba($color-white, 0.2);
                 border-color: rgba($color-white, 0.6);
-                color: $color-white;
+                color: var(--theme-body-text-color-inverse);
             }
         }
     }
diff --git a/assets/sass/protocol/components/_card.scss b/assets/sass/protocol/components/_card.scss
index bf356789a..57a9581c8 100644
--- a/assets/sass/protocol/components/_card.scss
+++ b/assets/sass/protocol/components/_card.scss
@@ -9,7 +9,7 @@
 
 .mzp-c-card {
     box-sizing: border-box;
-    background: $color-white;
+    background: var(--theme-background-color);
     margin-bottom: $spacing-lg;
 
     // Preserve aspect ratio of images and avoid content jump when loading.
@@ -93,11 +93,11 @@
     .mzp-c-card-block-link {
         border-radius: $border-radius-xs;
         display: block;
-        color: $color-black;
+        color: var(--theme-body-text-color);
         text-decoration: none;
 
         .mzp-c-card-cta-text {
-            color: $color-link;
+            color: var(--theme-link-color);
         }
 
         &:hover,
@@ -134,16 +134,16 @@
 
 .mzp-c-card.mzp-t-dark,
 .mzp-t-dark .mzp-c-card {
-    background-color: $background-color-inverse;
-    color: $body-text-color-inverse;
+    background-color: var(--theme-background-color-inverse);
+    color: var(--theme-body-text-color-inverse);
 
     .mzp-c-card-tag,
     .mzp-c-card-meta {
-        color: $body-text-color-inverse;
+        color: var(--theme-body-text-color-inverse);
     }
 
     .mzp-c-card-block-link {
-        color: $body-text-color-inverse;
+        color: var(--theme-body-text-color-inverse);
 
         &:hover,
         &:active,
@@ -152,25 +152,7 @@
         }
 
         .mzp-c-card-cta-text {
-            color: $body-text-color-inverse;
-        }
-    }
-
-    @supports (--css: variables) {
-        background-color: var(--background-color-inverse);
-        color: var(--body-text-color-inverse);
-
-        .mzp-c-card-tag,
-        .mzp-c-card-meta {
-            color: var(--body-text-color-inverse);
-        }
-
-        .mzp-c-card-block-link {
-            color: var(--body-text-color-inverse);
-
-            .mzp-c-card-cta-text {
-                color: var(--body-text-color-inverse);
-            }
+            color: var(--theme-body-text-color-inverse);
         }
     }
 }
diff --git a/assets/sass/protocol/components/_emphasis-box.scss b/assets/sass/protocol/components/_emphasis-box.scss
index 424ad2f46..ae913620d 100644
--- a/assets/sass/protocol/components/_emphasis-box.scss
+++ b/assets/sass/protocol/components/_emphasis-box.scss
@@ -7,23 +7,14 @@
 // * -------------------------------------------------------------------------- */
 // Base emphasis Box class
 .mzp-c-emphasis-box {
-    background-color: $background-color;
+    background-color: var(--theme-background-color);
     border-radius: $border-radius-md;
     box-shadow: $box-shadow-sm;
     margin: $spacing-md;
     padding: $spacing-xl;
 
     &.mzp-t-dark {
-        background-color: $background-color-inverse;
-        color: $body-text-color-inverse;
-    }
-
-    @supports (--css: variables) {
-        background-color: var(--background-color);
-
-        &.mzp-t-dark {
-            background-color: var(--background-color-inverse);
-            color: var(--body-text-color-inverse);
-        }
+        background-color: var(--theme-background-color-inverse);
+        color: var(--theme-body-text-color-inverse);
     }
 }
diff --git a/assets/sass/protocol/components/_feature-card.scss b/assets/sass/protocol/components/_feature-card.scss
index 114c19d6a..f7b5f64bf 100644
--- a/assets/sass/protocol/components/_feature-card.scss
+++ b/assets/sass/protocol/components/_feature-card.scss
@@ -63,18 +63,10 @@
 
     // dark theme color styling
     .mzp-t-dark & {
-        color: $body-text-color-inverse;
+        color: var(--theme-body-text-color-inverse);
 
         .mzp-c-card-feature-desc {
-            color: $body-text-color-secondary-inverse;
-        }
-
-        @supports (--css: variables) {
-            color: var(--body-text-color-inverse);
-
-            .mzp-c-card-feature-desc {
-                color: var(--body-text-color-secondary-inverse);
-            }
+            color: var(--theme-body-text-color-secondary-inverse);
         }
     }
 
diff --git a/assets/sass/protocol/components/_footer.scss b/assets/sass/protocol/components/_footer.scss
index cce6d0573..adc582e48 100644
--- a/assets/sass/protocol/components/_footer.scss
+++ b/assets/sass/protocol/components/_footer.scss
@@ -4,18 +4,19 @@
 
 @use 'sass:math';
 @use '../includes/lib' as *;
+@use '../includes/tokens' as tokens;
 
 @mixin footer-line {
-    border-bottom: 1px solid $color-light-gray-50;
+    border-bottom: 1px solid tokens.$color-light-gray-50;
 }
 
 // * -------------------------------------------------------------------------- */
 // Footer section styles
 
 .mzp-c-footer {
-    background: $color-black;
+    background: var(--theme-background-color-inverse);
     clear: both;
-    color: $color-white;
+    color: var(--theme-body-text-color-inverse);
     margin: 0;
     width: 100%;
     @include font-mozilla-text;
@@ -144,7 +145,7 @@
     &,
     & button {
         background-color: transparent;
-        color: $color-light-gray-50;
+        color: tokens.$color-light-gray-50;
         font-weight: bold;
         margin-bottom: 0;
         padding: $spacing-md 0;
@@ -157,13 +158,13 @@
 
         /* stylelint-disable-next-line no-duplicate-selectors */
         & {
-            // needs to come after @includes to over-ride value
+            // needs to come after @include footer-line to over-ride value
             border: 0;
         }
     }
 
     & button {
-        color: $color-white;
+        color: var(--theme-body-text-color-inverse);
     }
 
     &.is-summary {
@@ -233,10 +234,10 @@
 
 .mzp-c-footer-secondary {
     position: relative;
-    color: $color-light-gray-50;
+    color: tokens.$color-light-gray-50;
 
     a {
-        color: $color-light-gray-50;
+        color: tokens.$color-light-gray-50;
 
         &:hover,
         &:focus,
@@ -291,7 +292,7 @@
 
             &:hover,
             &:focus {
-                border-bottom-color: $color-white;
+                border-bottom-color: var(--theme-body-text-color-inverse);
             }
         }
     }
diff --git a/assets/sass/protocol/components/_menu-item.scss b/assets/sass/protocol/components/_menu-item.scss
index 243ff4327..1633e936e 100644
--- a/assets/sass/protocol/components/_menu-item.scss
+++ b/assets/sass/protocol/components/_menu-item.scss
@@ -12,7 +12,7 @@ $icon-size: 24px;
 
     .mzp-c-menu-item-link {
         display: block;
-        color: $color-black;
+        color: var(--theme-body-text-color);
         text-decoration: none;
 
         &:hover,
@@ -20,8 +20,8 @@ $icon-size: 24px;
         &:focus {
             .mzp-c-menu-item-title {
                 transition: border-bottom-color 100ms ease-in-out;
-                border-bottom: 2px solid $color-black;
-                color: $color-black;
+                border-bottom: 2px solid var(--theme-body-text-color);
+                color: var(--theme-body-text-color);
             }
         }
 
@@ -77,13 +77,13 @@ $icon-size: 24px;
         }
 
         a {
-            color: $color-black;
+            color: var(--theme-body-text-color);
             text-decoration: none;
 
             &:hover,
             &:active,
             &:focus {
-                color: $color-black;
+                color: var(--theme-body-text-color);
                 text-decoration: underline;
             }
         }
diff --git a/assets/sass/protocol/components/_menu-list.scss b/assets/sass/protocol/components/_menu-list.scss
index 949f4114b..08a4ac205 100644
--- a/assets/sass/protocol/components/_menu-list.scss
+++ b/assets/sass/protocol/components/_menu-list.scss
@@ -15,7 +15,7 @@
 }
 
 .mzp-c-menu-list-list {
-    background-color: $color-white;
+    background-color: var(--theme-background-color);
     box-shadow: 0 0 6px 0 rgb(0, 0, 0, 0.3);
     border-radius: $border-radius-sm;
 }
@@ -24,7 +24,7 @@
     display: inline-block;
 
     a {
-        color: $color-link;
+        color: var(--theme-link-color);
         display: inline-block;
         padding: $spacing-sm;
         position: relative;
@@ -48,7 +48,7 @@
         &:hover,
         &:focus {
             background: $color-marketing-gray-20;
-            color: $color-link-hover;
+            color: var(--theme-link-color-hover);
 
             &::after {
                 background: $url-image-download-link-hover center center no-repeat;
@@ -72,7 +72,7 @@
             @include bidi(((padding, 0 (16px + $spacing-sm) 0 0, 0 0 0 (16px + $spacing-sm)),));
             background: transparent;
             border: 0;
-            color: $color-link;
+            color: var(--theme-link-color);
             cursor: pointer;
             font-family: inherit;
             font-size: inherit;
@@ -100,7 +100,7 @@
 
             &:hover,
             &:focus {
-                color: $color-link-hover;
+                color: var(--theme-link-color-hover);
                 text-decoration: none;
 
                 &::after {
diff --git a/assets/sass/protocol/components/_menu.scss b/assets/sass/protocol/components/_menu.scss
index 2b85673e2..a06a428f1 100644
--- a/assets/sass/protocol/components/_menu.scss
+++ b/assets/sass/protocol/components/_menu.scss
@@ -6,7 +6,7 @@
 
 @mixin highlighted {
     &::after {
-        background: $color-black;
+        background: var(--theme-body-text-color);
         bottom: -1px;
         content: '';
         height: 1px;
@@ -47,7 +47,7 @@
 .mzp-c-menu-category {
     .mzp-c-menu-title {
         border-bottom: 1px solid $color-marketing-gray-30;
-        color: $color-black;
+        color: var(--theme-body-text-color);
         display: block;
         font-weight: bold;
         margin-bottom: 0;
@@ -204,7 +204,7 @@
 
 .mzp-c-menu-panel {
     box-sizing: border-box;
-    background: $color-white;
+    background: var(--theme-background-color);
     display: none;
     padding-top: $spacing-lg;
     width: 100%;
diff --git a/assets/sass/protocol/components/_modal.scss b/assets/sass/protocol/components/_modal.scss
index 7b562cb4d..8a88f1ce1 100644
--- a/assets/sass/protocol/components/_modal.scss
+++ b/assets/sass/protocol/components/_modal.scss
@@ -94,7 +94,7 @@ html.mzp-is-noscroll {
         }
 
         &:focus {
-            outline: 1px dotted $color-white;
+            outline: 1px dotted var(--theme-body-text-color-inverse);
         }
     }
 }
@@ -103,7 +103,7 @@ html.mzp-is-noscroll {
     background: transparent;
     margin: 0 auto;
     padding-top: $spacing-lg;
-    color: $color-white;
+    color: var(--theme-body-text-color-inverse);
     @include text-body-lg;
     @include light-links;
 }
diff --git a/assets/sass/protocol/components/_navigation.scss b/assets/sass/protocol/components/_navigation.scss
index c1f02155d..848542942 100644
--- a/assets/sass/protocol/components/_navigation.scss
+++ b/assets/sass/protocol/components/_navigation.scss
@@ -8,8 +8,8 @@
 // Navigation styles
 
 .mzp-c-navigation {
-    background: $color-white;
-    color: $color-black;
+    background: var(--theme-background-color);
+    color: var(--theme-body-text-color);
 
     .mzp-c-navigation-l-content {
         @include clearfix;
diff --git a/assets/sass/protocol/components/_notification-bar.scss b/assets/sass/protocol/components/_notification-bar.scss
index 7a4742b9d..5c2b1f1b1 100644
--- a/assets/sass/protocol/components/_notification-bar.scss
+++ b/assets/sass/protocol/components/_notification-bar.scss
@@ -8,9 +8,9 @@
     background-color: $color-marketing-gray-20;
     border-radius: $border-radius-sm;
     border: 1px;
-    box-shadow: $box-shadow-md;
     box-sizing: border-box;
-    color: $color-black;
+    box-shadow: $box-shadow-md;
+    color: var(--theme-body-text-color);
     font-weight: normal;
     margin: $layout-xs $spacing-md 0;
     padding: $spacing-md $spacing-2xl;
@@ -104,64 +104,64 @@
     }
 
     &.mzp-t-success {
-        background-color: $color-green-30;
+        background-color: var(--theme-color-success-bg);
 
         @media #{$mq-sm} {
             .mzp-c-notification-bar-button {
-                background-color: $color-green-60;
+                background-color: var(--theme-color-success-hover);
 
                 &:hover,
                 &:focus {
-                    background-color: $color-green-70;
+                    background-color: var(--theme-color-success-active);
                 }
             }
         }
     }
 
     &.mzp-t-error {
-        background-color: $color-red-30;
+        background-color: var(--theme-color-error-bg);
 
         @media #{$mq-sm} {
             .mzp-c-notification-bar-button {
-                background-color: $color-red-60;
+                background-color: var(--theme-color-error-hover);
 
                 &:hover,
                 &:focus {
-                    background-color: $color-red-70;
+                    background-color: var(--theme-color-error-active);
                 }
             }
         }
     }
 
     &.mzp-t-warning {
-        background-color: $color-yellow-20;
+        background-color: var(--theme-color-warning-bg);
 
         @media #{$mq-sm} {
             .mzp-c-notification-bar-button {
-                background-color: $color-yellow-40;
+                background-color: var(--theme-color-warning-hover);
 
                 &:hover,
                 &:focus {
-                    background-color: $color-yellow-50;
+                    background-color: var(--theme-color-warning-active);
                 }
             }
         }
     }
 
     &.mzp-t-click {
-        background-color: $color-blue-50;
-        color: $color-white;
+        background-color: var(--theme-color-info);
+        color: var(--theme-body-text-color-inverse);
         font-weight: 600;
 
         .mzp-c-notification-bar-button {
             background-image: url('#{$image-path}/icons/close-white.svg');
 
             @media #{$mq-sm} {
-                background-color: $color-blue-70;
+                background-color: var(--theme-color-info-hover);
 
                 &:hover,
                 &:focus {
-                    background-color: $color-blue-80;
+                    background-color: var(--theme-color-info-active);
                 }
             }
         }
diff --git a/assets/sass/protocol/components/_sidebar-menu.scss b/assets/sass/protocol/components/_sidebar-menu.scss
index 140a1351a..54f78877f 100644
--- a/assets/sass/protocol/components/_sidebar-menu.scss
+++ b/assets/sass/protocol/components/_sidebar-menu.scss
@@ -42,7 +42,7 @@
         }
 
         &.mzp-is-current {
-            color: $color-black;
+            color: var(--theme-body-text-color);
         }
     }
 }
diff --git a/assets/sass/protocol/components/_sticky-promo.scss b/assets/sass/protocol/components/_sticky-promo.scss
index 635a8d322..6df67f7f6 100644
--- a/assets/sass/protocol/components/_sticky-promo.scss
+++ b/assets/sass/protocol/components/_sticky-promo.scss
@@ -31,7 +31,7 @@ $logos: (
         (right, $spacing-md, auto),
         (left, auto, $spacing-md),
     ));
-    background-color: $color-white;
+    background-color: var(--theme-background-color);
     border-radius: $border-radius-sm;
     bottom: 0;
     box-shadow: $box-shadow-sm;
@@ -67,13 +67,8 @@ $logos: (
 
     // Dark theme
     &.mzp-t-dark {
-        background-color: $background-color-inverse;
-        color: $body-text-color-inverse;
-
-        @supports (--css: variables) {
-            background-color: var(--background-color-inverse);
-            color: var(--body-text-color-inverse);
-        }
+        background-color: var(--theme-background-color-inverse);
+        color: var(--theme-body-text-color-inverse);
     }
 
     // Product logos
diff --git a/assets/sass/protocol/components/forms/_choice.scss b/assets/sass/protocol/components/forms/_choice.scss
index 0f38a4c25..dca6f2878 100644
--- a/assets/sass/protocol/components/forms/_choice.scss
+++ b/assets/sass/protocol/components/forms/_choice.scss
@@ -87,9 +87,9 @@
         &[type='radio'] + label::before {
             @include bidi(((left, 0, right, auto),));
             box-sizing: border-box;
-            background: $color-white;
+            background: var(--theme-background-color);
             border-radius: 2px;
-            border: forms.$field-border;
+            border: var(--theme-field-border);
             content: '';
             cursor: pointer;
             display: block;
@@ -117,8 +117,8 @@
                 (left, 0.03rem, auto),
                 (right, auto, 0.83rem),
             ));
-            border-bottom: remify(3px) solid $color-white;
-            border-right: remify(3px) solid $color-white;
+            border-bottom: remify(3px) solid var(--theme-background-color);
+            border-right: remify(3px) solid var(--theme-background-color);
             content: '';
             display: block;
             height: 0.75rem;
@@ -132,7 +132,7 @@
         &[type='radio']:checked + label::before {
             background-color: forms.$choice-fill;
             border-color: forms.$choice-fill;
-            box-shadow: inset 0 0 0 0.25em $color-white;
+            box-shadow: inset 0 0 0 0.25em var(--theme-background-color);
         }
 
         // hover
@@ -141,20 +141,20 @@
         &[type='checkbox'] + label:hover::before,
         &[type='radio']:hover + label::before,
         &[type='radio'] + label:hover::before {
-            border-color: forms.$field-border-color-hover;
+            border-color: var(--theme-field-border-color-hover);
         }
 
         // focus
 
         &[type='checkbox']:focus + label::before,
         &[type='radio']:focus + label::before {
-            border-color: forms.$field-border-color-hover;
-            box-shadow: forms.$field-focus-ring;
+            border-color: var(--theme-field-border-color-hover);
+            box-shadow: var(--theme-field-focus-ring);
         }
 
         &[type='radio']:checked:focus + label::before {
-            border-color: forms.$field-border-color-hover;
-            box-shadow: inset 0 0 0 0.25em $color-white, forms.$field-focus-ring;
+            border-color: var(--theme-field-border-color-hover);
+            box-shadow: inset 0 0 0 0.25em var(--theme-background-color), var(--theme-field-focus-ring);
         }
 
         // error
@@ -162,13 +162,13 @@
         .mzp-is-error & {
             &[type='checkbox'] + label::before,
             &[type='radio'] + label::before {
-                border-color: forms.$field-border-color-error;
+                border-color: var(--theme-field-border-color-error);
             }
 
             &[type='checkbox']:checked + label::before,
             &[type='radio']:checked + label::before {
-                background-color: forms.$field-border-color-error;
-                border-color: forms.$field-border-color-error;
+                background-color: var(--theme-field-border-color-error);
+                border-color: var(--theme-field-border-color-error);
             }
 
             // hover
@@ -176,18 +176,18 @@
             &[type='checkbox'] + label:hover::before,
             &[type='radio']:hover + label::before,
             &[type='radio'] + label:hover::before {
-                border-color: forms.$field-border-color-error-hover;
+                border-color: var(--theme-field-border-color-error-hover);
             }
 
             // focus
             &[type='checkbox']:focus + label::before,
             &[type='radio']:focus + label::before {
-                border-color: forms.$field-border-color-error-hover;
-                box-shadow: forms.$field-focus-ring-error;
+                border-color: var(--theme-field-border-color-error-hover);
+                box-shadow: var(--theme-field-focus-ring-error);
             }
 
             &[type='radio']:checked:focus + label::before {
-                box-shadow: inset 0 0 0 0.25em $color-white, forms.$field-focus-ring-error;
+                box-shadow: inset 0 0 0 0.25em var(--theme-background-color), var(--theme-field-focus-ring-error);
             }
         }
 
@@ -195,22 +195,22 @@
 
         &[type='checkbox'][disabled] + label::before,
         &[type='radio'][disabled] + label::before {
-            border-color: forms.$field-border-color-disabled;
+            border-color: var(--theme-field-border-color-disabled);
         }
 
         &[type='checkbox'][disabled]:checked + label::before {
             background-color: $color-marketing-gray-10;
-            border-color: forms.$field-border-color-disabled;
+            border-color: var(--theme-field-border-color-disabled);
         }
 
         &[type='checkbox'][disabled]:checked + label::after {
-            border-bottom-color: forms.$field-border-color-disabled;
-            border-right-color: forms.$field-border-color-disabled;
+            border-bottom-color: var(--theme-field-border-color-disabled);
+            border-right-color: var(--theme-field-border-color-disabled);
         }
 
         &[type='radio'][disabled]:checked + label::before {
-            background-color: forms.$field-border-color-disabled;
-            border-color: forms.$field-border-color-disabled;
+            background-color: var(--theme-field-border-color-disabled);
+            border-color: var(--theme-field-border-color-disabled);
         }
 
         // disabled hover
@@ -218,18 +218,18 @@
         &[type='checkbox'][disabled] + label:hover::before,
         &[type='radio'][disabled]:hover + label::before,
         &[type='radio'][disabled] + label:hover::before {
-            border-color: forms.$field-border-color-disabled;
+            border-color: var(--theme-field-border-color-disabled);
         }
 
         // disabled focus
         &[type='checkbox'][disabled]:focus + label::before,
         &[type='radio'][disabled]:focus + label::before {
-            border-color: forms.$field-border-color-disabled;
-            box-shadow: forms.$field-focus-ring-error;
+            border-color: var(--theme-field-border-color-disabled);
+            box-shadow: var(--theme-field-focus-ring-error);
         }
 
         &[type='radio'][disabled]:checked:focus + label::before {
-            box-shadow: inset 0 0 0 0.25em $color-white, forms.$field-focus-ring;
+            box-shadow: inset 0 0 0 0.25em var(--theme-background-color), var(--theme-field-focus-ring);
         }
     }
 
@@ -257,7 +257,7 @@
     @include forms.form-info;
 
     .mzp-c-choices + & {
-        margin-top: forms.$field-v-spacing * -1 + forms.$info-v-spacing;
+        margin-top: calc(forms.$field-v-spacing * -1 + forms.$info-v-spacing);
     }
 
     .mzp-c-choice-label + & {
diff --git a/assets/sass/protocol/components/forms/_form.scss b/assets/sass/protocol/components/forms/_form.scss
index d066332aa..0a0bfae38 100644
--- a/assets/sass/protocol/components/forms/_form.scss
+++ b/assets/sass/protocol/components/forms/_form.scss
@@ -14,21 +14,12 @@
 //     - form-footer
 
 .mzp-c-form {
-    color: forms.$form-text;
+    color: var(--theme-form-text-color);
     margin-bottom: forms.$field-v-spacing;
 
     &.mzp-t-dark,
     .mzp-t-dark & {
-        color: $body-text-color-secondary-inverse;
-    }
-
-    @supports (--css: variables) {
-        color: var(--body-text-color-secondary);
-
-        &.mzp-t-dark,
-        .mzp-t-dark & {
-            color: var(--body-text-color-secondary-inverse);
-        }
+        color: var(--theme-body-text-color-secondary-inverse);
     }
 
     // if we're using the form component bottom spacing comes from `field` and `choice` components
@@ -67,7 +58,7 @@
 .mzp-c-form-title,
 legend.mzp-c-form-title {
     @include text-heading-xs;
-    color: $title-text-color;
+    color: var(--theme-heading-text-color);
     margin: 0 0 $spacing-lg;
 
     .mzp-c-form-header > & {
@@ -75,15 +66,7 @@ legend.mzp-c-form-title {
     }
 
     .mzp-t-dark & {
-        color: $title-text-color-inverse;
-    }
-
-    @supports (--css: variables) {
-        color: var(--heading-text-color);
-
-        .mzp-t-dark & {
-            color: var(--heading-text-color-inverse);
-        }
+        color: var(--theme-heading-text-color-inverse);
     }
 }
 
diff --git a/assets/sass/protocol/components/forms/_msg.scss b/assets/sass/protocol/components/forms/_msg.scss
index 18f8c2f68..ba77096b3 100644
--- a/assets/sass/protocol/components/forms/_msg.scss
+++ b/assets/sass/protocol/components/forms/_msg.scss
@@ -16,7 +16,7 @@
 
 .mzp-c-field-msg {
     .mzp-c-field + & {
-        margin-top: forms.$field-v-spacing * -1 + forms.$label-v-spacing;
+        margin-top: calc(forms.$field-v-spacing * -1 + forms.$label-v-spacing);
     }
 }
 
diff --git a/assets/sass/protocol/components/forms/_status.scss b/assets/sass/protocol/components/forms/_status.scss
index 850b385bd..e97a4b6c5 100644
--- a/assets/sass/protocol/components/forms/_status.scss
+++ b/assets/sass/protocol/components/forms/_status.scss
@@ -20,20 +20,20 @@ input[type='url'],
 select,
 textarea {
     .mzp-is-error & {
-        border-color: forms.$field-border-color-error;
+        border-color: var(--theme-field-border-color-error);
         box-shadow: none;
 
         &:hover {
-            border-color: forms.$field-border-color-error-hover;
+            border-color: var(--theme-field-border-color-error-hover);
         }
 
         &:focus {
-            border-color: forms.$field-border-color-error;
-            box-shadow: forms.$field-focus-ring-error;
+            border-color: var(--theme-field-border-color-error);
+            box-shadow: var(--theme-field-focus-ring-error);
         }
 
         &:focus:hover {
-            border-color: forms.$field-border-color-error-hover;
+            border-color: var(--theme-field-border-color-error-hover);
         }
     }
 }
diff --git a/assets/sass/protocol/includes/_themes-sass.scss b/assets/sass/protocol/includes/_themes-sass.scss
index dabe3ea02..7bc053cb9 100644
--- a/assets/sass/protocol/includes/_themes-sass.scss
+++ b/assets/sass/protocol/includes/_themes-sass.scss
@@ -18,23 +18,3 @@ $v-grid-lg: tokens.$layout-md;
 $h-grid-lg: tokens.$layout-lg;
 $v-grid-xl: tokens.$layout-xl;
 $h-grid-xl: 80px;
-
-// Colors
-$background-color-tertiary-inverse: tokens.$color-dark-gray-40;
-$background-color-tertiary: tokens.$color-light-gray-30;
-$background-color-secondary-inverse: tokens.$color-dark-gray-60;
-$background-color-secondary: tokens.$color-light-gray-10;
-$background-color-inverse: tokens.$color-black;
-$background-color: tokens.$color-white;
-$body-text-color-secondary-inverse: tokens.$color-light-gray-30;
-$body-text-color-secondary: tokens.$color-dark-gray-90;
-$body-text-color-inverse: tokens.$color-white;
-$body-text-color: tokens.$color-black;
-$link-color-hover-inverse: tokens.$color-blue-05;
-$link-color-hover: tokens.$color-link-hover;
-$link-color-inverse: tokens.$color-blue-10;
-$link-color-visited-inverse: tokens.$color-violet-10;
-$link-color-visited: tokens.$color-link-visited;
-$link-color: tokens.$color-link;
-$title-text-color-inverse: tokens.$color-white;
-$title-text-color: tokens.$color-black;
diff --git a/assets/sass/protocol/includes/forms/_index.scss b/assets/sass/protocol/includes/forms/index.scss
similarity index 53%
rename from assets/sass/protocol/includes/forms/_index.scss
rename to assets/sass/protocol/includes/forms/index.scss
index 96a99e149..230e12554 100644
--- a/assets/sass/protocol/includes/forms/_index.scss
+++ b/assets/sass/protocol/includes/forms/index.scss
@@ -12,34 +12,11 @@
 // -------------------------------------------------------------------------- */
 // variables
 
-// colors
-$form-red: #d70022;
-$form-text: $body-text-color-secondary;
-$form-inactive: $color-marketing-gray-70;
-
-// fields
-$field-border-color: $color-marketing-gray-50;
-$field-border-color-hover: $color-link-hover;
-$field-border-color-focus: $color-link;
-$field-border-color-error: $form-red;
-$field-border-color-error-hover: $color-red-80;
-$field-border-color-disabled: $color-marketing-gray-30;
-$field-border-color-disabled-focus: $color-marketing-gray-80;
-$field-border: 2px solid $field-border-color;
-$field-min-width: $content-xs - ($layout-xs * 2);
 $field-border-radius: $border-radius-sm;
 $field-padding: $spacing-sm;
 $field-h-spacing: $spacing-md;
 $field-v-spacing: $spacing-lg;
-$field-focus-ring: 0 0 0 2px rgba($color-blue-40, 0.5);
-$field-focus-ring-dark: 0 0 0 2px color.mix($color-blue-40, $color-white);
-$field-focus-ring-white: 0 0 0 2px $color-white;
-$field-focus-ring-outline: 2px solid color.scale($color-blue-50, $saturation: -15%, $lightness: 70%);
-$field-focus-ring-error: 0 0 0 2px rgba($color-red-50, 0.5);
-
-// buttons
-$button-border-color-focus: $color-blue-50;
-$button-border-color-focus-product: $color-blue-40;
+$field-min-width: $content-xs - ($layout-xs * 2);
 
 // label
 $label-v-spacing: $spacing-sm;
@@ -49,16 +26,42 @@ $info-v-spacing: $spacing-md;
 $symbol-spacing: calc(1.5em + #{$spacing-sm * 2});
 
 // select
-$select-bg: linear-gradient(to bottom, $color-white 0%, $color-white 100%); // must keep gradient to avoid bugs
-$select-bg-disabled: linear-gradient(to bottom, $color-marketing-gray-10 0%, $color-marketing-gray-10 100%);
+$select-bg: linear-gradient(to bottom, var(--theme-background-color) 0%, var(--theme-background-color) 100%); // must keep gradient to avoid bugs
+$select-bg-disabled: linear-gradient(to bottom, var(--theme-background-color-secondary) 0%, var(--theme-background-color-secondary) 100%);
 
 // choices
 $choice-height: remify(22px);
 $choice-spacing: remify(22px + $spacing-sm);
-$choice-fill: $color-link;
-$choice-fill-error: $form-red;
+$choice-fill: var(--theme-link-color);
+$choice-fill-error: var(--theme-form-red);
 $line-height-shim: 0.15em; // two elements with text appear to have more space between them than two block elements with solid edges, this shim is about equal to the distance between the top of the text and the edge of it's containing block
 
+:root {
+    // colors
+    --theme-form-red: #d70022;
+    --theme-form-text-color: var(--theme-body-text-color-secondary);
+    --theme-form-text-color-inactive: #{$color-marketing-gray-70};
+
+    // fields TKTK
+    --theme-field-border-color: #{$color-marketing-gray-50};
+    --theme-field-border-color-hover: var(--theme-link-color-hover);
+    --theme-field-border-color-focus: var(--theme-link-color);
+    --theme-field-border-color-error: var(--theme-form-red);
+    --theme-field-border-color-error-hover: #{$color-red-80};
+    --theme-field-border-color-disabled: #{$color-marketing-gray-30};
+    --theme-field-border-color-disabled-focus: #{$color-marketing-gray-80};
+    --theme-field-border: 2px solid var(--theme-field-border-color);
+    --theme-field-focus-ring: 0 0 0 2px #{rgba($color-blue-40, 0.5)};
+    --theme-field-focus-ring-dark: 0 0 0 2px #{color.mix($color-blue-40, $color-white)};
+    --theme-field-focus-ring-white: 0 0 0 2px #{$color-white};
+    --theme-field-focus-ring-outline: 2px solid #{color.scale($color-blue-50, $saturation: -15%, $lightness: 70%)};
+    --theme-field-focus-ring-error: 0 0 0 2px #{rgba($color-red-50, 0.5)};
+
+    // buttons
+    --theme-button-border-color-focus: #{$color-blue-50};
+    --theme-button-border-color-focus-product: #{$color-blue-40};
+}
+
 // * -------------------------------------------------------------------------- */
 // mixins
 // use padding as much as possible, margins don't collapse on form elements
@@ -79,26 +82,27 @@ $line-height-shim: 0.15em; // two elements with text appear to have more space b
 }
 
 @mixin form-input() {
-    background-color: $color-white;
+    background-color: var(--theme-background-color);
     border-radius: $field-border-radius;
-    border: $field-border;
     box-sizing: border-box;
+    border: var(--theme-field-border);
     margin: 0 0 $field-v-spacing;
     padding: $field-padding;
     @include text-body-md;
     @include font-base;
 
-    & { // needs to come after @includes to over-ride value
+    /* stylelint-disable-next-line no-duplicate-selectors */
+    & { // needs to come after @include text-body-md to over-ride value
         line-height: var(--theme-button-line-height);
     }
 }
 
 @mixin form-msg() {
-    background-color: $field-border-color-error-hover;
+    background-color: var(--theme-field-border-color-error-hover);
     border-radius: $border-radius-sm;
     box-shadow: $box-shadow-sm;
     box-sizing: border-box;
-    color: $color-white;
+    color: var(--theme-body-text-color-inverse);
     display: table; // make it behave like inline-block but still get a new line
     margin: 2px 0 0;
     max-width: 100%;
@@ -110,7 +114,7 @@ $line-height-shim: 0.15em; // two elements with text appear to have more space b
 @mixin form-msg-pointer() {
     @include bidi(((left, 6px, right, auto),));
     border: 7px solid transparent;
-    border-bottom: 8px solid $field-border-color-error-hover;
+    border-bottom: 8px solid var(--theme-field-border-color-error-hover);
     bottom: 100%;
     content: '';
     height: 0;
diff --git a/assets/sass/protocol/includes/mixins/_utils.scss b/assets/sass/protocol/includes/mixins/_utils.scss
index 91b1aa751..67cf67d18 100644
--- a/assets/sass/protocol/includes/mixins/_utils.scss
+++ b/assets/sass/protocol/includes/mixins/_utils.scss
@@ -93,32 +93,16 @@
 // Light color links for dark backgrounds.
 @mixin light-links {
     a {
-        color: themes.$link-color-inverse;
+        color: var(--theme-link-color-inverse);
 
         // where is used to decrease specificity to avoid conflicts with button styles
         &:where(:visited) {
-            color: themes.$link-color-visited-inverse;
+            color: var(--theme-link-color-visited-inverse);
         }
 
         &:hover,
         &:active {
-            color: themes.$link-color-hover-inverse;
-        }
-    }
-
-    @supports (--css: variables) {
-        a {
-            color: var(--link-color-inverse);
-
-            // where is used to decrease specificity to avoid conflicts with button styles
-            &:where(:visited) {
-                color: var(--link-color-visited-inverse);
-            }
-
-            &:hover,
-            &:active {
-                color: var(--link-color-hover-inverse);
-            }
+            color: var(--theme-link-color-hover-inverse);
         }
     }
 }
diff --git a/assets/sass/protocol/includes/themes/_firefox.scss b/assets/sass/protocol/includes/themes/_firefox.scss
index 7facfe403..658aa5c3b 100644
--- a/assets/sass/protocol/includes/themes/_firefox.scss
+++ b/assets/sass/protocol/includes/themes/_firefox.scss
@@ -15,24 +15,42 @@
     --token-heading-letter-spacing: 0;
 
     // colors
-    --background-color-tertiary-inverse: #{tokens.$color-ink-20};
-    --background-color-tertiary: #{tokens.$color-marketing-gray-20};
-    --background-color-secondary-inverse: #{tokens.$color-ink-50};
-    --background-color-secondary: #{tokens.$color-light-gray-10};
-    --background-color-inverse: #{tokens.$color-ink-80};
-    --background-color: #{tokens.$color-white};
-    --body-text-color-secondary-inverse: #{tokens.$color-marketing-gray-30};
-    --body-text-color-secondary: #{tokens.$color-marketing-gray-70};
-    --body-text-color-inverse: #{tokens.$color-white};
-    --body-text-color: #{tokens.$color-marketing-gray-80};
-    --link-color-hover-inverse: #{tokens.$color-blue-05};
-    --link-color-hover: #{tokens.$color-link-hover};
-    --link-color-inverse: #{tokens.$color-blue-10};
-    --link-color-visited-inverse: #{tokens.$color-violet-10};
-    --link-color-visited: #{tokens.$color-link-visited};
-    --link-color: #{tokens.$color-link};
-    --heading-text-color-inverse: #{tokens.$color-white};
-    --heading-text-color: #{tokens.$color-marketing-gray-99};
+    --token-background-color-tertiary-inverse: #{tokens.$color-ink-20};
+    --token-background-color-tertiary: #{tokens.$color-marketing-gray-20};
+    --token-background-color-secondary-inverse: #{tokens.$color-ink-50};
+    --token-background-color-secondary: #{tokens.$color-light-gray-10};
+    --token-background-color-inverse: #{tokens.$color-ink-80};
+    --token-background-color: #{tokens.$color-white};
+    --token-body-text-color-secondary-inverse: #{tokens.$color-marketing-gray-30};
+    --token-body-text-color-secondary: #{tokens.$color-marketing-gray-70};
+    --token-body-text-color-inverse: #{tokens.$color-white};
+    --token-body-text-color: #{tokens.$color-marketing-gray-80};
+    --token-link-color-hover-inverse: #{tokens.$color-blue-05};
+    --token-link-color-hover: #{tokens.$color-link-hover};
+    --token-link-color-inverse: #{tokens.$color-blue-10};
+    --token-link-color-visited-inverse: #{tokens.$color-violet-10};
+    --token-link-color-visited: #{tokens.$color-link-visited};
+    --token-link-color: #{tokens.$color-link};
+    --token-heading-text-color-inverse: #{tokens.$color-white};
+    --token-heading-text-color: #{tokens.$color-marketing-gray-99};
+
+    // status colors
+    --token-color-success: #{tokens.$color-green-50};
+    --token-color-success-bg: #{tokens.$color-green-30};
+    --token-color-success-hover: #{tokens.$color-green-60};
+    --token-color-success-active: #{tokens.$color-green-70};
+    --token-color-error: #{tokens.$color-red-50};
+    --token-color-error-bg: #{tokens.$color-red-30};
+    --token-color-error-hover: #{tokens.$color-red-60};
+    --token-color-error-active: #{tokens.$color-red-70};
+    --token-color-warning: #{tokens.$color-yellow-30};
+    --token-color-warning-bg: #{tokens.$color-yellow-20};
+    --token-color-warning-hover: #{tokens.$color-yellow-40};
+    --token-color-warning-active: #{tokens.$color-yellow-50};
+    --token-color-info: #{tokens.$color-blue-50};
+    --token-color-info-bg: #{tokens.$color-blue-10};
+    --token-color-info-hover: #{tokens.$color-blue-70};
+    --token-color-info-active: #{tokens.$color-blue-80};
 }
 
 %firefox-type-scale {
diff --git a/assets/sass/protocol/includes/themes/_mozilla.scss b/assets/sass/protocol/includes/themes/_mozilla.scss
index 83bc2765e..e3f6d66ca 100644
--- a/assets/sass/protocol/includes/themes/_mozilla.scss
+++ b/assets/sass/protocol/includes/themes/_mozilla.scss
@@ -16,24 +16,42 @@
     --token-heading-letter-spacing: -0.01em;
 
     // colors
-    --background-color-tertiary-inverse: #{tokens.$color-dark-gray-40};
-    --background-color-tertiary: #{tokens.$color-light-gray-30};
-    --background-color-secondary-inverse: #{tokens.$color-dark-gray-60};
-    --background-color-secondary: #{tokens.$color-light-gray-10};
-    --background-color-inverse: #{tokens.$color-black};
-    --background-color: #{tokens.$color-white};
-    --body-text-color-secondary-inverse: #{tokens.$color-light-gray-30};
-    --body-text-color-secondary: #{tokens.$color-dark-gray-90};
-    --body-text-color-inverse: #{tokens.$color-white};
-    --body-text-color: #{tokens.$color-black};
-    --link-color-hover-inverse: #{tokens.$color-blue-05};
-    --link-color-hover: #{tokens.$color-link-hover};
-    --link-color-inverse: #{tokens.$color-blue-10};
-    --link-color-visited-inverse: #{tokens.$color-violet-10};
-    --link-color-visited: #{tokens.$color-link-visited};
-    --link-color: #{tokens.$color-link};
-    --heading-text-color-inverse: #{tokens.$color-white};
-    --heading-text-color: #{tokens.$color-black};
+    --token-background-color-tertiary-inverse: #{tokens.$color-dark-gray-40};
+    --token-background-color-tertiary: #{tokens.$color-light-gray-30};
+    --token-background-color-secondary-inverse: #{tokens.$color-dark-gray-60};
+    --token-background-color-secondary: #{tokens.$color-light-gray-10};
+    --token-background-color-inverse: #{tokens.$color-black};
+    --token-background-color: #{tokens.$color-white};
+    --token-body-text-color-secondary-inverse: #{tokens.$color-light-gray-30};
+    --token-body-text-color-secondary: #{tokens.$color-dark-gray-90};
+    --token-body-text-color-inverse: #{tokens.$color-white};
+    --token-body-text-color: #{tokens.$color-black};
+    --token-link-color-hover-inverse: #{tokens.$color-blue-05};
+    --token-link-color-hover: #{tokens.$color-link-hover};
+    --token-link-color-inverse: #{tokens.$color-blue-10};
+    --token-link-color-visited-inverse: #{tokens.$color-violet-10};
+    --token-link-color-visited: #{tokens.$color-link-visited};
+    --token-link-color: #{tokens.$color-link};
+    --token-heading-text-color-inverse: #{tokens.$color-white};
+    --token-heading-text-color: #{tokens.$color-black};
+
+    // status colors
+    --token-color-success: #{tokens.$color-green-50};
+    --token-color-success-bg: #{tokens.$color-green-30};
+    --token-color-success-hover: #{tokens.$color-green-60};
+    --token-color-success-active: #{tokens.$color-green-70};
+    --token-color-error: #{tokens.$color-red-50};
+    --token-color-error-bg: #{tokens.$color-red-30};
+    --token-color-error-hover: #{tokens.$color-red-60};
+    --token-color-error-active: #{tokens.$color-red-70};
+    --token-color-warning: #{tokens.$color-yellow-30};
+    --token-color-warning-bg: #{tokens.$color-yellow-20};
+    --token-color-warning-hover: #{tokens.$color-yellow-40};
+    --token-color-warning-active: #{tokens.$color-yellow-50};
+    --token-color-info: #{tokens.$color-blue-50};
+    --token-color-info-bg: #{tokens.$color-blue-10};
+    --token-color-info-hover: #{tokens.$color-blue-70};
+    --token-color-info-active: #{tokens.$color-blue-80};
 }
 
 %mozilla-type-scale {
diff --git a/assets/sass/protocol/protocol.scss b/assets/sass/protocol/protocol.scss
index 392f629be..d023177d5 100644
--- a/assets/sass/protocol/protocol.scss
+++ b/assets/sass/protocol/protocol.scss
@@ -17,6 +17,9 @@
 @use 'includes/fonts/mozilla-text';
 @use 'includes/fonts/mozilla-headline';
 
+// Root - CSS variables
+@use 'root';
+
 // Base elements - general HTML elements
 @use 'base/elements';
 
diff --git a/assets/sass/protocol/root/_color.scss b/assets/sass/protocol/root/_color.scss
new file mode 100644
index 000000000..576d716eb
--- /dev/null
+++ b/assets/sass/protocol/root/_color.scss
@@ -0,0 +1,43 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+:root {
+    // colors
+    --theme-background-color-tertiary-inverse: var(--token-background-color-tertiary-inverse);
+    --theme-background-color-tertiary: var(--token-background-color-tertiary);
+    --theme-background-color-secondary-inverse: var(--token-background-color-secondary-inverse);
+    --theme-background-color-secondary: var(--token-background-color-secondary);
+    --theme-background-color-inverse: var(--token-background-color-inverse);
+    --theme-background-color: var(--token-background-color);
+    --theme-body-text-color-secondary-inverse: var(--token-body-text-color-secondary-inverse);
+    --theme-body-text-color-secondary: var(--token-body-text-color-secondary);
+    --theme-body-text-color-inverse: var(--token-body-text-color-inverse);
+    --theme-body-text-color: var(--token-body-text-color);
+    --theme-link-color-hover-inverse: var(--token-link-color-hover-inverse);
+    --theme-link-color-hover: var(--token-link-color-hover);
+    --theme-link-color-inverse: var(--token-link-color-inverse);
+    --theme-link-color-visited-inverse: var(--token-link-color-visited-inverse);
+    --theme-link-color-visited: var(--token-link-color-visited);
+    --theme-link-color: var(--token-link-color);
+    --theme-heading-text-color-inverse: var(--token-heading-text-color-inverse);
+    --theme-heading-text-color: var(--token-heading-text-color);
+
+    // status colors
+    --theme-color-success: var(--token-color-success);
+    --theme-color-success-bg: var(--token-color-success-bg);
+    --theme-color-success-hover: var(--token-color-success-hover);
+    --theme-color-success-active: var(--token-color-success-active);
+    --theme-color-error: var(--token-color-error);
+    --theme-color-error-bg: var(--token-color-error-bg);
+    --theme-color-error-hover: var(--token-color-error-hover);
+    --theme-color-error-active: var(--token-color-error-active);
+    --theme-color-warning: var(--token-color-warning);
+    --theme-color-warning-bg: var(--token-color-warning-bg);
+    --theme-color-warning-hover: var(--token-color-warning-hover);
+    --theme-color-warning-active: var(--token-color-warning-active);
+    --theme-color-info: var(--token-color-info);
+    --theme-color-info-bg: var(--token-color-info-bg);
+    --theme-color-info-hover: var(--token-color-info-hover);
+    --theme-color-info-active: var(--token-color-info-active);
+}
diff --git a/assets/sass/protocol/root/_index.scss b/assets/sass/protocol/root/_index.scss
new file mode 100644
index 000000000..74fab38ec
--- /dev/null
+++ b/assets/sass/protocol/root/_index.scss
@@ -0,0 +1,8 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+@use 'color';
+@use 'theme';
+@use 'spacing';
+@use 'typography';
diff --git a/assets/sass/protocol/root/_spacing.scss b/assets/sass/protocol/root/_spacing.scss
new file mode 100644
index 000000000..2f1a385a4
--- /dev/null
+++ b/assets/sass/protocol/root/_spacing.scss
@@ -0,0 +1,27 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+@use '../includes/tokens';
+
+
+:root {
+    --v-grid-xs: #{tokens.$layout-md};
+    --h-grid-xs: #{tokens.$layout-xs};
+
+    // sm is the same as xs
+    --v-grid-sm: #{tokens.$layout-md};
+    --h-grid-sm: #{tokens.$layout-xs};
+
+    // md
+    --v-grid-md: #{tokens.$layout-md};
+    --h-grid-md: #{tokens.$layout-lg};
+
+    // lg is the same as medium
+    --v-grid-lg: #{tokens.$layout-md};
+    --h-grid-lg: #{tokens.$layout-lg};
+
+    // xl
+    --v-grid-xl: #{tokens.$layout-xl};
+    --h-grid-xl: 80px;
+}
diff --git a/assets/sass/protocol/root/_theme.scss b/assets/sass/protocol/root/_theme.scss
new file mode 100644
index 000000000..6b1a24e99
--- /dev/null
+++ b/assets/sass/protocol/root/_theme.scss
@@ -0,0 +1,29 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+// This file contains all the theme variables for both the Firefox and Mozilla
+// themes. Mixins and functions can draw from these variable maps, swapping to
+// a different map based on the value of the global $brand-theme variable.
+
+@use '../includes/themes/mozilla';
+@use '../includes/themes/firefox';
+@use '../includes/config';
+
+:root {
+    @if config.$brand-theme == 'mozilla' {
+        @extend %mozilla-theme;
+        @extend %mozilla-type-scale;
+
+        @if config.$type-scale == 'condensed' {
+            @extend %mozilla-type-scale-condensed;
+        }
+    } @else if config.$brand-theme == 'firefox' {
+        @extend %firefox-theme;
+        @extend %firefox-type-scale;
+
+        @if config.$type-scale == 'condensed' {
+            @extend %firefox-type-scale-condensed;
+        }
+    }
+}
diff --git a/assets/sass/protocol/includes/themes/_index.scss b/assets/sass/protocol/root/_typography.scss
similarity index 72%
rename from assets/sass/protocol/includes/themes/_index.scss
rename to assets/sass/protocol/root/_typography.scss
index 4742ec7ce..d5fcb39f6 100644
--- a/assets/sass/protocol/includes/themes/_index.scss
+++ b/assets/sass/protocol/root/_typography.scss
@@ -2,56 +2,9 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-// This file contains all the theme variables for both the Firefox and Mozilla
-// themes. Mixins and functions can draw from these variable maps, swapping to
-// a different map based on the value of the global $brand-theme variable.
-
-@use 'mozilla';
-@use 'firefox';
-@use '../tokens';
-@use '../config';
-@use '../lib';
-@forward '../themes-sass';
-
-
-// naming pattern for theme variables --theme-<component/role>-<property>-<scale>
+@use '../includes/tokens';
 
 :root {
-    --v-grid-xs: #{tokens.$layout-md};
-    --h-grid-xs: #{tokens.$layout-xs};
-
-    // sm is the same as xs
-    --v-grid-sm: #{tokens.$layout-md};
-    --h-grid-sm: #{tokens.$layout-xs};
-
-    // md
-    --v-grid-md: #{tokens.$layout-md};
-    --h-grid-md: #{tokens.$layout-lg};
-
-    // lg is the same as medium
-    --v-grid-lg: #{tokens.$layout-md};
-    --h-grid-lg: #{tokens.$layout-lg};
-
-    // xl
-    --v-grid-xl: #{tokens.$layout-xl};
-    --h-grid-xl: 80px;
-
-    @if config.$brand-theme == 'mozilla' {
-        @extend %mozilla-theme;
-        @extend %mozilla-type-scale;
-
-        @if config.$type-scale == 'condensed' {
-            @extend %mozilla-type-scale-condensed;
-        }
-    } @else if config.$brand-theme == 'firefox' {
-        @extend %firefox-theme;
-        @extend %firefox-type-scale;
-
-        @if config.$type-scale == 'condensed' {
-            @extend %firefox-type-scale-condensed;
-        }
-    }
-
     // headings
     --theme-heading-font-family: var(--token-heading-font-family);
     --theme-heading-font-ligatures: var(--token-heading-font-ligatures);
@@ -89,7 +42,7 @@
     --theme-button-line-height: var(--token-button-line-height);
 }
 
-@media #{lib.$mq-md} {
+@media #{tokens.$mq-md} {
     :root {
         // headings
         --theme-heading-font-size-2xl: var(--token-heading-font-size-plus-3);
diff --git a/docs/02-usage/migration.md b/docs/02-usage/migration.md
index 16c90d371..26880d50d 100644
--- a/docs/02-usage/migration.md
+++ b/docs/02-usage/migration.md
@@ -142,13 +142,71 @@ Replace: var(--theme-heading-line-height)
 
 ### Remove @supports Blocks (SCSS files)
 
-If you have `@supports` blocks that only contain font declarations, you can remove them. Search for these manually:
+If you have `@supports` blocks that only contain font or color declarations, you can remove them. Search for these manually:
 
 ```text
 Find:    @supports \(--css: variables\)
 ```
 
-Review each match and remove the block if it only contains font-family, font-size, or line-height declarations.
+Review each match and remove the block if it only contains font-family, font-size, line-height, color, or background-color declarations.
+
+---
+
+## Color Migration
+
+### CSS Variable Renames (SCSS files)
+
+Add `--theme-` prefix to color variables:
+
+```text
+Find:    --(background-color|body-text-color|link-color|heading-text-color)(-[a-z-]*)?
+Replace: --theme-$1$2
+```
+
+### Sass Color Variable Replacements (SCSS files)
+
+Replace Sass variables with CSS custom properties. Run the `$title-text-color` replacement first (it renames to `heading`):
+
+```text
+Find:    \$title-text-color(-inverse)?
+Replace: var(--theme-heading-text-color$1)
+```
+
+```text
+Find:    \$(background-color|body-text-color|link-color)(-[a-z-]*)?
+Replace: var(--theme-$1$2)
+```
+
+### Form Sass Variable Replacements (SCSS files)
+
+Form color variables (note: `form-text` and `form-inactive` have different target names):
+
+```text
+Find:    forms\.\$form-red
+Replace: var(--theme-form-red)
+```
+
+```text
+Find:    forms\.\$form-text
+Replace: var(--theme-form-text-color)
+```
+
+```text
+Find:    forms\.\$form-inactive
+Replace: var(--theme-form-text-color-inactive)
+```
+
+Field and button variables:
+
+```text
+Find:    forms\.\$(field-border-color|field-border|field-focus-ring)(-[a-z-]*)?
+Replace: var(--theme-$1$2)
+```
+
+```text
+Find:    forms\.\$button-border-color-focus
+Replace: var(--theme-button-border-color-focus)
+```
 
 ## Terminal Commands (macOS/Linux)
 
@@ -212,6 +270,38 @@ find . -name "*.scss" -exec sed -i '' 's/\$text-title-line-height/var(--theme-he
 find . -name "*.scss" -exec sed -i '' 's/\$text-display-line-height/var(--theme-heading-line-height)/g' {} +
 ```
 
+### Color CSS Variable Renames
+
+```bash
+# Add --theme- prefix to color variables
+find . -name "*.scss" -exec sed -i '' -E 's/--(background-color|body-text-color|link-color|heading-text-color)(-[a-z-]*)?/--theme-\1\2/g' {} +
+```
+
+### Color Sass Variable Replacements
+
+```bash
+# Title text color (renames to heading) - run this first
+find . -name "*.scss" -exec sed -i '' -E 's/\$title-text-color(-inverse)?/var(--theme-heading-text-color\1)/g' {} +
+
+# Other color variables
+find . -name "*.scss" -exec sed -i '' -E 's/\$(background-color|body-text-color|link-color)(-[a-z-]*)?/var(--theme-\1\2)/g' {} +
+```
+
+### Form Sass Variable Replacements
+
+```bash
+# Form colors (these have different target names, so do individually)
+find . -name "*.scss" -exec sed -i '' 's/forms\.\$form-red/var(--theme-form-red)/g' {} +
+find . -name "*.scss" -exec sed -i '' 's/forms\.\$form-text/var(--theme-form-text-color)/g' {} +
+find . -name "*.scss" -exec sed -i '' 's/forms\.\$form-inactive/var(--theme-form-text-color-inactive)/g' {} +
+
+# Field and focus ring variables
+find . -name "*.scss" -exec sed -i '' -E 's/forms\.\$(field-border-color|field-border|field-focus-ring)(-[a-z-]*)?/var(--theme-\1\2)/g' {} +
+
+# Button border
+find . -name "*.scss" -exec sed -i '' 's/forms\.\$button-border-color-focus/var(--theme-button-border-color-focus)/g' {} +
+```
+
 ## Linux Users
 
 Replace `-i ''` with `-i` in the sed commands above:
@@ -276,4 +366,5 @@ grep -r "mzp-l-split-media-overflow\|mzp-l-split-media-constrain-height" --inclu
 1. Run your build to check for any Sass compilation errors
 2. Run visual regression tests if available
 3. Manually review any remaining uses of removed variables or mixins
-4. Test in a browser to verify typography appears correct
+4. Test in a browser to verify typography and colors appear correct
+5. Test dark mode / `.mzp-t-dark` themed components to verify color variables are working
diff --git a/theme/assets/sass/base/_typography.scss b/theme/assets/sass/base/_typography.scss
index 3ce70a793..c363f12c4 100755
--- a/theme/assets/sass/base/_typography.scss
+++ b/theme/assets/sass/base/_typography.scss
@@ -2,11 +2,7 @@
 
 body {
     @include font-base;
-    color: $body-text-color;
-
-    @supports (--css:variables) {
-        color: var(--body-text-color);
-    }
+    color: var(--theme-body-text-color);
 }
 
 mark {
diff --git a/theme/assets/sass/components/_document.scss b/theme/assets/sass/components/_document.scss
index 3303919f1..fd1fed146 100644
--- a/theme/assets/sass/components/_document.scss
+++ b/theme/assets/sass/components/_document.scss
@@ -5,9 +5,5 @@
 .Document-title {
     @include text-heading-lg;
     font-family: var(--theme-heading-font-family);
-    color: $title-text-color;
-
-    @supports (--css: variables) {
-        color: var(--heading-text-color);
-    }
+    color: var(--theme-heading-text-color);
 }
diff --git a/theme/assets/sass/components/_header.scss b/theme/assets/sass/components/_header.scss
index 7d59f49b2..970bb693e 100755
--- a/theme/assets/sass/components/_header.scss
+++ b/theme/assets/sass/components/_header.scss
@@ -3,11 +3,7 @@
 /* stylelint-disable selector-class-pattern */
 
 .Header {
-    background-color: $background-color-inverse;
-
-    @supports (--css: variables) {
-        background-color: var(--background-color-inverse);
-    }
+    background-color: var(--theme-background-color-inverse);
 }
 
 .Header-button {
diff --git a/theme/assets/sass/components/_navigation.scss b/theme/assets/sass/components/_navigation.scss
index dfaf4dad3..deaafd592 100755
--- a/theme/assets/sass/components/_navigation.scss
+++ b/theme/assets/sass/components/_navigation.scss
@@ -8,5 +8,5 @@
 .Navigation-backButton {
     padding: 0;
     border: 0;
-    color: $color-white;
+    color: var(--fractal-color-header-content);
 }
diff --git a/theme/assets/sass/components/_pen.scss b/theme/assets/sass/components/_pen.scss
index 50e864b4e..6b29238ce 100755
--- a/theme/assets/sass/components/_pen.scss
+++ b/theme/assets/sass/components/_pen.scss
@@ -3,7 +3,7 @@
 /* stylelint-disable selector-class-pattern */
 
 .Pen {
-    background-color: $color-marketing-gray-10;
+    background-color: var(--fractal-color-background-offset);
 }
 
 .Pen-header {
@@ -17,16 +17,12 @@
 
 .Pen-title {
     @include text-heading-xs;
-    color: $title-text-color;
+    color: var(--theme-heading-text-color);
     margin-bottom: 0.5em;
 
     @media #{$mq-md} {
         margin-bottom: 0;
     }
-
-    @supports (--css: variables) {
-        color: var(--heading-text-color);
-    }
 }
 
 .Pen-previewLink {
@@ -34,11 +30,7 @@
     &:visited,
     &:hover,
     &:active {
-        color: $title-text-color;
-
-        @supports (--css: variables) {
-            color: var(--heading-text-color);
-        }
+        color: var(--theme-heading-text-color);
     }
 
     svg {
@@ -48,23 +40,14 @@
 }
 
 .Pen-previewButton {
-    color: $link-color;
+    color: var(--theme-link-color);
     font-weight: bold;
     @include bidi(((margin-left, $spacing-lg, margin-right, $spacing-lg),));
     @include text-body-sm;
 
     &:hover,
     &:active {
-        color: $link-color-hover;
-    }
-
-    @supports (--css: variables) {
-        color: var(--link-color);
-
-        &:hover,
-        &:active {
-            color: var(--link-color-hover);
-        }
+        color: var(--theme-link-color-hover);
     }
 }
 
diff --git a/theme/assets/sass/components/_preview.scss b/theme/assets/sass/components/_preview.scss
index 9d677cee6..90330afb3 100755
--- a/theme/assets/sass/components/_preview.scss
+++ b/theme/assets/sass/components/_preview.scss
@@ -8,5 +8,5 @@
 
 .Preview-iframe,
 .Preview-resizer {
-    background-color: $color-light-gray-20;
+    background-color: var(--fractal-color-background-offset);
 }
diff --git a/theme/assets/sass/components/_prose.scss b/theme/assets/sass/components/_prose.scss
index 43fdd1046..b0a10221d 100755
--- a/theme/assets/sass/components/_prose.scss
+++ b/theme/assets/sass/components/_prose.scss
@@ -10,33 +10,23 @@
     }
 
     :link {
-        color: $link-color;
+        color: var(--theme-link-color);
         text-decoration: underline;
 
         &:visited {
-            color: $link-color-visited;
+            color: var(--theme-link-color-visited);
         }
 
         &:hover,
         &:focus,
         &:active {
-            color: $link-color-hover;
+            color: var(--theme-link-color-hover);
             text-decoration: none;
         }
 
         &:active {
             background-color: rgb(0, 0, 0, 0.05);
         }
-
-        @supports (--css: variables) {
-            color: var(--link-color);
-
-            &:hover,
-            &:focus,
-            &:active {
-                color: var(--link-color-hover);
-            }
-        }
     }
 
     h1,
@@ -46,14 +36,10 @@
     h5,
     h6 {
         font-family: var(--theme-heading-font-family);
-        color: $title-text-color;
+        color: var(--theme-heading-text-color);
         font-weight: bold;
         margin: 1em 0 0.5em;
         opacity: 1;
-
-        @supports (--css: variables) {
-            color: var(--heading-text-color);
-        }
     }
 
     h1 {
diff --git a/theme/assets/sass/components/_search.scss b/theme/assets/sass/components/_search.scss
index e75a75fd5..aa4116862 100755
--- a/theme/assets/sass/components/_search.scss
+++ b/theme/assets/sass/components/_search.scss
@@ -2,7 +2,7 @@
 
 /* stylelint-disable-next-line selector-class-pattern */
 .Search-input {
-    color: white;
+    color: var(--fractal-color-header-content);
     border: none;
-    background-color: $color-dark-gray-50;
+    background-color: var(--fractal-color-ui-active);
 }
diff --git a/theme/assets/sass/components/_tree.scss b/theme/assets/sass/components/_tree.scss
index 02864df61..56ce7afeb 100755
--- a/theme/assets/sass/components/_tree.scss
+++ b/theme/assets/sass/components/_tree.scss
@@ -10,13 +10,13 @@
 }
 
 .Tree-title {
-    color: $color-white;
+    color: var(--fractal-color-header-content);
     letter-spacing: normal;
     @include text-body-md;
 }
 
 .Tree-collectionLabel {
-    color: $color-white;
+    color: var(--fractal-color-header-content);
     padding-top: 0.15em;
     padding-bottom: 0.15em;
 
@@ -26,8 +26,8 @@
     }
 
     &:hover {
-        color: $color-white;
-        background-color: $color-dark-gray-50;
+        color: var(--fractal-color-header-content);
+        background-color: var(--fractal-color-nav-item-hover);
     }
 
     &::before {
@@ -79,25 +79,25 @@
     @include text-body-sm;
 
     .Tree-entityLink {
-        color: $color-white;
+        color: var(--fractal-color-header-content);
         padding-top: 0.25em;
         padding-bottom: 0.25em;
 
         &:hover {
-            color: $color-white;
-            background-color: $color-dark-gray-50;
+            color: var(--fractal-color-header-content);
+            background-color: var(--fractal-color-nav-item-hover);
         }
     }
 
     &.is-current {
-        background-color: $color-dark-gray-60;
+        background-color: var(--fractal-color-nav-item-active);
     }
 }
 
 .Tree-aside {
-    color: $color-white;
+    color: var(--fractal-color-header-content);
 }
 
 .Tree-collapse {
-    color: $color-white;
+    color: var(--fractal-color-header-content);
 }
diff --git a/theme/assets/sass/components/_type-specimen.scss b/theme/assets/sass/components/_type-specimen.scss
index fdb84ec3f..93d997ad2 100644
--- a/theme/assets/sass/components/_type-specimen.scss
+++ b/theme/assets/sass/components/_type-specimen.scss
@@ -3,7 +3,7 @@
 
 .docs-specimen {
     border-radius: $border-radius-sm;
-    border: 1px solid $color-light-gray-60;
+    border: 1px solid var(--fractal-color-border-light);
     padding: $spacing-md;
     margin: $spacing-lg 0;
     overflow-x: auto;
diff --git a/theme/assets/sass/preview.scss b/theme/assets/sass/preview.scss
index 8c57bd852..d64ffc5eb 100644
--- a/theme/assets/sass/preview.scss
+++ b/theme/assets/sass/preview.scss
@@ -3,7 +3,7 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 // Styles for the component preview frame
-@use '/assets/sass/protocol/includes/themes';
+@use '/assets/sass/protocol/root';
 
 html,
 body {
diff --git a/theme/assets/sass/settings/_settings.scss b/theme/assets/sass/settings/_settings.scss
index 820de82bf..4ca31fcc1 100755
--- a/theme/assets/sass/settings/_settings.scss
+++ b/theme/assets/sass/settings/_settings.scss
@@ -2,6 +2,26 @@
 
 $font-family-monospace: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace !default;
 $font-family-sans-serif: tokens.$font-stack-base !default;
+
+// Fractal theme CSS custom properties
+:root {
+    --fractal-color-link: #66f;
+    --fractal-color-text: #000;
+    --fractal-color-heading: #000;
+    --fractal-color-background: #fff;
+    --fractal-color-background-offset: #f7f7f7;
+    --fractal-color-ui-hover: rgb(0, 0, 0, 0.05);
+    --fractal-color-ui-active: rgb(0, 0, 0, 0.075);
+    --fractal-color-header-background: #000;
+    --fractal-color-header-content: #fff;
+    --fractal-color-frame-border: rgb(0, 0, 0, 0.25);
+    --fractal-color-sidebar-heading: white;
+    --fractal-color-nav-item-hover: #42455a;
+    --fractal-color-nav-item-active: #52566d;
+    --fractal-color-border-light: #cdcdd4;
+}
+
+// Legacy Sass variables for backwards compatibility
 $color-link: #66f;
 $color-text: #000;
 $color-heading: #000;
diff --git a/theme/assets/sass/theme.scss b/theme/assets/sass/theme.scss
index a9f61411b..209a0da6c 100755
--- a/theme/assets/sass/theme.scss
+++ b/theme/assets/sass/theme.scss
@@ -8,7 +8,7 @@
 @use '/assets/sass/protocol/includes/fonts/metropolis';
 @use '/assets/sass/protocol/includes/fonts/mozilla-headline';
 @use '/assets/sass/protocol/includes/fonts/mozilla-text';
-@use '/assets/sass/protocol/includes/themes';
+@use '/assets/sass/protocol/root';
 
 // Settings
 @use 'settings/settings';