diff --git a/assets/sass/protocol/base/elements/_links.scss b/assets/sass/protocol/base/elements/_links.scss
index d8994881e..4bea8f8a2 100644
--- a/assets/sass/protocol/base/elements/_links.scss
+++ b/assets/sass/protocol/base/elements/_links.scss
@@ -4,61 +4,51 @@
 
 @use '../../includes/lib' as *;
 
-:link {
-    color: $link-color;
+// Rely on source order for the stateful style overrides
+// 1. Visited
+// 2. Hover
+// 3. Active
+// 4. Focus
+
+
+a {
+    color: var(--link-color);
     text-decoration: underline;
 
-    &:hover,
-    &:focus,
-    &:active {
-        color: $link-color-hover;
+    &:visited {
+        color: var(--link-color-visited);
+    }
+
+    &:hover, &:active, &:focus {
+        /* stylelint-disable-next-line color-function-notation */
+        color: var(--link-color-with-state, hsl(from var(--link-color) h s calc(l - 10)));
         text-decoration: none;
     }
 
     &:active {
         background-color: rgba(0, 0, 0, 0.05);
     }
-
-    @supports (--css: variables) {
-        color: var(--link-color);
-
-        &:hover,
-        &:focus,
-        &:active {
-            color: var(--link-color-hover);
-        }
-    }
 }
 
-:visited {
-    color: $link-color-visited;
-
-    &:hover,
-    &:focus,
-    &:active {
-        color: $link-color-visited-hover;
-    }
-
-    @supports (--css: variables) {
-        color: var(--link-color-visited);
-
-        &:hover,
-        &:focus,
-        &:active {
-            color: var(--link-color-visited-hover);
-        }
-    }
+// any descendant link will inherit dark theming (replace light-links mixin)
+// this might belong in root file? site-wide dark theme class
+.mzp-t-dark {
+    --link-color: var(--link-color-inverse);
+    --link-color-visited: var(--link-color-visited-inverse);
+    /* stylelint-disable-next-line color-function-notation */
+    --link-color-with-state: hsl(from var(--link-color-inverse) h s calc(l + 10));
 }
 
-.mzp-t-dark {
-    @include light-links;
+// any descendant link will inherit white theming (replace white-links mixin)
+// link-specific theme class
+.mzp-t-white-links {
+    --link-color: #{$color-white};
+    --link-color-visited: #{$color-white};
+    --link-color-with-state: #{$color-white};
 }
 
+// apply directly to link
 .mzp-c-cta-link {
-    font-family: $button-font-family;
+    font-family: var(--button-font-family);
     font-weight: bold;
-
-    @supports (--css: variables) {
-        font-family: var(--button-font-family);
-    }
 }
diff --git a/assets/sass/protocol/components/_button.scss b/assets/sass/protocol/components/_button.scss
index 5272c1b2f..f89d1bd44 100644
--- a/assets/sass/protocol/components/_button.scss
+++ b/assets/sass/protocol/components/_button.scss
@@ -76,8 +76,7 @@
 // * -------------------------------------------------------------------------- */
 // Button shape and size
 
-.mzp-c-button, /* stylelint-disable-line no-duplicate-selectors */
-a.mzp-c-button {
+.mzp-c-button {
     @include border-box;
     @include font-size(16px);
     @include transition(background-color 100ms, box-shadow 100ms, color 100ms);
@@ -139,8 +138,7 @@ a.mzp-c-button {
 // Primary
 
 /* stylelint-disable-next-line no-duplicate-selectors */
-.mzp-c-button,
-a.mzp-c-button {
+.mzp-c-button {
     background-color: $color-black;
     border: 2px solid $color-black;
     color: $color-white;
@@ -160,32 +158,27 @@ a.mzp-c-button {
 // * -------------------------------------------------------------------------- */
 // Secondary
 
-/* stylelint-disable-next-line no-duplicate-selectors */
-.mzp-c-button,
-a.mzp-c-button {
-    &.mzp-t-secondary {
-        background-color: transparent;
-        border-color: $color-black;
-        color: $color-black;
+.mzp-c-button.mzp-t-secondary {
+    background-color: transparent;
+    border-color: $color-black;
+    color: $color-black;
 
-        @include default-states;
+    @include default-states;
 
-        // dark
-        &.mzp-t-dark {
-            background-color: transparent;
-            border-color: $color-white;
-            color: $color-white;
+    // dark
+    &.mzp-t-dark {
+        background-color: transparent;
+        border-color: $color-white;
+        color: $color-white;
 
-            @include default-states-dark;
-        }
+        @include default-states-dark;
     }
 }
 
 // * -------------------------------------------------------------------------- */
 // Product Buttons
 
-.mzp-c-button.mzp-t-product,
-a.mzp-c-button.mzp-t-product {
+.mzp-c-button.mzp-t-product {
     background-color: $color-blue-50;
     border-color: transparent;
     color: $color-white;
@@ -216,51 +209,47 @@ a.mzp-c-button.mzp-t-product {
 // * -------------------------------------------------------------------------- */
 // Neutral Buttons
 
-/* stylelint-disable-next-line no-duplicate-selectors */
-.mzp-c-button,
-a.mzp-c-button {
-    &.mzp-t-neutral {
-        background-color: transparent;
-        border-color: $color-marketing-gray-30;
+.mzp-c-button.mzp-t-neutral {
+    background-color: transparent;
+    border-color: $color-marketing-gray-30;
+    color: $color-marketing-gray-70;
+
+    &:focus {
+        border-color: forms.$button-border-color-focus;
+    }
+
+    &:hover {
+        background-color: $color-marketing-gray-20;
+        border-color: $color-marketing-gray-40;
         color: $color-marketing-gray-70;
+    }
+
+    &:active {
+        background-color: $color-marketing-gray-20;
+        border-color: $color-marketing-gray-50;
+        color: $color-marketing-gray-70;
+    }
+
+    // dark
+    &.mzp-t-dark {
+        background-color: rgba($color-white, 0.1);
+        border-color: rgba($color-white, 0.6);
+        color: $color-white;
 
         &:focus {
             border-color: forms.$button-border-color-focus;
         }
 
         &:hover {
-            background-color: $color-marketing-gray-20;
-            border-color: $color-marketing-gray-40;
-            color: $color-marketing-gray-70;
+            background-color: rgba($color-white, 0.2);
+            border-color: rgba($color-white, 0.6);
+            color: $color-white;
         }
 
         &:active {
-            background-color: $color-marketing-gray-20;
-            border-color: $color-marketing-gray-50;
-            color: $color-marketing-gray-70;
-        }
-
-        // dark
-        &.mzp-t-dark {
-            background-color: rgba($color-white, 0.1);
-            border-color: rgba($color-white, 0.6);
+            background-color: rgba($color-white, 0.2);
+            border-color: rgba($color-white, 0.4);
             color: $color-white;
-
-            &:focus {
-                border-color: forms.$button-border-color-focus;
-            }
-
-            &:hover {
-                background-color: rgba($color-white, 0.2);
-                border-color: rgba($color-white, 0.6);
-                color: $color-white;
-            }
-
-            &:active {
-                background-color: rgba($color-white, 0.2);
-                border-color: rgba($color-white, 0.4);
-                color: $color-white;
-            }
         }
     }
 }
diff --git a/assets/sass/protocol/includes/mixins/_utils.scss b/assets/sass/protocol/includes/mixins/_utils.scss
index 71390bfa1..d7e841007 100644
--- a/assets/sass/protocol/includes/mixins/_utils.scss
+++ b/assets/sass/protocol/includes/mixins/_utils.scss
@@ -223,61 +223,24 @@
 }
 
 // Light color links for dark backgrounds.
+// Prefer mzp-t-dark class in markup where possible
 @mixin light-links {
-    a:link {
-        color: themes.$link-color-inverse;
-    }
-
-    a:visited {
-        color: themes.$link-color-visited-inverse;
-    }
-
-    a:hover,
-    a:focus,
-    a:active {
-        color: themes.$link-color-hover-inverse;
-    }
-
-    a:visited:hover,
-    a:visited:focus,
-    a:visited:active {
-        color: themes.$link-color-visited-hover-inverse;
-    }
-
-    @supports (--css: variables) {
-        a:link {
-            color: var(--link-color-inverse);
-        }
-
-        a:visited {
-            color: var(--link-color-visited-inverse);
-        }
-
-        a:hover,
-        a:focus,
-        a:active {
-            color: var(--link-color-hover-inverse);
-        }
-
-        a:visited:hover,
-        a:visited:focus,
-        a:visited:active {
-            color: var(--link-color-visited-hover-inverse);
-        }
+    a {
+        --link-color: var(--link-color-inverse);
+        --link-color-hover: var(--link-color-hover-inverse);
+        --link-color-visited: var(--link-color-visited-inverse);
+        --link-color-visited-hover:var(--link-color-visited-hover-inverse);
     }
 }
 
 // White color links for dark backgrounds, when link colors are undesirable.
+// Prefer mzp-t-white-links class in markup where possible
 @mixin white-links {
-    a:link,
-    a:visited {
-        color: tokens.$color-white;
-
-        &:hover,
-        &:focus,
-        &:active {
-            color: tokens.$color-white;
-        }
+    a {
+        --link-color: #{tokens.$color-white};
+        --link-color-hover: #{tokens.$color-white};
+        --link-color-visited: #{tokens.$color-white};
+        --link-color-visited-hover: #{tokens.$color-white};
     }
 }
 
diff --git a/assets/sass/protocol/includes/themes/_firefox.scss b/assets/sass/protocol/includes/themes/_firefox.scss
index ae80a8f7a..caaf8358b 100644
--- a/assets/sass/protocol/includes/themes/_firefox.scss
+++ b/assets/sass/protocol/includes/themes/_firefox.scss
@@ -25,7 +25,7 @@
     --link-color-hover: #{tokens.$color-link-hover};
     --link-color-inverse: #{tokens.$color-blue-10};
     --link-color-visited-hover-inverse: #{tokens.$color-violet-05};
-    --link-color-visited-hover: #{tokens.$color-link-hover};
+    --link-color-visited-hover: #{tokens.$color-link-visited-hover};
     --link-color-visited-inverse: #{tokens.$color-violet-10};
     --link-color-visited: #{tokens.$color-link-visited};
     --link-color: #{tokens.$color-link};
diff --git a/assets/sass/protocol/includes/themes/_mozilla.scss b/assets/sass/protocol/includes/themes/_mozilla.scss
index a10947a0a..dca860ffe 100644
--- a/assets/sass/protocol/includes/themes/_mozilla.scss
+++ b/assets/sass/protocol/includes/themes/_mozilla.scss
@@ -30,7 +30,7 @@
     --link-color-hover: #{tokens.$color-link-hover};
     --link-color-inverse: #{tokens.$color-blue-10};
     --link-color-visited-hover-inverse: #{tokens.$color-violet-05};
-    --link-color-visited-hover: #{tokens.$color-link-hover};
+    --link-color-visited-hover: #{tokens.$color-link-visited-hover};
     --link-color-visited-inverse: #{tokens.$color-violet-10};
     --link-color-visited: #{tokens.$color-link-visited};
     --link-color: #{tokens.$color-link};