diff --git a/app/javascript/styles/contrast/variables.scss b/app/javascript/styles/contrast/variables.scss
index 7bb3a027767..629d619b0cc 100644
--- a/app/javascript/styles/contrast/variables.scss
+++ b/app/javascript/styles/contrast/variables.scss
@@ -1,23 +1,14 @@
 @use '../mastodon/functions' as *;
 
-// Dependent colors
-$black: #000;
-
-$classic-base-color: hsl(240deg, 16%, 19%);
-$classic-primary-color: hsl(240deg, 29%, 70%);
-$classic-secondary-color: hsl(255deg, 25%, 88%);
-$classic-highlight-color: hsl(240deg, 100%, 69%);
-
-$ui-base-color: $classic-base-color !default;
-$ui-primary-color: $classic-primary-color !default;
-$ui-secondary-color: $classic-secondary-color !default;
-$ui-highlight-color: $classic-highlight-color !default;
+$ui-base-color: hsl(240deg, 16%, 19%) !default;
+$ui-primary-color: hsl(240deg, 29%, 70%) !default;
+$ui-secondary-color: hsl(255deg, 25%, 88%) !default;
+$ui-highlight-color: hsl(240deg, 100%, 69%) !default;
 
 @use '../mastodon/variables' with (
-  $dark-text-color: lighten($ui-primary-color, 12%),
   $highlight-text-color: lighten($ui-highlight-color, 10%),
   $action-button-color: lighten($ui-base-color, 50%),
-  $inverted-text-color: $black,
+  $inverted-text-color: #000,
   $lighter-text-color: darken($ui-base-color, 6%),
-  $light-text-color: $classic-primary-color
+  $light-text-color: hsl(240deg, 29%, 70%)
 );
diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index 46f89f8b5d8..98e05702f58 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -458,12 +458,6 @@ a.sparkline {
   background: darken($ui-base-color, 10%);
 }
 
-.autosuggest-account {
-  .display-name__account {
-    color: $dark-text-color;
-  }
-}
-
 .notification-group--annual-report {
   .notification-group__icon,
   .notification-group__main .link-button {
diff --git a/app/javascript/styles/mastodon-light/variables.scss b/app/javascript/styles/mastodon-light/variables.scss
index f0371d25094..6a58c31a200 100644
--- a/app/javascript/styles/mastodon-light/variables.scss
+++ b/app/javascript/styles/mastodon-light/variables.scss
@@ -11,26 +11,20 @@ $blurple-500: #6364ff; // Brand purple
 $grey-600: hsl(240deg, 8%, 33%); // Trout
 $grey-100: hsl(240deg, 51%, 90%); // Topaz
 
-$classic-base-color: hsl(240deg, 16%, 19%);
-$classic-secondary-color: hsl(255deg, 25%, 88%);
-$classic-highlight-color: $blurple-500;
-
 @use '../mastodon/variables' with (
   $base-overlay-background: $white,
 
-  $ui-base-color: $classic-secondary-color,
+  $ui-base-color: hsl(255deg, 25%, 88%),
   $ui-base-lighter-color: hsl(250deg, 24%, 75%),
-  $ui-secondary-color: $classic-base-color,
-
+  $ui-secondary-color: hsl(240deg, 16%, 19%),
   $ui-button-secondary-color: $grey-600,
   $ui-button-secondary-border-color: $grey-600,
   $ui-button-secondary-focus-color: $white,
   $ui-button-tertiary-color: $blurple-500,
   $ui-button-tertiary-border-color: $blurple-500,
 
-  $lighter-text-color: $classic-base-color,
-  $highlight-text-color: $classic-highlight-color,
-  $dark-text-color: hsl(240deg, 16%, 32%),
+  $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 7f232043cd7..9064416187f 100644
--- a/app/javascript/styles/mastodon/_variables.scss
+++ b/app/javascript/styles/mastodon/_variables.scss
@@ -13,12 +13,6 @@ $blurple-300: #858afa; // Faded Blue
 $grey-600: hsl(240deg, 8%, 33%); // Trout
 $grey-100: hsl(240deg, 51%, 90%); // Topaz
 
-// Values from the classic Mastodon UI
-$classic-base-color: hsl(240deg, 16%, 19%);
-$classic-primary-color: hsl(240deg, 29%, 70%);
-$classic-secondary-color: hsl(255deg, 25%, 88%);
-$classic-highlight-color: $blurple-500;
-
 // Variables for defaults in UI
 $base-shadow-color: $black !default;
 $base-overlay-background: $black !default;
@@ -26,14 +20,14 @@ $base-border-color: $white !default;
 $simple-background-color: $white !default;
 
 // Tell UI to use selected colors
-$ui-base-color: $classic-base-color !default; // Darkest
+$ui-base-color: hsl(240deg, 16%, 19%) !default; // Darkest
 $ui-base-lighter-color: lighten(
   $ui-base-color,
   26%
 ) !default; // Lighter darkest
-$ui-primary-color: $classic-primary-color !default; // Lighter
-$ui-secondary-color: $classic-secondary-color !default; // Lightest
-$ui-highlight-color: $classic-highlight-color !default;
+$ui-primary-color: hsl(240deg, 29%, 70%) !default; // Lighter
+$ui-secondary-color: hsl(255deg, 25%, 88%) !default; // Lightest
+$ui-highlight-color: $blurple-500 !default;
 $ui-button-color: $white !default;
 $ui-button-background-color: $blurple-500 !default;
 $ui-button-focus-background-color: $blurple-600 !default;
@@ -56,7 +50,6 @@ $ui-button-tertiary-focus-background-color: $blurple-600 !default;
 $ui-button-tertiary-focus-color: $white !default;
 
 // Variables for texts
-$dark-text-color: $ui-base-lighter-color !default;
 $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/admin.scss b/app/javascript/styles/mastodon/admin.scss
index d6cb4f3355e..500e1d8eb0d 100644
--- a/app/javascript/styles/mastodon/admin.scss
+++ b/app/javascript/styles/mastodon/admin.scss
@@ -708,7 +708,7 @@ kbd {
   }
 
   &__timestamp {
-    color: $dark-text-color;
+    color: var(--clr-text-tertiary);
   }
 
   a,
@@ -854,7 +854,7 @@ a.name-tag,
   }
 
   time {
-    color: $dark-text-color;
+    color: var(--clr-text-tertiary);
   }
 }
 
@@ -1088,7 +1088,7 @@ a.name-tag,
 
     &__meta {
       padding: 0 15px;
-      color: $dark-text-color;
+      color: var(--clr-text-tertiary);
 
       a {
         color: inherit;
@@ -1733,7 +1733,7 @@ a.sparkline {
     &__description {
       padding: 15px;
       font-size: 14px;
-      color: $dark-text-color;
+      color: var(--clr-text-tertiary);
     }
   }
 
@@ -2168,7 +2168,7 @@ a.sparkline {
     width: 8px;
     height: 8px;
     border-radius: 50%;
-    background: $dark-text-color;
+    background: var(--clr-text-tertiary);
   }
 
   &.success {
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index d77f3ad925f..e3606d34207 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1439,11 +1439,11 @@
   line-height: 22px;
   display: flex;
   justify-content: space-between;
-  color: $dark-text-color;
+  color: var(--clr-text-tertiary);
 }
 
 .status__wrapper--filtered {
-  color: $dark-text-color;
+  color: var(--clr-text-tertiary);
   border: 0;
   font-size: inherit;
   text-align: center;
@@ -1612,7 +1612,7 @@
 }
 
 .notification__relative_time {
-  color: $dark-text-color;
+  color: var(--clr-text-tertiary);
   float: right;
   font-size: 14px;
   padding-bottom: 1px;
@@ -1683,7 +1683,7 @@
   padding: 0 10px;
 
   .detailed-status__display-name {
-    color: $dark-text-color;
+    color: var(--clr-text-tertiary);
 
     span {
       display: inline;
@@ -1818,7 +1818,7 @@
   .logo {
     width: 40px;
     height: 40px;
-    color: $dark-text-color;
+    color: var(--clr-text-tertiary);
   }
 }
 
@@ -1845,7 +1845,7 @@
 
 .detailed-status__meta {
   margin-top: 24px;
-  color: $dark-text-color;
+  color: var(--clr-text-tertiary);
   font-size: 14px;
   line-height: 18px;
 
@@ -2210,7 +2210,7 @@
     color: var(--clr-text-secondary);
 
     &--missing {
-      color: $dark-text-color;
+      color: var(--clr-text-tertiary);
     }
 
     p {
@@ -2500,11 +2500,11 @@ a.account__display-name {
   .status__content,
   .status__content p,
   .status__content a {
-    color: $dark-text-color;
+    color: var(--clr-text-tertiary);
   }
 
   .status__display-name strong {
-    color: $dark-text-color;
+    color: var(--clr-text-tertiary);
   }
 
   .status__avatar {
@@ -3449,7 +3449,7 @@ a.account__display-name {
   &__source {
     font-size: 13px;
     line-height: 16px;
-    color: $dark-text-color;
+    color: var(--clr-text-tertiary);
 
     @container (width >= 400px) {
       padding-inline-start: 60px;
@@ -4130,7 +4130,7 @@ a.account__display-name {
 }
 
 .getting-started {
-  color: $dark-text-color;
+  color: var(--clr-text-tertiary);
   overflow: auto;
   border: 1px solid var(--clr-border-primary);
   border-top: 0;
@@ -4728,7 +4728,7 @@ a.status-card {
   }
 
   &:disabled {
-    color: $dark-text-color;
+    color: var(--clr-text-disabled);
     cursor: default;
   }
 }
@@ -4832,7 +4832,7 @@ a.status-card {
 }
 
 .loading-indicator {
-  color: $dark-text-color;
+  color: var(--clr-text-secondary);
   font-size: 12px;
   font-weight: 400;
   text-transform: uppercase;
@@ -5135,7 +5135,7 @@ a.status-card {
     }
 
     &__placeholder {
-      color: $dark-text-color;
+      color: var(--clr-text-tertiary);
       padding-inline-start: 2px;
       font-size: 12px;
     }
@@ -5173,12 +5173,12 @@ a.status-card {
     &__dropdown-indicator {
       cursor: pointer;
       transition: none;
-      color: $dark-text-color;
+      color: var(--clr-text-tertiary);
 
       &:hover,
       &:active,
       &:focus {
-        color: lighten($dark-text-color, 4%);
+        color: var(--clr-text-secondary);
       }
     }
 
@@ -5236,7 +5236,7 @@ a.status-card {
 }
 
 .empty-column-indicator {
-  color: $dark-text-color;
+  color: var(--clr-text-tertiary);
   text-align: center;
   padding: 20px;
   font-size: 14px;
@@ -5253,7 +5253,7 @@ a.status-card {
   }
 
   a {
-    color: $highlight-text-color;
+    color: var(--clr-text-accent);
     text-decoration: none;
 
     &:hover {
@@ -5796,7 +5796,7 @@ a.status-card {
   &__helper {
     margin-top: 4px;
     font-size: 0.8em;
-    color: var(--clr-text-secondary);
+    color: var(--clr-text-tertiary);
   }
 }
 
@@ -6418,7 +6418,7 @@ a.status-card {
       align-items: center;
       gap: 4px;
       margin-bottom: 8px;
-      color: $dark-text-color;
+      color: var(--clr-text-tertiary);
 
       bdi {
         color: inherit;
@@ -6429,7 +6429,7 @@ a.status-card {
       display: -webkit-box;
       font-size: 15px;
       line-height: 22px;
-      color: $dark-text-color;
+      color: var(--clr-text-tertiary);
       line-clamp: 4;
       -webkit-line-clamp: 4;
       -webkit-box-orient: vertical;
@@ -6446,7 +6446,7 @@ a.status-card {
       margin-top: 0;
       font-size: 15px;
       line-height: 22px;
-      color: $dark-text-color;
+      color: var(--clr-text-tertiary);
     }
   }
 
@@ -6538,7 +6538,7 @@ a.status-card {
     &__hint {
       font-size: 14px;
       line-height: 20px;
-      color: $dark-text-color;
+      color: var(--clr-text-tertiary);
     }
 
     .link-button {
@@ -7223,7 +7223,7 @@ a.status-card {
 
   &__icon {
     flex: 0 0 auto;
-    color: $dark-text-color;
+    color: var(--clr-text-tertiary);
     padding: 8px 18px;
     cursor: default;
     border-inline-end: 1px solid var(--clr-border-primary);
@@ -7249,7 +7249,7 @@ a.status-card {
 
     a {
       text-decoration: none;
-      color: $dark-text-color;
+      color: var(--clr-text-tertiary);
       font-weight: 500;
 
       &:hover {
@@ -7267,7 +7267,7 @@ a.status-card {
     }
 
     .icon {
-      color: $dark-text-color;
+      color: var(--clr-text-tertiary);
       vertical-align: middle;
     }
   }
@@ -8547,7 +8547,7 @@ noscript {
         width: auto;
         background: transparent;
         text-transform: uppercase;
-        color: $dark-text-color;
+        color: var(--clr-text-tertiary);
       }
 
       dd {
@@ -8671,7 +8671,7 @@ noscript {
       border-radius: 4px;
 
       &::placeholder {
-        color: $dark-text-color;
+        color: var(--clr-text-tertiary);
         opacity: 1;
       }
 
@@ -8741,7 +8741,7 @@ noscript {
 
     &__name {
       flex: 1 1 auto;
-      color: $dark-text-color;
+      color: var(--clr-text-tertiary);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -9228,7 +9228,7 @@ noscript {
   line-height: 21px;
   font-weight: 500;
   cursor: pointer;
-  color: $dark-text-color;
+  color: var(--clr-text-tertiary);
   aspect-ratio: 16 / 9;
 
   .icon {
@@ -9310,7 +9310,7 @@ noscript {
   .search__icon {
     top: 12px;
     inset-inline-end: 12px;
-    color: $dark-text-color;
+    color: var(--clr-text-tertiary);
   }
 }
 
@@ -10100,7 +10100,7 @@ noscript {
   }
 
   &__footer {
-    color: $dark-text-color;
+    color: var(--clr-text-tertiary);
     text-align: center;
     font-size: 15px;
     line-height: 22px;
@@ -10347,10 +10347,10 @@ noscript {
   width: auto;
   padding: 15px;
   margin: 0;
-  color: $white;
-  background: color.change($black, $alpha: 0.85);
+  color: var(--clr-text-on-inverted);
+  background: var(--clr-bg-inverted);
   backdrop-filter: blur(8px);
-  border: 1px solid rgba(lighten($classic-base-color, 4%), 0.85);
+  border: 1px solid var(--clr-border-on-bg-inverted);
   border-radius: 8px;
   box-shadow:
     0 10px 15px -3px color.change($base-shadow-color, $alpha: 0.25),
@@ -10394,7 +10394,7 @@ noscript {
   background: transparent;
   text-transform: uppercase;
   cursor: pointer;
-  color: $blurple-300;
+  color: var(--clr-text-accent);
   font-weight: 700;
   border-radius: 4px;
   padding: 0 4px;
@@ -10402,7 +10402,7 @@ noscript {
   &:hover,
   &:focus,
   &:active {
-    background: color.change($white, $alpha: 0.15);
+    background: var(--clr-bg-accent-subtle);
   }
 }
 
@@ -10678,7 +10678,7 @@ noscript {
           &__source {
             display: inline-flex;
             align-items: center;
-            color: $dark-text-color;
+            color: var(--clr-text-tertiary);
             gap: 4px;
             overflow: hidden;
             white-space: nowrap;
@@ -10934,7 +10934,7 @@ noscript {
     align-items: center;
     justify-content: center;
     flex: 0 0 auto;
-    color: $dark-text-color;
+    color: var(--clr-text-tertiary);
 
     .icon {
       width: 28px;
@@ -10958,7 +10958,7 @@ noscript {
   &--relationships-severance-event &__icon,
   &--admin-report &__icon,
   &--admin-sign-up &__icon {
-    color: $dark-text-color;
+    color: var(--clr-text-tertiary);
   }
 
   &--moderation-warning &__icon {
@@ -11014,7 +11014,7 @@ noscript {
         }
 
         time {
-          color: $dark-text-color;
+          color: var(--clr-text-tertiary);
         }
 
         @container (width < 350px) {
@@ -11033,7 +11033,7 @@ noscript {
     }
 
     &__additional-content {
-      color: $dark-text-color;
+      color: var(--clr-text-tertiary);
       margin-top: -8px; // to offset the parent's `gap` property
       font-size: 15px;
       line-height: 22px;
@@ -11055,7 +11055,7 @@ noscript {
       display: flex;
       align-items: center;
       gap: 4px;
-      color: $dark-text-color;
+      color: var(--clr-text-tertiary);
       font-size: 15px;
       line-height: 22px;
 
@@ -11093,7 +11093,7 @@ noscript {
       margin-top: 0;
       font-size: 15px;
       line-height: 22px;
-      color: $dark-text-color;
+      color: var(--clr-text-tertiary);
     }
   }
 }
@@ -11114,7 +11114,7 @@ noscript {
     display: flex;
     align-items: center;
     gap: 8px;
-    color: $dark-text-color;
+    color: var(--clr-text-tertiary);
     font-size: 15px;
     line-height: 22px;
     font-weight: 500;
@@ -11285,7 +11285,7 @@ noscript {
 
   &__note {
     &-label {
-      color: $dark-text-color;
+      color: var(--clr-text-tertiary);
       font-size: 12px;
       font-weight: 500;
       text-transform: uppercase;
@@ -11318,7 +11318,7 @@ noscript {
 
     &__account {
       display: block;
-      color: $dark-text-color;
+      color: var(--clr-text-tertiary);
     }
   }
 
@@ -11345,7 +11345,7 @@ noscript {
 
       dt {
         flex: 0 1 auto;
-        color: $dark-text-color;
+        color: var(--clr-text-tertiary);
         min-width: 0;
         overflow: hidden;
         white-space: nowrap;
diff --git a/app/javascript/styles/mastodon/css_variables.scss b/app/javascript/styles/mastodon/css_variables.scss
index 996bcc3cdd6..a2c759d8748 100644
--- a/app/javascript/styles/mastodon/css_variables.scss
+++ b/app/javascript/styles/mastodon/css_variables.scss
@@ -35,6 +35,7 @@
 
   --clr-text-primary: var(--clr-grey-50);
   --clr-text-secondary: var(--clr-grey-400);
+  --clr-text-tertiary: var(--clr-grey-500);
   --clr-text-on-inverted: var(--clr-grey-950);
   --clr-text-accent: var(--clr-indigo-400);
   --clr-text-accent-subtle: color-mix(
@@ -77,7 +78,7 @@
   );
   --clr-bg-ambient: var(--clr-bg-primary);
   --clr-bg-elevated: var(--clr-grey-800);
-  --clr-bg-inverted: var(--clr-grey-950);
+  --clr-bg-inverted: var(--clr-grey-50);
   --clr-bg-disabled: var(--clr-grey-700);
   --clr-bg-accent-subtle-base: var(--clr-indigo-400);
   --clr-bg-accent-subtle-strength: 10%;
@@ -159,6 +160,7 @@
       var(--clr-text-success),
       50%
     )};
+  --clr-border-on-bg-inverted: var(--clr-border-primary);
 
   /* GRAPHS/CHARTS TOKENS */
 
diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss
index 4aeac5c809e..ffd26dbea14 100644
--- a/app/javascript/styles/mastodon/emoji_picker.scss
+++ b/app/javascript/styles/mastodon/emoji_picker.scss
@@ -228,7 +228,7 @@
 
 .emoji-mart-no-results {
   font-size: 14px;
-  color: $dark-text-color;
+  color: var(--clr-text-tertiary);
   text-align: center;
   padding: 5px 6px;
   padding-top: 70px;
diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss
index d1b221b049e..87d1ce06257 100644
--- a/app/javascript/styles/mastodon/forms.scss
+++ b/app/javascript/styles/mastodon/forms.scss
@@ -694,7 +694,7 @@ code {
       top: 1px;
       padding: 10px;
       font-size: 14px;
-      color: $dark-text-color;
+      color: var(--clr-text-tertiary);
       font-family: inherit;
       pointer-events: none;
       cursor: default;
diff --git a/app/javascript/styles/mastodon/polls.scss b/app/javascript/styles/mastodon/polls.scss
index 943a727bf5f..ef2d6c85337 100644
--- a/app/javascript/styles/mastodon/polls.scss
+++ b/app/javascript/styles/mastodon/polls.scss
@@ -145,16 +145,16 @@
     }
 
     &.disabled {
-      border-color: $dark-text-color;
+      border-color: var(--clr-text-disabled);
 
       &.active {
-        background: $dark-text-color;
+        background: var(--clr-text-disabled);
       }
 
       &:active,
       &:focus,
       &:hover {
-        border-color: $dark-text-color;
+        border-color: var(--clr-text-disabled);
         border-width: 1px;
       }
     }
@@ -189,7 +189,7 @@
   &__footer {
     padding-top: 6px;
     padding-bottom: 5px;
-    color: $dark-text-color;
+    color: var(--clr-text-tertiary);
   }
 
   &__link {
@@ -198,7 +198,7 @@
     padding: 0;
     margin: 0;
     border: 0;
-    color: $dark-text-color;
+    color: var(--clr-text-tertiary);
     text-decoration: underline;
     font-size: inherit;
 
@@ -208,7 +208,7 @@
 
     &:active,
     &:focus {
-      background-color: color.change($dark-text-color, $alpha: 0.1);
+      background-color: var(--clr-bg-secondary);
     }
   }
 
@@ -221,7 +221,7 @@
 }
 
 .muted .poll {
-  color: $dark-text-color;
+  color: var(--clr-text-tertiary);
 
   &__chart {
     background: rgba(darken($ui-primary-color, 14%), 0.7);