diff --git a/bedrock/products/templates/products/relay/includes/waitlist-base.html b/bedrock/products/templates/products/relay/includes/waitlist-base.html
index 434d3eeab7d..e388b2f3f51 100644
--- a/bedrock/products/templates/products/relay/includes/waitlist-base.html
+++ b/bedrock/products/templates/products/relay/includes/waitlist-base.html
@@ -11,7 +11,7 @@
 {% endblock %}
 
 {% block sub_navigation %}
-{% include 'products/relay/includes/subnav.html' %}
+  {% include 'products/relay/includes/subnav.html' %}
 {% endblock %}
 
 {% set product_name = product_name|default(ftl('waitlist-premium-name')) %}
diff --git a/media/css/careers/styles.scss b/media/css/careers/styles.scss
index 48db8cc7ce7..8d72163a50b 100644
--- a/media/css/careers/styles.scss
+++ b/media/css/careers/styles.scss
@@ -2,8 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$image-path: '/media/protocol/img';
-
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($image-path: '/media/protocol/img');
 @use './components/hero-text.scss';
 @use './components/hero-video.scss';
 @use './components/home.scss';
@@ -14,12 +13,11 @@ $image-path: '/media/protocol/img';
 @use './components/position.scss';
 @use './components/footer.scss';
 
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
-@import '~@mozilla-protocol/core/protocol/css/components/modal';
-@import '~@mozilla-protocol/core/protocol/css/components/video';
-@import '~@mozilla-protocol/core/protocol/css/components/call-out';
-@import '~@mozilla-protocol/core/protocol/css/templates/card-layout';
-@import '../protocol/components/custom-menu-list';
+@use '~@mozilla-protocol/core/protocol/css/components/modal';
+@use '~@mozilla-protocol/core/protocol/css/components/video';
+@use '~@mozilla-protocol/core/protocol/css/components/call-out';
+@use '~@mozilla-protocol/core/protocol/css/templates/card-layout';
+@use '../protocol/components/custom-menu-list';
 
 .c-careers {
     .c-careers-section-title {
diff --git a/media/css/firefox/all/all-unified.scss b/media/css/firefox/all/all-unified.scss
index b6f7b791742..f0108736d4f 100644
--- a/media/css/firefox/all/all-unified.scss
+++ b/media/css/firefox/all/all-unified.scss
@@ -8,7 +8,7 @@ $font-path: '/media/protocol/fonts';
 $image-path: '/media/protocol/img';
 
 @import '~@mozilla-protocol/core/protocol/css/includes/lib';
-@import '~@mozilla-protocol/core/protocol/css/includes/forms/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/forms';
 @import '~@mozilla-protocol/core/protocol/css/templates/main-with-sidebar';
 @import '~@mozilla-protocol/core/protocol/css/components/modal';
 @import '~@mozilla-protocol/core/protocol/css/components/sidebar-menu';
diff --git a/media/css/firefox/browsers/best-browser.scss b/media/css/firefox/browsers/best-browser.scss
index c2e9de29b71..706572ba961 100644
--- a/media/css/firefox/browsers/best-browser.scss
+++ b/media/css/firefox/browsers/best-browser.scss
@@ -13,11 +13,15 @@ $image-path: '/media/protocol/img';
 .seo-hero {
     background: $color-purple-90 url('/media/img/firefox/browsers/best-browser/hero-pattern.png') 55% 60% no-repeat;
     @include background-size(2500px);
-    color: get-theme('body-text-color-inverse');
+    color: $body-text-color-inverse;
     text-align: center;
     min-height: 520px;
     margin-bottom: $spacing-xl;
 
+    @supports (--css: variables) {
+        color: var(--body-text-color-inverse);
+    }
+
     .hero-content {
         padding-top: $layout-xl;
         padding-bottom: $layout-xl;
@@ -30,9 +34,13 @@ $image-path: '/media/protocol/img';
         h1 {
             @include font-base;
             @include text-title-lg;
-            color: get-theme('title-text-color-inverse');
+            color: $title-text-color-inverse;
             margin: 0 auto $spacing-2xl;
             max-width: 580px;
+
+            @supports (--css: variables) {
+                color: var(--title-text-color-inverse);
+            }
         }
 
         p {
diff --git a/media/css/firefox/browsers/windows-64-bit.scss b/media/css/firefox/browsers/windows-64-bit.scss
index 4be0b2f8eb2..d658d858b25 100644
--- a/media/css/firefox/browsers/windows-64-bit.scss
+++ b/media/css/firefox/browsers/windows-64-bit.scss
@@ -11,11 +11,15 @@ $image-path: '/media/protocol/img';
 
 .c-hero {
     background: $color-purple-90;
-    color: get-theme('body-text-color-inverse');
+    color: $body-text-color-inverse;
     text-align: center;
     min-height: 500px;
     margin-bottom: $spacing-xl;
 
+    @supports (--css: variables) {
+        color: var(--body-text-color-inverse);
+    }
+
     .hero-content {
         padding-top: $layout-xl;
 
@@ -26,9 +30,13 @@ $image-path: '/media/protocol/img';
 
         h1 {
             @include text-title-lg;
-            color: get-theme('title-text-color-inverse');
+            color: $title-text-color-inverse;
             margin: 0 auto $spacing-2xl;
 
+            @supports (--css: variables) {
+                color: var(--title-text-color-inverse);
+            }
+
             @media #{$mq-lg} {
                 width: 400px;
             }
diff --git a/media/css/firefox/challenge-the-default/index.scss b/media/css/firefox/challenge-the-default/index.scss
index 44f8a4d5a6f..ae6ec701fdf 100644
--- a/media/css/firefox/challenge-the-default/index.scss
+++ b/media/css/firefox/challenge-the-default/index.scss
@@ -11,7 +11,7 @@ $font-path: '/media/protocol/fonts';
 @import "./compare-table";
 
 @import '~@mozilla-protocol/core/protocol/css/includes/lib';
-@import '~@mozilla-protocol/core/protocol/css/includes/forms/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/forms';
 @import '~@mozilla-protocol/core/protocol/css/components/modal';
 @import '~@mozilla-protocol/core/protocol/css/components/notification-bar';
 @import '~@mozilla-protocol/core/protocol/css/includes/mixins/details';
diff --git a/media/css/firefox/family/components/_dad-jokes-banner.scss b/media/css/firefox/family/components/_dad-jokes-banner.scss
index 915cbf599a9..e87c7fbfb01 100644
--- a/media/css/firefox/family/components/_dad-jokes-banner.scss
+++ b/media/css/firefox/family/components/_dad-jokes-banner.scss
@@ -3,6 +3,7 @@
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
 @use '../utils' as f3;
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
 @import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
 
 .no-js .c-dad-jokes-banner {
diff --git a/media/css/firefox/family/styles.scss b/media/css/firefox/family/styles.scss
index 75b07836e33..26aebcbafbb 100644
--- a/media/css/firefox/family/styles.scss
+++ b/media/css/firefox/family/styles.scss
@@ -2,6 +2,8 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with($image-path: '/media/protocol/img');
+
 @use './components/agreement';
 @use './components/blurb';
 @use './components/browser';
diff --git a/media/css/firefox/features/safebrowser.scss b/media/css/firefox/features/safebrowser.scss
index ed363e8d448..1bd07675f21 100644
--- a/media/css/firefox/features/safebrowser.scss
+++ b/media/css/firefox/features/safebrowser.scss
@@ -11,11 +11,15 @@ $image-path: '/media/protocol/img';
 
 .c-hero {
     background: $color-purple-90;
-    color: get-theme('body-text-color-inverse');
+    color: $body-text-color-inverse;
     text-align: center;
     min-height: 520px;
     margin-bottom: $spacing-xl;
 
+    @supports (--css: variables) {
+        color: var(--body-text-color-inverse);
+    }
+
     .hero-content {
         padding-top: $layout-xl;
         padding-bottom: $layout-xl;
@@ -28,9 +32,13 @@ $image-path: '/media/protocol/img';
         h1 {
             @include font-base;
             @include text-title-lg;
-            color: get-theme('title-text-color-inverse');
+            color: $title-text-color-inverse;
             margin: 0 auto $spacing-2xl;
             max-width: 580px;
+
+            @supports (--css: variables) {
+                color: var(--title-text-color-inverse);
+            }
         }
 
         p {
diff --git a/media/css/firefox/firstrun/nightly.scss b/media/css/firefox/firstrun/nightly.scss
index 37921668577..ab9e6a78812 100644
--- a/media/css/firefox/firstrun/nightly.scss
+++ b/media/css/firefox/firstrun/nightly.scss
@@ -31,11 +31,15 @@ main {
 
 .contribute-title {
     @include text-title-xs;
-    color: get-theme('title-text-color-inverse');
+    color: $title-text-color-inverse;
     font-weight: normal;
     margin: $spacing-lg auto;
     max-width: 580px;
     text-align: center;
+
+    @supports (--css: variables) {
+        color: var(--title-text-color-inverse);
+    }
 }
 
 .contribute-list {
diff --git a/media/css/firefox/welcome10.scss b/media/css/firefox/welcome10.scss
index afb6ab0f23c..9ce40d2a772 100644
--- a/media/css/firefox/welcome10.scss
+++ b/media/css/firefox/welcome10.scss
@@ -31,19 +31,27 @@ $image-path: '/media/protocol/img';
 
 .c-pre-title {
     @include text-title-2xs;
-    color: get-theme('title-text-color');
+    color: $title-text-color;
     font-weight: bold;
     margin: 0 auto $spacing-xl;
     max-width: 750px;
+
+    @supports (--css: variables) {
+        color: var(--title-text-color);
+    }
 }
 
 .c-main-title {
     @include text-title-md;
-    color: get-theme('title-text-color');
+    color: $title-text-color;
     max-width: 750px;
     margin-left: auto;
     margin-right: auto;
 
+    @supports (--css: variables) {
+        color: var(--title-text-color);
+    }
+
     strong {
         color: $color-violet-50;
     }
diff --git a/media/css/firefox/welcome11.scss b/media/css/firefox/welcome11.scss
index 59589157727..9de8cace82b 100644
--- a/media/css/firefox/welcome11.scss
+++ b/media/css/firefox/welcome11.scss
@@ -31,10 +31,14 @@ $image-path: '/media/protocol/img';
 
 .c-main-title {
     @include text-title-md;
-    color: get-theme('title-text-color');
+    color: $title-text-color;
     margin-left: auto;
     margin-right: auto;
 
+    @supports (--css: variables) {
+        color: var(--title-text-color);
+    }
+
     strong {
         color: $color-violet-50;
     }
@@ -89,12 +93,20 @@ $image-path: '/media/protocol/img';
 
     #outer-wrapper {
         background: $color-dark-gray-60;
-        color: get-theme('title-text-color-inverse');
+        color: $title-text-color-inverse;
+
+        @supports (--css: variables) {
+                color: var(--title-text-color-inverse);
+        }
     }
 
     .c-main-title,
     .mzp-c-picto-title {
-        color: get-theme('title-text-color-inverse');
+        color: $title-text-color-inverse;
+
+        @supports (--css: variables) {
+            color: var(--title-text-color-inverse);
+        }
     }
 
     .c-main-image {
diff --git a/media/css/firefox/welcome12.scss b/media/css/firefox/welcome12.scss
index 9ca406221e6..f5fbab0d883 100644
--- a/media/css/firefox/welcome12.scss
+++ b/media/css/firefox/welcome12.scss
@@ -31,10 +31,14 @@ $image-path: '/media/protocol/img';
 
 .c-main-title {
     @include text-title-md;
-    color: get-theme('title-text-color');
+    color: $title-text-color;
     margin-left: auto;
     margin-right: auto;
 
+    @supports (--css: variables) {
+        color: var(--title-text-color);
+    }
+
     strong {
         color: $color-violet-50;
     }
@@ -100,12 +104,20 @@ $image-path: '/media/protocol/img';
 
     #outer-wrapper {
         background: $color-dark-gray-60;
-        color: get-theme('title-text-color-inverse');
+        color: $title-text-color-inverse;
+
+        @supports (--css: variables) {
+            color: var(--title-text-color-inverse);
+        }
     }
 
     .c-main-title,
     .mzp-c-picto-title {
-        color: get-theme('title-text-color-inverse');
+        color: $title-text-color-inverse;
+
+        @supports (--css: variables) {
+            color: var(--title-text-color-inverse);
+        }
     }
 
     .c-main-image {
diff --git a/media/css/firefox/welcome13.scss b/media/css/firefox/welcome13.scss
index 9ca406221e6..f5fbab0d883 100644
--- a/media/css/firefox/welcome13.scss
+++ b/media/css/firefox/welcome13.scss
@@ -31,10 +31,14 @@ $image-path: '/media/protocol/img';
 
 .c-main-title {
     @include text-title-md;
-    color: get-theme('title-text-color');
+    color: $title-text-color;
     margin-left: auto;
     margin-right: auto;
 
+    @supports (--css: variables) {
+        color: var(--title-text-color);
+    }
+
     strong {
         color: $color-violet-50;
     }
@@ -100,12 +104,20 @@ $image-path: '/media/protocol/img';
 
     #outer-wrapper {
         background: $color-dark-gray-60;
-        color: get-theme('title-text-color-inverse');
+        color: $title-text-color-inverse;
+
+        @supports (--css: variables) {
+            color: var(--title-text-color-inverse);
+        }
     }
 
     .c-main-title,
     .mzp-c-picto-title {
-        color: get-theme('title-text-color-inverse');
+        color: $title-text-color-inverse;
+
+        @supports (--css: variables) {
+            color: var(--title-text-color-inverse);
+        }
     }
 
     .c-main-image {
diff --git a/media/css/firefox/welcome15.scss b/media/css/firefox/welcome15.scss
index 2ae7589edb5..08c70ef16be 100644
--- a/media/css/firefox/welcome15.scss
+++ b/media/css/firefox/welcome15.scss
@@ -32,7 +32,11 @@ $image-path: '/media/protocol/img';
 
 .c-main-title {
     @include text-title-md;
-    color: get-theme('title-text-color');
+    color: $title-text-color;
+
+    @supports (--css: variables) {
+        color: var(--title-text-color);
+    }
 }
 
 .c-main-tagline {
@@ -80,12 +84,20 @@ $image-path: '/media/protocol/img';
 @media (prefers-color-scheme: dark) {
     #outer-wrapper {
         background: $color-dark-gray-60;
-        color: get-theme('title-text-color-inverse');
+        color: $title-text-color-inverse;
+
+        @supports (--css: variables) {
+                color: var(--title-text-color-inverse);
+            }
     }
 
     .c-main-title,
     .mzp-c-picto-title {
-        color: get-theme('title-text-color-inverse');
+        color: $title-text-color-inverse;
+
+        @supports (--css: variables) {
+                color: var(--title-text-color-inverse);
+            }
     }
 
     .c-main-logo {
diff --git a/media/css/firefox/whatsnew/whatsnew-115-eu-ctd.scss b/media/css/firefox/whatsnew/whatsnew-115-eu-ctd.scss
index 3a5b23b2440..d1645aa5430 100644
--- a/media/css/firefox/whatsnew/whatsnew-115-eu-ctd.scss
+++ b/media/css/firefox/whatsnew/whatsnew-115-eu-ctd.scss
@@ -2,11 +2,8 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($image-path: '/media/protocol/img', $font-path: '/media/protocol/fonts');
 @import '~@mozilla-protocol/core/protocol/css/components/notification-bar';
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
 @import '~@mozilla-protocol/core/protocol/css/templates/multi-column';
 @import 'includes/base';
 @import 'includes/dark-mode';
diff --git a/media/css/firefox/whatsnew/whatsnew-115-eu-mobile.scss b/media/css/firefox/whatsnew/whatsnew-115-eu-mobile.scss
index 6722f150c84..947d57c4eb0 100644
--- a/media/css/firefox/whatsnew/whatsnew-115-eu-mobile.scss
+++ b/media/css/firefox/whatsnew/whatsnew-115-eu-mobile.scss
@@ -2,11 +2,8 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($image-path: '/media/protocol/img');
 @import '~@mozilla-protocol/core/protocol/css/components/notification-bar';
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
 @import 'includes/base';
 @import 'includes/dark-mode';
 
diff --git a/media/css/firefox/whatsnew/whatsnew-115-eu-vpn.scss b/media/css/firefox/whatsnew/whatsnew-115-eu-vpn.scss
index 1712de4882c..f12445e33c0 100644
--- a/media/css/firefox/whatsnew/whatsnew-115-eu-vpn.scss
+++ b/media/css/firefox/whatsnew/whatsnew-115-eu-vpn.scss
@@ -2,11 +2,10 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
 $image-path: '/media/protocol/img';
 
-@import '~@mozilla-protocol/core/protocol/css/components/notification-bar';
 @import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/notification-bar';
 @import 'includes/base';
 @import 'includes/dark-mode';
 
diff --git a/media/css/firefox/whatsnew/whatsnew-account.scss b/media/css/firefox/whatsnew/whatsnew-account.scss
index d6477beb040..122735e8f79 100644
--- a/media/css/firefox/whatsnew/whatsnew-account.scss
+++ b/media/css/firefox/whatsnew/whatsnew-account.scss
@@ -31,7 +31,11 @@ $image-path: '/media/protocol/img';
 
 .wnp-main-title {
     @include text-title-md;
-    color: get-theme('title-text-color');
+    color: $title-text-color;
+
+    @supports (--css: variables) {
+        color: var(--title-text-color);
+    }
 }
 
 .wnp-main-tagline {
@@ -68,12 +72,20 @@ $image-path: '/media/protocol/img';
         color: $color-white;
 
         h2.thank-you {
-            color: get-theme('title-text-color-inverse');
+            color: $title-text-color-inverse;
+
+            @supports (--css: variables) {
+                color: var(--title-text-color-inverse);
+            }
         }
     }
 
     .wnp-main-title {
-        color: get-theme('title-text-color-inverse');
+        color: $title-text-color-inverse;
+
+        @supports (--css: variables) {
+            color: var(--title-text-color-inverse);
+        }
 
         strong {
             color: $color-violet-20;
diff --git a/media/css/firefox/whatsnew/whatsnew-nightly.scss b/media/css/firefox/whatsnew/whatsnew-nightly.scss
index 3dd3b54c80b..34d289e53cc 100644
--- a/media/css/firefox/whatsnew/whatsnew-nightly.scss
+++ b/media/css/firefox/whatsnew/whatsnew-nightly.scss
@@ -38,11 +38,15 @@ body {
 
 .mzp-c-emphasis-box {
     @include border-box;
-    color: get-theme('body-text-color');
+    color: $body-text-color;
     margin: 0 auto $layout-sm;
     max-width: $content-md - ($layout-md * 2);
     padding: $spacing-xl;
 
+    @supports (--css: variables) {
+        color: var(--body-text-color);
+    }
+
     a:link,
     a:visited {
         color: $color-ink-80;
@@ -59,7 +63,11 @@ body {
 
     .c-emphasis-box-title {
         @include text-title-sm;
-        color: get-theme('title-text-color');
+        color: $title-text-color;
         text-align: center;
+
+        @supports (--css: variables) {
+            color: var(--title-text-color);
+        }
     }
 }
diff --git a/media/css/firefox/whatsnew/whatsnew.scss b/media/css/firefox/whatsnew/whatsnew.scss
index 44ee2288414..680abd97098 100644
--- a/media/css/firefox/whatsnew/whatsnew.scss
+++ b/media/css/firefox/whatsnew/whatsnew.scss
@@ -31,7 +31,11 @@ $image-path: '/media/protocol/img';
 
 .wnp-main-title {
     @include text-title-md;
-    color: get-theme('title-text-color');
+    color: $title-text-color;
+
+    @supports (--css: variables) {
+        color: var(--title-text-color);
+    }
 }
 
 .wnp-main-tagline {
@@ -51,14 +55,22 @@ $image-path: '/media/protocol/img';
 @media (prefers-color-scheme: dark) {
     .wnp-main-title,
     .c-picto-block .c-picto-block-title {
-        color: get-theme('title-text-color-inverse');
+        color: $title-text-color-inverse;
+
+        @supports (--css: variables) {
+            color: var(--title-text-color-inverse);
+        }
     }
 
     .send-to-device {
         color: $color-white;
 
         h2.thank-you {
-            color: get-theme('title-text-color-inverse');
+            color: $title-text-color-inverse;
+
+            @supports (--css: variables) {
+                color: var(--title-text-color-inverse);
+            }
         }
     }
 }
diff --git a/media/css/foundation/annual-report-2019-2020.scss b/media/css/foundation/annual-report-2019-2020.scss
index 1beb6acaa95..0a34b124111 100644
--- a/media/css/foundation/annual-report-2019-2020.scss
+++ b/media/css/foundation/annual-report-2019-2020.scss
@@ -366,7 +366,11 @@ $image-path: '/media/protocol/img';
         &:hover,
         &:focus,
         &:active {
-            color: get-theme('link-color-hover');
+            color: $link-color-hover;
+
+            @supports (--css: variables) {
+                color: var(--link-color-hover);
+            }
         }
     }
 
diff --git a/media/css/foundation/annual-report-2021.scss b/media/css/foundation/annual-report-2021.scss
index 8b4d9965582..e8717f035ce 100644
--- a/media/css/foundation/annual-report-2021.scss
+++ b/media/css/foundation/annual-report-2021.scss
@@ -179,7 +179,11 @@ main {
         &:hover,
         &:focus,
         &:active {
-            color: get-theme('link-color-hover');
+            color: $link-color-hover;
+
+            @supports (--css: variables) {
+                color: var(--link-color-hover);
+            }
         }
     }
 
diff --git a/media/css/legal/legal.scss b/media/css/legal/legal.scss
index 8e0239fdda4..5f059ec68f6 100644
--- a/media/css/legal/legal.scss
+++ b/media/css/legal/legal.scss
@@ -2,9 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($font-path: '/media/protocol/fonts', $image-path: '/media/protocol/img');
 @import '~@mozilla-protocol/core/protocol/css/components/notification-bar';
 @import '~@mozilla-protocol/core/protocol/css/components/forms/form';
 @import '~@mozilla-protocol/core/protocol/css/components/forms/field';
diff --git a/media/css/mozorg/about-transparency.scss b/media/css/mozorg/about-transparency.scss
index d2d2e03880c..50770905017 100644
--- a/media/css/mozorg/about-transparency.scss
+++ b/media/css/mozorg/about-transparency.scss
@@ -69,11 +69,11 @@ dd {
 
 .c-page-header {
     @include text-title-xs;
-    background: get-theme('background-color-inverse');
-    color: get-theme('body-text-color-inverse');
+    background: $background-color-inverse;
+    color: $body-text-color-inverse;
 
     h1 {
-        color: get-theme('title-text-color-inverse');
+        color: $title-text-color-inverse;
     }
 
     span {
@@ -81,6 +81,15 @@ dd {
         display: block;
         margin-top: $spacing-md;
     }
+
+    @supports (--css: variables) {
+        background: var(--background-color-inverse);
+        color: var(--body-text-color-inverse);
+
+        h1 {
+            color: var(--title-text-color-inverse);
+        }
+    }
 }
 
 .mzp-c-article {
diff --git a/media/css/mozorg/contribute.scss b/media/css/mozorg/contribute.scss
index c3d374eabe8..c60caa96287 100644
--- a/media/css/mozorg/contribute.scss
+++ b/media/css/mozorg/contribute.scss
@@ -236,7 +236,11 @@ $image-path: '/media/protocol/img';
 .contribute-banner-gethelp {
     background: $color-ink-80 url('/media/img/contribute/contribute-gethelp-banner-bg.jpg') center top no-repeat;
     background-size: cover;
-    color: get-theme('body-text-color-inverse');
+    color: $body-text-color-inverse;
+
+    @supports (--css: variables) {
+        color: var(--body-text-color-inverse);
+    }
 
     @media #{$mq-lg} {
         margin-bottom: $layout-lg;
@@ -245,9 +249,13 @@ $image-path: '/media/protocol/img';
     .contribute-banner-gethelp-title {
         @include font-firefox;
         @include font-size(24px);
-        color: get-theme('title-text-color-inverse');
+        color: $title-text-color-inverse;
         position: relative;
 
+        @supports (--css: variables) {
+            color: var(--title-text-color-inverse);
+        }
+
         @media #{$mq-lg} {
             @include font-size(40px);
         }
diff --git a/media/css/mozorg/diversity/diversity.scss b/media/css/mozorg/diversity/diversity.scss
index e23c69937da..019f09603d6 100644
--- a/media/css/mozorg/diversity/diversity.scss
+++ b/media/css/mozorg/diversity/diversity.scss
@@ -225,7 +225,11 @@ $image-path: '/media/protocol/img';
         &:hover,
         &:focus,
         &:active {
-            color: get-theme('link-color-hover');
+            color: $link-color-hover;
+
+            @supports (--css: variables) {
+                color: var(--link-color-hover);
+            }
         }
     }
 
diff --git a/media/css/mozorg/home/home-old.scss b/media/css/mozorg/home/home-old.scss
index fe785f1f823..18fb545baec 100644
--- a/media/css/mozorg/home/home-old.scss
+++ b/media/css/mozorg/home/home-old.scss
@@ -18,7 +18,11 @@ $image-path: '/media/protocol/img';
 // * -------------------------------------------------------------------------- */
 // Billboard
 .mzp-c-billboard {
-    margin-top: get-theme('v-grid-xl');
+    margin-top: $v-grid-xl;
+
+    @supports (--css: variables) {
+        margin-top: var(--v-grid-xl);
+    }
 
     @media #{$mq-md} {
         margin-top: 0;
diff --git a/media/css/newsletter/newsletter-recovery.scss b/media/css/newsletter/newsletter-recovery.scss
index faa6691c19e..762c9cb4b8b 100644
--- a/media/css/newsletter/newsletter-recovery.scss
+++ b/media/css/newsletter/newsletter-recovery.scss
@@ -2,14 +2,11 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($font-path: '/media/protocol/fonts', $image-path: '/media/protocol/img');
 @import '~@mozilla-protocol/core/protocol/css/components/forms/button-container';
 @import '~@mozilla-protocol/core/protocol/css/components/forms/field';
 @import '~@mozilla-protocol/core/protocol/css/components/forms/form';
 @import '~@mozilla-protocol/core/protocol/css/components/notification-bar';
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
 
 /* stylelint-disable declaration-no-important */
 
diff --git a/media/css/pocket/components/updates-signup.scss b/media/css/pocket/components/updates-signup.scss
index 68eb4c34f83..9056a4afa9d 100644
--- a/media/css/pocket/components/updates-signup.scss
+++ b/media/css/pocket/components/updates-signup.scss
@@ -10,7 +10,7 @@
 @import '../includes/footer';
 
 @import '~@mozilla-protocol/core/protocol/css/includes/lib';
-@import '~@mozilla-protocol/core/protocol/css/includes/forms/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/forms';
 @import '~@mozilla-protocol/core/protocol/css/components/forms/form';
 @import '~@mozilla-protocol/core/protocol/css/base/elements/forms';
 @import '~@mozilla-protocol/core/protocol/css/components/button';
diff --git a/media/css/products/relay/landing.scss b/media/css/products/relay/landing.scss
index e04ea86f0c5..35bfc03d6a1 100644
--- a/media/css/products/relay/landing.scss
+++ b/media/css/products/relay/landing.scss
@@ -121,15 +121,27 @@ $brand-theme: 'firefox';
 .c-pricing-intro {
     margin: 0 auto;
     max-width: $content-md;
-    padding-bottom: get-theme('v-grid-xs');
+    padding-bottom: $v-grid-xs;
     text-align: center;
 
     @media #{$mq-md} {
-        padding-bottom: get-theme('v-grid-md');
+        padding-bottom: $v-grid-md;
     }
 
     @media #{$mq-xl} {
-        padding-bottom: get-theme('v-grid-xl');
+        padding-bottom: $v-grid-xl;
+    }
+
+    @supports (--css: variables) {
+        color: var(--v-grid-xs);
+
+        @media #{$mq-md} {
+            padding-bottom: var(--v-grid-md);
+        }
+
+        @media #{$mq-xl} {
+            padding-bottom: var(--v-grid-xl);
+        }
     }
 }
 
@@ -153,14 +165,26 @@ $brand-theme: 'firefox';
 }
 
 .c-features-premium {
-    padding: get-theme('v-grid-xs') get-theme('h-grid-xs');
+    padding: $v-grid-xs $h-grid-xs;
 
     @media #{$mq-md} {
-        padding: get-theme('v-grid-md') get-theme('h-grid-md');
+        padding: $v-grid-md $h-grid-md;
     }
 
     @media #{$mq-xl} {
-        padding: get-theme('v-grid-xl') get-theme('h-grid-xl');
+        padding: $v-grid-xl $h-grid-xl;
+    }
+
+    @supports (--css: variables) {
+        padding: var(--v-grid-xs) var(--h-grid-xs);
+
+            @media #{$mq-md} {
+                padding: var(--v-grid-md) var(--h-grid-md);
+            }
+
+            @media #{$mq-xl} {
+                padding: var(--v-grid-xl) var(--h-grid-xl);
+            }
     }
 }
 
diff --git a/media/css/products/relay/waitlist.scss b/media/css/products/relay/waitlist.scss
index eb18aa87668..0566da64b49 100644
--- a/media/css/products/relay/waitlist.scss
+++ b/media/css/products/relay/waitlist.scss
@@ -2,9 +2,6 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
 @import '~@mozilla-protocol/core/protocol/css/components/forms/form';
 @import '~@mozilla-protocol/core/protocol/css/components/forms/field';
 @import '@mozilla-protocol/core/protocol/css/components/newsletter-form';
diff --git a/media/css/products/vpn/components/pricing-basic.scss b/media/css/products/vpn/components/pricing-basic.scss
index 4e0bf549528..a946ae42853 100644
--- a/media/css/products/vpn/components/pricing-basic.scss
+++ b/media/css/products/vpn/components/pricing-basic.scss
@@ -2,12 +2,9 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($image-path: '/media/protocol/img', $font-path: '/media/protocol/fonts');
 @import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
 @import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-vpn';
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
 @import '../includes/lib';
 
 // * -------------------------------------------------------------------------- */
diff --git a/media/css/products/vpn/pricing-refresh.scss b/media/css/products/vpn/pricing-refresh.scss
index dc90996919e..0aa73f89ab2 100644
--- a/media/css/products/vpn/pricing-refresh.scss
+++ b/media/css/products/vpn/pricing-refresh.scss
@@ -105,17 +105,33 @@ $image-path: '/media/protocol/img';
 .c-pricing-block-horizontal {
     @media #{$mq-lg} {
         .mzp-l-columns {
-            grid-gap: get-theme('v-grid-sm') get-theme('h-grid-sm');
-            gap: get-theme('v-grid-sm') get-theme('h-grid-sm');
+            grid-gap: $v-grid-sm $h-grid-sm;
+            gap: $v-grid-sm $h-grid-sm;
         }
     }
 
     @media #{$mq-xl} {
         .mzp-l-columns {
-            grid-gap: get-theme('v-grid-lg') get-theme('h-grid-xl');
-            gap: get-theme('v-grid-lg') get-theme('h-grid-xl');
+            grid-gap: $v-grid-lg $h-grid-xl;
+            gap: $v-grid-lg $h-grid-xl;
         }
     }
+
+    @supports (--css: variables) {
+        @media #{$mq-lg} {
+                .mzp-l-columns {
+                    grid-gap: var(--v-grid-sm) var(--h-grid-sm);
+                    gap: var(--v-grid-sm) var(--h-grid-sm);
+                }
+            }
+
+            @media #{$mq-xl} {
+                .mzp-l-columns {
+                    grid-gap: var(--v-grid-lg) var(--h-grid-xl);
+                    gap: var(--v-grid-lg) var(--h-grid-xl);
+                }
+            }
+    }
 }
 
 // * -------------------------------------------------------------------------- */
diff --git a/media/css/protocol/basic-article.scss b/media/css/protocol/basic-article.scss
index e5c8614ae62..e58292e8361 100644
--- a/media/css/protocol/basic-article.scss
+++ b/media/css/protocol/basic-article.scss
@@ -2,9 +2,6 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
 @import '~@mozilla-protocol/core/protocol/css/components/article';
 @import '~@mozilla-protocol/core/protocol/css/components/sidebar-menu';
 @import '~@mozilla-protocol/core/protocol/css/includes/mixins/details';
diff --git a/media/css/protocol/protocol-firefox.scss b/media/css/protocol/protocol-firefox.scss
index 12c2be5d9a5..49aef27086b 100644
--- a/media/css/protocol/protocol-firefox.scss
+++ b/media/css/protocol/protocol-firefox.scss
@@ -2,14 +2,14 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$brand-theme: 'firefox';
-$type-scale: 'standard';
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
 
 // These are general styles for elements/components that occur on every page.
 // Individual pages may include additional component styles as needed.
 
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($brand-theme: 'firefox', $type-scale: 'standard', $font-path: '/media/protocol/fonts', $image-path: '/media/protocol/img');
+@use '~@mozilla-protocol/core/protocol/css/includes/themes';
+@use '~@mozilla-protocol/core/protocol/css/components/forms/form';
+
 // Fonts
 @import '~@mozilla-protocol/core/protocol/css/includes/fonts/inter';
 @import '~@mozilla-protocol/core/protocol/css/includes/fonts/metropolis';
@@ -49,7 +49,11 @@ $image-path: '/media/protocol/img';
 }
 
 .mzp-c-newsletter-details legend {
-    font-family: get-theme('body-font-family');
+    font-family: $body-font-family;
+
+    @supports (--css:variables) {
+        font-family: var(--body-font-family);
+    }
 }
 
 #newsletter-submit + .mzp-c-fieldnote {
@@ -61,8 +65,8 @@ $image-path: '/media/protocol/img';
 .errorlist,
 .error-msg {
     @include light-links;
-    background-color: $form-red;
-    border-radius: $field-border-radius;
+    background-color: form.$form-red;
+    border-radius: form.$field-border-radius;
     color: $color-white;
     padding: $spacing-sm;
     margin-bottom: $spacing-xl;
diff --git a/media/css/protocol/protocol-mozilla.scss b/media/css/protocol/protocol-mozilla.scss
index 00f9462ba97..959a7b6ed2e 100644
--- a/media/css/protocol/protocol-mozilla.scss
+++ b/media/css/protocol/protocol-mozilla.scss
@@ -2,13 +2,14 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$brand-theme: 'mozilla';
-$type-scale: 'standard';
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
+
+
 
 // These are general styles for elements/components that occur on every page.
 // Individual pages may include additional component styles as needed.
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($brand-theme: 'mozilla', $type-scale: 'standard', $font-path: '/media/protocol/fonts', $image-path: '/media/protocol/img');
+@use '~@mozilla-protocol/core/protocol/css/includes/themes';
+@use '~@mozilla-protocol/core/protocol/css/components/forms/form';
 
 // Fonts
 @import '~@mozilla-protocol/core/protocol/css/includes/fonts/inter';
@@ -28,6 +29,7 @@ $image-path: '/media/protocol/img';
 @import '~@mozilla-protocol/core/protocol/css/components/button';
 @import '~@mozilla-protocol/core/protocol/css/components/footer';
 @import '~@mozilla-protocol/core/protocol/css/components/language-switcher';
+
 @import 'components/download-button';
 
 // Custom global components for nav and footer
@@ -50,7 +52,11 @@ $image-path: '/media/protocol/img';
 }
 
 .mzp-c-newsletter-details legend {
-    font-family: get-theme('body-font-family');
+    font-family: $body-font-family;
+
+    @supports (--css: variables) {
+        font-family: var(--body-font-family);
+    }
 }
 
 #newsletter-submit + .mzp-c-fieldnote {
@@ -61,8 +67,8 @@ $image-path: '/media/protocol/img';
 // style classes automatically added by python to match Protocol form error styles
 .errorlist {
     @include white-links;
-    background-color: $form-red;
-    border-radius: $field-border-radius;
+    background-color: form.$form-red;
+    border-radius: form.$field-border-radius;
     color: $color-white;
     padding: $spacing-sm;
     margin-bottom: $spacing-xl;
@@ -70,8 +76,8 @@ $image-path: '/media/protocol/img';
 
 .error-msg {
     @include light-links;
-    background-color: $form-red;
-    border-radius: $field-border-radius;
+    background-color: form.$form-red;
+    border-radius: form.$field-border-radius;
     color: $color-white;
     padding: $spacing-sm;
     margin-bottom: $spacing-xl;
diff --git a/package-lock.json b/package-lock.json
index 93a4d294e09..1b8b6e62145 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
       "dependencies": {
         "@babel/core": "^7.22.9",
         "@babel/preset-env": "^7.22.9",
-        "@mozilla-protocol/core": "^17.0.1",
+        "@mozilla-protocol/core": "^18.0.0",
         "@mozilla/glean": "^2.0.0",
         "@mozmeao/cookie-helper": "^1.1.0",
         "@mozmeao/dnt-helper": "^1.0.0",
@@ -2051,9 +2051,9 @@
       "dev": true
     },
     "node_modules/@mozilla-protocol/core": {
-      "version": "17.0.1",
-      "resolved": "https://registry.npmjs.org/@mozilla-protocol/core/-/core-17.0.1.tgz",
-      "integrity": "sha512-xN6DNJ1P93lqrzhEHhx6J8HvIVpWDBLNOO4cqlHWH6HNPOoD/vsfygCwg6UJ+pkWBAwQLbS10xgB3Y2+kCP82Q=="
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/@mozilla-protocol/core/-/core-18.0.0.tgz",
+      "integrity": "sha512-jHZQxmr4Ogqg4avz5tznPvUNZvcFgddOPj+KhH14G9QzOUfbrfErdNtocRaa4H30U4vDbL5LiKmrWcF+RXNS3g=="
     },
     "node_modules/@mozilla/glean": {
       "version": "2.0.0",
@@ -11931,9 +11931,9 @@
       "dev": true
     },
     "@mozilla-protocol/core": {
-      "version": "17.0.1",
-      "resolved": "https://registry.npmjs.org/@mozilla-protocol/core/-/core-17.0.1.tgz",
-      "integrity": "sha512-xN6DNJ1P93lqrzhEHhx6J8HvIVpWDBLNOO4cqlHWH6HNPOoD/vsfygCwg6UJ+pkWBAwQLbS10xgB3Y2+kCP82Q=="
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/@mozilla-protocol/core/-/core-18.0.0.tgz",
+      "integrity": "sha512-jHZQxmr4Ogqg4avz5tznPvUNZvcFgddOPj+KhH14G9QzOUfbrfErdNtocRaa4H30U4vDbL5LiKmrWcF+RXNS3g=="
     },
     "@mozilla/glean": {
       "version": "2.0.0",
diff --git a/package.json b/package.json
index 7488dea5f7d..20046af66ce 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "dependencies": {
     "@babel/core": "^7.22.9",
     "@babel/preset-env": "^7.22.9",
-    "@mozilla-protocol/core": "^17.0.1",
+    "@mozilla-protocol/core": "^18.0.0",
     "@mozilla/glean": "^2.0.0",
     "@mozmeao/cookie-helper": "^1.1.0",
     "@mozmeao/dnt-helper": "^1.0.0",