diff --git a/cfgov/unprocessed/apps/filing-instruction-guide/css/main.less b/cfgov/unprocessed/apps/filing-instruction-guide/css/main.less
index 7e98521bea1..eb15d9358fd 100644
--- a/cfgov/unprocessed/apps/filing-instruction-guide/css/main.less
+++ b/cfgov/unprocessed/apps/filing-instruction-guide/css/main.less
@@ -72,7 +72,7 @@
 
 .o-fig_heading {
   a {
-    color: @black;
+    color: var(--black);
     word-break: break-word;
   }
 }
@@ -85,7 +85,7 @@
   &::after {
     display: inline-block;
     content: '';
-    border-top: 2px solid @gray-50;
+    border-top: 2px solid var(--gray-50);
     width: calc(100% + 30px);
     margin: unit(45px / @base-font-size-px, em) 0 0
       unit(-30px / @base-font-size-px, em);
@@ -179,9 +179,9 @@
     }
   }
   .ctrl-f-search-result {
-    border-bottom: 1px solid @gray-40;
+    border-bottom: 1px solid var(--gray-40);
     a {
-      color: @black;
+      color: var(--black);
       &:focus {
         .a-text-input.focus();
       }
diff --git a/cfgov/unprocessed/apps/financial-well-being/css/main.less b/cfgov/unprocessed/apps/financial-well-being/css/main.less
index 6975d245e11..646034a53ad 100644
--- a/cfgov/unprocessed/apps/financial-well-being/css/main.less
+++ b/cfgov/unprocessed/apps/financial-well-being/css/main.less
@@ -2,7 +2,7 @@
 
 .save-links {
   padding-bottom: 15px;
-  border-bottom: 1px solid @gray-40;
+  border-bottom: 1px solid var(--gray-40);
   margin: 30px 0;
   text-align: right;
 }
@@ -16,7 +16,7 @@
 
 .score-box {
   height: 150px;
-  border-color: @black;
+  border-color: var(--black);
   border-style: solid;
   position: absolute;
   top: 0;
@@ -45,7 +45,7 @@
 .spectrum_x-label {
   padding-top: 5px;
   padding-left: 5px;
-  border-left: 1px solid @gray-40;
+  border-left: 1px solid var(--gray-40);
   position: absolute;
   font-size: unit(12px / @base-font-size-px, em);
   list-style: none;
@@ -81,15 +81,15 @@
 
 .comparison-chart_toggle-button {
   margin-bottom: 5px;
-  background-color: @pacific-20;
-  color: @black;
+  background-color: var(--pacific-20);
+  color: var(--black);
   font-size: unit(14px / @base-font-size-px, em);
 }
 
 .comparison-chart_toggle-button:hover,
 .comparison-chart_toggle-button:focus,
 .comparison-chart_toggle-button__selected {
-  background-color: @pacific-60;
+  background-color: var(--pacific-60);
 }
 
 .comparison-chart_title {
@@ -116,7 +116,7 @@
 
 .comparison-chart_list dd {
   width: 65%;
-  border-bottom: 1px solid @gray-40;
+  border-bottom: 1px solid var(--gray-40);
   position: relative;
   bottom: 0.25em;
 }
@@ -138,9 +138,9 @@
 
 .comparison-chart_source {
   padding-top: 15px;
-  border-top: 1px solid @gray-40;
+  border-top: 1px solid var(--gray-40);
   margin-top: 30px;
-  color: @gray-80;
+  color: var(--gray-80);
   font-size: unit(12px / @base-font-size-px, em);
 }
 
@@ -149,7 +149,7 @@
 .o-scale {
   + .o-scale {
     padding-top: unit(30px / @base-font-size-px, em);
-    border-top: 1px solid @gray-40;
+    border-top: 1px solid var(--gray-40);
     margin-top: unit(30px / @base-font-size-px, em);
   }
 
@@ -165,7 +165,7 @@
       position: relative;
 
       &:not(:last-child):before {
-        border-top: 1px solid @gray-80;
+        border-top: 1px solid var(--gray-80);
 
         position: absolute;
         top: 11px;
diff --git a/cfgov/unprocessed/apps/find-a-housing-counselor/css/hud.less b/cfgov/unprocessed/apps/find-a-housing-counselor/css/hud.less
index e968cdbf242..85b8c8b5309 100644
--- a/cfgov/unprocessed/apps/find-a-housing-counselor/css/hud.less
+++ b/cfgov/unprocessed/apps/find-a-housing-counselor/css/hud.less
@@ -1,5 +1,5 @@
 .hud-search-container {
-  background: @gray-5;
+  background: var(--gray-5);
 }
 
 .hud-search-container_text {
diff --git a/cfgov/unprocessed/apps/form-explainer/css/form-explainer.less b/cfgov/unprocessed/apps/form-explainer/css/form-explainer.less
index 2e15e38b94e..740be99c7cb 100644
--- a/cfgov/unprocessed/apps/form-explainer/css/form-explainer.less
+++ b/cfgov/unprocessed/apps/form-explainer/css/form-explainer.less
@@ -2,24 +2,24 @@
    "Form explainer" custom styles
    ========================================================================== */
 
-@gold-dk: #ff9e1b; // gold
-@gold-md: #ffce8d; // gold-60
-@gold-lt: #ffd8a3;
+@gold-dk: #ff9e1b; // var(--gold))
+@gold-md: #ffce8d; // var(--gold-60)
+@gold-lt: #ffd8a3; // var(--gold-50)
 @gold-bg: #fff8f0;
 
-@red-dk: #d486b2;
-@red-md: #dc9cbf;
-@red-lt: #f0d8e2;
+@red-dk: #d486b2; // var(--purple-60)
+@red-md: #dc9cbf; // var(--purple-50)
+@red-lt: #f0d8e2; // var(--purple-20)
 @red-bg: #f9f6f6;
 
-@blue-dk: #6f88b2;
-@blue-md: #9daecc;
-@blue-lt: #d3daeb;
+@blue-dk: #6f88b2; // var(--navy-70)
+@blue-md: #9daecc; // var(--navy-50)
+@blue-lt: #d3daeb; // var(--navy-20)
 @blue-bg: #f4f7fa;
 
-@teal-dk: #579695; // teal-80
-@teal-md: #70a6a5;
-@teal-lt: #d4e7e6; // teal-20
+@teal-dk: #579695; // var(--teal-80)
+@teal-md: #70a6a5; // var(--teal-70)
+@teal-lt: #d4e7e6; // var(--teal-20)
 @teal-bg: #f2f8f8;
 
 @colors: gold, red, blue, teal;
@@ -39,7 +39,7 @@
   .image-map_image {
     display: block;
     box-sizing: border-box;
-    border: 1px solid @black;
+    border: 1px solid var(--black);
   }
 
   .image-map_overlay {
@@ -94,7 +94,7 @@
       });
 
       .o-expandable_cues {
-        color: @black;
+        color: var(--black);
       }
     }
 
@@ -152,7 +152,7 @@
     display: block;
     width: 20%;
     text-align: right;
-    color: @gray-80;
+    color: var(--gray-80);
   }
 
   .explain {
@@ -258,7 +258,7 @@
           &:focus,
           &:hover,
           &:active {
-            color: @black;
+            color: var(--black);
             border-bottom-width: 0;
           }
         }
diff --git a/cfgov/unprocessed/apps/know-before-you-owe/css/main.less b/cfgov/unprocessed/apps/know-before-you-owe/css/main.less
index 8238e597465..0e8bb9ca1ab 100644
--- a/cfgov/unprocessed/apps/know-before-you-owe/css/main.less
+++ b/cfgov/unprocessed/apps/know-before-you-owe/css/main.less
@@ -2,9 +2,9 @@
 
 .kbyo-professional-resources,
 .kbyo-footer {
-  background-color: @gray-5;
-  border-bottom: 1px solid @gray-10;
-  border-top: 1px solid @gray-10;
+  background-color: var(--gray-5);
+  border-bottom: 1px solid var(--gray-10);
+  border-top: 1px solid var(--gray-10);
   padding-top: unit(60px / @base-font-size-px, rem);
   padding-bottom: unit(60px / @base-font-size-px, rem);
 }
@@ -42,8 +42,8 @@
 }
 
 .kbyo-compare-tiles img {
-  border: 1px solid @gray-30;
-  box-shadow: 3px 3px 3px @gray-30;
+  border: 1px solid var(--gray-30);
+  box-shadow: 3px 3px 3px var(--gray-30);
   display: inline-block;
   zoom: 1;
   margin: 10px 10px 0 0;
@@ -74,5 +74,5 @@
 
 // Timeline page.
 .kbyo-timeline-page__date {
-  color: @gray-90;
+  color: var(--gray-90);
 }
diff --git a/cfgov/unprocessed/apps/owning-a-home/css/brand-footer.less b/cfgov/unprocessed/apps/owning-a-home/css/brand-footer.less
index a2d642e12a4..6a3343b17e2 100644
--- a/cfgov/unprocessed/apps/owning-a-home/css/brand-footer.less
+++ b/cfgov/unprocessed/apps/owning-a-home/css/brand-footer.less
@@ -3,8 +3,8 @@
    ========================================================================== */
 
 .brand-footer {
-  background-color: @gray-5;
-  border-top: 1px solid @gray-40;
+  background-color: var(--gray-5);
+  border-top: 1px solid var(--gray-40);
 
   &_wrapper {
     box-sizing: border-box;
diff --git a/cfgov/unprocessed/apps/owning-a-home/css/brand-header.less b/cfgov/unprocessed/apps/owning-a-home/css/brand-header.less
index 04b3dbf9aa7..9cde472a07d 100644
--- a/cfgov/unprocessed/apps/owning-a-home/css/brand-header.less
+++ b/cfgov/unprocessed/apps/owning-a-home/css/brand-header.less
@@ -1,9 +1,9 @@
 // TODO: Remove this code when owning-a-home is migrated Wagtail.
 .brand-header {
-  background-color: @gray-5;
+  background-color: var(--gray-5);
   padding-top: 15px;
   padding-bottom: 15px;
-  border-bottom: 1px solid @gray-40;
+  border-bottom: 1px solid var(--gray-40);
 
   &__1-2-container {
     padding: 15px;
@@ -11,7 +11,7 @@
       .grid_column( 6) ;
       border: 0;
       &:last-child {
-        border-left: 1px solid @gray-40;
+        border-left: 1px solid var(--gray-40);
       }
     }
   );
@@ -23,7 +23,7 @@
 
   &__1-2-container-with-icon {
     .brand-header__icon {
-      color: @green;
+      color: var(--green);
       font-size: 2.5em;
       text-align: center;
       position: absolute;
diff --git a/cfgov/unprocessed/apps/owning-a-home/css/explore-rates.less b/cfgov/unprocessed/apps/owning-a-home/css/explore-rates.less
index 08372a2c63c..c3721133c27 100644
--- a/cfgov/unprocessed/apps/owning-a-home/css/explore-rates.less
+++ b/cfgov/unprocessed/apps/owning-a-home/css/explore-rates.less
@@ -19,7 +19,7 @@
   }
 
   .page-intro {
-    border-bottom: 1px solid @gray-10;
+    border-bottom: 1px solid var(--gray-10);
   }
 
   .rc-illu-inner {
@@ -54,7 +54,7 @@
     .grid_column( 4 );
     .grid_push( 8 );
 
-    background: @gray-5;
+    background: var(--gray-5);
 
     p:last-child,
     section p:last-child {
@@ -75,7 +75,7 @@
 
     section {
       padding: unit(30px / @base-font-size-px, em) 0;
-      border-top: 1px solid @gray-10;
+      border-top: 1px solid var(--gray-10);
     }
 
     section:first-child,
@@ -172,17 +172,17 @@
     padding: unit(4px / @base-font-size-px, em)
       unit(10px / @base-font-size-px, em) unit(4px / @base-font-size-px, em)
       unit(8px / @base-font-size-px, em);
-    border: 2px solid @green-60;
+    border: 2px solid var(--green-60);
     margin: 0 2px;
-    background-color: @white;
-    color: @gray-dark;
+    background-color: var(--white);
+    color: var(--gray-dark);
   }
 
   .chart {
     position: relative;
     padding-top: unit(40px / @base-font-size-px, em);
-    border-top: 1px solid @gray-10;
-    border-bottom: 1px solid @gray-10;
+    border-top: 1px solid var(--gray-10);
+    border-bottom: 1px solid var(--gray-10);
     margin: unit(20px / @base-font-size-px, em)
       unit(20px / @base-font-size-px, em) unit(20px / @base-font-size-px, em) 0;
 
@@ -225,7 +225,7 @@
   }
 
   .data-label_number {
-    background-color: @white;
+    background-color: var(--white);
   }
 
   .chart-caption {
@@ -303,7 +303,7 @@
 
   .rc-comparison-subsection {
     padding: 1em 0;
-    border-top: 1px solid @gray-10;
+    border-top: 1px solid var(--gray-10);
   }
 
   .interest-cost {
@@ -334,7 +334,7 @@
       top: 0.5em;
       left: 5px;
       display: block;
-      color: @gray-80;
+      color: var(--gray-80);
     }
   }
 
@@ -402,9 +402,9 @@
     left: -30px;
     width: 20px;
     height: 20px;
-    background: @green-60;
+    background: var(--green-60);
     border-radius: 20px;
-    color: @black;
+    color: var(--black);
     content: counter(li);
     counter-increment: li;
     font-size: 12px;
@@ -421,7 +421,7 @@
     position: absolute;
     top: 30%;
     padding: 1em 2em 1em 3em;
-    background: @white;
+    background: var(--white);
   }
 
   .chart-menu {
@@ -432,7 +432,7 @@
     border-left: 1px solid transparent;
     border-right: 1px solid transparent;
     border-bottom: 1px solid transparent;
-    background-color: @white;
+    background-color: var(--white);
     font-size: 13px;
 
     &_btn {
@@ -440,8 +440,8 @@
       padding: unit(5px / @base-font-size-px, em)
         unit(15px / @base-font-size-px, em);
       border: none;
-      background-color: @white;
-      color: @pacific;
+      background-color: var(--white);
+      color: var(--pacific);
       font-weight: 500;
       outline: none;
       text-align: left;
@@ -464,14 +464,14 @@
         margin: 0;
 
         &:hover {
-          background-color: @gray-5;
-          color: @pacific;
+          background-color: var(--gray-5);
+          color: var(--pacific);
         }
       }
     }
 
     &__open {
-      border-color: @gray-10;
+      border-color: var(--gray-10);
 
       .chart-menu_options {
         height: 110px;
@@ -484,7 +484,7 @@
   }
 
   .credit-note-ctr {
-    border-top: 1px solid @gray-10;
+    border-top: 1px solid var(--gray-10);
   }
 
   .m-notification__borderless {
@@ -548,7 +548,7 @@
     .interest-cost {
       margin-bottom: 0.5em;
       font-weight: 600;
-      color: @gray-60;
+      color: var(--gray-60);
     }
   });
 
diff --git a/cfgov/unprocessed/apps/owning-a-home/css/helpers.less b/cfgov/unprocessed/apps/owning-a-home/css/helpers.less
index 1c0580d2d09..7a8025abc63 100644
--- a/cfgov/unprocessed/apps/owning-a-home/css/helpers.less
+++ b/cfgov/unprocessed/apps/owning-a-home/css/helpers.less
@@ -3,7 +3,7 @@
    ========================================================================== */
 
 .a-form-alert {
-  color: @gray-dark;
+  color: var(--gray-dark);
   font-size: 0.75em;
 }
 
@@ -12,7 +12,7 @@
 }
 
 .highlight-dropdown {
-  border-color: @gold;
+  border-color: var(--gold);
   border-width: 2px;
 }
 
@@ -35,7 +35,7 @@
 
 .placeholder {
   min-height: 200px;
-  background: @gray-10;
+  background: var(--gray-10);
   line-height: 200px;
   text-align: center;
 }
diff --git a/cfgov/unprocessed/apps/owning-a-home/css/tab.less b/cfgov/unprocessed/apps/owning-a-home/css/tab.less
index 1780be38897..4496462cbf5 100644
--- a/cfgov/unprocessed/apps/owning-a-home/css/tab.less
+++ b/cfgov/unprocessed/apps/owning-a-home/css/tab.less
@@ -27,12 +27,12 @@
   a,
   a:link,
   a:visited {
-    border-bottom: 1px solid @gray-10;
-    border-top: 4px solid @gray-10;
+    border-bottom: 1px solid var(--gray-10);
+    border-top: 4px solid var(--gray-10);
     border-left: 0;
     border-right: 0;
-    background: @gray-5;
-    color: @gray;
+    background: var(--gray-5);
+    color: var(--gray);
   }
 
   button:hover,
@@ -40,14 +40,14 @@
   a:hover,
   a:active,
   a:focus {
-    color: @black;
+    color: var(--black);
     background: #fff;
     z-index: 2;
   }
 
   button:focus,
   a:focus {
-    outline: 1px dotted @black;
+    outline: 1px dotted var(--black);
     outline-offset: 1px;
   }
 
@@ -62,9 +62,9 @@
     a:active,
     a:focus {
       border-bottom: none;
-      border-top: 4px solid @green-60;
+      border-top: 4px solid var(--green-60);
       background: #fff;
-      color: @black;
+      color: var(--black);
     }
   }
 }
@@ -76,7 +76,7 @@
 .tab-list + .tab-list {
   button,
   a {
-    border-left: 1px solid @gray-10;
+    border-left: 1px solid var(--gray-10);
   }
 }
 
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/cf-enhancements.less b/cfgov/unprocessed/apps/paying-for-college/css/cf-enhancements.less
index 05885034e5a..4b505cabb19 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/cf-enhancements.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/cf-enhancements.less
@@ -46,21 +46,21 @@
   padding-left: 40px;
   margin-bottom: @notification-padding__px + 4px;
 
-  background: @gray-20;
-  border: 1px solid @gray;
+  background: var(--gray-20);
+  border: 1px solid var(--gray);
 
   &__error {
-    background: @red-20;
+    background: var(--red-20);
     border-color: @input-error;
   }
 
   &__success {
-    background: @green-20;
+    background: var(--green-20);
     border-color: @input-success;
   }
 
   &__warning {
-    background: @gold-20;
+    background: var(--gold-20);
     border-color: @input-warning;
   }
 
@@ -69,7 +69,7 @@
     top: @notification-padding__px + 2px;
     left: @notification-padding__px + 4px;
 
-    color: @gray-20;
+    color: var(--gray-20);
     font-size: unit(18px / @base-font-size-px, em);
 
     &__error {
@@ -118,8 +118,8 @@
     position: absolute;
     left: 0;
     top: unit(@base-line-height - @char-icon-size, em);
-    background: @green-20;
-    color: @black;
+    background: var(--green-20);
+    color: var(--black);
     font-size: unit(18px / @base-font-size-px, em);
     line-height: @char-icon-size;
     text-align: center;
@@ -195,7 +195,7 @@
     top: 0;
     left: unit(-(@grid_gutter-width / @base-font-size-px) / 2, em);
     z-index: 0;
-    background-color: @gray-5;
+    background-color: var(--gray-5);
     content: '';
 
     .respond-to-min(@bp-sm-min, {
@@ -267,7 +267,7 @@
     });
 
     &::after {
-      background-color: @gray-5;
+      background-color: var(--gray-5);
     }
   }
 }
@@ -277,5 +277,5 @@
    ========================================================================== */
 
 .content__bleedbar .content_wrapper::after {
-  background-color: @gray-5;
+  background-color: var(--gray-5);
 }
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/cf-theme-overrides.less b/cfgov/unprocessed/apps/paying-for-college/css/cf-theme-overrides.less
index fd36ac33130..df773c1b99c 100755
--- a/cfgov/unprocessed/apps/paying-for-college/css/cf-theme-overrides.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/cf-theme-overrides.less
@@ -16,32 +16,32 @@
 // Color variables
 
 // body
-@text: @black;
+@text: var(--black);
 
 // a
-@link-text: @pacific;
-@link-underline: @pacific;
-@link-text-visited: @teal-dark;
-@link-underline-visited: @teal-dark;
-@link-text-hover: @pacific-60;
-@link-underline-hover: @pacific-60;
-@link-text-active: @navy-dark;
-@link-underline-active: @navy-dark;
+@link-text: var(--pacific);
+@link-underline: var(--pacific);
+@link-text-visited: var(--teal-dark);
+@link-underline-visited: var(--teal-dark);
+@link-text-hover: var(--pacific-60);
+@link-underline-hover: var(--pacific-60);
+@link-text-active: var(--navy-dark);
+@link-underline-active: var(--navy-dark);
 
 // thead
-@table-head-text: @white;
-@table-head-bg: @gray-dark;
-@td-bg: @gray-5;
-@td-bg-alt: @gray-10;
+@table-head-text: var(--white);
+@table-head-bg: var(--gray-dark);
+@td-bg: var(--gray-5);
+@td-bg-alt: var(--gray-10);
 
 // input
-@input-bg: @white;
-@input-border: @gray-80;
-@input-border-focus: @pacific;
-@input-placeholder: @gray-60;
+@input-bg: var(--white);
+@input-border: var(--gray-80);
+@input-border-focus: var(--pacific);
+@input-placeholder: var(--gray-60);
 
 // .figure__bordered
-@figure__bordered: @gray-40;
+@figure__bordered: var(--gray-40);
 
 /* cf-buttons
    ========================================================================== */
@@ -49,27 +49,27 @@
 // Color variables
 
 // .btn
-@btn-text: @white;
-@btn-bg: @pacific;
-@btn-bg-hover: @pacific-80;
-@btn-bg-active: @navy;
+@btn-text: var(--white);
+@btn-bg: var(--pacific);
+@btn-bg-hover: var(--pacific-80);
+@btn-bg-active: var(--navy);
 
 // .btn__secondary
-@btn__secondary-text: @white;
-@btn__secondary-bg: @gray-80;
-@btn__secondary-bg-hover: @gray-60;
-@btn__secondary-bg-active: @gray-dark;
+@btn__secondary-text: var(--white);
+@btn__secondary-bg: var(--gray-80);
+@btn__secondary-bg-hover: var(--gray-60);
+@btn__secondary-bg-active: var(--gray-dark);
 
 // .btn__warning
-@btn__warning-text: @white;
-@btn__warning-bg: @red;
-@btn__warning-bg-hover: @red-80;
-@btn__warning-bg-active: @red-dark;
+@btn__warning-text: var(--white);
+@btn__warning-bg: var(--red);
+@btn__warning-bg-hover: var(--red-80);
+@btn__warning-bg-active: var(--red-dark);
 
 // .btn__disabled
-@btn__disabled-text: @gray-80;
-@btn__disabled-bg: @gray-10;
-@btn__disabled-outline: @gray-10;
+@btn__disabled-text: var(--gray-80);
+@btn__disabled-bg: var(--gray-10);
+@btn__disabled-outline: var(--gray-10);
 
 // Sizing variables
 
@@ -84,24 +84,24 @@
 // Color variables
 
 // .expandable
-@expandable-focus: @black;
+@expandable-focus: var(--black);
 
 // .expandable_label
-@expandable_label-text: @black;
+@expandable_label-text: var(--black);
 
 // .expandable_link
-@expandable_link-text: @pacific;
+@expandable_link-text: var(--pacific);
 
 // .expandable__padded
-@expandable__padded-bg: @gray-10;
-@expandable__padded-bg-hover: @gray-10;
-@expandable__padded-divider: @gray-40;
+@expandable__padded-bg: var(--gray-10);
+@expandable__padded-bg-hover: var(--gray-10);
+@expandable__padded-divider: var(--gray-40);
 
 // .expandable-group
-@expandable-group_header-text: @gray-80;
-@expandable-group_header-bg: @gray-10;
-@expandable-group-bg: @white;
-@expandable-group-divider: @gray-40;
+@expandable-group_header-text: var(--gray-80);
+@expandable-group_header-bg: var(--gray-10);
+@expandable-group-bg: var(--white);
+@expandable-group-divider: var(--gray-40);
 
 // Sizing variables
 
@@ -114,25 +114,25 @@
 // Color variables
 
 // .error
-@input-error: @red;
+@input-error: var(--red);
 
 // warning
-@input-warning: @gold;
+@input-warning: var(--gold);
 
 // .success
-@input-success: @green;
+@input-success: var(--green);
 
 // .disabled
-@input-disabled: @gray-10;
+@input-disabled: var(--gray-10);
 
 // .form-label-helper-text
-@label-helper: @gray-dark;
+@label-helper: var(--gray-dark);
 
 // .form-l-inset_container
-@input-inset-bg: @gray-10;
+@input-inset-bg: var(--gray-10);
 
 // .form-l-inset_container.is-checked
-@input-inset-selected: @pacific-20;
+@input-inset-selected: var(--pacific-20);
 
 /* cf-grid
    ========================================================================== */
@@ -153,27 +153,27 @@
 // Color variables
 
 // .block
-@block__border-top: @gray-40;
-@block__border-bottom: @gray-40;
-@block__bg: @gray-10;
+@block__border-top: var(--gray-40);
+@block__border-bottom: var(--gray-40);
+@block__bg: var(--gray-10);
 
 // .content_main
-@content_main-border: @gray-40;
+@content_main-border: var(--gray-40);
 
 // .content_sidebar
-@content_sidebar-bg: @gray-10;
-@content_sidebar-border: @gray-40;
+@content_sidebar-bg: var(--gray-10);
+@content_sidebar-border: var(--gray-40);
 
 // .content_line
-@content_line: @gray-40;
+@content_line: var(--gray-40);
 
 /* cf-pagination
    ========================================================================== */
 
 // Color variables
 
-@pagination-text: @gray-80;
-@pagination-bg: @gray-10;
+@pagination-text: var(--gray-80);
+@pagination-bg: var(--gray-10);
 
 // Sizing variables
 
@@ -186,31 +186,31 @@
 // Color variables
 
 // .pull-quote
-@pull-quote_body: @black;
-@pull-quote_citation: @gray-80;
+@pull-quote_body: var(--black);
+@pull-quote_citation: var(--gray-80);
 
 // .micro-copy
-@micro-copy-text: @gray-80;
+@micro-copy-text: var(--gray-80);
 
 // .date
-@date-text: @gray-80;
+@date-text: var(--gray-80);
 
 // .padded-header
-@padded-header-text: @gray-dark;
-@padded-header-bg: @gray-10;
-@padded-header-border: @gray-40;
+@padded-header-text: var(--gray-dark);
+@padded-header-bg: var(--gray-10);
+@padded-header-border: var(--gray-40);
 
 // .fancy-slug
-@fancy-slug-text: @black;
-@fancy-slug-bg: @white;
-@fancy-slug-border: @gray-40;
+@fancy-slug-text: var(--black);
+@fancy-slug-bg: var(--white);
+@fancy-slug-border: var(--gray-40);
 
 // .meta-header
-@meta-header-border: @gray-40;
+@meta-header-border: var(--gray-40);
 
 // .jump-link
-@jump-link__bg: @gray-10;
-@jump-link__bg-border: @gray-10;
+@jump-link__bg: var(--gray-10);
+@jump-link__bg-border: var(--gray-10);
 
 // .list__branded
-@list__branded-bullet: @green;
+@list__branded-bullet: var(--green);
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/college-costs.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/college-costs.less
index a9cb1041163..0399dc20565 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/college-costs.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/college-costs.less
@@ -101,9 +101,9 @@
 
     &__costs {
       .a-btn.active {
-        background-color: @white;
-        color: @pacific;
-        border-color: @pacific;
+        background-color: var(--white);
+        color: var(--pacific);
+        border-color: var(--pacific);
       }
 
       .costs_button-section {
@@ -133,8 +133,8 @@
       }
 
       .o-costs-group_header {
-        border-top: 1px solid @black;
-        border-bottom: 1px solid @black;
+        border-top: 1px solid var(--black);
+        border-bottom: 1px solid var(--black);
       }
     }
 
@@ -186,7 +186,7 @@
   }
 
   .school-results_comparison-section {
-    border: 2px solid @gray-20;
+    border: 2px solid var(--gray-20);
     padding: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
 
     legend {
@@ -203,7 +203,7 @@
       @big-percentile-font-size-px: 36px;
       height: unit(110px / @big-percentile-font-size-px, em);
       width: unit(110px / @big-percentile-font-size-px, em);
-      border: 5px solid @black;
+      border: 5px solid var(--black);
       border-radius: 50%;
       margin-right: unit(15px / @big-percentile-font-size-px, em);
       line-height: unit(110px / @big-percentile-font-size-px, em);
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.less
index 932c4a5acd5..48fe0e0ff4b 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.less
@@ -68,7 +68,7 @@
     }
 
     .financial-item_value {
-      color: @black;
+      color: var(--black);
     }
   }
 
@@ -109,7 +109,7 @@
 
     .o-costs-group_link .o-costs-group_cue-close,
     .o-costs-group_link .o-costs-group_cue-open {
-      color: @pacific;
+      color: var(--pacific);
       font-size: 1em;
       line-height: 1.375;
     }
@@ -117,13 +117,13 @@
 
   &__total {
     font-size: unit(20px / @size-iv, em);
-    border-top: 1px solid @gray-60;
+    border-top: 1px solid var(--gray-60);
     padding-top: unit(10px / @base-font-size-px, em);
   }
 
   &__warning {
     .financial-item_value {
-      color: @red;
+      color: var(--red);
     }
   }
 
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/nav.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/nav.less
index ea5cff967ce..d4340f295e3 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/nav.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/nav.less
@@ -9,12 +9,12 @@
   .o-secondary-nav_list__parents {
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      border-top: 1px solid @gray-20;
+      border-top: 1px solid var(--gray-20);
       border-left: 0;
       padding-left: 0;
 
       > .o-secondary-nav_list-item__parent {
-        border-bottom: 1px solid @gray-20;
+        border-bottom: 1px solid var(--gray-20);
 
         & > .o-secondary-nav_link {
           font-size: unit( 18px / @base-font-size-px, em );
@@ -24,7 +24,7 @@
       .o-secondary-nav_link {
         border: none;
         font-weight: normal;
-        color: @black;
+        color: var(--black);
         padding: unit( 5px / @base-font-size-px, em ) 0;
         padding-left: unit( 10px / @base-font-size-px, em );
         text-align: left;
@@ -56,7 +56,7 @@
 
       .o-secondary-nav_list-item__parent li[data-nav-is-active='True'] {
         .active-section {
-          border-left: 3px solid @green;
+          border-left: 3px solid var(--green);
 
           a {
             font-weight: 600;
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/number-callout.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/number-callout.less
index 6eebabc6c7e..555d7389c40 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/number-callout.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/number-callout.less
@@ -21,15 +21,15 @@
 
   &__right {
     text-align: right;
-    border-right: 5px solid @black;
+    border-right: 5px solid var(--black);
     padding-right: unit(10px / @base-font-size-px, em);
   }
 
   &__warning {
-    border-color: @red;
+    border-color: var(--red);
 
     .number-callout_value {
-      color: @red;
+      color: var(--red);
     }
   }
 
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/search.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/search.less
index 9e3328ecc31..8fb7f8b0ed6 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/search.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/search.less
@@ -33,7 +33,7 @@
         }
 
         &:hover {
-          background-color: @pacific-20;
+          background-color: var(--pacific-20);
         }
       }
     }
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/state-based.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/state-based.less
index 81bc07812b6..7d14c00ae1e 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/state-based.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/state-based.less
@@ -348,7 +348,7 @@ main.college-costs {
   }
 
   .school-results_comparison-section__default-rate .big-percentile {
-    border-color: @gray-20;
+    border-color: var(--gray-20);
   }
 
   &[data-state_rategraduationrange='high'] {
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/vars.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/vars.less
index 0ab86ed5441..fd47f6a19c4 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/vars.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/vars.less
@@ -2,4 +2,4 @@
 @college-costs-chart-median: #ff9e1b;
 @college-costs-chart-max: #257675;
 @flyout__transition-speed: 0.25s;
-@flyout__border: @gray-40;
+@flyout__border: var(--gray-40);
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/disclosures.less b/cfgov/unprocessed/apps/paying-for-college/css/disclosures.less
index d968cb9f7f0..312ba4d8cc7 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/disclosures.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/disclosures.less
@@ -83,7 +83,7 @@
     right: @grid_gutter-width / 2;
     left: @grid_gutter-width / 2;
     z-index: 10;
-    background-color: @gray-40;
+    background-color: var(--gray-40);
     content: ' ';
   });
 
@@ -295,7 +295,7 @@
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
       padding-bottom: unit(5px / @base-font-size-px, em);
-      border-bottom: 1px solid @gray-40;
+      border-bottom: 1px solid var(--gray-40);
     });
   }
 
@@ -357,15 +357,15 @@
     }
 
     &[disabled] {
-      background-color: @gray-10;
-      color: @black;
-      // Need to set -webkit-text-fill-color to make disabled input text @black in Safari/iOS
-      -webkit-text-fill-color: @black;
+      background-color: var(--gray-10);
+      color: var(--black);
+      // Need to set -webkit-text-fill-color to make disabled input text var(--black) in Safari/iOS
+      -webkit-text-fill-color: var(--black);
       opacity: 1;
     }
 
     &&__error {
-      border-color: @red-80;
+      border-color: var(--red-80);
       border-width: unit(2px / @base-font-size-px, em);
     }
   }
@@ -377,7 +377,7 @@
     display: none;
 
     & > .cf-icon-svg {
-      color: @red-80;
+      color: var(--red-80);
       margin-right: unit(5px / @base-font-size-px, em);
     }
   }
@@ -391,7 +391,7 @@
   &_equals-line {
     margin-top: unit(15px / @base-font-size-px, em);
     margin-bottom: unit(5px / @base-font-size-px, em);
-    background-color: @black;
+    background-color: var(--black);
   }
 
   &_summary,
@@ -403,7 +403,7 @@
     margin-top: unit(30px / @base-font-size-px, em);
     margin-right: -(@grid_gutter-width / 2);
     margin-left: -(@grid_gutter-width / 2);
-    background-color: @gray-5;
+    background-color: var(--gray-5);
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
@@ -425,7 +425,7 @@
 
   &_summary-heading {
     padding-bottom: unit(5px / @font-size, em);
-    border-bottom: 1px solid @black;
+    border-bottom: 1px solid var(--black);
     .heading-4();
 
     // Tablet and above.
@@ -488,7 +488,7 @@
     text-transform: uppercase;
     margin-bottom: 0.71428571em;
     padding-bottom: unit(5px / @small-font-size-px, em);
-    border-bottom: 1px solid @gray-40;
+    border-bottom: 1px solid var(--gray-40);
 
     & + .aid-form_definition {
       margin-top: unit(-5px / @small-font-size-px, em);
@@ -744,14 +744,14 @@
   }
 
   .column-well::after {
-    background-color: @gold-20;
+    background-color: var(--gold-20);
   }
 }
 
 .future {
   .aid-form_summary.debt-summary {
     margin-top: 0;
-    background-color: @gold-40;
+    background-color: var(--gold-40);
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
@@ -760,17 +760,17 @@
   }
 
   .aid-form_summary.big-picture {
-    background-color: @gold-20;
+    background-color: var(--gold-20);
   }
 
   .column-well::after {
-    background-color: @gold-40;
+    background-color: var(--gold-40);
   }
 }
 
 .loans {
   &_line {
-    border-top: 1px dotted @gray-40;
+    border-top: 1px dotted var(--gray-40);
     margin-top: unit(30px / @base-font-size-px, em);
     margin-bottom: unit(15px / @base-font-size-px, em);
     background-color: transparent;
@@ -783,11 +783,11 @@
 }
 
 .private-loans {
-  border-bottom: 1px dotted @gray-40;
+  border-bottom: 1px dotted var(--gray-40);
   margin-bottom: unit(15px / @base-font-size-px, em);
 
   &_heading {
-    border-bottom: 1px solid @gray-40;
+    border-bottom: 1px solid var(--gray-40);
     margin-bottom: unit(15px / @base-font-size-px, em);
     position: relative;
   }
@@ -911,7 +911,7 @@
 
   & + & {
     padding-top: unit(15px / @base-font-size-px, em);
-    border-top: 1px solid @gray-20;
+    border-top: 1px solid var(--gray-20);
 
     .respond-to-min(@bp-graph-cols-min, {
       padding-top: 0;
@@ -983,7 +983,7 @@
   }
 
   &_link {
-    border-top: 1px solid @gray-40;
+    border-top: 1px solid var(--gray-40);
     margin-top: 30px;
     padding-top: 30px;
   }
@@ -1159,10 +1159,10 @@
   &_value {
     position: absolute;
     top: 0;
-    background-color: @white;
+    background-color: var(--white);
 
     .respond-to-min(@bp-graph-cols-min, {
-      background-color: @gray-5;
+      background-color: var(--gray-5);
     });
   }
 
@@ -1195,25 +1195,25 @@
     position: absolute;
     top: 0;
     left: 50%;
-    background-color: @gray-10;
+    background-color: var(--gray-10);
 
     .respond-to-range(@bp-graph-cols-min, @bp-med-max, {
       width: @bar-graph-width-sm;
-      border-right: (@bar-graph-width - @bar-graph-width-sm) / 2 solid @gray-5;
-      border-left: (@bar-graph-width - @bar-graph-width-sm) / 2 solid @gray-5;
+      border-right: (@bar-graph-width - @bar-graph-width-sm) / 2 solid var(--gray-5);
+      border-left: (@bar-graph-width - @bar-graph-width-sm) / 2 solid var(--gray-5);
     });
 
     // Graph bars need to get really skinny at some screen sizes
     .respond-to-range(@bp-graph-cols-min, 759px, {
       width: @bar-graph-width-xs;
-      border-right: (@bar-graph-width - @bar-graph-width-xs) / 2 solid @gray-5;
-      border-left: (@bar-graph-width - @bar-graph-width-xs) / 2 solid @gray-5;
+      border-right: (@bar-graph-width - @bar-graph-width-xs) / 2 solid var(--gray-5);
+      border-left: (@bar-graph-width - @bar-graph-width-xs) / 2 solid var(--gray-5);
     });
 
     .respond-to-range(901px, 929px, {
       width: @bar-graph-width-xs;
-      border-right: (@bar-graph-width - @bar-graph-width-xs) / 2 solid @gray-5;
-      border-left: (@bar-graph-width - @bar-graph-width-xs) / 2 solid @gray-5;
+      border-right: (@bar-graph-width - @bar-graph-width-xs) / 2 solid var(--gray-5);
+      border-left: (@bar-graph-width - @bar-graph-width-xs) / 2 solid var(--gray-5);
     });
   }
 
@@ -1232,17 +1232,17 @@
     font-size: unit(@bar-graph-you-font-size / @base-font-size-px, em);
 
     .bar-graph_line {
-      border-top-color: @black;
+      border-top-color: var(--black);
       border-top-style: solid;
       top: unit((@bar-graph-you-font-size + @bar-graph-line-top-cheat) / 2, px);
     }
   }
 
   &_point__average {
-    color: @gray-dark;
+    color: var(--gray-dark);
 
     .bar-graph_line {
-      border-top-color: @gray-dark;
+      border-top-color: var(--gray-dark);
       border-top-style: dotted;
       top: unit(
         (@bar-graph-average-font-size + @bar-graph-line-top-cheat) / 2,
@@ -1291,7 +1291,7 @@
 .estimated-expenses {
   padding-top: unit(10px / @base-font-size-px, em);
   padding-bottom: unit(15px / @base-font-size-px, em);
-  border-top: 1px solid @gray-40;
+  border-top: 1px solid var(--gray-40);
   margin-top: unit(30px / @base-font-size-px, em);
   margin-bottom: unit(15px / @base-font-size-px, em);
 
@@ -1299,7 +1299,7 @@
   .respond-to-min(@bp-sm-min, {
     .grid_column(10);
     padding-bottom: 0;
-    border-top: 1px solid @gray-40;
+    border-top: 1px solid var(--gray-40);
   });
 
   .respond-to-min(@bp-graph-cols-min, {
@@ -1434,7 +1434,7 @@
   left: 0;
   width: 100%;
   padding: 15px;
-  background-color: @gold-20;
+  background-color: var(--gold-20);
   font-size: unit(14px / @base-font-size-px, em);
 
   // Desktop and above.
@@ -1452,7 +1452,7 @@
   padding-top: unit(25px / @base-font-size-px, em);
   padding-bottom: unit(5px / @base-font-size-px, em);
   margin-top: unit(30px / @base-font-size-px, em);
-  background-color: @teal-20;
+  background-color: var(--teal-20);
 
   // Tablet and above.
   .respond-to-min(@bp-sm-min, {
@@ -1666,7 +1666,7 @@
 
   // Top borders on all but the first option on small screens and only the second row of options on larger screens
   & + & &_heading {
-    border-top: 1px solid @gray-40;
+    border-top: 1px solid var(--gray-40);
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
@@ -1677,7 +1677,7 @@
   & + & + & &_heading {
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      border-top: 1px solid @gray-40;
+      border-top: 1px solid var(--gray-40);
     });
 
     // Desktop and above.
@@ -1689,7 +1689,7 @@
   & + & + & + & &_heading {
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      border-top: 1px solid @gray-40;
+      border-top: 1px solid var(--gray-40);
     });
   }
 
@@ -1702,7 +1702,7 @@
 
     // Top borders on all but the first option on small screens and only the second row of options on larger screens
     & + & .option_heading {
-      border-top: 1px solid @gray-40;
+      border-top: 1px solid var(--gray-40);
 
       // Desktop and above.
       .respond-to-min(@bp-med-min, {
@@ -1713,14 +1713,14 @@
     & + & + & .option_heading {
       // Tablet and above.
       .respond-to-min(@bp-sm-min, {
-        border-top: 1px solid @gray-40;
+        border-top: 1px solid var(--gray-40);
       });
     }
 
     & + & + & + & .option_heading {
       // Desktop and above.
       .respond-to-min(@bp-med-min, {
-        border-top: 1px solid @gray-40;
+        border-top: 1px solid var(--gray-40);
       });
     }
   }
diff --git a/cfgov/unprocessed/apps/prepaid-agreements/css/search-bar.less b/cfgov/unprocessed/apps/prepaid-agreements/css/search-bar.less
index fff84a2b014..93986831857 100644
--- a/cfgov/unprocessed/apps/prepaid-agreements/css/search-bar.less
+++ b/cfgov/unprocessed/apps/prepaid-agreements/css/search-bar.less
@@ -37,10 +37,10 @@ button.a-btn.flex-fixed {
 @select-height: @size-ii;
 
 .a-select {
-  border: 1px solid @gray-40;
+  border: 1px solid var(--gray-40);
   display: flex;
   box-sizing: border-box;
-  background-color: @gray;
+  background-color: var(--gray);
   flex-direction: column;
   justify-content: center;
 
@@ -50,8 +50,8 @@ button.a-btn.flex-fixed {
 
     // Save room for the drop-arrow
     padding-right: unit(@select-height * 1.1 / @base-font-size-px, em);
-    background-color: @gray;
-    color: @white;
+    background-color: var(--gray);
+    color: var(--white);
 
     &:hover,
     &.hover,
@@ -74,8 +74,8 @@ button.a-btn.flex-fixed {
     text-align: center;
     vertical-align: middle;
     background-image: none;
-    background-color: @gray;
-    color: @white;
+    background-color: var(--gray);
+    color: var(--white);
     border-width: 0;
   }
 }
diff --git a/cfgov/unprocessed/apps/prepaid-agreements/css/search.less b/cfgov/unprocessed/apps/prepaid-agreements/css/search.less
index f134428464a..76afa438149 100644
--- a/cfgov/unprocessed/apps/prepaid-agreements/css/search.less
+++ b/cfgov/unprocessed/apps/prepaid-agreements/css/search.less
@@ -14,7 +14,7 @@
 
 .filters_applied {
   padding: 30px 15px;
-  border-bottom: 1px solid @gray-40;
+  border-bottom: 1px solid var(--gray-40);
 
   &-label {
     font-weight: 600;
@@ -24,8 +24,8 @@
 .search_results {
   .content_sidebar {
     padding: 45px 15px 0;
-    border: 1px solid @gray-40;
-    background-color: @gray-5;
+    border: 1px solid var(--gray-40);
+    background-color: var(--gray-5);
 
     .o-expandable-group {
       margin-bottom: 15px;
@@ -59,18 +59,18 @@
       border: 0;
     }
     border: 0;
-    border-top: 1px solid @gray-40;
+    border-top: 1px solid var(--gray-40);
     padding-top: 0;
   }
   .results_count {
     padding: unit((@grid_gutter-width / 2) / @base-font-size-px, em)
       unit((@grid_gutter-width / 2) / @base-font-size-px, em) 0
       unit((@grid_gutter-width / 2) / @base-font-size-px, em);
-    border-right: 1px solid @gray-40;
-    border-bottom: 1px solid @gray-40;
-    background-color: @green-20;
+    border-right: 1px solid var(--gray-40);
+    border-bottom: 1px solid var(--gray-40);
+    background-color: var(--green-20);
     &.no-results {
-      background-color: @red-20;
+      background-color: var(--red-20);
       padding-bottom: 15px;
     }
   }
@@ -87,7 +87,7 @@
       margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
       h4 {
         padding-top: unit(@grid_gutter-width / @base-font-size-px, em);
-        border-top: 1px solid @gray-40;
+        border-top: 1px solid var(--gray-40);
       }
     }
   }
@@ -108,7 +108,7 @@
       margin-top: unit( ( @grid_gutter-width / 2 ) / @base-font-size-px, em );
     }
     .results_count {
-      border-left: 1px solid @gray-40;
+      border-left: 1px solid var(--gray-40);
     }
   }
 });
diff --git a/cfgov/unprocessed/apps/regulations3k/css/reg-listing.less b/cfgov/unprocessed/apps/regulations3k/css/reg-listing.less
index a22f0d6c77f..64cd219381a 100644
--- a/cfgov/unprocessed/apps/regulations3k/css/reg-listing.less
+++ b/cfgov/unprocessed/apps/regulations3k/css/reg-listing.less
@@ -10,11 +10,11 @@
     margin-bottom: unit(30px / @base-font-size-px, em);
     padding-left: 0;
     > li {
-      border-bottom: 1px solid @gray;
+      border-bottom: 1px solid var(--gray);
       list-style-type: none;
       padding-bottom: unit(15px / @base-font-size-px, em);
       &:first-child {
-        border-top: 1px solid @gray;
+        border-top: 1px solid var(--gray);
         padding-top: unit(15px / @base-font-size-px, em);
       }
     }
diff --git a/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less b/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less
index 318e3565af0..95f4261b6f0 100644
--- a/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less
+++ b/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less
@@ -13,7 +13,7 @@
 
   // Tablet and below.
   .respond-to-max(@bp-sm-max, {
-    background-color: @gray-5;
+    background-color: var(--gray-5);
     margin-bottom: unit( @grid_gutter-width / @base-font-size-px, em );
 
     // Add drop-shadow.
@@ -60,7 +60,7 @@
   &::before {
     // Tablet and below.
     .respond-to-max(@bp-sm-max, {
-      border-bottom: 1px solid @gray-40;
+      border-bottom: 1px solid var(--gray-40);
       content: ' ';
       display: block;
     });
@@ -100,10 +100,10 @@
 
 // TODO: convert iRegs secondary nav override abuse to modifiers on secondary nav.
 .o-secondary-nav_link {
-  color: @pacific;
+  color: var(--pacific);
 
   &__current {
-    color: @black;
+    color: var(--black);
   }
 
   &__parent {
diff --git a/cfgov/unprocessed/apps/regulations3k/css/reg-pagination.less b/cfgov/unprocessed/apps/regulations3k/css/reg-pagination.less
index 768c6adafa6..1caf09e78f1 100644
--- a/cfgov/unprocessed/apps/regulations3k/css/reg-pagination.less
+++ b/cfgov/unprocessed/apps/regulations3k/css/reg-pagination.less
@@ -11,7 +11,7 @@
 }
 
 .next-prev {
-  border-top: 2px solid @gray-40;
+  border-top: 2px solid var(--gray-40);
   width: 45%;
 }
 
@@ -20,7 +20,7 @@
 }
 
 .pager {
-  color: @gray-80;
+  color: var(--gray-80);
   text-align: center;
 }
 
@@ -55,7 +55,7 @@
 
 .next-prev-link:link,
 .next-prev-link:visited {
-  color: @pacific;
+  color: var(--pacific);
   text-decoration: none;
 }
 
diff --git a/cfgov/unprocessed/apps/regulations3k/css/reg-search.less b/cfgov/unprocessed/apps/regulations3k/css/reg-search.less
index 7aadb417ede..40acdb01bdb 100644
--- a/cfgov/unprocessed/apps/regulations3k/css/reg-search.less
+++ b/cfgov/unprocessed/apps/regulations3k/css/reg-search.less
@@ -21,7 +21,7 @@
 
 .filters_applied {
   padding: 30px 15px;
-  border-bottom: 1px solid @gray-40;
+  border-bottom: 1px solid var(--gray-40);
 
   &-label {
     font-weight: 600;
@@ -31,8 +31,8 @@
 .search_results {
   .content_sidebar {
     padding: 45px 15px 0;
-    border: 1px solid @gray-40;
-    background-color: @gray-5;
+    border: 1px solid var(--gray-40);
+    background-color: var(--gray-5);
 
     .o-expandable_content,
     .o-expandable_header {
@@ -53,7 +53,7 @@
     }
     .o-expandable {
       padding-bottom: 15px;
-      border-bottom: 1px solid @gray-40;
+      border-bottom: 1px solid var(--gray-40);
       margin-bottom: 15px;
       &:nth-child(3n) {
         border-bottom: none;
@@ -72,18 +72,18 @@
       border: 0;
     }
     border: 0;
-    border-top: 1px solid @gray-40;
+    border-top: 1px solid var(--gray-40);
     padding-top: 0;
   }
   .results_count {
     padding: unit((@grid_gutter-width / 2) / @base-font-size-px, em)
       unit((@grid_gutter-width / 2) / @base-font-size-px, em) 0
       unit((@grid_gutter-width / 2) / @base-font-size-px, em);
-    border-right: 1px solid @gray-40;
-    border-bottom: 1px solid @gray-40;
-    background-color: @green-20;
+    border-right: 1px solid var(--gray-40);
+    border-bottom: 1px solid var(--gray-40);
+    background-color: var(--green-20);
     &.no-results {
-      background-color: @red-20;
+      background-color: var(--red-20);
       padding-bottom: 15px;
     }
   }
@@ -100,7 +100,7 @@
       margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
       h4 {
         padding-top: unit(@grid_gutter-width / @base-font-size-px, em);
-        border-top: 1px solid @gray-40;
+        border-top: 1px solid var(--gray-40);
       }
     }
   }
@@ -121,7 +121,7 @@
       margin-top: unit( ( @grid_gutter-width / 2 ) / @base-font-size-px, em );
     }
     .results_count {
-      border-left: 1px solid @gray-40;
+      border-left: 1px solid var(--gray-40);
     }
   }
 });
diff --git a/cfgov/unprocessed/apps/regulations3k/css/reg-wayfinder.less b/cfgov/unprocessed/apps/regulations3k/css/reg-wayfinder.less
index 0763ec3137e..1e13712529d 100644
--- a/cfgov/unprocessed/apps/regulations3k/css/reg-wayfinder.less
+++ b/cfgov/unprocessed/apps/regulations3k/css/reg-wayfinder.less
@@ -10,11 +10,11 @@
 .o-regulations-wayfinder {
   box-sizing: border-box;
   width: 100%;
-  border-bottom: 2px solid @green;
+  border-bottom: 2px solid var(--green);
   position: fixed;
   left: 0;
-  background-color: @white;
-  box-shadow: 0 3px 8px -6px @black;
+  background-color: var(--white);
+  box-shadow: 0 3px 8px -6px var(--black);
   transition: top 0.1s ease-in-out;
   z-index: 100;
   padding-left: unit(15px / @base-font-size-px, rem);
@@ -56,7 +56,7 @@
       position: relative;
 
       &:after {
-        border-right: 1px solid @gray-40;
+        border-right: 1px solid var(--gray-40);
         content: '';
         position: absolute;
         right: -1px;
diff --git a/cfgov/unprocessed/apps/retirement/css/claiming.less b/cfgov/unprocessed/apps/retirement/css/claiming.less
index e7fc731ad8d..9c7065e7b76 100644
--- a/cfgov/unprocessed/apps/retirement/css/claiming.less
+++ b/cfgov/unprocessed/apps/retirement/css/claiming.less
@@ -82,8 +82,8 @@
   .estimated-benefits-description {
     margin: 1em 0 0;
     padding: 1em 0;
-    border-top: 1px solid @gray-20;
-    border-bottom: 1px solid @gray-20;
+    border-top: 1px solid var(--gray-20);
+    border-bottom: 1px solid var(--gray-20);
 
     p {
       margin-bottom: 0;
@@ -116,7 +116,7 @@
     left: 40px;
 
     #full-age-benefits-text {
-      color: @gray-60;
+      color: var(--gray-60);
     }
 
     .graph__bar {
@@ -128,7 +128,7 @@
     }
 
     .graph__background {
-      background: @gray-10;
+      background: var(--gray-10);
       height: 1px;
       left: 0;
     }
@@ -142,7 +142,7 @@
     }
 
     .age-text {
-      color: @gray-60;
+      color: var(--gray-60);
       cursor: pointer;
       position: absolute;
       top: 292px;
@@ -153,7 +153,7 @@
         height: 25px;
 
         p {
-          color: @black;
+          color: var(--black);
           font-weight: bolder;
         }
       }
@@ -186,8 +186,8 @@
   }
 
   input[type='text'] {
-    border: 1px solid @gray-80;
-    border-color: @gray-40;
+    border: 1px solid var(--gray-80);
+    border-color: var(--gray-40);
   }
 
   .input-labels {
@@ -304,7 +304,7 @@
   }
 
   .step-two .lifestyle-btn__active {
-    background-color: @navy;
+    background-color: var(--navy);
   }
 
   .step-two + hr {
@@ -372,7 +372,7 @@
   }
 
   .step-one .notification-input__warning {
-    border-color: @gold;
+    border-color: var(--gold);
   }
 
   /* ====================================================================
@@ -466,7 +466,7 @@
     }
 
     div.question {
-      border-top: 1px solid @gray-20;
+      border-top: 1px solid var(--gray-20);
       margin-right: 25px;
       margin-left: 15px;
       padding-top: 30px;
@@ -618,7 +618,7 @@
     }
 
     .question {
-      border-bottom: 1px solid @gray-20;
+      border-bottom: 1px solid var(--gray-20);
       padding-top: 30px;
       padding-bottom: 30px;
     }
@@ -681,12 +681,12 @@
   *[data-tooltip-target] {
     cursor: pointer;
     border-bottom: none;
-    color: @pacific;
+    color: var(--pacific);
   }
 
   #tooltip-container {
-    background-color: @gray-10;
-    border: 0 solid @black;
+    background-color: var(--gray-10);
+    border: 0 solid var(--black);
     display: none;
     font-style: normal;
     padding: 15px;
@@ -707,7 +707,7 @@
      styled tip appear along the top of the tooltip. */
     .outertip {
       border: 0 solid transparent;
-      border-bottom-color: @black;
+      border-bottom-color: var(--black);
       content: ' ';
       height: 0;
       position: absolute;
@@ -718,7 +718,7 @@
 
     .innertip {
       border: 7px solid transparent;
-      border-bottom-color: @gray-10;
+      border-bottom-color: var(--gray-10);
       content: ' ';
       height: 0;
       position: absolute;
@@ -731,8 +731,8 @@
   .tooltip-target {
     border-width: 0;
     border-style: dotted;
-    border-color: @pacific;
-    color: @pacific;
+    border-color: var(--pacific);
+    color: var(--pacific);
     cursor: pointer;
     text-decoration: none;
   }
diff --git a/cfgov/unprocessed/apps/rural-or-underserved-tool/css/main.less b/cfgov/unprocessed/apps/rural-or-underserved-tool/css/main.less
index d841ba9ae1b..4b33b84abc0 100644
--- a/cfgov/unprocessed/apps/rural-or-underserved-tool/css/main.less
+++ b/cfgov/unprocessed/apps/rural-or-underserved-tool/css/main.less
@@ -14,18 +14,18 @@
 
 // Loading icon color.
 #countMessage .cf-icon-svg {
-  color: @green;
+  color: var(--green);
 }
 
 // Error coloring.
 .warn {
-  background-color: @gold-20;
-  border-color: @gold;
+  background-color: var(--gold-20);
+  border-color: var(--gold);
 }
 
 .error {
-  background-color: @red-20;
-  border-color: @red;
+  background-color: var(--red-20);
+  border-color: var(--red);
 }
 
 // Position search result totals.
@@ -70,7 +70,7 @@
 }
 
 tr.data + tr[class=''] {
-  border-top: 2px solid @white;
+  border-top: 2px solid var(--white);
 }
 
 .map {
diff --git a/cfgov/unprocessed/apps/rural-or-underserved-tool/css/print.less b/cfgov/unprocessed/apps/rural-or-underserved-tool/css/print.less
index 934c86bbac8..d804e032ac8 100644
--- a/cfgov/unprocessed/apps/rural-or-underserved-tool/css/print.less
+++ b/cfgov/unprocessed/apps/rural-or-underserved-tool/css/print.less
@@ -46,17 +46,17 @@
   }
 
   .report-date {
-    color: @gray-60;
+    color: var(--gray-60);
   }
 
   #results-total {
-    background: @gray-10;
+    background: var(--gray-10);
     padding: 3px;
 
     a.no-decoration {
       border-bottom-style: none;
       border-bottom-width: 0;
-      color: @black;
+      color: var(--black);
     }
   }
 
diff --git a/cfgov/unprocessed/apps/tccp/css/main.less b/cfgov/unprocessed/apps/tccp/css/main.less
index ce5a5b06618..73669ce87db 100644
--- a/cfgov/unprocessed/apps/tccp/css/main.less
+++ b/cfgov/unprocessed/apps/tccp/css/main.less
@@ -1,4 +1,5 @@
-@import (reference) '../../../css/main.less';
+@import (reference) 'cfpb-core.less';
+@import (reference) 'cfpb-buttons.less';
 
 .respond-to-min(@bp-sm-min, {
   .o-form_group {
@@ -64,7 +65,7 @@
     .cf-icon-svg {
       display: inline;
       margin-right: 6px;
-      color: @green;
+      color: var(--green);
     }
 
     span {
@@ -75,19 +76,19 @@
 
 .tool-features {
   .cf-icon-svg__credit-card-round {
-    color: @gold;
+    color: var(--gold);
   }
 
   .cf-icon-svg__court-round {
-    color: @gray;
+    color: var(--gray);
   }
 
   .cf-icon-svg__disabled-round {
-    color: @red;
+    color: var(--red);
   }
 
   .cf-icon-svg__dollar-round {
-    color: @green;
+    color: var(--green);
   }
 }
 
@@ -213,8 +214,8 @@ html.js .o-filterable-list-results__partial {
 }
 
 .a-card-institution-name {
-  .heading-5( @text-shadow: @gray );
-  color: @gray;
+  .heading-5();
+  color: var(--gray);
   margin-bottom: 0;
 }
 
@@ -234,15 +235,15 @@ html.js .o-filterable-list-results__partial {
   }
 
   &__less .cf-icon-svg {
-    color: @green;
+    color: var(--green);
   }
 
   &__average .cf-icon-svg {
-    color: @gold;
+    color: var(--gold);
   }
 
   &__more .cf-icon-svg {
-    color: @red;
+    color: var(--red);
   }
 }
 
@@ -287,7 +288,8 @@ html.js .o-filterable-list-results__partial {
   width: 100%;
 
   .htmx-progress-bar {
-    background-color: @pacific;
+    background-color: var(--pacific);
+
     &::before,
     &::after {
       content: '';
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/css/atoms/icon.less b/cfgov/unprocessed/apps/teachers-digital-platform/css/atoms/icon.less
index dee98956237..9d2dbf20dea 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/css/atoms/icon.less
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/css/atoms/icon.less
@@ -9,7 +9,7 @@
 }
 
 .a-icon__gold {
-  color: @gold;
+  color: var(--gold);
 }
 
 .a-icon__space-before {
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/css/organisms/expandable.less b/cfgov/unprocessed/apps/teachers-digital-platform/css/organisms/expandable.less
index 63caaa4fb7c..8b071e86344 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/css/organisms/expandable.less
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/css/organisms/expandable.less
@@ -13,17 +13,17 @@
 //
 
 // .o-expandable
-@expandable-focus: @black;
+@expandable-focus: var(--black);
 
 // .o-expandable_label
-@expandable_label-text: @black;
+@expandable_label-text: var(--black);
 
 // .o-expandable_cues
-@expandable_cues-text: @pacific;
+@expandable_cues-text: var(--pacific);
 
 // .o-expandable modifiers
-@expandable__background: @gray-5;
-@expandable__border: @gray-40;
+@expandable__background: var(--gray-5);
+@expandable__border: var(--gray-40);
 
 // Sizing variables
 
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/css/pages/activity-search.less b/cfgov/unprocessed/apps/teachers-digital-platform/css/pages/activity-search.less
index b04a492a2e0..4f54a765a23 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/css/pages/activity-search.less
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/css/pages/activity-search.less
@@ -40,8 +40,8 @@
   .content_sidebar {
     padding: unit(15px / @base-font-size-px, em)
       unit(15px / @base-font-size-px, em) 0;
-    border: 1px solid @gray-40;
-    background-color: @gray-5;
+    border: 1px solid var(--gray-40);
+    background-color: var(--gray-5);
     margin-bottom: unit(30px / @base-font-size-px, em);
 
     // Desktop and above.
@@ -76,7 +76,7 @@
     }
 
     .filter-section {
-      border-top: 1px solid @gray-40;
+      border-top: 1px solid var(--gray-40);
     }
 
     .filter-section:first-of-type {
@@ -119,8 +119,8 @@
   .results_count {
     padding: unit(15px / @base-font-size-px, em)
       unit(15px / @base-font-size-px, em) 0 unit(15px / @base-font-size-px, em);
-    border: 1px solid @gray-40;
-    background-color: @green-20;
+    border: 1px solid var(--gray-40);
+    background-color: var(--green-20);
 
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
@@ -131,8 +131,8 @@
   }
 
   .results_count__empty {
-    background-color: @red-20;
-    border-left: 1px solid @gray-40;
+    background-color: var(--red-20);
+    border-left: 1px solid var(--gray-40);
   }
 
   .results_filters,
@@ -185,8 +185,8 @@
   }
 
   .activity {
-    background: @white;
-    border: 1px solid @gray-40;
+    background: var(--white);
+    border: 1px solid var(--gray-40);
     box-sizing: border-box;
     padding: unit(30px / @base-font-size-px, em)
       unit(15px / @base-font-size-px, em);
diff --git a/cfgov/unprocessed/css/atoms/overlay.less b/cfgov/unprocessed/css/atoms/overlay.less
index c2bd7260307..67307dcf65f 100644
--- a/cfgov/unprocessed/css/atoms/overlay.less
+++ b/cfgov/unprocessed/css/atoms/overlay.less
@@ -11,7 +11,7 @@
     // TODO: Update z-index value with standard z-index variable.
     z-index: 10;
 
-    background: @black;
+    background: var(--black);
     opacity: 0.6;
 
     // Cursor needs to be set for iOS to capture clicks of the overlay
diff --git a/cfgov/unprocessed/css/atoms/partially-styled-link.less b/cfgov/unprocessed/css/atoms/partially-styled-link.less
index 4615dfa1618..735971224c1 100644
--- a/cfgov/unprocessed/css/atoms/partially-styled-link.less
+++ b/cfgov/unprocessed/css/atoms/partially-styled-link.less
@@ -2,7 +2,7 @@
   border-bottom-width: 0;
 
   &_plain {
-    color: @black;
+    color: var(--black);
     border-bottom: 1px dotted transparent;
   }
 
diff --git a/cfgov/unprocessed/css/atoms/tag.less b/cfgov/unprocessed/css/atoms/tag.less
index 7072de5f807..64bc3c92d7d 100644
--- a/cfgov/unprocessed/css/atoms/tag.less
+++ b/cfgov/unprocessed/css/atoms/tag.less
@@ -4,25 +4,25 @@
    ========================================================================== */
 
 .a-tag {
-  border: 1px solid @teal;
+  border: 1px solid var(--teal);
   padding: 4px 10px;
-  background-color: @teal-20;
+  background-color: var(--teal-20);
   border-radius: unit(3px / @base-font-size-px, rem);
   font-weight: 500;
-  color: @black;
+  color: var(--black);
 
   &:hover {
-    background-color: @teal-40;
+    background-color: var(--teal-40);
     cursor: pointer;
   }
 
   &:focus {
-    outline: 1px dotted @teal;
+    outline: 1px dotted var(--teal);
     outline-offset: 1px;
   }
 
   &:active {
-    background-color: @teal;
+    background-color: var(--teal);
   }
 
   .cf-icon-svg {
@@ -33,6 +33,6 @@
 
   a& {
     // Colors for :link, :visited, :hover, :focus, :active.
-    .u-link__colors( @black, @black, @black, @black, @black );
+    .u-link__colors( var(--black), var(--black), var(--black), var(--black), var(--black) );
   }
 }
diff --git a/cfgov/unprocessed/css/calendar-icon.less b/cfgov/unprocessed/css/calendar-icon.less
index eba13fbe994..b443a213448 100755
--- a/cfgov/unprocessed/css/calendar-icon.less
+++ b/cfgov/unprocessed/css/calendar-icon.less
@@ -55,5 +55,5 @@
 }
 
 .calendar-icon {
-  .cf-calendar-icon( attr(data-month), attr(data-day), @gray-40, @white, 1 );
+  .cf-calendar-icon( attr(data-month), attr(data-day), var(--gray-40), var(--white), 1 );
 }
diff --git a/cfgov/unprocessed/css/enhancements/forms.less b/cfgov/unprocessed/css/enhancements/forms.less
index 71b15136f15..24e5309e37b 100644
--- a/cfgov/unprocessed/css/enhancements/forms.less
+++ b/cfgov/unprocessed/css/enhancements/forms.less
@@ -48,7 +48,7 @@ input {
     font-size: unit(14px / @base-font-size-px, em);
 
     &:focus {
-      box-shadow: 0 0 0 1px @pacific inset;
+      box-shadow: 0 0 0 1px var(--pacific) inset;
     }
   }
 }
diff --git a/cfgov/unprocessed/css/enhancements/layout-2-1.less b/cfgov/unprocessed/css/enhancements/layout-2-1.less
index 3c7315f52dd..d7f17a2db6b 100644
--- a/cfgov/unprocessed/css/enhancements/layout-2-1.less
+++ b/cfgov/unprocessed/css/enhancements/layout-2-1.less
@@ -20,7 +20,7 @@
     width: calc(100vw + 60px);
     height: 100%;
     content: '';
-    background: @gray-5;
+    background: var(--gray-5);
     // Expand off the screen to cover any margins added by the wrapper.
     left: -30px;
   }
@@ -84,7 +84,7 @@
           margin-left: unit(20px / @base-font-size-px, rem);
 
           &:after {
-            border-left: 1px solid @gray-40;
+            border-left: 1px solid var(--gray-40);
             left: 0;
           }
         }
@@ -106,7 +106,7 @@
           margin-right: unit(20px / @base-font-size-px, rem);
 
           &:after {
-            border-right: 1px solid @gray-40;
+            border-right: 1px solid var(--gray-40);
             right: 0;
           }
         }
diff --git a/cfgov/unprocessed/css/enhancements/layout-base.less b/cfgov/unprocessed/css/enhancements/layout-base.less
index f71c55bbc4f..f759a2978a6 100644
--- a/cfgov/unprocessed/css/enhancements/layout-base.less
+++ b/cfgov/unprocessed/css/enhancements/layout-base.less
@@ -47,8 +47,8 @@
         padding-right: unit(30px / @base-font-size-px, rem);
         margin-left: unit(-30px / @base-font-size-px, rem);
         margin-right: unit(-30px / @base-font-size-px, rem);
-        background: @gray-5;
-        border-bottom: 1px solid @gray-40;
+        background: var(--gray-5);
+        border-bottom: 1px solid var(--gray-40);
       }
     });
 
diff --git a/cfgov/unprocessed/css/main.less b/cfgov/unprocessed/css/main.less
index efc9f4d7c21..ae22d412468 100644
--- a/cfgov/unprocessed/css/main.less
+++ b/cfgov/unprocessed/css/main.less
@@ -113,7 +113,7 @@
   text-align: center;
 }
 
-@horizontal-rule: @gray-40;
+@horizontal-rule: var(--gray-40);
 
 body {
   -webkit-font-smoothing: antialiased;
diff --git a/cfgov/unprocessed/css/misc.less b/cfgov/unprocessed/css/misc.less
index da319fb6da3..4b303a82f5a 100755
--- a/cfgov/unprocessed/css/misc.less
+++ b/cfgov/unprocessed/css/misc.less
@@ -9,7 +9,7 @@
     bottom: -5px;
     left: 0;
 
-    background: @gray;
+    background: var(--gray);
     // Whitespace in content so element can have dimensions set.
     content: '';
     opacity: 0.2;
diff --git a/cfgov/unprocessed/css/molecules/autocomplete.less b/cfgov/unprocessed/css/molecules/autocomplete.less
index dc144b1a6ee..4996e305e77 100644
--- a/cfgov/unprocessed/css/molecules/autocomplete.less
+++ b/cfgov/unprocessed/css/molecules/autocomplete.less
@@ -12,7 +12,7 @@
   // Restrict height of autocomplete suggestions
   // 'dropdown' box to 200px.
   max-height: 200px;
-  border: 1px solid @pacific;
+  border: 1px solid var(--pacific);
   border-top-width: 0;
   padding-left: 0;
   overflow-y: scroll;
@@ -22,7 +22,7 @@
   list-style-type: none;
 
   li {
-    border-bottom: 1px solid @gray-20;
+    border-bottom: 1px solid var(--gray-20);
     margin-bottom: 0;
 
     &:hover,
@@ -39,6 +39,6 @@
     display: block;
     padding: unit((@grid_gutter-width / 4) / @base-font-size-px, em);
     border-width: 0;
-    color: @black;
+    color: var(--black);
   }
 }
diff --git a/cfgov/unprocessed/css/molecules/global-eyebrow.less b/cfgov/unprocessed/css/molecules/global-eyebrow.less
index fab68d438b8..a18dff6e58e 100644
--- a/cfgov/unprocessed/css/molecules/global-eyebrow.less
+++ b/cfgov/unprocessed/css/molecules/global-eyebrow.less
@@ -31,8 +31,8 @@
     display: inline-block;
     padding-top: unit(@grid_gutter-width / 3 / @base-font-size-px, em);
     padding-bottom: unit(@grid_gutter-width / 3 / @base-font-size-px, em);
-    background: @gray-5;
-    border-bottom: 1px solid @gray-40;
+    background: var(--gray-5);
+    border-bottom: 1px solid var(--gray-40);
 
     /* This is to allow vertical overlap with the languages */
     .a-tagline {
@@ -76,7 +76,7 @@
     }
 
     .m-global-eyebrow_phone {
-      border-top: 1px solid @gray-40;
+      border-top: 1px solid var(--gray-40);
       padding-top: unit(@grid_gutter-width / 2 / @base-font-size-px, rem);
 
       // Apply padding to the phone number to increase the touch area.
diff --git a/cfgov/unprocessed/css/molecules/global-header-cta.less b/cfgov/unprocessed/css/molecules/global-header-cta.less
index 1efa4ea922a..e3d54c1e2a2 100644
--- a/cfgov/unprocessed/css/molecules/global-header-cta.less
+++ b/cfgov/unprocessed/css/molecules/global-header-cta.less
@@ -1,12 +1,12 @@
 .m-global-header-cta {
-  border-left: 1px solid @gray-40;
+  border-left: 1px solid var(--gray-40);
   padding-left: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
   padding-top: 13px;
   padding-bottom: 11px;
 
   a {
     // Colors for :link, :visited, :hover, :focus, :active.
-    .u-link__colors( @pacific, @pacific, @pacific-dark, @pacific, @navy-dark );
+    .u-link__colors( var(--pacific), var(--pacific), var(--pacific-dark), var(--pacific), var(--navy-dark) );
     font-weight: 500;
   }
 }
diff --git a/cfgov/unprocessed/css/molecules/global-search.less b/cfgov/unprocessed/css/molecules/global-search.less
index 082dfc49723..d8d9c05a763 100644
--- a/cfgov/unprocessed/css/molecules/global-search.less
+++ b/cfgov/unprocessed/css/molecules/global-search.less
@@ -25,7 +25,7 @@
     });
 
     &:focus {
-      outline: 1px dotted @black;
+      outline: 1px dotted var(--black);
     }
 
     &-open-label {
@@ -38,7 +38,7 @@
 
     // Hover state for desktop.
     &:hover {
-      color: @gray-90;
+      color: var(--gray-90);
     }
   }
 
@@ -73,8 +73,8 @@
       min-width: @mobile_trigger_ht__px;
 
       &[aria-expanded="true"] {
-        background: @gray-10;
-        border-left: 1px solid @gray-40;
+        background: var(--gray-10);
+        border-left: 1px solid var(--gray-40);
 
         .m-global-search_trigger-open-label {
           display: none;
@@ -88,11 +88,11 @@
       // Hover state for (x) close button.
       @media (hover: hover) {
         &:hover {
-          color: @black;
-          border-left: 1px solid @gray-40;
+          color: var(--black);
+          border-left: 1px solid var(--gray-40);
 
           // Important needed to override background color in expanded state.
-          background: @gray-20  !important;
+          background: var(--gray-20)  !important;
         }
       }
     }
@@ -110,9 +110,9 @@
         left: 0;
         z-index: 10;
 
-        background-color: @gray-5;
-        border-top: 1px solid @gray-40;
-        border-bottom: 1px solid @gray-40;
+        background-color: var(--gray-5);
+        border-top: 1px solid var(--gray-40);
+        border-bottom: 1px solid var(--gray-40);
       }
     }
   });
diff --git a/cfgov/unprocessed/css/molecules/info-unit.less b/cfgov/unprocessed/css/molecules/info-unit.less
index 96a6a0df3a7..7be8f6b9b9a 100644
--- a/cfgov/unprocessed/css/molecules/info-unit.less
+++ b/cfgov/unprocessed/css/molecules/info-unit.less
@@ -29,7 +29,7 @@
   &_heading-link {
     display: block;
 
-    .u-link__colors( @black, @pacific-80 );
+    .u-link__colors( var(--black), var(--pacific-80) );
   }
 }
 
diff --git a/cfgov/unprocessed/css/molecules/inset.less b/cfgov/unprocessed/css/molecules/inset.less
index cd777d6b017..3ca209407ef 100644
--- a/cfgov/unprocessed/css/molecules/inset.less
+++ b/cfgov/unprocessed/css/molecules/inset.less
@@ -15,8 +15,8 @@
 
   &__bordered {
     // Styling for "Tip" insets, most commonly used in Ask CFPB
-    border-top: 4px solid @teal-60;
-    border-bottom: 2px solid @teal-40;
+    border-top: 4px solid var(--teal-60);
+    border-bottom: 2px solid var(--teal-40);
     padding: unit(@grid_gutter-width / 2 / @base-font-size-px, em) 0;
     margin-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
 
diff --git a/cfgov/unprocessed/css/molecules/related-metadata.less b/cfgov/unprocessed/css/molecules/related-metadata.less
index 1a45ef30ec2..66f8fbcb529 100644
--- a/cfgov/unprocessed/css/molecules/related-metadata.less
+++ b/cfgov/unprocessed/css/molecules/related-metadata.less
@@ -4,7 +4,7 @@
 
 .m-related-metadata {
   .m-list_link {
-    .u-link__colors(@pacific, @pacific, @pacific-60, @pacific, @navy);
+    .u-link__colors(var(--pacific), var(--pacific), var(--pacific-60), var(--pacific), var(--navy));
   }
 
   // Tablet only.
@@ -31,7 +31,7 @@
 
   h6 {
     margin-bottom: 0.25em;
-    color: @gray;
+    color: var(--gray);
   }
 }
 
@@ -44,8 +44,8 @@
     margin: 0 0 0 @bullet-font-size__em;
     text-transform: uppercase;
 
-    .u-link__colors(@gray, @gray, @gray, @gray, @gray,
-    @gold-80, @gold-80, @gold-80, @gold-80, @gold-80);
+    .u-link__colors(var(--gray), var(--gray), var(--gray), var(--gray), var(--gray),
+    var(--gold-80), var(--gold-80), var(--gold-80), var(--gold-80), var(--gold-80));
 
     &::before {
       position: absolute;
@@ -54,7 +54,7 @@
 
       // Adding bullet.
       content: '\2022';
-      color: @gold-80;
+      color: var(--gold-80);
     }
   }
 
diff --git a/cfgov/unprocessed/css/molecules/related-posts.less b/cfgov/unprocessed/css/molecules/related-posts.less
index 2db1a5da8d0..8e582f25cf0 100644
--- a/cfgov/unprocessed/css/molecules/related-posts.less
+++ b/cfgov/unprocessed/css/molecules/related-posts.less
@@ -12,7 +12,7 @@
   );
 
   .m-list_link {
-    .u-link__colors(@pacific, @pacific, @pacific-60, @pacific, @navy);
+    .u-link__colors(var(--pacific), var(--pacific), var(--pacific-60), var(--pacific), var(--navy));
     .u-link__no-border();
 
     &:hover {
diff --git a/cfgov/unprocessed/css/molecules/social-media.less b/cfgov/unprocessed/css/molecules/social-media.less
index ef04e73111d..9cf18282c8f 100644
--- a/cfgov/unprocessed/css/molecules/social-media.less
+++ b/cfgov/unprocessed/css/molecules/social-media.less
@@ -10,10 +10,10 @@
   }
 
   &_icon {
-    color: @gray-dark;
+    color: var(--gray-dark);
     font-size: unit(@grid_gutter-width / @base-font-size-px, rem);
     line-height: 1;
-    .u-link__colors( @gray-dark, @pacific-80 );
+    .u-link__colors( var(--gray-dark), var(--pacific-80) );
     .u-link__no-border();
   }
 
@@ -26,7 +26,7 @@
 
     .m-social-media_print {
       padding-left: unit(10px / @base-font-size-px, rem);
-      border-left: 1px solid @black;
+      border-left: 1px solid var(--black);
     }
   }
 
@@ -47,7 +47,7 @@ html[lang='ar'] .m-social-media__share {
     padding-left: 0;
     border-left: none;
     padding-right: unit(10px / @base-font-size-px, rem);
-    border-right: 1px solid @black;
+    border-right: 1px solid var(--black);
   }
 
   // TODO: Scrutinize usage of unordered list and see if it can be removed.
diff --git a/cfgov/unprocessed/css/molecules/tags.less b/cfgov/unprocessed/css/molecules/tags.less
index d749de8fe0a..e9ec563cf47 100755
--- a/cfgov/unprocessed/css/molecules/tags.less
+++ b/cfgov/unprocessed/css/molecules/tags.less
@@ -7,7 +7,7 @@
   &_heading {
     .h4();
     display: block;
-    color: @black;
+    color: var(--black);
   }
 
   &_list {
@@ -27,7 +27,7 @@
     display: inline-block;
     position: relative;
     line-height: @bullet-font-size;
-    color: @gray;
+    color: var(--gray);
   }
 
   &_item {
@@ -37,7 +37,7 @@
   &_bullet {
     position: absolute;
     left: -1em;
-    color: @gold-80;
+    color: var(--gold-80);
     font-size: unit(@bullet-font-size / @base-font-size-px, rem);
     margin-right: unit(5px / @base-font-size-px, rem);
     margin-left: @bullet-font-size;
@@ -45,8 +45,8 @@
 
   a.m-tags_tag {
     .u-link__colors(
-      @gray, @gray, @gray, @gray, @gray,
-      @gold-80, @gold-80, @gold-80, @gold-80, @gold-80
+      var(--gray), var(--gray), var(--gray), var(--gray), var(--gray),
+      var(--gold-80), var(--gold-80), var(--gold-80), var(--gold-80), var(--gold-80)
     );
   }
 
@@ -65,15 +65,15 @@
       padding-top: unit(10px / @base-font-size-px, rem);
       padding-bottom: unit(10px / @base-font-size-px, rem);
       padding-left: @bullet-font-size;
-      border-top: 1px dotted @gold-80;
+      border-top: 1px dotted var(--gold-80);
     }
 
     a.m-tags_tag {
       border-bottom-width: 0;
 
       &:hover {
-        border-top: 1px solid @gold-80;
-        border-bottom: 1px solid @gold-80;
+        border-top: 1px solid var(--gold-80);
+        border-bottom: 1px solid var(--gold-80);
       }
     }
 
@@ -81,7 +81,7 @@
     &_item:last-child {
       // This needs to appear after border-bottom-width: 0;
       .m-tags_tag {
-        border-bottom: 1px dotted @gold-80;
+        border-bottom: 1px dotted var(--gold-80);
       }
     }
   });
@@ -118,7 +118,7 @@ html[lang='ar'] {
       position: absolute;
       right: -1rem;
       left: initial;
-      color: @gold-80;
+      color: var(--gold-80);
     }
 
     // Mobile only.
diff --git a/cfgov/unprocessed/css/molecules/translation-links.less b/cfgov/unprocessed/css/molecules/translation-links.less
index 42227316d7d..f24357b4607 100644
--- a/cfgov/unprocessed/css/molecules/translation-links.less
+++ b/cfgov/unprocessed/css/molecules/translation-links.less
@@ -3,7 +3,7 @@
 .u-divider {
   content: '';
   display: block;
-  background: @gray;
+  background: var(--gray);
   width: 1px;
   height: unit(20px / @base-font-size-px, em);
 }
diff --git a/cfgov/unprocessed/css/on-demand/ask.less b/cfgov/unprocessed/css/on-demand/ask.less
index f1f3f6356d1..ca784800d11 100644
--- a/cfgov/unprocessed/css/on-demand/ask.less
+++ b/cfgov/unprocessed/css/on-demand/ask.less
@@ -104,7 +104,7 @@
         margin-bottom: 0;
 
         a {
-          color: @black;
+          color: var(--black);
 
           &:hover {
             border-style: solid;
@@ -219,15 +219,15 @@
   .answer-edited-date {
     .h5();
     display: block;
-    color: @gray-90;
+    color: var(--gray-90);
   }
 
   .answer-module {
-    border-top: 3px solid @green;
+    border-top: 3px solid var(--green);
     border-bottom: 1px solid @block__border-bottom;
     padding: unit((@grid_gutter-width / 2) / @base-font-size-px, em) 0;
     margin: unit(@grid_gutter-width / @base-font-size-px, em) 0;
-    color: @gray;
+    color: var(--gray);
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
diff --git a/cfgov/unprocessed/css/on-demand/car-buying-guide.less b/cfgov/unprocessed/css/on-demand/car-buying-guide.less
index 2538a96b574..721ed50dbb0 100644
--- a/cfgov/unprocessed/css/on-demand/car-buying-guide.less
+++ b/cfgov/unprocessed/css/on-demand/car-buying-guide.less
@@ -37,7 +37,7 @@
 
     table {
       td + td {
-        border-left: 1px solid @gray-20;
+        border-left: 1px solid var(--gray-20);
       }
     }
 
@@ -49,14 +49,14 @@
         line-height: 1.25;
         text-transform: uppercase;
         padding: unit( 12px / @base-font-size-px, em );
-        color: @black;
+        color: var(--black);
         background: transparent;
       }
     }
 
     tbody {
       tr {
-        border-bottom: 1px solid @gray-20;
+        border-bottom: 1px solid var(--gray-20);
       }
 
       th, td {
diff --git a/cfgov/unprocessed/css/on-demand/chart.less b/cfgov/unprocessed/css/on-demand/chart.less
index 4dca0944c0e..66f9b3f44e1 100644
--- a/cfgov/unprocessed/css/on-demand/chart.less
+++ b/cfgov/unprocessed/css/on-demand/chart.less
@@ -5,7 +5,7 @@
 .m-chart-footnote {
   padding-top: unit(15px / @base-font-size-px, em);
   margin-top: unit(30px / @base-font-size-px, em);
-  color: @black;
+  color: var(--black);
   @font-size: 12px;
   font-size: unit(@font-size / @base-font-size-px, em);
 }
diff --git a/cfgov/unprocessed/css/on-demand/error.less b/cfgov/unprocessed/css/on-demand/error.less
index 56d64e6d1cf..a659fac6da8 100644
--- a/cfgov/unprocessed/css/on-demand/error.less
+++ b/cfgov/unprocessed/css/on-demand/error.less
@@ -15,17 +15,17 @@
     flex-direction: row;
 
     .m-list_item + .m-list_item {
-      border-left: 1px solid @white;
+      border-left: 1px solid var(--white);
       padding-left: unit( 30px / @base-font-size-px, rem);
     }
   });
 }
 
 .error-page {
-  background-color: @gray-dark;
+  background-color: var(--gray-dark);
 
   &_main {
-    color: @white;
+    color: var(--white);
 
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
@@ -38,8 +38,8 @@
     });
 
     .a-link__jump {
-      color: @white;
-      border-color: @white;
+      color: var(--white);
+      border-color: var(--white);
       margin-top: unit((@grid_gutter-width / 4) / @base-font-size-px, em);
     }
   }
@@ -47,7 +47,7 @@
   &_404 {
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      background: @gray-dark url('/static/img/plug-538x655.png') no-repeat top right;
+      background: var(--gray-dark) url('/static/img/plug-538x655.png') no-repeat top right;
       background-size: 269px 327px;
     });
   }
@@ -55,7 +55,7 @@
   &_500 {
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      background: @gray-dark url('/static/img/server-706x619.png') no-repeat center right;
+      background: var(--gray-dark) url('/static/img/server-706x619.png') no-repeat center right;
       background-size: 353px 310px;
     });
   }
diff --git a/cfgov/unprocessed/css/on-demand/event.less b/cfgov/unprocessed/css/on-demand/event.less
index d79fe03bc1c..fc2d51a1ce1 100644
--- a/cfgov/unprocessed/css/on-demand/event.less
+++ b/cfgov/unprocessed/css/on-demand/event.less
@@ -57,7 +57,7 @@
    ========================================================================== */
 
 .event-media_container {
-  border: 1px solid @gray-10;
+  border: 1px solid var(--gray-10);
 }
 
 /* Event-Meta
@@ -93,9 +93,9 @@
 
 .event-status {
   margin: 0 0 unit(30px / @base-font-size-px, em);
-  color: @black;
-  border-top: 1px solid @gray-20;
-  border-bottom: 1px solid @gray-20;
+  color: var(--black);
+  border-top: 1px solid var(--gray-20);
+  border-bottom: 1px solid var(--gray-20);
 
   // Tablet and above.
   .respond-to-min(@bp-sm-min, {
@@ -111,7 +111,7 @@
   }
 
   .event-meta {
-    color: @gray-40;
+    color: var(--gray-40);
   }
 }
 
@@ -126,8 +126,8 @@
    ========================================================================== */
 
 .event-venue {
-  background: @gray-10;
-  border-top: 5px solid @green;
+  background: var(--gray-10);
+  border-top: 5px solid var(--green);
 }
 
 .event-venue_details {
@@ -159,8 +159,8 @@
 
 .event-venue_live-btn {
   margin-right: 10px;
-  background-color: @green;
-  color: @black;
+  background-color: var(--green);
+  color: var(--black);
   text-transform: uppercase;
   padding: 6px 15px 4px;
 }
@@ -173,8 +173,8 @@
 
 .modification-date {
   .h6();
-  background: @green-20;
-  color: @black;
+  background: var(--green-20);
+  color: var(--black);
   letter-spacing: 0;
   padding: unit(1px / @base-font-size-px, em)
     unit(10px / @base-font-size-px, em);
diff --git a/cfgov/unprocessed/css/on-demand/job_listing_list.less b/cfgov/unprocessed/css/on-demand/job_listing_list.less
index 115cb334ced..249cb2db8fd 100644
--- a/cfgov/unprocessed/css/on-demand/job_listing_list.less
+++ b/cfgov/unprocessed/css/on-demand/job_listing_list.less
@@ -9,7 +9,7 @@
   });
 
   .m-list_link-subtext {
-    .u-link__colors( @black );
+    .u-link__colors( var(--black) );
     display: block;
     margin-top: unit(2px / @base-font-size-px, em);
     font-weight: normal;
diff --git a/cfgov/unprocessed/css/on-demand/mortgage-performance-trends.less b/cfgov/unprocessed/css/on-demand/mortgage-performance-trends.less
index daf7a688989..c9c800618ef 100644
--- a/cfgov/unprocessed/css/on-demand/mortgage-performance-trends.less
+++ b/cfgov/unprocessed/css/on-demand/mortgage-performance-trends.less
@@ -3,7 +3,7 @@
 @import url('cfpb-chart-builder.less');
 
 .o-mp-map {
-  border: 1px solid @gray-40;
+  border: 1px solid var(--gray-40);
   margin-top: unit(30px / @base-font-size-px, em);
   padding: unit(30px / @base-font-size-px, em)
     unit(30px / @base-font-size-px, em) unit(15px / @base-font-size-px, em);
@@ -16,7 +16,7 @@
   .highcharts-map-series {
     .highcharts-point-select,
     .highcharts-point:hover {
-      stroke: @black !important;
+      stroke: var(--black) !important;
       stroke-width: 3px !important;
       transition:
         fill 500ms,
@@ -24,7 +24,7 @@
         stroke-width 0 !important;
     }
     .highcharts-point {
-      stroke: @black;
+      stroke: var(--black);
       &.highcharts-null-point {
         stroke-width: 0 !important;
       }
@@ -36,7 +36,7 @@
     &state-outline-counties,
     &map-separators {
       .highcharts-point {
-        stroke: @black;
+        stroke: var(--black);
       }
     }
     &data-outline-counties,
@@ -47,9 +47,9 @@
     }
   }
   .highcharts-tooltip-box {
-    fill: @white;
+    fill: var(--white);
     fill-opacity: 1;
-    stroke: @black;
+    stroke: var(--black);
   }
 }
 
@@ -58,7 +58,7 @@
   font-family: 'Avenir Next', Arial, sans-serif;
 
   dt {
-    border-bottom: 1px solid @black;
+    border-bottom: 1px solid var(--black);
     font-size: @size-vi;
     margin-bottom: 5px;
     padding-bottom: 5px;
@@ -79,25 +79,25 @@
   &[data-chart-color='blue'] {
     .a-ramp-value {
       &-0 {
-        fill: @gray-5;
+        fill: var(--gray-5);
       }
       &-1 {
-        fill: @pacific-20;
+        fill: var(--pacific-20);
       }
       &-2 {
-        fill: @pacific-40;
+        fill: var(--pacific-40);
       }
       &-3 {
-        fill: @pacific-60;
+        fill: var(--pacific-60);
       }
       &-4 {
-        fill: @pacific-80;
+        fill: var(--pacific-80);
       }
       &-5 {
-        fill: @pacific;
+        fill: var(--pacific);
       }
       &-6 {
-        fill: @pacific-dark;
+        fill: var(--pacific-dark);
       }
     }
   }
@@ -105,25 +105,25 @@
   &[data-chart-color='navy'] {
     .a-ramp-value {
       &-0 {
-        fill: @gray-5;
+        fill: var(--gray-5);
       }
       &-1 {
-        fill: @navy-20;
+        fill: var(--navy-20);
       }
       &-2 {
-        fill: @navy-40;
+        fill: var(--navy-40);
       }
       &-3 {
-        fill: @navy-60;
+        fill: var(--navy-60);
       }
       &-4 {
-        fill: @navy-80;
+        fill: var(--navy-80);
       }
       &-5 {
-        fill: @navy;
+        fill: var(--navy);
       }
       &-6 {
-        fill: @navy-dark;
+        fill: var(--navy-dark);
       }
     }
   }
@@ -175,7 +175,7 @@
 
   // Helper text under some filter or zoom options
   .m-field-helper-text {
-    color: @gray-80;
+    color: var(--gray-80);
     @font-size: 12px;
     font-size: unit(@font-size / @base-font-size-px, em);
   }
diff --git a/cfgov/unprocessed/css/on-demand/simple-chart.less b/cfgov/unprocessed/css/on-demand/simple-chart.less
index 4e88acd937f..380b73f9360 100644
--- a/cfgov/unprocessed/css/on-demand/simple-chart.less
+++ b/cfgov/unprocessed/css/on-demand/simple-chart.less
@@ -89,22 +89,22 @@
   }
 
   .highcharts-navigator-mask-inside {
-    fill: @gray-30;
+    fill: var(--gray-30);
     fill-opacity: 0.1;
   }
   .highcharts-navigator-handle {
-    stroke: @gray;
-    fill: @gray-5;
+    stroke: var(--gray);
+    fill: var(--gray-5);
   }
   .highcharts-navigator-outline {
-    stroke: @gray-40;
+    stroke: var(--gray-40);
   }
 
   .highcharts-navigator-xaxis > text {
     font-size: 12px !important;
   }
   .highcharts-xaxis-grid.highcharts-navigator-xaxis > .highcharts-grid-line {
-    stroke: @gray-40;
+    stroke: var(--gray-40);
   }
 
   /* Testing line patterns
@@ -144,7 +144,7 @@
   .highcharts-axis-line,
   .highcharts-tick,
   .highcharts-grid-line {
-    stroke: @gray-20;
+    stroke: var(--gray-20);
   }
   .highcharts-button {
     font-size: 14px;
@@ -161,8 +161,8 @@
       }
     }
     text {
-      color: @gray !important;
-      fill: @gray !important;
+      color: var(--gray) !important;
+      fill: var(--gray) !important;
       transform: translate(0, 5px);
       font-size: @base-font-size-px;
       font-weight: 400;
@@ -244,7 +244,7 @@
     }
     .legend-color {
       height: 15px;
-      border: 1px solid @gray-60;
+      border: 1px solid var(--gray-60);
       width: 19.5%;
       &:not(:nth-child(2)) {
         border-left: none;
diff --git a/cfgov/unprocessed/css/organisms/footer.less b/cfgov/unprocessed/css/organisms/footer.less
index ab77ad54f6c..714aef4a190 100644
--- a/cfgov/unprocessed/css/organisms/footer.less
+++ b/cfgov/unprocessed/css/organisms/footer.less
@@ -7,15 +7,15 @@
   // There is a 10px margin-bottom on the  last .o-footer_list li's, plus the
   // 50px bottom padding = 60px of total padding at the bottom of the footer.
   padding-bottom: unit(50px / @base-font-size-px, em);
-  border-top: 5px solid @green;
-  background: @gray-5;
+  border-top: 5px solid var(--green);
+  background: var(--gray-5);
 
   &_nav-list {
     .m-list__links();
 
     .m-list_link {
       font-size: unit(18px / @base-font-size-px, em);
-      .u-link__colors( @black );
+      .u-link__colors( var(--black) );
 
       // Tablet and above.
       .respond-to-min(@bp-sm-min, {
@@ -45,7 +45,7 @@
     .m-list__links();
 
     .m-list_link {
-      .u-link__colors( @gray-dark );
+      .u-link__colors( var(--gray-dark) );
     }
   }
 
@@ -71,7 +71,7 @@
     .respond-to-min(@bp-sm-min, {
       padding-bottom: unit( @grid_gutter-width / @base-font-size-px, em );
       margin-bottom: unit( @grid_gutter-width / @base-font-size-px, em );
-      border-bottom: 1px solid @gray-40;
+      border-bottom: 1px solid var(--gray-40);
 
       .o-footer_top-button {
         display: none;
@@ -115,7 +115,7 @@
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
       .grid_column(8);
-      border-right: 1px solid @gray-40;
+      border-right: 1px solid var(--gray-40);
       border-left: 0;
 
       .o-footer_col {
@@ -169,7 +169,7 @@
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
       padding-top: unit( @grid_gutter-width / @base-font-size-px, em );
-      border-top: 1px solid @gray-40;
+      border-top: 1px solid var(--gray-40);
     });
 
     .respond-to-print( {
diff --git a/cfgov/unprocessed/css/organisms/header.less b/cfgov/unprocessed/css/organisms/header.less
index 248d352c06f..0ed54e92da4 100644
--- a/cfgov/unprocessed/css/organisms/header.less
+++ b/cfgov/unprocessed/css/organisms/header.less
@@ -4,10 +4,10 @@
 
 .o-header {
   min-width: @min_app_width__px;
-  border-bottom: 5px solid @green;
+  border-bottom: 5px solid var(--green);
   position: relative;
   z-index: 10;
-  background-color: @white;
+  background-color: var(--white);
 
   .respond-to-min(@bp-lg-min, {
     min-width: @bp-lg-min;
diff --git a/cfgov/unprocessed/css/organisms/info-unit-group.less b/cfgov/unprocessed/css/organisms/info-unit-group.less
index e4dc4d3a06a..e635d509d75 100644
--- a/cfgov/unprocessed/css/organisms/info-unit-group.less
+++ b/cfgov/unprocessed/css/organisms/info-unit-group.less
@@ -9,7 +9,7 @@
     margin-bottom: unit((@grid_gutter-width / @base-font-size-px), em);
     margin-left: auto !important;
     position: static;
-    background-color: @gray-40;
+    background-color: var(--gray-40);
     content: '';
   }
 }
diff --git a/cfgov/unprocessed/css/organisms/mega-menu.less b/cfgov/unprocessed/css/organisms/mega-menu.less
index b1d0671199d..40db09e69de 100644
--- a/cfgov/unprocessed/css/organisms/mega-menu.less
+++ b/cfgov/unprocessed/css/organisms/mega-menu.less
@@ -52,7 +52,7 @@ body {
 
   // Make the pseudo-element have an outline.
   &:focus::after {
-    outline: 1px dotted @pacific;
+    outline: 1px dotted var(--pacific);
   }
 
   // Create the dimensions for the pseudo-element focus rectangle.
@@ -79,17 +79,17 @@ body {
 // Default link hover menu items.
 .u-hover-link-desktop() {
   &:hover {
-    .u-bar-left( @green );
+    .u-bar-left( var(--green) );
   }
 }
 
 // Adjustments for links with icons, desktop.
 .u-hover-link-icon-desktop() {
   &:hover {
-    .u-bar-left( @green, -@menu_link_hover_bar_px - 8px );
+    .u-bar-left( var(--green), -@menu_link_hover_bar_px - 8px );
 
     .cf-icon-svg {
-      fill: @black;
+      fill: var(--black);
     }
   }
 }
@@ -104,14 +104,14 @@ body {
 // A default link on mobile.
 .u-hover-link-mobile() {
   &:hover {
-    color: @black;
-    .u-bar-left( @green );
+    color: var(--black);
+    .u-bar-left( var(--green) );
 
     // This is for the link with icon, which is
     // combined with this helper because the
     // hover bar doesn't need separate treatment.
     .cf-icon-svg {
-      fill: @black;
+      fill: var(--black);
     }
   }
 }
@@ -188,7 +188,7 @@ body {
 .u-current-link-desktop() {
   &,
   &:hover {
-    .u-bar-left( @black );
+    .u-bar-left( var(--black) );
   }
 }
 
@@ -196,7 +196,7 @@ body {
 .u-current-link-icon-desktop() {
   &,
   &:hover {
-    .u-bar-left( @black, -@menu_link_hover_bar_px - 8px );
+    .u-bar-left( var(--black), -@menu_link_hover_bar_px - 8px );
   }
 }
 
@@ -204,7 +204,7 @@ body {
 .u-current-link-mobile() {
   &,
   &:hover {
-    .u-bar-left( @black );
+    .u-bar-left( var(--black) );
   }
 }
 
@@ -258,7 +258,7 @@ body {
 
       & .cf-icon-svg {
         display: inline;
-        color: @pacific;
+        color: var(--pacific);
         margin-right: 6px;
       }
     }
@@ -268,7 +268,7 @@ body {
   &_content-1 {
     &-link {
       // Colors for :link, :visited, :hover, :focus, :active.
-      .u-link__colors( @black );
+      .u-link__colors( var(--black) );
 
       display: block;
     }
@@ -279,15 +279,15 @@ body {
   &_content-3 {
     &-overview {
       display: block;
-      border-bottom: 1px solid @gray-40;
+      border-bottom: 1px solid var(--gray-40);
     }
 
     &-link,
     &-overview-link {
       // Colors for :link, :visited, :hover, :focus, :active.
-      .u-link__colors( @pacific, @pacific, @black, @pacific, @black );
+      .u-link__colors( var(--pacific), var(--pacific), var(--black), var(--pacific), var(--black) );
       &:hover:focus {
-        color: @black;
+        color: var(--black);
       }
 
       display: block;
@@ -321,10 +321,10 @@ body {
       top: 0;
       z-index: 20;
 
-      background: @white;
+      background: var(--white);
       border: none;
-      border-right: 1px solid @gray-40;
-      color: @black;
+      border-right: 1px solid var(--gray-40);
+      color: var(--black);
       font-size: 18px;
 
       .js & {
@@ -332,7 +332,7 @@ body {
       }
 
       &:focus {
-        outline: 1px dotted @black;
+        outline: 1px dotted var(--black);
       }
 
       .o-mega-menu_trigger-close {
@@ -344,10 +344,10 @@ body {
       }
 
       &[aria-expanded="true"] {
-        background: @gray-10;
-        border-left: 1px solid @gray-40;
-        border-right: 1px solid @gray-40;
-        color: @black;
+        background: var(--gray-10);
+        border-left: 1px solid var(--gray-40);
+        border-right: 1px solid var(--gray-40);
+        color: var(--black);
 
         .o-mega-menu_trigger-close {
           display: block;
@@ -361,7 +361,7 @@ body {
       // Hover state for (x) close button.
       @media (hover: hover) {
         &:hover {
-          background: @gray-20;
+          background: var(--gray-20);
         }
       }
     }
@@ -375,9 +375,9 @@ body {
       box-sizing: border-box;
       width: 100%;
 
-      background-color: @gray-5;
-      border-top: 1px solid @gray-40;
-      border-bottom: 1px solid @gray-40;
+      background-color: var(--gray-5);
+      border-top: 1px solid var(--gray-40);
+      border-bottom: 1px solid var(--gray-40);
 
       .js & {
         position: absolute;
@@ -396,15 +396,15 @@ body {
         width: 100%;
         padding: unit( @grid_gutter-width / 2 / @base-font-size-px, em );
         border: none;
-        border-bottom: 1px solid @gray-40;
+        border-bottom: 1px solid var(--gray-40);
         position: relative;
-        background-color: @gray-10;
+        background-color: var(--gray-10);
         font-weight: 500;
         text-align: left;
         text-transform: uppercase;
 
         &:focus {
-          outline: 1px dotted @pacific;
+          outline: 1px dotted var(--pacific);
         }
 
         .cf-icon-svg {
@@ -413,13 +413,13 @@ body {
 
         // Hover state for back button.
         &:hover {
-          background: @gray-20;
+          background: var(--gray-20);
         }
       }
 
       &-overview {
         display: block;
-        border-bottom: 1px solid @gray-40;
+        border-bottom: 1px solid var(--gray-40);
       }
 
       &-wrapper {
@@ -434,7 +434,7 @@ body {
       }
 
       &-item {
-        border-bottom: 1px solid @gray-40;
+        border-bottom: 1px solid var(--gray-40);
       }
 
       &-overview-heading-text {
@@ -447,7 +447,7 @@ body {
       &-overview-link {
         position: relative;
         // Colors for :link, :visited, :hover, :focus, :active.
-        .u-link__colors( @pacific, @pacific, @pacific-60, @pacific, @navy-dark );
+        .u-link__colors( var(--pacific), var(--pacific), var(--pacific-60), var(--pacific), var(--navy-dark) );
 
         padding-top: unit( 15px / 18px, em );
         padding-bottom: unit( 15px / 18px, em );
@@ -466,7 +466,7 @@ body {
           transform: translateY( -50% );
 
           .cf-icon-svg {
-            fill: @green;
+            fill: var(--green);
           }
         }
 
@@ -541,7 +541,7 @@ body {
 
       // add border between title and following list
       &:not(&__hidden) + ul {
-        border-top: 1px solid @gray-40;
+        border-top: 1px solid var(--gray-40);
       }
     }
   });
@@ -564,7 +564,7 @@ body {
       z-index: 20;
       height: 1px;
       content: '';
-      box-shadow: 0px 1px 0px 0px @gray-40;
+      box-shadow: 0px 1px 0px 0px var(--gray-40);
     }
 
     &_trigger {
@@ -659,7 +659,7 @@ body {
 
           // Change hover border color.
           &:after {
-            background: @gray-40;
+            background: var(--gray-40);
           }
         }
 
@@ -668,10 +668,10 @@ body {
         &:active {
           position: relative;
           top: 1px;
-          background-color: @gray-5;
+          background-color: var(--gray-5);
 
           // Important needed to override global link style override.
-          border: 1px solid @gray-40 !important;
+          border: 1px solid var(--gray-40) !important;
           border-bottom: none !important;
         }
 
@@ -688,9 +688,9 @@ body {
 
         &[aria-expanded="true"]:focus {
           outline: none;
-          box-shadow: 0 -4px 5px 0 @pacific-40,
-          -5px -2px 5px 0 @pacific-40,
-          5px -2px 5px 0 @pacific-40;
+          box-shadow: 0 -4px 5px 0 var(--pacific-40),
+          -5px -2px 5px 0 var(--pacific-40),
+          5px -2px 5px 0 var(--pacific-40);
         }
 
         &[aria-expanded="true"]:hover,
@@ -703,7 +703,7 @@ body {
             content: '';
             width: 100%;
             height: unit( 10px / @base-font-size-px, em );
-            background: @gray-5;
+            background: var(--gray-5);
           }
         }
 
@@ -737,7 +737,7 @@ body {
         &__current {
           // Change the selection bar to black.
           &:after {
-            background-color: @black;
+            background-color: var(--black);
           }
         }
 
@@ -773,8 +773,8 @@ body {
       }
 
       &-wrapper {
-        background-color: @gray-5;
-        border: 1px solid @gray-40;
+        background-color: var(--gray-5);
+        border: 1px solid var(--gray-40);
         box-shadow: 0 5px 5px 0px rgba( 0, 0, 0, 0.2 );
 
         padding: unit( @grid_gutter-width / @base-font-size-px, em );
@@ -850,8 +850,8 @@ body {
         padding-top: unit( 30px / @base-font-size-px, em );
         padding-bottom: unit( 30px / @base-font-size-px, em );
         margin-bottom: unit( 30px / @base-font-size-px, em );
-        border: 1px solid @gray-40;
-        border-top: 6px solid @gold;
+        border: 1px solid var(--gray-40);
+        border-top: 6px solid var(--gold);
         box-sizing: border-box;
       }
 
@@ -862,7 +862,7 @@ body {
         border: none;
 
         & .cf-icon-svg {
-          color: @gold;
+          color: var(--gold);
           width: 100%;
           max-width: unit( 16px / @base-font-size-px, rem );
         }
diff --git a/cfgov/unprocessed/css/organisms/post-preview.less b/cfgov/unprocessed/css/organisms/post-preview.less
index be2d66307b9..1ca6c6d3f05 100644
--- a/cfgov/unprocessed/css/organisms/post-preview.less
+++ b/cfgov/unprocessed/css/organisms/post-preview.less
@@ -1,5 +1,5 @@
 .o-post-preview {
-  border-bottom: 1px solid @gray-40;
+  border-bottom: 1px solid var(--gray-40);
   padding-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
   display: grid;
   grid-template-rows: auto;
@@ -56,7 +56,7 @@
   }
 
   &_title a {
-    .u-link__colors( @black, @pacific-80 );
+    .u-link__colors( var(--black), var(--pacific-80) );
   }
 
   &_subtitle {
diff --git a/cfgov/unprocessed/css/organisms/prefooter.less b/cfgov/unprocessed/css/organisms/prefooter.less
index 6e195f56686..97412b69ca4 100644
--- a/cfgov/unprocessed/css/organisms/prefooter.less
+++ b/cfgov/unprocessed/css/organisms/prefooter.less
@@ -9,13 +9,13 @@
   margin-right: unit(@grid_gutter-width / -2 / @base-font-size-px, em);
   margin-left: unit(@grid_gutter-width / -2 / @base-font-size-px, em);
 
-  border-top: 1px solid @gray-40;
+  border-top: 1px solid var(--gray-40);
 
   padding-top: unit(@grid_gutter-width / @base-font-size-px, em);
   padding-left: unit((@grid_gutter-width / 2) / @base-font-size-px, em);
   padding-right: unit((@grid_gutter-width / 2) / @base-font-size-px, em);
 
-  background: @gray-5;
+  background: var(--gray-5);
   overflow: auto;
 
   .respond-to-min(@bp-sm-min, {
@@ -23,8 +23,8 @@
     margin-left: unit( -@grid_gutter-width / @base-font-size-px, em );
 
     // Border for both LTR and RTL layouts.
-    border-right: 1px solid @gray-40;
-    border-left: 1px solid @gray-40;
+    border-right: 1px solid var(--gray-40);
+    border-left: 1px solid var(--gray-40);
 
     padding-left: unit( @grid_gutter-width / @base-font-size-px, em);
     padding-right: unit( @grid_gutter-width / @base-font-size-px, em);
diff --git a/cfgov/unprocessed/css/organisms/secondary-nav.less b/cfgov/unprocessed/css/organisms/secondary-nav.less
index d240fe2026a..8db65215097 100644
--- a/cfgov/unprocessed/css/organisms/secondary-nav.less
+++ b/cfgov/unprocessed/css/organisms/secondary-nav.less
@@ -11,7 +11,7 @@
       unit((15px / @base-font-size-px), em);
 
     &:focus {
-      outline: 1px dotted @black;
+      outline: 1px dotted var(--black);
       outline-offset: 1px;
     }
 
@@ -40,7 +40,7 @@
   &_cues {
     min-width: 60px;
     text-align: right;
-    color: @pacific;
+    color: var(--pacific);
     font-size: unit((@btn-font-size / @base-font-size-px), em);
     line-height: unit((@base-line-height-px / @btn-font-size));
   }
@@ -52,7 +52,7 @@
     font-size: unit(16px / @base-font-size-px, rem);
     font-weight: 600;
     letter-spacing: 1px;
-    color: @pacific;
+    color: var(--pacific);
 
     line-height: unit((22 / @size-v));
     margin-bottom: 0;
@@ -101,8 +101,8 @@
     // Break the menu word when it is too wide to fit in the sidebar area.
     word-break: break-word;
 
-    .u-link__colors( @pacific, @pacific, @black, @black, @black,
-    transparent, transparent, @green, @green, @green );
+    .u-link__colors( var(--pacific), var(--pacific), var(--black), var(--black), var(--black),
+    transparent, transparent, var(--green), var(--green), var(--green) );
 
     border-style: solid;
     border-left-width: 5px;
@@ -122,8 +122,8 @@
     });
 
     &__current {
-      .u-link__colors( @black, @black, @black, @black, @black,
-      @black, @black, @black, @black, @black );
+      .u-link__colors( var(--black), var(--black), var(--black), var(--black), var(--black),
+      var(--black), var(--black), var(--black), var(--black), var(--black) );
     }
 
     &__parent {
@@ -135,8 +135,8 @@
 
   // Tablet and below.
   .respond-to-max(@bp-sm-max, {
-    background: @gray-5;
-    border-bottom: 1px solid @gray-40;
+    background: var(--gray-5);
+    border-bottom: 1px solid var(--gray-40);
 
     // Add drop-shadow.
     box-shadow: 0 5px 5px rgba(0, 0, 0, .2);
diff --git a/cfgov/unprocessed/css/organisms/video-player.less b/cfgov/unprocessed/css/organisms/video-player.less
index 6ce1d5ae19d..b0b6a12ea53 100644
--- a/cfgov/unprocessed/css/organisms/video-player.less
+++ b/cfgov/unprocessed/css/organisms/video-player.less
@@ -9,11 +9,11 @@
 
 .o-video-player {
   overflow: hidden;
-  background: @white;
+  background: var(--white);
 
   // When JavaScript is disabled add a border to stand-alone videos.
   .no-js &:not(.o-featured-content-module_visual) {
-    border: 1px solid @gray-40;
+    border: 1px solid var(--gray-40);
   }
 
   &_iframe-container {
@@ -103,7 +103,7 @@
 }
 
 .o-video-player_duration {
-  color: @white;
+  color: var(--white);
   background: rgba(0, 0, 0, 40%);
   z-index: 1;
   padding-left: 6px;
@@ -121,7 +121,7 @@
   width: @play-btn-size__px;
   height: @play-btn-size__px;
   // !important is needed for when this is applied to a link.
-  border: 2px solid @gray-5 !important;
+  border: 2px solid var(--gray-5) !important;
   border-radius: 100%;
   position: absolute;
   z-index: 3;
@@ -132,7 +132,7 @@
     32,
     75%
   ) !important; // CFPB Black (#101820) at 80% opacity
-  color: @white !important;
+  color: var(--white) !important;
   font-size: @play-btn-icon-size;
 
   &:hover {
@@ -175,8 +175,8 @@
         height: 60px;
         left: -2px;
         top: -2px;
-        border: 1px solid @white;
-        outline: 1px solid @white;
+        border: 1px solid var(--white);
+        outline: 1px solid var(--white);
       }
 
       &::after {
@@ -184,7 +184,7 @@
         height: 62px;
         left: -3px;
         top: -3px;
-        border: 1px dotted @pacific;
+        border: 1px dotted var(--pacific);
       }
     }
   }
@@ -211,7 +211,7 @@ button.o-video-player_play-btn,
   opacity: 0;
   height: 0;
   margin: auto;
-  // @black not used because it's not totally black.
+  // var(--black) not used because it's not totally black.
   background-color: #000;
 }
 
@@ -223,7 +223,7 @@ button.o-video-player_play-btn,
 
   padding-top: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
   padding-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
-  color: @white;
+  color: var(--white);
 
   .m-social-media_heading {
     margin-top: 0;
@@ -287,7 +287,7 @@ button.o-video-player_play-btn,
 
 .o-video-player .m-social-media {
   .cf-icon-svg {
-    fill: @white;
+    fill: var(--white);
   }
 
   .m-social-media_icons {
diff --git a/cfgov/unprocessed/css/print.less b/cfgov/unprocessed/css/print.less
index f67714962d8..2b20cee2829 100644
--- a/cfgov/unprocessed/css/print.less
+++ b/cfgov/unprocessed/css/print.less
@@ -9,7 +9,7 @@
   }
 
   a:after {
-    border-bottom: 1px solid @white;
+    border-bottom: 1px solid var(--white);
     font-weight: 300;
     word-break: break-all;
   }
@@ -39,7 +39,7 @@
 
   a[href^="#"]{
     // Style in-page anchor links (like page TOCs) to not look like links.
-    color: @gray-dark;
+    color: var(--gray-dark);
     border-bottom-width: 0;
   }
 
diff --git a/cfgov/unprocessed/js/routes/on-demand/simple-chart/common-styles.js b/cfgov/unprocessed/js/routes/on-demand/simple-chart/common-styles.js
index 83c623f2c31..b38a01f0404 100644
--- a/cfgov/unprocessed/js/routes/on-demand/simple-chart/common-styles.js
+++ b/cfgov/unprocessed/js/routes/on-demand/simple-chart/common-styles.js
@@ -1,14 +1,14 @@
 // Map of CFPB brand colors to their hex values that are used in this file.
 const colorMap = {
-  '@gray': '#5a5d61',
-  '@gray-20': '#d2d3d5',
-  '@gray-40': '#b4b5b6',
-  '@gray-60': '#919395',
-  '@green': '#20aa3f',
-  '@navy': '#254b87',
-  '@pacific-60': '#7eb7e8',
-  '@gold-80': '#ffb858',
-  '@purple-80': '#c55998',
+  'var(--gray)': '#5a5d61',
+  'var(--gray-20)': '#d2d3d5',
+  'var(--gray-40)': '#b4b5b6',
+  'var(--gray-60)': '#919395',
+  'var(--green)': '#20aa3f',
+  'var(--navy)': '#254b87',
+  'var(--pacific-60)': '#7eb7e8',
+  'var(--gold-80)': '#ffb858',
+  'var(--purple-80)': '#c55998',
 };
 
 const styles = {
@@ -18,7 +18,7 @@ const styles = {
     style: {
       fontFamily: '"Avenir Next", Arial, sans-serif',
       fontSize: '16px',
-      color: colorMap['@gray'],
+      color: colorMap['var(--gray)'],
       lineHeight: 1.375,
     },
     events: {
@@ -33,11 +33,11 @@ const styles = {
   },
   credits: false,
   colors: [
-    colorMap['@green'],
-    colorMap['@navy'],
-    colorMap['@pacific-60'],
-    colorMap['@gold-80'],
-    colorMap['@purple-80'],
+    colorMap['var(--green)'],
+    colorMap['var(--navy)'],
+    colorMap['var(--pacific-60)'],
+    colorMap['var(--gold-80)'],
+    colorMap['var(--purple-80)'],
   ],
   scrollbar: {
     enabled: false,
@@ -51,7 +51,7 @@ const styles = {
     verticalAlign: 'top',
     itemMarginBottom: 4,
     itemStyle: {
-      color: colorMap['@gray'],
+      color: colorMap['var(--gray)'],
       fontFamily: '"Avenir Next", Arial, sans-serif',
       fontSize: 16,
     },
@@ -76,10 +76,10 @@ const styles = {
   },
   tooltip: {
     animation: false,
-    borderColor: colorMap['@gray-60'],
+    borderColor: colorMap['var(--gray-60)'],
     distance: 15,
     padding: 15,
-    shadow: { color: colorMap['@gray-40'], opacity: 0.2 },
+    shadow: { color: colorMap['var(--gray-40)'], opacity: 0.2 },
     shared: false,
     split: false,
     style: {
@@ -89,7 +89,7 @@ const styles = {
     useHTML: true,
   },
   xAxis: {
-    lineColor: colorMap['@gray-20'],
+    lineColor: colorMap['var(--gray-20)'],
     minRange: 3 * 30 * 24 * 3600 * 1000,
     title: {
       margin: 10,
@@ -104,13 +104,13 @@ const styles = {
       rotation: 270,
       textAlign: 'center',
       style: {
-        color: colorMap['@gray'],
+        color: colorMap['var(--gray)'],
       },
     },
-    lineColor: colorMap['@gray-20'],
+    lineColor: colorMap['var(--gray-20)'],
     labels: {
       style: {
-        color: colorMap['@gray'],
+        color: colorMap['var(--gray)'],
         fontSize: '16px',
       },
       formatter: function () {
diff --git a/esbuild/plugins/postcss.js b/esbuild/plugins/postcss.js
index ef3449043cb..b5e19e8ce81 100644
--- a/esbuild/plugins/postcss.js
+++ b/esbuild/plugins/postcss.js
@@ -14,7 +14,6 @@ const postCSSPlugin = ({ plugins = [], lessOptions = {} }) => ({
         filename: args.path,
         rootpath: dirname(args.path),
       });
-
       const result = await postcss(plugins).process(lessResult.css, {
         from: args.path,
       });
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-atomic-component-0.40.0.tgz b/npm-packages-offline-cache/@cfpb-cfpb-atomic-component-0.40.0.tgz
deleted file mode 100644
index f39d29ea1b6..00000000000
Binary files a/npm-packages-offline-cache/@cfpb-cfpb-atomic-component-0.40.0.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-atomic-component-0.42.0.tgz b/npm-packages-offline-cache/@cfpb-cfpb-atomic-component-0.42.0.tgz
new file mode 100644
index 00000000000..57e28c28830
Binary files /dev/null and b/npm-packages-offline-cache/@cfpb-cfpb-atomic-component-0.42.0.tgz differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-buttons-0.40.0.tgz b/npm-packages-offline-cache/@cfpb-cfpb-buttons-0.40.0.tgz
deleted file mode 100644
index ab09d199329..00000000000
Binary files a/npm-packages-offline-cache/@cfpb-cfpb-buttons-0.40.0.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-buttons-0.42.0.tgz b/npm-packages-offline-cache/@cfpb-cfpb-buttons-0.42.0.tgz
new file mode 100644
index 00000000000..b486629b283
Binary files /dev/null and b/npm-packages-offline-cache/@cfpb-cfpb-buttons-0.42.0.tgz differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-core-0.3.1.tgz b/npm-packages-offline-cache/@cfpb-cfpb-core-0.3.1.tgz
deleted file mode 100644
index 9572b5c5031..00000000000
Binary files a/npm-packages-offline-cache/@cfpb-cfpb-core-0.3.1.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-core-0.40.0.tgz b/npm-packages-offline-cache/@cfpb-cfpb-core-0.40.0.tgz
deleted file mode 100644
index a833c3eed2d..00000000000
Binary files a/npm-packages-offline-cache/@cfpb-cfpb-core-0.40.0.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-core-0.42.0.tgz b/npm-packages-offline-cache/@cfpb-cfpb-core-0.42.0.tgz
new file mode 100644
index 00000000000..73bc27a9cf7
Binary files /dev/null and b/npm-packages-offline-cache/@cfpb-cfpb-core-0.42.0.tgz differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-expandables-0.40.0.tgz b/npm-packages-offline-cache/@cfpb-cfpb-expandables-0.40.0.tgz
deleted file mode 100644
index ac8a9492abb..00000000000
Binary files a/npm-packages-offline-cache/@cfpb-cfpb-expandables-0.40.0.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-expandables-0.42.0.tgz b/npm-packages-offline-cache/@cfpb-cfpb-expandables-0.42.0.tgz
new file mode 100644
index 00000000000..fc1c47941c5
Binary files /dev/null and b/npm-packages-offline-cache/@cfpb-cfpb-expandables-0.42.0.tgz differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-forms-0.40.0.tgz b/npm-packages-offline-cache/@cfpb-cfpb-forms-0.40.0.tgz
deleted file mode 100644
index 5d717ef47e2..00000000000
Binary files a/npm-packages-offline-cache/@cfpb-cfpb-forms-0.40.0.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-forms-0.42.0.tgz b/npm-packages-offline-cache/@cfpb-cfpb-forms-0.42.0.tgz
new file mode 100644
index 00000000000..b29b5b2806a
Binary files /dev/null and b/npm-packages-offline-cache/@cfpb-cfpb-forms-0.42.0.tgz differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-grid-0.3.1.tgz b/npm-packages-offline-cache/@cfpb-cfpb-grid-0.3.1.tgz
deleted file mode 100644
index 9c50946fc08..00000000000
Binary files a/npm-packages-offline-cache/@cfpb-cfpb-grid-0.3.1.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-grid-0.40.0.tgz b/npm-packages-offline-cache/@cfpb-cfpb-grid-0.40.0.tgz
deleted file mode 100644
index 17e7d010487..00000000000
Binary files a/npm-packages-offline-cache/@cfpb-cfpb-grid-0.40.0.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-grid-0.42.0.tgz b/npm-packages-offline-cache/@cfpb-cfpb-grid-0.42.0.tgz
new file mode 100644
index 00000000000..eed708c0ed1
Binary files /dev/null and b/npm-packages-offline-cache/@cfpb-cfpb-grid-0.42.0.tgz differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-icons-0.3.2.tgz b/npm-packages-offline-cache/@cfpb-cfpb-icons-0.3.2.tgz
deleted file mode 100644
index 26d54683352..00000000000
Binary files a/npm-packages-offline-cache/@cfpb-cfpb-icons-0.3.2.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-icons-0.40.0.tgz b/npm-packages-offline-cache/@cfpb-cfpb-icons-0.40.0.tgz
deleted file mode 100644
index b2408b40028..00000000000
Binary files a/npm-packages-offline-cache/@cfpb-cfpb-icons-0.40.0.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-icons-0.42.0.tgz b/npm-packages-offline-cache/@cfpb-cfpb-icons-0.42.0.tgz
new file mode 100644
index 00000000000..9921d80cb15
Binary files /dev/null and b/npm-packages-offline-cache/@cfpb-cfpb-icons-0.42.0.tgz differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-layout-0.3.1.tgz b/npm-packages-offline-cache/@cfpb-cfpb-layout-0.3.1.tgz
deleted file mode 100644
index 7c13169fdd7..00000000000
Binary files a/npm-packages-offline-cache/@cfpb-cfpb-layout-0.3.1.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-layout-0.40.0.tgz b/npm-packages-offline-cache/@cfpb-cfpb-layout-0.40.0.tgz
deleted file mode 100644
index e2ba122eeef..00000000000
Binary files a/npm-packages-offline-cache/@cfpb-cfpb-layout-0.40.0.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-layout-0.42.0.tgz b/npm-packages-offline-cache/@cfpb-cfpb-layout-0.42.0.tgz
new file mode 100644
index 00000000000..7f4cb94d90e
Binary files /dev/null and b/npm-packages-offline-cache/@cfpb-cfpb-layout-0.42.0.tgz differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-notifications-0.40.0.tgz b/npm-packages-offline-cache/@cfpb-cfpb-notifications-0.40.0.tgz
deleted file mode 100644
index 91f18b0ecf5..00000000000
Binary files a/npm-packages-offline-cache/@cfpb-cfpb-notifications-0.40.0.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-notifications-0.42.0.tgz b/npm-packages-offline-cache/@cfpb-cfpb-notifications-0.42.0.tgz
new file mode 100644
index 00000000000..5ebe64397da
Binary files /dev/null and b/npm-packages-offline-cache/@cfpb-cfpb-notifications-0.42.0.tgz differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-pagination-0.40.0.tgz b/npm-packages-offline-cache/@cfpb-cfpb-pagination-0.40.0.tgz
deleted file mode 100644
index fc6e234c324..00000000000
Binary files a/npm-packages-offline-cache/@cfpb-cfpb-pagination-0.40.0.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-pagination-0.42.0.tgz b/npm-packages-offline-cache/@cfpb-cfpb-pagination-0.42.0.tgz
new file mode 100644
index 00000000000..58447a89039
Binary files /dev/null and b/npm-packages-offline-cache/@cfpb-cfpb-pagination-0.42.0.tgz differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-tables-0.40.0.tgz b/npm-packages-offline-cache/@cfpb-cfpb-tables-0.40.0.tgz
deleted file mode 100644
index 3208caffcfd..00000000000
Binary files a/npm-packages-offline-cache/@cfpb-cfpb-tables-0.40.0.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-tables-0.42.0.tgz b/npm-packages-offline-cache/@cfpb-cfpb-tables-0.42.0.tgz
new file mode 100644
index 00000000000..cc689334776
Binary files /dev/null and b/npm-packages-offline-cache/@cfpb-cfpb-tables-0.42.0.tgz differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-typography-0.3.2.tgz b/npm-packages-offline-cache/@cfpb-cfpb-typography-0.3.2.tgz
deleted file mode 100644
index ecf84ee06f3..00000000000
Binary files a/npm-packages-offline-cache/@cfpb-cfpb-typography-0.3.2.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-typography-0.40.0.tgz b/npm-packages-offline-cache/@cfpb-cfpb-typography-0.40.0.tgz
deleted file mode 100644
index a3072d8a244..00000000000
Binary files a/npm-packages-offline-cache/@cfpb-cfpb-typography-0.40.0.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/@cfpb-cfpb-typography-0.42.0.tgz b/npm-packages-offline-cache/@cfpb-cfpb-typography-0.42.0.tgz
new file mode 100644
index 00000000000..2abf99487ed
Binary files /dev/null and b/npm-packages-offline-cache/@cfpb-cfpb-typography-0.42.0.tgz differ
diff --git a/npm-packages-offline-cache/@csstools-css-parser-algorithms-2.6.0.tgz b/npm-packages-offline-cache/@csstools-css-parser-algorithms-2.6.0.tgz
deleted file mode 100644
index 20d6c48f0ce..00000000000
Binary files a/npm-packages-offline-cache/@csstools-css-parser-algorithms-2.6.0.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/@csstools-css-parser-algorithms-2.6.1.tgz b/npm-packages-offline-cache/@csstools-css-parser-algorithms-2.6.1.tgz
new file mode 100644
index 00000000000..c5ffd9970fe
Binary files /dev/null and b/npm-packages-offline-cache/@csstools-css-parser-algorithms-2.6.1.tgz differ
diff --git a/npm-packages-offline-cache/@csstools-css-tokenizer-2.2.3.tgz b/npm-packages-offline-cache/@csstools-css-tokenizer-2.2.3.tgz
deleted file mode 100644
index 3cb406db9ca..00000000000
Binary files a/npm-packages-offline-cache/@csstools-css-tokenizer-2.2.3.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/@csstools-css-tokenizer-2.2.4.tgz b/npm-packages-offline-cache/@csstools-css-tokenizer-2.2.4.tgz
new file mode 100644
index 00000000000..277e910cc67
Binary files /dev/null and b/npm-packages-offline-cache/@csstools-css-tokenizer-2.2.4.tgz differ
diff --git a/npm-packages-offline-cache/@csstools-media-query-list-parser-2.1.8.tgz b/npm-packages-offline-cache/@csstools-media-query-list-parser-2.1.8.tgz
deleted file mode 100644
index 166e7382c99..00000000000
Binary files a/npm-packages-offline-cache/@csstools-media-query-list-parser-2.1.8.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/@csstools-media-query-list-parser-2.1.9.tgz b/npm-packages-offline-cache/@csstools-media-query-list-parser-2.1.9.tgz
new file mode 100644
index 00000000000..09b9094e968
Binary files /dev/null and b/npm-packages-offline-cache/@csstools-media-query-list-parser-2.1.9.tgz differ
diff --git a/npm-packages-offline-cache/@dual-bundle-import-meta-resolve-4.0.0.tgz b/npm-packages-offline-cache/@dual-bundle-import-meta-resolve-4.0.0.tgz
new file mode 100644
index 00000000000..7624d310cbb
Binary files /dev/null and b/npm-packages-offline-cache/@dual-bundle-import-meta-resolve-4.0.0.tgz differ
diff --git a/npm-packages-offline-cache/cfpb-chart-builder-6.4.2.tgz b/npm-packages-offline-cache/cfpb-chart-builder-6.4.2.tgz
deleted file mode 100644
index 67cd39885e4..00000000000
Binary files a/npm-packages-offline-cache/cfpb-chart-builder-6.4.2.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/cfpb-chart-builder-6.5.0.tgz b/npm-packages-offline-cache/cfpb-chart-builder-6.5.0.tgz
new file mode 100644
index 00000000000..52595032f7a
Binary files /dev/null and b/npm-packages-offline-cache/cfpb-chart-builder-6.5.0.tgz differ
diff --git a/npm-packages-offline-cache/core-js-3.10.0.tgz b/npm-packages-offline-cache/core-js-3.10.0.tgz
new file mode 100644
index 00000000000..775afc2b71e
Binary files /dev/null and b/npm-packages-offline-cache/core-js-3.10.0.tgz differ
diff --git a/npm-packages-offline-cache/core-js-3.6.5.tgz b/npm-packages-offline-cache/core-js-3.6.5.tgz
deleted file mode 100644
index ad57cc75f44..00000000000
Binary files a/npm-packages-offline-cache/core-js-3.6.5.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/insert-css-0.0.0.tgz b/npm-packages-offline-cache/insert-css-0.0.0.tgz
deleted file mode 100644
index 1328f1cd900..00000000000
Binary files a/npm-packages-offline-cache/insert-css-0.0.0.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/known-css-properties-0.29.0.tgz b/npm-packages-offline-cache/known-css-properties-0.29.0.tgz
deleted file mode 100644
index ad3ddd1641a..00000000000
Binary files a/npm-packages-offline-cache/known-css-properties-0.29.0.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/known-css-properties-0.30.0.tgz b/npm-packages-offline-cache/known-css-properties-0.30.0.tgz
new file mode 100644
index 00000000000..d6e0d66ad1d
Binary files /dev/null and b/npm-packages-offline-cache/known-css-properties-0.30.0.tgz differ
diff --git a/npm-packages-offline-cache/normalize-css-2.3.1.tgz b/npm-packages-offline-cache/normalize-css-2.3.1.tgz
deleted file mode 100644
index f22c716140e..00000000000
Binary files a/npm-packages-offline-cache/normalize-css-2.3.1.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/normalize-legacy-addon-0.1.0.tgz b/npm-packages-offline-cache/normalize-legacy-addon-0.1.0.tgz
deleted file mode 100644
index 42b108e8e8f..00000000000
Binary files a/npm-packages-offline-cache/normalize-legacy-addon-0.1.0.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/postcss-8.4.35.tgz b/npm-packages-offline-cache/postcss-8.4.35.tgz
deleted file mode 100644
index 16ad951c468..00000000000
Binary files a/npm-packages-offline-cache/postcss-8.4.35.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/postcss-selector-parser-6.0.15.tgz b/npm-packages-offline-cache/postcss-selector-parser-6.0.15.tgz
deleted file mode 100644
index a872f06fbbc..00000000000
Binary files a/npm-packages-offline-cache/postcss-selector-parser-6.0.15.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/postcss-selector-parser-6.0.16.tgz b/npm-packages-offline-cache/postcss-selector-parser-6.0.16.tgz
new file mode 100644
index 00000000000..1cd368029ef
Binary files /dev/null and b/npm-packages-offline-cache/postcss-selector-parser-6.0.16.tgz differ
diff --git a/npm-packages-offline-cache/snyk-1.1285.0.tgz b/npm-packages-offline-cache/snyk-1.1286.1.tgz
similarity index 55%
rename from npm-packages-offline-cache/snyk-1.1285.0.tgz
rename to npm-packages-offline-cache/snyk-1.1286.1.tgz
index 841d1356d46..b0797a65bcd 100644
Binary files a/npm-packages-offline-cache/snyk-1.1285.0.tgz and b/npm-packages-offline-cache/snyk-1.1286.1.tgz differ
diff --git a/npm-packages-offline-cache/stylelint-16.2.1.tgz b/npm-packages-offline-cache/stylelint-16.2.1.tgz
deleted file mode 100644
index 638d44c8d21..00000000000
Binary files a/npm-packages-offline-cache/stylelint-16.2.1.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/stylelint-16.3.1.tgz b/npm-packages-offline-cache/stylelint-16.3.1.tgz
new file mode 100644
index 00000000000..73a516eb7b1
Binary files /dev/null and b/npm-packages-offline-cache/stylelint-16.3.1.tgz differ
diff --git a/package.json b/package.json
index d933f834ac0..7c987208748 100644
--- a/package.json
+++ b/package.json
@@ -18,21 +18,21 @@
   "browserslist": "> 0.5%, Chrome >= 76, Edge >= 98, Firefox >= 78, safari >= 12, not dead",
   "dependencies": {
     "@cfpb/cfpb-analytics": "0.3.1",
-    "@cfpb/cfpb-atomic-component": "0.40.0",
-    "@cfpb/cfpb-buttons": "0.40.0",
-    "@cfpb/cfpb-core": "0.40.0",
-    "@cfpb/cfpb-expandables": "0.40.0",
-    "@cfpb/cfpb-forms": "0.40.0",
-    "@cfpb/cfpb-grid": "0.40.0",
-    "@cfpb/cfpb-icons": "0.40.0",
-    "@cfpb/cfpb-layout": "0.40.0",
-    "@cfpb/cfpb-notifications": "0.40.0",
-    "@cfpb/cfpb-pagination": "0.40.0",
-    "@cfpb/cfpb-tables": "0.40.0",
-    "@cfpb/cfpb-typography": "0.40.0",
+    "@cfpb/cfpb-atomic-component": "0.42.0",
+    "@cfpb/cfpb-buttons": "0.42.0",
+    "@cfpb/cfpb-core": "0.42.0",
+    "@cfpb/cfpb-expandables": "0.42.0",
+    "@cfpb/cfpb-forms": "0.42.0",
+    "@cfpb/cfpb-grid": "0.42.0",
+    "@cfpb/cfpb-icons": "0.42.0",
+    "@cfpb/cfpb-layout": "0.42.0",
+    "@cfpb/cfpb-notifications": "0.42.0",
+    "@cfpb/cfpb-pagination": "0.42.0",
+    "@cfpb/cfpb-tables": "0.42.0",
+    "@cfpb/cfpb-typography": "0.42.0",
     "@cypress/skip-test": "2.6.1",
     "autoprefixer": "10.4.19",
-    "cfpb-chart-builder": "6.4.2",
+    "cfpb-chart-builder": "6.5.0",
     "esbuild": "0.20.2",
     "fancy-log": "2.0.0",
     "highcharts": "7.2.2",
@@ -59,8 +59,8 @@
     "jest-fetch-mock": "3.0.3",
     "postcss-less": "6.0.0",
     "prettier": "3.2.5",
-    "snyk": "1.1285.0",
-    "stylelint": "16.2.1",
+    "snyk": "1.1286.1",
+    "stylelint": "16.3.1",
     "stylelint-config-standard": "36.0.0",
     "stylelint-less": "3.0.1"
   },
diff --git a/yarn.lock b/yarn.lock
index 87826822d05..bf6133b21e7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -316,157 +316,120 @@
   dependencies:
     "@cfpb/cfpb-atomic-component" "^0.37.0"
 
-"@cfpb/cfpb-atomic-component@0.40.0", "@cfpb/cfpb-atomic-component@^0.40.0":
-  version "0.40.0"
-  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-atomic-component/-/cfpb-atomic-component-0.40.0.tgz#dbc26dbd6716e272b5abb2573b03eb6020e9c8d9"
-  integrity sha512-Lcb53FUvQTwqBGhbUC6mpjMUCthgyF07wD5gJoA+LgxRapa5czohOpQNYiW934stXPBBVYaieHV8JsDliylsFQ==
+"@cfpb/cfpb-atomic-component@0.42.0", "@cfpb/cfpb-atomic-component@^0.42.0":
+  version "0.42.0"
+  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-atomic-component/-/cfpb-atomic-component-0.42.0.tgz#a700c75aecba86f0977ad3d2cbc0c6e553ed012c"
+  integrity sha512-v7QfDohMtDbEOE1bekZAZwuBdBQyqzOPCTgFQR+Yfa9qkZO4MV4ISnCTvyx/dRpZHRjz4UCTVi1yUIoZa21ELA==
 
 "@cfpb/cfpb-atomic-component@^0.37.0":
   version "0.37.0"
   resolved "https://registry.yarnpkg.com/@cfpb/cfpb-atomic-component/-/cfpb-atomic-component-0.37.0.tgz#55e3e105ac4d8f9960508451c446a6a67a697e0f"
   integrity sha512-iJX3epclbFNaplSYUgqOs0NLqic5Y56fE4zjIGxJ5jui7FSvuF2+YLq5/G5rv+OM3gxrl3H2qdEuvAKR3QuZOw==
 
-"@cfpb/cfpb-buttons@0.40.0", "@cfpb/cfpb-buttons@^0.40.0":
-  version "0.40.0"
-  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-buttons/-/cfpb-buttons-0.40.0.tgz#ff261a99884becf63509509a22bc4d61682ee82c"
-  integrity sha512-V7sxyCci8YUC15uLHSvNiyDmu6uqh3RhhnLnKBpy1Dj8kU/BrhYeh+YobNb8tbKgmd9yR0UvcmsTV9HCxJQDVA==
-  dependencies:
-    "@cfpb/cfpb-core" "^0.40.0"
-    "@cfpb/cfpb-icons" "^0.40.0"
-
-"@cfpb/cfpb-core@0.3.1", "@cfpb/cfpb-core@^0.3.1":
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-core/-/cfpb-core-0.3.1.tgz#a3a85da32e31296c7bdcc381f65fc6a099e63b28"
-  integrity sha512-sbxJN19n9qM+mXPiLGg5gYAxkmYFTHoLlAdMGmgSxEHXFwnrmW5a6o16XDhYuVZOBCxRP9nCQOKXeVoeRP7IGg==
-  dependencies:
-    normalize-css "^2.0.0"
-    normalize-legacy-addon "0.1.0"
-
-"@cfpb/cfpb-core@0.40.0", "@cfpb/cfpb-core@^0.40.0":
-  version "0.40.0"
-  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-core/-/cfpb-core-0.40.0.tgz#940e8833938c968f06b727747602cc62f1796997"
-  integrity sha512-gCZu7B76JPu+fdkiWNG4GauWb3+PJiz7lSwrEIVyqPA/hzQ1cJO0Lyqzhf3bKFU8iB4jteo2dPXmeB6OD2zUtA==
-
-"@cfpb/cfpb-expandables@0.40.0":
-  version "0.40.0"
-  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-expandables/-/cfpb-expandables-0.40.0.tgz#d4649e372c8be20a5b948697e8a7b6a2f6962c16"
-  integrity sha512-cBKDPZm7z74CRY0Obx9P+wCZnlow0yXsMNxQpvnOvx34fldO/90FUadu4LNo2sDAinXyL1pQpBf1SCoQ7bE97A==
-  dependencies:
-    "@cfpb/cfpb-atomic-component" "^0.40.0"
-    "@cfpb/cfpb-core" "^0.40.0"
-    "@cfpb/cfpb-icons" "^0.40.0"
-
-"@cfpb/cfpb-forms@0.40.0":
-  version "0.40.0"
-  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-forms/-/cfpb-forms-0.40.0.tgz#7adfdd37cfc55bf9d52a1e70399013fd2aa609e4"
-  integrity sha512-Rypr34Kr3g91mFc9dzNFhqKWoCXWqgSKQTfKinZxu28QDDxwsSzlZVpddNAfcQuHyqk+nFxiZYGlLx+lWqPB3g==
-  dependencies:
-    "@cfpb/cfpb-buttons" "^0.40.0"
-    "@cfpb/cfpb-core" "^0.40.0"
-    "@cfpb/cfpb-grid" "^0.40.0"
-    "@cfpb/cfpb-icons" "^0.40.0"
-
-"@cfpb/cfpb-grid@0.40.0", "@cfpb/cfpb-grid@^0.40.0":
-  version "0.40.0"
-  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-grid/-/cfpb-grid-0.40.0.tgz#95b2bb2ff73b5004ce6c37a89b362f1962a55559"
-  integrity sha512-/NsZdN1Wcp6WiUDjM2Kd8wtsyEJFBWSNwgPOzOuljyzyGwuXVRP5/xa4lP8dNZxMok3QU3SO6Vbkl7TpAUj73w==
-
-"@cfpb/cfpb-grid@^0.3.1":
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-grid/-/cfpb-grid-0.3.1.tgz#6fee7c65f1ce93e0269f405c97d339329a953afc"
-  integrity sha512-CZD0kz/DEEMLZ6PJya/X+DwjMVT6WVwCKbe0WjDUP3K2/FGVD+WsUM461nD/vhXNnCbY0fh+cD0dQV9DQ13Jvw==
+"@cfpb/cfpb-buttons@0.42.0", "@cfpb/cfpb-buttons@^0.42.0":
+  version "0.42.0"
+  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-buttons/-/cfpb-buttons-0.42.0.tgz#557142d3f4cb99e9d08419a5428e8397e9d43923"
+  integrity sha512-ByM4Or5bf+9POgCRKAyuAdvUQ1M063dTJhwvf1CDn/TCpSCgZECMwfvD4+Dx6Tj4n5jMKwZfuY9A8ugJ1mycHw==
   dependencies:
-    normalize-css "^2.0.0"
-    normalize-legacy-addon "0.1.0"
-
-"@cfpb/cfpb-icons@0.40.0", "@cfpb/cfpb-icons@^0.40.0":
-  version "0.40.0"
-  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-icons/-/cfpb-icons-0.40.0.tgz#06d0464ed10247c1335d33927a3ee4d0c023f013"
-  integrity sha512-ZShlL/XEOEqYK8IN5KvOvJfOgyNZNV/RJd4wr1uGJ6bUiwlJvtXjQVCSoaqkh/iZ4Cf4YdvfPKpmlvZx8Y5gOA==
+    "@cfpb/cfpb-core" "^0.42.0"
+    "@cfpb/cfpb-icons" "^0.42.0"
 
-"@cfpb/cfpb-icons@^0.3.2":
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-icons/-/cfpb-icons-0.3.2.tgz#4dfd3ad2c9b072ee47f12e39dbc01fc5b0a0c430"
-  integrity sha512-ChP684ab82Exn0GYH9KP8U6tHtnAgPlWpCC4A4iBSTmgZqAihn82UdRg1mkWxaspOTfbXKomvE1EqPV/TRNiuw==
+"@cfpb/cfpb-core@0.42.0", "@cfpb/cfpb-core@^0.42.0":
+  version "0.42.0"
+  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-core/-/cfpb-core-0.42.0.tgz#93dba667f68ba3a7dc273a87e63056a45025b390"
+  integrity sha512-PXB5YrVYhkBIbGiDQiufiEcpYfQMDL5sOtUJyKqPcp1kKI2Jw3vGdoPmFnYe28DBnPN/+WFoURWYQfFjKARbAw==
 
-"@cfpb/cfpb-layout@0.3.1":
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-layout/-/cfpb-layout-0.3.1.tgz#b372bdc7c2d37eaacea520a8b8f514b4fff8c2f2"
-  integrity sha512-yhVBka4fUAN5O8/XsKPW5pzHC8N81KxznIkjsZRDnioGqxMskbopa2UBWRWCE/sf/lGJtAC1AvwgsY9NKBZA+Q==
+"@cfpb/cfpb-expandables@0.42.0":
+  version "0.42.0"
+  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-expandables/-/cfpb-expandables-0.42.0.tgz#16ac8f658dfb9402f51f08b4fcfbea8a02c78b29"
+  integrity sha512-FRApejof/ag44U8bC2p2XfCNcBvB4ioqwatIhYVVFiieI5zowY4MXoPh9dnBv87/p9WhYBBe5cIxywP3CpsKbQ==
   dependencies:
-    "@cfpb/cfpb-core" "^0.3.1"
-    "@cfpb/cfpb-grid" "^0.3.1"
+    "@cfpb/cfpb-atomic-component" "^0.42.0"
+    "@cfpb/cfpb-core" "^0.42.0"
+    "@cfpb/cfpb-icons" "^0.42.0"
 
-"@cfpb/cfpb-layout@0.40.0":
-  version "0.40.0"
-  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-layout/-/cfpb-layout-0.40.0.tgz#b5fa086c5366236b329b76f7d1bf6781dbdcf449"
-  integrity sha512-8hmO+b17O9BBVCcN4C1Y8vpR5FlZdLQHJOcgO9z1Y4MDGnWNmaReuxQGnkhr3/nFmj/vr28Gq90uBd92nLwLTQ==
+"@cfpb/cfpb-forms@0.42.0":
+  version "0.42.0"
+  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-forms/-/cfpb-forms-0.42.0.tgz#ba1042a1035f50439e75ff415eb73aca7d5dbe85"
+  integrity sha512-YO/nFnq+NUKnMuDGRkQNTmXXlptM5expdbWPbt24/ow/VDwEO8Qgp/wKDXvcsqF2O2kAGruOavwHuL5lDb8KgQ==
   dependencies:
-    "@cfpb/cfpb-core" "^0.40.0"
-    "@cfpb/cfpb-grid" "^0.40.0"
+    "@cfpb/cfpb-buttons" "^0.42.0"
+    "@cfpb/cfpb-core" "^0.42.0"
+    "@cfpb/cfpb-grid" "^0.42.0"
+    "@cfpb/cfpb-icons" "^0.42.0"
+
+"@cfpb/cfpb-grid@0.42.0", "@cfpb/cfpb-grid@^0.42.0":
+  version "0.42.0"
+  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-grid/-/cfpb-grid-0.42.0.tgz#bc6686082838a5d5de2d62abe74eda7c7f0bbd71"
+  integrity sha512-GCLdKWkUwqsx6j+ZX+khlc9ZkbyG+FxchpLtWsBXaFzjdKiCnSGDS/G3eMI2rD+8mdktHDbJHEbb4mPXgdgm3A==
 
-"@cfpb/cfpb-notifications@0.40.0":
-  version "0.40.0"
-  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-notifications/-/cfpb-notifications-0.40.0.tgz#7d3b098bee6d58388cef65618e9fa9871934f429"
-  integrity sha512-jaK8AvuqGBcPra5xidLXc9jgoclf8bMxeqIw6sMEP3DUEKSQm0CxqtMqxjQRGK3FKMxCqtW0QEfU2MZw4LPAAg==
+"@cfpb/cfpb-icons@0.42.0", "@cfpb/cfpb-icons@^0.42.0":
+  version "0.42.0"
+  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-icons/-/cfpb-icons-0.42.0.tgz#f05c8312aee2ddd2cfa522152622361626606387"
+  integrity sha512-bqV+6xF39voGgOFcONIwxhpcrx8Gq+HR/UV7rFk03VPijvZjyIoUsz8mVJ+RhaMKhiL9TDeBv1WrEXjEABCNmw==
+
+"@cfpb/cfpb-layout@0.42.0":
+  version "0.42.0"
+  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-layout/-/cfpb-layout-0.42.0.tgz#ed3a09eea2a81e208d864d21a742310c6200615a"
+  integrity sha512-BUdOuRQKPGg47Rki2KUG3ZROQDJALhOOuMBGpVQse5lpT+0sPAT+6JTgYmPd8olA/RiJfOWy81h8hH0kTFscVA==
   dependencies:
-    "@cfpb/cfpb-core" "^0.40.0"
-    "@cfpb/cfpb-icons" "^0.40.0"
+    "@cfpb/cfpb-core" "^0.42.0"
+    "@cfpb/cfpb-grid" "^0.42.0"
 
-"@cfpb/cfpb-pagination@0.40.0":
-  version "0.40.0"
-  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-pagination/-/cfpb-pagination-0.40.0.tgz#cda562683b523f7a658eda06dfa5b4a1a6c95524"
-  integrity sha512-yGNxwjElhS5ryjVM74yDQEhzs6fjv7LAWMFwXYfd0YMc0Xqk+v819Za1ZP3c36pnsrpXK7FZ/ALzzt3IPGrX0A==
+"@cfpb/cfpb-notifications@0.42.0":
+  version "0.42.0"
+  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-notifications/-/cfpb-notifications-0.42.0.tgz#64dded85d363ce48b750cfc85108fedbdca19a70"
+  integrity sha512-HPGHopAzPe3c21NcTf/ZyGnknLH2Y2BcKKMPChs4o+vMJV0wq1soeKMjyfZcHLLkFPPKzRh66AqLZTBwzXvMng==
   dependencies:
-    "@cfpb/cfpb-buttons" "^0.40.0"
-    "@cfpb/cfpb-core" "^0.40.0"
-    "@cfpb/cfpb-icons" "^0.40.0"
+    "@cfpb/cfpb-core" "^0.42.0"
+    "@cfpb/cfpb-icons" "^0.42.0"
 
-"@cfpb/cfpb-tables@0.40.0":
-  version "0.40.0"
-  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-tables/-/cfpb-tables-0.40.0.tgz#ee298d6666515fca285cae825eff923dc036e51c"
-  integrity sha512-kDyTl6Ce6JPG3IOZN+SKdXGNYbmg92IMDQOB9btvaVwo1qWX5/ukB0ERaBnIhZlrh+n9Ccn0yV+sNJzXGdOsZA==
+"@cfpb/cfpb-pagination@0.42.0":
+  version "0.42.0"
+  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-pagination/-/cfpb-pagination-0.42.0.tgz#bace6aabf6bf49754fe56b6b6f3ca1e34b0c62d7"
+  integrity sha512-As695m/j9h48DIZFT0DMSktKSurzvlW5YPlr93WVMLatJwRAKnT5SiCp8fNMNb39k00BGyoUDq40vWIFkmkUmA==
   dependencies:
-    "@cfpb/cfpb-atomic-component" "^0.40.0"
-    "@cfpb/cfpb-core" "^0.40.0"
+    "@cfpb/cfpb-buttons" "^0.42.0"
+    "@cfpb/cfpb-core" "^0.42.0"
+    "@cfpb/cfpb-icons" "^0.42.0"
 
-"@cfpb/cfpb-typography@0.3.2":
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-typography/-/cfpb-typography-0.3.2.tgz#f03f815dde1c296bd9f927fa0c53a6257c770b93"
-  integrity sha512-P3fX5H8ECubmJVJ+D1SfV/qQuHTo5kQa1mH4POmPIpHfdDVaVCakDoamoa2+8KITws1+/MG2l4eK9fDTec8iLg==
+"@cfpb/cfpb-tables@0.42.0":
+  version "0.42.0"
+  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-tables/-/cfpb-tables-0.42.0.tgz#0cce318bf5b9fed80d17e54745c0854b2d4b31aa"
+  integrity sha512-Ilyp2Vdenk93x56BOVcrT4kZaP7FKeRPVyXqm14x5YBqAZj2S2cnPy5MMo7dIVmB1D/QYMRfuSDJnMRsVmFY/Q==
   dependencies:
-    "@cfpb/cfpb-core" "^0.3.1"
-    "@cfpb/cfpb-icons" "^0.3.2"
+    "@cfpb/cfpb-atomic-component" "^0.42.0"
+    "@cfpb/cfpb-core" "^0.42.0"
 
-"@cfpb/cfpb-typography@0.40.0":
-  version "0.40.0"
-  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-typography/-/cfpb-typography-0.40.0.tgz#d821550d6015264abd95c64b6a23c6ec81f324a2"
-  integrity sha512-/QrG/v85qRBppZablvyyLsT0bPPAS0iIuglxmqfdou/khDe1zL4dcC8tJ/CXwGol5feW3dj/NdBSgy7nFXY7YA==
+"@cfpb/cfpb-typography@0.42.0":
+  version "0.42.0"
+  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-typography/-/cfpb-typography-0.42.0.tgz#02c7172b7038a7c1f77c554b04b9f87bbbe57104"
+  integrity sha512-LYr1ZczWTYQl7JRlfD6T4haR883AuBR0LzHLi0r8KGV2gW5dW/hkQtgi8Hs5sw/jKfaHR6BF7xbZ+Zn/mZYB4A==
   dependencies:
-    "@cfpb/cfpb-core" "^0.40.0"
-    "@cfpb/cfpb-icons" "^0.40.0"
+    "@cfpb/cfpb-core" "^0.42.0"
+    "@cfpb/cfpb-icons" "^0.42.0"
 
 "@colors/colors@1.5.0":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
-"@csstools/css-parser-algorithms@^2.5.0":
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.6.0.tgz#b45d3c7cbdd4214261724c82f96e33c746fedd58"
-  integrity sha512-YfEHq0eRH98ffb5/EsrrDspVWAuph6gDggAE74ZtjecsmyyWpW768hOyiONa8zwWGbIWYfa2Xp4tRTrpQQ00CQ==
+"@csstools/css-parser-algorithms@^2.6.1":
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.6.1.tgz#c45440d1efa2954006748a01697072dae5881bcd"
+  integrity sha512-ubEkAaTfVZa+WwGhs5jbo5Xfqpeaybr/RvWzvFxRs4jfq16wH8l8Ty/QEEpINxll4xhuGfdMbipRyz5QZh9+FA==
 
-"@csstools/css-tokenizer@^2.2.3":
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/@csstools/css-tokenizer/-/css-tokenizer-2.2.3.tgz#b099d543ea57b64f495915a095ead583866c50c6"
-  integrity sha512-pp//EvZ9dUmGuGtG1p+n17gTHEOqu9jO+FiCUjNN3BDmyhdA2Jq9QsVeR7K8/2QCK17HSsioPlTW9ZkzoWb3Lg==
+"@csstools/css-tokenizer@^2.2.4":
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/@csstools/css-tokenizer/-/css-tokenizer-2.2.4.tgz#a4b8718ed7fcd2dcd555de16b31ca59ad4b96a06"
+  integrity sha512-PuWRAewQLbDhGeTvFuq2oClaSCKPIBmHyIobCV39JHRYN0byDcUWJl5baPeNUcqrjtdMNqFooE0FGl31I3JOqw==
 
-"@csstools/media-query-list-parser@^2.1.7":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.8.tgz#36157fbe54ea30d5f2b1767c69fcdf92048a7b1d"
-  integrity sha512-DiD3vG5ciNzeuTEoh74S+JMjQDs50R3zlxHnBnfd04YYfA/kh2KiBCGhzqLxlJcNq+7yNQ3stuZZYLX6wK/U2g==
+"@csstools/media-query-list-parser@^2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.9.tgz#feb4b7268f998956eb3ded69507869e73d005dda"
+  integrity sha512-qqGuFfbn4rUmyOB0u8CVISIp5FfJ5GAR3mBrZ9/TKndHakdnm6pY0L/fbLcpPnrzwCyyTEZl1nUcXAYHEWneTA==
 
-"@csstools/selector-specificity@^3.0.1":
+"@csstools/selector-specificity@^3.0.2":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-3.0.2.tgz#ea61ba7bb24be3502c6aaa3190ed231f4633a81e"
   integrity sha512-RpHaZ1h9LE7aALeQXmXrJkRG84ZxIsctEN2biEUmFyKpzFM3zZ35eUMcIzZFsw/2olQE6v69+esEqU2f1MKycg==
@@ -508,6 +471,11 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
+"@dual-bundle/import-meta-resolve@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@dual-bundle/import-meta-resolve/-/import-meta-resolve-4.0.0.tgz#df79b7ea62c55094dc129880387864cdf41eca7c"
+  integrity sha512-ZKXyJeFAzcpKM2kk8ipoGIPUqx9BX52omTGnfwjJvxOCaZTM2wtDK7zN0aIgPRbT9XYAlha0HtmZ+XKteuh0Gw==
+
 "@es-joy/jsdoccomment@~0.42.0":
   version "0.42.0"
   resolved "https://registry.yarnpkg.com/@es-joy/jsdoccomment/-/jsdoccomment-0.42.0.tgz#59e878708336aaee88c2b34c894f73dbf77ae2b0"
@@ -1672,15 +1640,15 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==
 
-cfpb-chart-builder@6.4.2:
-  version "6.4.2"
-  resolved "https://registry.yarnpkg.com/cfpb-chart-builder/-/cfpb-chart-builder-6.4.2.tgz#b8cdc0ffdd84e138aa3eabfd0a2de7d82e4a2e3a"
-  integrity sha512-+Jxwl+IRIukaN+vdsPlX/q1dIwcG2v9dcAYbI6V+ZspiWIiubQ94VnBAit28v1N/OMYw1wkG+3QsxCI0pOHQAw==
+cfpb-chart-builder@6.5.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/cfpb-chart-builder/-/cfpb-chart-builder-6.5.0.tgz#13a5523df9d07a6daea631b378f43047ab28b60d"
+  integrity sha512-VeUGQaj4iJcbv2KCn8QztIUh6PMnwxTDHSl8gqfyLvN4pfY0nZYpw3W2WSjqKwLDnd1cSQ1ToT2WoG8DF0l+/w==
   dependencies:
-    "@cfpb/cfpb-core" "0.3.1"
-    "@cfpb/cfpb-layout" "0.3.1"
-    "@cfpb/cfpb-typography" "0.3.2"
-    core-js "3.6.5"
+    "@cfpb/cfpb-core" "0.42.0"
+    "@cfpb/cfpb-layout" "0.42.0"
+    "@cfpb/cfpb-typography" "0.42.0"
+    core-js "3.10.0"
     highcharts "7.2.2"
     xdr "0.5.3"
 
@@ -1847,10 +1815,10 @@ copy-anything@^2.0.1:
   dependencies:
     is-what "^3.14.1"
 
-core-js@3.6.5:
-  version "3.6.5"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
-  integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
+core-js@3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.10.0.tgz#9a020547c8b6879f929306949e31496bbe2ae9b3"
+  integrity sha512-MQx/7TLgmmDVamSyfE+O+5BHvG1aUGj/gHhLn1wVtm2B5u1eVIPvh7vkfjwWKNCjrTJB8+He99IntSQ1qP+vYQ==
 
 core-util-is@1.0.2:
   version "1.0.2"
@@ -3139,7 +3107,7 @@ ieee754@^1.1.13:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
-ignore@^5.2.0, ignore@^5.3.0:
+ignore@^5.2.0, ignore@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
   integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
@@ -3198,11 +3166,6 @@ ini@^1.3.5:
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
-insert-css@0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/insert-css/-/insert-css-0.0.0.tgz#2304bfa6f893abecb8ff9ca8d9c7605d94cf2911"
-  integrity sha512-PwixL1rVtKkM1gz43tEHwZ2sUOYmWB5zk/9YiEmOxERqjfIkkMY4jwrl3v3e9NLzblEdkBuMLiTLm/0sHMx4qA==
-
 internal-slot@^1.0.5, internal-slot@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.7.tgz#c06dcca3ed874249881007b0a5523b172a190802"
@@ -4061,10 +4024,10 @@ kleur@^3.0.3:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
   integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
 
-known-css-properties@^0.29.0:
-  version "0.29.0"
-  resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.29.0.tgz#e8ba024fb03886f23cb882e806929f32d814158f"
-  integrity sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==
+known-css-properties@^0.30.0:
+  version "0.30.0"
+  resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.30.0.tgz#34dd1f39c805c65a6dfa6ea76206b20dc523dd96"
+  integrity sha512-VSWXYUnsPu9+WYKkfmJyLKtIvaRJi1kXUqVmBACORXZQxT5oZDsoZ2vQP+bQFDnWtpI/4eq3MLoRMjI2fnLzTQ==
 
 language-subtag-registry@^0.3.20:
   version "0.3.22"
@@ -4263,7 +4226,7 @@ mdn-data@2.0.30:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.30.tgz#ce4df6f80af6cfbe218ecd5c552ba13c4dfa08cc"
   integrity sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==
 
-meow@^13.1.0:
+meow@^13.2.0:
   version "13.2.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-13.2.0.tgz#6b7d63f913f984063b3cc261b6e8800c4cd3474f"
   integrity sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==
@@ -4365,18 +4328,6 @@ node-releases@^2.0.14:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
   integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==
 
-normalize-css@^2.0.0:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/normalize-css/-/normalize-css-2.3.1.tgz#fc03e3b91e3a51aa7a1836bae7b2b6ac6d51e156"
-  integrity sha512-70Lnkke3P+8ehu56S0M0yoUTgTve/rCrEncjdgPmKER/TLZMRa30rFLW7Yv3iGZldmGV4bGevGW47VOfZJbGyw==
-  dependencies:
-    insert-css "0.0.0"
-
-normalize-legacy-addon@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/normalize-legacy-addon/-/normalize-legacy-addon-0.1.0.tgz#8ca131e8503943a3a9e4d0d70cc0e80a27a40c9e"
-  integrity sha512-6fWQlFJ29TpfvtfgB++2TKoiv6gpN0aG4bAQmZ6AHVsWT0g7hvJV9wZrtCBcNAdz/RfcbIpf6yrhr2IV0sy3Ww==
-
 normalize-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
@@ -4667,10 +4618,10 @@ postcss-safe-parser@^7.0.0:
   resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-7.0.0.tgz#6273d4e5149e286db5a45bc6cf6eafcad464014a"
   integrity sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==
 
-postcss-selector-parser@^6.0.15:
-  version "6.0.15"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz#11cc2b21eebc0b99ea374ffb9887174855a01535"
-  integrity sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==
+postcss-selector-parser@^6.0.16:
+  version "6.0.16"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz#3b88b9f5c5abd989ef4e2fc9ec8eedd34b20fb04"
+  integrity sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==
   dependencies:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
@@ -4680,7 +4631,7 @@ postcss-value-parser@4.2.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@8.4.38:
+postcss@8.4.38, postcss@^8.4.38:
   version "8.4.38"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.38.tgz#b387d533baf2054288e337066d81c6bee9db9e0e"
   integrity sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==
@@ -4689,15 +4640,6 @@ postcss@8.4.38:
     picocolors "^1.0.0"
     source-map-js "^1.2.0"
 
-postcss@^8.4.33:
-  version "8.4.35"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.35.tgz#60997775689ce09011edf083a549cea44aabe2f7"
-  integrity sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==
-  dependencies:
-    nanoid "^3.3.7"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -5107,15 +5049,15 @@ slice-ansi@^4.0.0:
     astral-regex "^2.0.0"
     is-fullwidth-code-point "^3.0.0"
 
-snyk@1.1285.0:
-  version "1.1285.0"
-  resolved "https://registry.yarnpkg.com/snyk/-/snyk-1.1285.0.tgz#1812125ae8a0d6f145acac6d9443a83426b4a819"
-  integrity sha512-VpU1fvHVeUX8Q0rW6aAY37w9ddvG3tVBMgZRohTGDSxfhheGWl0yA82brQhV+i6y0gLZJnsg77Rfg/BIsidVeg==
+snyk@1.1286.1:
+  version "1.1286.1"
+  resolved "https://registry.yarnpkg.com/snyk/-/snyk-1.1286.1.tgz#981581649567ea9eb36c5ed5238d524892c8f618"
+  integrity sha512-90HXWtJTNrrdcyxgFis5N7EddPmGAE6r/tQuSbaZokzrYb/ziCWDzukiIYLOpUENecdZrNznsT7lcukg6gCaVQ==
   dependencies:
     "@sentry/node" "^7.36.0"
     global-agent "^3.0.0"
 
-source-map-js@^1.0.1, source-map-js@^1.0.2:
+source-map-js@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
@@ -5301,15 +5243,16 @@ stylelint-less@3.0.1:
     postcss-resolve-nested-selector "^0.1.1"
     postcss-value-parser "4.2.0"
 
-stylelint@16.2.1:
-  version "16.2.1"
-  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-16.2.1.tgz#895d6d42523c5126ec0895f0ca2a58febeb77e89"
-  integrity sha512-SfIMGFK+4n7XVAyv50CpVfcGYWG4v41y6xG7PqOgQSY8M/PgdK0SQbjWFblxjJZlN9jNq879mB4BCZHJRIJ1hA==
+stylelint@16.3.1:
+  version "16.3.1"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-16.3.1.tgz#006cc6cd4bd8e7b3acb1607bb8e8de85121b7847"
+  integrity sha512-/JOwQnBvxEKOT2RtNgGpBVXnCSMBgKOL2k7w0K52htwCyJls4+cHvc4YZgXlVoAZS9QJd2DgYAiRnja96pTgxw==
   dependencies:
-    "@csstools/css-parser-algorithms" "^2.5.0"
-    "@csstools/css-tokenizer" "^2.2.3"
-    "@csstools/media-query-list-parser" "^2.1.7"
-    "@csstools/selector-specificity" "^3.0.1"
+    "@csstools/css-parser-algorithms" "^2.6.1"
+    "@csstools/css-tokenizer" "^2.2.4"
+    "@csstools/media-query-list-parser" "^2.1.9"
+    "@csstools/selector-specificity" "^3.0.2"
+    "@dual-bundle/import-meta-resolve" "^4.0.0"
     balanced-match "^2.0.0"
     colord "^2.9.3"
     cosmiconfig "^9.0.0"
@@ -5323,19 +5266,19 @@ stylelint@16.2.1:
     globby "^11.1.0"
     globjoin "^0.1.4"
     html-tags "^3.3.1"
-    ignore "^5.3.0"
+    ignore "^5.3.1"
     imurmurhash "^0.1.4"
     is-plain-object "^5.0.0"
-    known-css-properties "^0.29.0"
+    known-css-properties "^0.30.0"
     mathml-tag-names "^2.1.3"
-    meow "^13.1.0"
+    meow "^13.2.0"
     micromatch "^4.0.5"
     normalize-path "^3.0.0"
     picocolors "^1.0.0"
-    postcss "^8.4.33"
+    postcss "^8.4.38"
     postcss-resolve-nested-selector "^0.1.1"
     postcss-safe-parser "^7.0.0"
-    postcss-selector-parser "^6.0.15"
+    postcss-selector-parser "^6.0.16"
     postcss-value-parser "^4.2.0"
     resolve-from "^5.0.0"
     string-width "^4.2.3"