diff --git a/app/javascript/styles/contrast/variables.scss b/app/javascript/styles/contrast/variables.scss
index 629d619b0c..4453c4a911 100644
--- a/app/javascript/styles/contrast/variables.scss
+++ b/app/javascript/styles/contrast/variables.scss
@@ -6,7 +6,6 @@ $ui-secondary-color: hsl(255deg, 25%, 88%) !default;
 $ui-highlight-color: hsl(240deg, 100%, 69%) !default;
 
 @use '../mastodon/variables' with (
-  $highlight-text-color: lighten($ui-highlight-color, 10%),
   $action-button-color: lighten($ui-base-color, 50%),
   $inverted-text-color: #000,
   $lighter-text-color: darken($ui-base-color, 6%),
diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index 98e05702f5..9cbded460f 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -6,7 +6,7 @@
 @use '../mastodon/theme_utils' as *;
 
 .simple_form .button.button-tertiary {
-  color: $highlight-text-color;
+  color: var(--clr-text-accent);
 
   &:hover,
   &:focus,
@@ -316,7 +316,7 @@
 .status__content,
 .reply-indicator__content {
   a {
-    color: $highlight-text-color;
+    color: var(--clr-text-accent);
   }
 }
 
diff --git a/app/javascript/styles/mastodon-light/variables.scss b/app/javascript/styles/mastodon-light/variables.scss
index 6a58c31a20..d35b370211 100644
--- a/app/javascript/styles/mastodon-light/variables.scss
+++ b/app/javascript/styles/mastodon-light/variables.scss
@@ -24,7 +24,6 @@ $grey-100: hsl(240deg, 51%, 90%); // Topaz
   $ui-button-tertiary-border-color: $blurple-500,
 
   $lighter-text-color: hsl(240deg, 16%, 19%),
-  $highlight-text-color: $blurple-500,
   $light-text-color: hsl(240deg, 16%, 32%),
   $inverted-text-color: $black,
 
diff --git a/app/javascript/styles/mastodon/_variables.scss b/app/javascript/styles/mastodon/_variables.scss
index 9064416187..6e10c5e0c5 100644
--- a/app/javascript/styles/mastodon/_variables.scss
+++ b/app/javascript/styles/mastodon/_variables.scss
@@ -50,7 +50,6 @@ $ui-button-tertiary-focus-background-color: $blurple-600 !default;
 $ui-button-tertiary-focus-color: $white !default;
 
 // Variables for texts
-$highlight-text-color: lighten($ui-highlight-color, 8%) !default;
 $action-button-color: $ui-base-lighter-color !default;
 $action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default;
 
diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss
index 3301151596..f12a8df4bc 100644
--- a/app/javascript/styles/mastodon/about.scss
+++ b/app/javascript/styles/mastodon/about.scss
@@ -68,8 +68,8 @@ $fluid-breakpoint: $maximum-width + 20px;
       position: absolute;
       inset-inline-start: 0;
       top: 1em;
-      background: $highlight-text-color;
-      color: $ui-base-color;
+      background: var(--clr-bg-accent-strong);
+      color: var(--clr-text-on-accent-strong);
       border-radius: 50%;
       width: 4ch;
       height: 4ch;
diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss
index 1bc5e65869..c2ccc26873 100644
--- a/app/javascript/styles/mastodon/accounts.scss
+++ b/app/javascript/styles/mastodon/accounts.scss
@@ -222,8 +222,8 @@
   display: inline-flex;
   padding: 4px;
   padding-inline-end: 8px;
-  border: 1px solid $highlight-text-color;
-  color: $highlight-text-color;
+  border: 1px solid var(--clr-text-accent);
+  color: var(--clr-text-accent);
   font-weight: 500;
   font-size: 12px;
   letter-spacing: 0.5px;
@@ -283,7 +283,7 @@
     width: 120px;
     flex: 0 0 auto;
     color: var(--clr-text-primary);
-    background: rgba(darken($ui-base-color, 8%), 0.5);
+    background: var(--clr-bg-secondary);
   }
 
   dd {
@@ -292,7 +292,7 @@
   }
 
   a {
-    color: $highlight-text-color;
+    color: var(--clr-text-accent);
     text-decoration: none;
 
     &:hover,
diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss
index fd6e89fbdf..bf2816e735 100644
--- a/app/javascript/styles/mastodon/admin.scss
+++ b/app/javascript/styles/mastodon/admin.scss
@@ -152,7 +152,7 @@ $content-width: 840px;
       }
 
       .simple-navigation-active-leaf a {
-        color: $highlight-text-color;
+        color: var(--clr-text-accent);
         border-bottom: 0;
       }
     }
@@ -556,7 +556,7 @@ kbd {
       }
 
       &.selected {
-        color: $highlight-text-color;
+        color: var(--clr-text-accent);
         border-bottom: 2px solid $ui-highlight-color;
       }
     }
@@ -640,7 +640,7 @@ kbd {
   font-size: 14px;
 
   a {
-    color: $highlight-text-color;
+    color: var(--clr-text-accent);
     text-decoration: none;
 
     &:hover {
@@ -992,7 +992,7 @@ a.name-tag,
     border: 1px solid var(--clr-border-primary);
 
     a {
-      color: $highlight-text-color;
+      color: var(--clr-text-accent);
     }
 
     dl:first-child .verified {
@@ -1055,7 +1055,7 @@ a.name-tag,
       margin-bottom: 10px;
 
       &:hover {
-        color: $highlight-text-color;
+        color: var(--clr-text-accent);
       }
 
       .account-role {
@@ -1693,7 +1693,7 @@ a.sparkline {
       }
 
       a {
-        color: $highlight-text-color;
+        color: var(--clr-text-accent);
         text-decoration: none;
 
         &:hover {
@@ -1789,7 +1789,7 @@ a.sparkline {
   border-radius: 4px;
 
   a {
-    color: $highlight-text-color;
+    color: var(--clr-text-accent);
     text-decoration: none;
 
     &:hover {
@@ -1916,9 +1916,9 @@ a.sparkline {
       align-items: center;
       width: calc(1.375rem + 1px);
       height: calc(1.375rem + 1px);
-      background: $ui-base-color;
-      border: 1px solid $highlight-text-color;
-      color: $highlight-text-color;
+      background: var(--clr-bg-primary);
+      border: 1px solid var(--clr-text-accent);
+      color: var(--clr-text-accent);
       border-radius: 8px;
     }
 
@@ -1926,7 +1926,7 @@ a.sparkline {
       position: absolute;
       content: '';
       width: 1px;
-      background: $highlight-text-color;
+      background: var(--clr-text-accent);
       bottom: 0;
       top: calc(1.875rem + 1px);
       inset-inline-start: 0.6875rem;
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index a23bf38685..fe1f6cb213 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -447,12 +447,12 @@
   }
 
   &.active {
-    color: $highlight-text-color;
+    color: var(--clr-text-accent);
 
     &:hover,
     &:active,
     &:focus {
-      color: $highlight-text-color;
+      color: var(--clr-text-accent);
       background-color: transparent;
     }
   }
@@ -711,8 +711,8 @@
 
   .spoiler-input__input {
     padding: 12px 12px - 5px;
-    background: color.change($ui-highlight-color, $alpha: 0.05);
-    color: $highlight-text-color;
+    background: var(--clr-bg-accent-subtle);
+    color: var(--clr-text-accent);
   }
 
   &__dropdowns {
@@ -1199,7 +1199,7 @@
   }
 
   a.unhandled-link {
-    color: $highlight-text-color;
+    color: var(--clr-text-accent);
   }
 
   .status__content__text {
@@ -1352,7 +1352,7 @@
     overflow: hidden;
 
     a {
-      color: $highlight-text-color;
+      color: var(--clr-text-accent);
     }
   }
 
@@ -1419,7 +1419,7 @@
     }
 
     &.unhandled-link {
-      color: $highlight-text-color;
+      color: var(--clr-text-accent);
     }
   }
 }
@@ -1434,7 +1434,7 @@
   align-items: center;
   font-size: 15px;
   line-height: 22px;
-  color: $highlight-text-color;
+  color: var(--clr-text-accent);
   border: 0;
   background: transparent;
   padding: 0;
@@ -1938,7 +1938,7 @@
   }
 
   .status__prepend {
-    color: $highlight-text-color;
+    color: var(--clr-text-accent);
   }
 }
 
@@ -2112,10 +2112,10 @@
 
   &__domain-pill {
     display: inline-flex;
-    background: color.change($highlight-text-color, $alpha: 0.2);
+    background: var(--clr-bg-accent-subtle);
     border-radius: 4px;
     border: 0;
-    color: $highlight-text-color;
+    color: var(--clr-text-accent);
     font-weight: 500;
     font-size: 12px;
     line-height: 16px;
@@ -2172,10 +2172,10 @@
       }
 
       &__handle {
-        border: 2px dashed $highlight-text-color;
-        background: color.change($highlight-text-color, $alpha: 0.1);
+        border: 2px dashed var(--clr-border-on-accent-subtle);
+        background: var(--clr-bg-accent-subtle);
         padding: 12px 8px;
-        color: $highlight-text-color;
+        color: var(--clr-text-accent);
         border-radius: 4px;
 
         &__label {
@@ -2211,7 +2211,7 @@
           align-items: center;
           justify-content: center;
           flex-shrink: 0;
-          color: $highlight-text-color;
+          color: var(--clr-text-accent);
         }
 
         h6 {
@@ -3617,7 +3617,7 @@ a.account__display-name {
 }
 
 .copy-paste-text {
-  background: lighten($ui-base-color, 4%);
+  background: var(--clr-bg-secondary);
   border-radius: 8px;
   border: 1px solid var(--clr-border-primary);
   padding: 16px;
@@ -3634,7 +3634,7 @@ a.account__display-name {
   &.focused {
     transition: none;
     outline: 0;
-    border-color: $highlight-text-color;
+    border-color: var(--clr-text-accent);
   }
 
   &.copied {
@@ -3938,7 +3938,7 @@ a.account__display-name {
   background: transparent;
   border: 1px solid var(--clr-border-primary);
   border-radius: 4px 4px 0 0;
-  color: $highlight-text-color;
+  color: var(--clr-text-accent);
   cursor: pointer;
   flex: 0 0 auto;
   font-size: 16px;
@@ -3964,7 +3964,7 @@ a.account__display-name {
   background: transparent;
   border: 0;
   font-family: inherit;
-  color: $highlight-text-color;
+  color: var(--clr-text-accent);
   cursor: pointer;
   white-space: nowrap;
   font-size: 16px;
@@ -4293,7 +4293,7 @@ a.status-card {
     .status-card__host,
     .status-card__author,
     .status-card__description {
-      color: $highlight-text-color;
+      color: var(--clr-text-accent);
     }
   }
 }
@@ -4309,7 +4309,7 @@ a.status-card {
     .status-card__host,
     .status-card__author,
     .status-card__description {
-      color: $highlight-text-color;
+      color: var(--clr-text-accent);
     }
   }
 }
@@ -4529,14 +4529,14 @@ a.status-card {
   }
 
   a {
-    color: $highlight-text-color;
+    color: var(--clr-text-accent);
     text-decoration: none;
 
     &:hover,
     &:focus,
     &:active {
       text-decoration: underline;
-      color: lighten($highlight-text-color, 4%);
+      color: var(--clr-text-accent-subtle);
     }
   }
 
@@ -4588,7 +4588,7 @@ a.status-card {
   z-index: 1;
 
   &.active {
-    box-shadow: 0 1px 0 color.change($highlight-text-color, $alpha: 0.3);
+    box-shadow: 0 1px 0 var(--clr-bg-accent-subtle);
 
     &::before {
       display: block;
@@ -4635,12 +4635,12 @@ a.status-card {
 
   &__mode-button {
     margin-left: auto;
-    color: $highlight-text-color;
+    color: var(--clr-text-accent);
     font-weight: bold;
     font-size: 14px;
 
     &:hover {
-      color: lighten($highlight-text-color, 6%);
+      color: var(--clr-text-accent-subtle);
     }
   }
 }
@@ -4688,7 +4688,7 @@ a.status-card {
 
   .column-header__back-button {
     flex: 1;
-    color: $highlight-text-color;
+    color: var(--clr-text-accent);
 
     &.compact {
       flex: 0 0 auto;
@@ -4698,8 +4698,8 @@ a.status-card {
 
   &.active {
     .column-header__icon {
-      color: $highlight-text-color;
-      text-shadow: 0 0 10px color.change($highlight-text-color, $alpha: 0.4);
+      color: var(--clr-text-accent);
+      text-shadow: 0 0 10px var(--clr-bg-accent-subtle);
     }
   }
 
@@ -5291,7 +5291,7 @@ a.status-card {
   }
 
   a {
-    color: $highlight-text-color;
+    color: var(--clr-text-accent);
     text-decoration: none;
 
     &:hover {
@@ -6085,7 +6085,7 @@ a.status-card {
     }
 
     button {
-      color: $highlight-text-color;
+      color: var(--clr-text-accent);
       padding: 0;
       border: 0;
       background: 0;
@@ -6354,7 +6354,7 @@ a.status-card {
 
   &:focus {
     outline: 0;
-    background-color: $highlight-text-color;
+    background-color: var(--clr-text-accent);
   }
 }
 
@@ -6851,7 +6851,7 @@ a.status-card {
 
     a {
       text-decoration: none;
-      color: $highlight-text-color;
+      color: var(--clr-text-accent);
       font-weight: 500;
 
       &:hover {
@@ -6876,7 +6876,7 @@ a.status-card {
   }
 
   .status__content a {
-    color: $highlight-text-color;
+    color: var(--clr-text-accent);
   }
 
   .status__content,
@@ -7041,7 +7041,7 @@ a.status-card {
   overflow-x: hidden;
 
   .status__content a {
-    color: $highlight-text-color;
+    color: var(--clr-text-accent);
   }
 
   .status__content,
@@ -7157,7 +7157,7 @@ a.status-card {
     }
 
     a {
-      color: $highlight-text-color;
+      color: var(--clr-text-accent);
     }
 
     hr {
@@ -7177,7 +7177,7 @@ a.status-card {
 }
 
 .loading-bar {
-  background-color: $highlight-text-color;
+  background-color: var(--clr-bg-accent-strong);
   height: 3px;
   position: fixed;
   top: 0;
@@ -8258,7 +8258,7 @@ noscript {
     max-width: 400px;
 
     a {
-      color: $highlight-text-color;
+      color: var(--clr-text-accent);
       text-decoration: underline;
 
       &:hover {
@@ -9097,7 +9097,7 @@ noscript {
 
   &__item {
     flex-shrink: 0;
-    background: lighten($ui-base-color, 12%);
+    background: var(--clr-bg-tertiary);
     color: var(--clr-text-secondary);
     border: 0;
     border-radius: 3px;
@@ -9139,7 +9139,7 @@ noscript {
     &:hover,
     &:focus,
     &:active {
-      background: lighten($ui-base-color, 16%);
+      background: var(--clr-bg-accent-subtle);
       transition: all 200ms ease-out;
       transition-property: background-color, color;
       color: color-mix(
@@ -9152,12 +9152,8 @@ noscript {
     &.active {
       transition: all 100ms ease-in;
       transition-property: background-color, color;
-      background-color: color.mix(
-        lighten($ui-base-color, 12%),
-        $ui-highlight-color,
-        80%
-      );
-      color: lighten($highlight-text-color, 8%);
+      background-color: var(--clr-bg-accent-subtle);
+      color: var(--clr-text-accent);
     }
   }
 
@@ -9448,7 +9444,7 @@ noscript {
       &:hover,
       &:active,
       &:focus {
-        color: $highlight-text-color;
+        color: var(--clr-text-accent);
       }
     }
 
@@ -9484,7 +9480,7 @@ noscript {
         &:hover,
         &:active,
         &:focus {
-          color: $highlight-text-color;
+          color: var(--clr-text-accent);
         }
       }
     }
@@ -9960,7 +9956,7 @@ noscript {
   }
 
   a {
-    color: $highlight-text-color;
+    color: var(--clr-text-accent);
     text-decoration: underline;
 
     &:focus,
@@ -10017,8 +10013,8 @@ noscript {
   margin: 10px;
   margin-bottom: 5px;
   border-radius: 8px;
-  border: 1px solid $highlight-text-color;
-  background: color.change($highlight-text-color, $alpha: 0.15);
+  border: 1px solid var(--clr-border-on-bg-accent-subtle);
+  background: var(--clr-bg-accent-subtle);
   overflow: hidden;
   flex-shrink: 0;
 
@@ -10049,7 +10045,7 @@ noscript {
     }
 
     h1 {
-      color: $highlight-text-color;
+      color: var(--clr-text-accent);
       font-size: 22px;
       line-height: 33px;
       font-weight: 700;
@@ -10083,7 +10079,7 @@ noscript {
     padding: 15px 10px;
 
     .icon-button {
-      color: $highlight-text-color;
+      color: var(--clr-text-accent);
     }
   }
 }
@@ -10344,7 +10340,7 @@ noscript {
       padding: 20px;
       border-radius: 4px;
       border: 1px solid var(--clr-border-primary);
-      color: $highlight-text-color;
+      color: var(--clr-text-accent);
       cursor: pointer;
       width: 100%;
       background: none;
@@ -10995,7 +10991,7 @@ noscript {
     &:hover,
     &:focus,
     &:active {
-      color: $highlight-text-color;
+      color: var(--clr-text-accent);
     }
   }
 }
@@ -11277,7 +11273,7 @@ noscript {
     inset-inline-start: 0;
     width: 100%;
     height: 100%;
-    border-inline-start: 4px solid $highlight-text-color;
+    border-inline-start: 4px solid var(--clr-text-accent);
     pointer-events: none;
   }
 }
diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss
index 3c4b8eb1a4..32a50ff66f 100644
--- a/app/javascript/styles/mastodon/containers.scss
+++ b/app/javascript/styles/mastodon/containers.scss
@@ -149,7 +149,7 @@
     }
 
     a {
-      color: $highlight-text-color;
+      color: var(--clr-text-accent);
       font-weight: 500;
       text-decoration: none;
 
diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss
index ffd26dbea1..0a4a0afd89 100644
--- a/app/javascript/styles/mastodon/emoji_picker.scss
+++ b/app/javascript/styles/mastodon/emoji_picker.scss
@@ -51,10 +51,10 @@
 }
 
 .emoji-mart-anchor-selected {
-  color: $highlight-text-color;
+  color: var(--clr-text-accent);
 
   &:hover {
-    color: lighten($highlight-text-color, 4%);
+    color: var(--clr-text-accent-subtle);
   }
 
   .emoji-mart-anchor-bar {
@@ -68,7 +68,7 @@
   inset-inline-start: 0;
   width: 100%;
   height: 4px;
-  background-color: $highlight-text-color;
+  background-color: var(--clr-text-accent);
 }
 
 .emoji-mart-anchors {
diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss
index 87d1ce0625..c4ba56e0e3 100644
--- a/app/javascript/styles/mastodon/forms.scss
+++ b/app/javascript/styles/mastodon/forms.scss
@@ -145,7 +145,7 @@ code {
       }
 
       label a {
-        color: $highlight-text-color;
+        color: var(--clr-text-accent);
         text-decoration: underline;
 
         &:hover,
@@ -195,7 +195,7 @@ code {
     }
 
     a {
-      color: $highlight-text-color;
+      color: var(--clr-text-accent);
     }
   }
 
@@ -209,7 +209,7 @@ code {
     color: var(--clr-text-secondary);
 
     a {
-      color: $highlight-text-color;
+      color: var(--clr-text-accent);
     }
 
     code {
@@ -892,7 +892,7 @@ code {
   }
 
   a {
-    color: $highlight-text-color;
+    color: var(--clr-text-accent);
     text-transform: uppercase;
     text-decoration: none;
     font-weight: 700;
@@ -900,7 +900,7 @@ code {
     &:hover,
     &:focus,
     &:active {
-      color: lighten($highlight-text-color, 8%);
+      color: var(--clr-text-accent-subtle);
     }
   }
 }
@@ -1242,7 +1242,7 @@ code {
     flex: 1 1 auto;
 
     &.completed {
-      background: $highlight-text-color;
+      background: var(--clr-text-accent);
     }
   }
 
@@ -1290,14 +1290,14 @@ code {
   }
 
   .active .circle {
-    border-color: $highlight-text-color;
+    border-color: var(--clr-text-accent);
 
     &::before {
       content: '';
       width: 10px;
       height: 10px;
       border-radius: 50%;
-      background: $highlight-text-color;
+      background: var(--clr-text-accent);
       position: absolute;
       left: 50%;
       top: 50%;
@@ -1306,8 +1306,8 @@ code {
   }
 
   .completed .circle {
-    border-color: $highlight-text-color;
-    background: $highlight-text-color;
+    border-color: var(--clr-text-accent);
+    background: var(--clr-text-accent);
   }
 }
 
diff --git a/app/javascript/styles/mastodon/tables.scss b/app/javascript/styles/mastodon/tables.scss
index 25a4924675..72c0ab8551 100644
--- a/app/javascript/styles/mastodon/tables.scss
+++ b/app/javascript/styles/mastodon/tables.scss
@@ -46,7 +46,7 @@
     text-decoration: none;
 
     &:hover {
-      color: $highlight-text-color;
+      color: var(--clr-text-accent);
     }
   }
 
@@ -143,7 +143,7 @@ a.table-action-link {
   white-space: nowrap;
 
   &:hover {
-    color: $highlight-text-color;
+    color: var(--clr-text-accent);
   }
 
   &:first-child {
@@ -248,7 +248,7 @@ a.table-action-link {
       background: transparent;
       border: 0;
       font: inherit;
-      color: $highlight-text-color;
+      color: var(--clr-text-accent);
       border-radius: 4px;
       font-weight: 700;
       padding: 8px;
@@ -256,7 +256,7 @@ a.table-action-link {
       &:hover,
       &:focus,
       &:active {
-        background: lighten($ui-base-color, 8%);
+        background: var(--clr-bg-secondary);
       }
     }
   }