diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index be80c17dba6..46f89f8b5d8 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -283,16 +283,9 @@
 .simple_form {
   .warning {
     box-shadow: none;
-    background: color.change($error-red, $alpha: 0.5);
     text-shadow: none;
   }
 
-  .recommended {
-    border-color: $ui-highlight-color;
-    color: $ui-highlight-color;
-    background-color: color.change($ui-highlight-color, $alpha: 0.1);
-  }
-
   input[type='text'],
   input[type='number'],
   input[type='email'],
diff --git a/app/javascript/styles/mastodon-light/variables.scss b/app/javascript/styles/mastodon-light/variables.scss
index e0724c7818c..f0371d25094 100644
--- a/app/javascript/styles/mastodon-light/variables.scss
+++ b/app/javascript/styles/mastodon-light/variables.scss
@@ -16,11 +16,6 @@ $classic-secondary-color: hsl(255deg, 25%, 88%);
 $classic-highlight-color: $blurple-500;
 
 @use '../mastodon/variables' with (
-  $success-green: color.adjust(
-      hsl(138deg, 32%, 35%),
-      $lightness: 8%,
-      $space: hsl
-    ),
   $base-overlay-background: $white,
 
   $ui-base-color: $classic-secondary-color,
diff --git a/app/javascript/styles/mastodon/_variables.scss b/app/javascript/styles/mastodon/_variables.scss
index fa9a9961989..7f232043cd7 100644
--- a/app/javascript/styles/mastodon/_variables.scss
+++ b/app/javascript/styles/mastodon/_variables.scss
@@ -13,13 +13,6 @@ $blurple-300: #858afa; // Faded Blue
 $grey-600: hsl(240deg, 8%, 33%); // Trout
 $grey-100: hsl(240deg, 51%, 90%); // Topaz
 
-$success-green: #79bd9a !default; // Padua
-$error-red: $red-500 !default; // Cerise
-$warning-red: #ff5050 !default; // Sunset Orange
-$gold-star: #ca8f04 !default; // Dark Goldenrod
-
-$red-bookmark: $warning-red;
-
 // Values from the classic Mastodon UI
 $classic-base-color: hsl(240deg, 16%, 19%);
 $classic-primary-color: hsl(240deg, 29%, 70%);
@@ -67,8 +60,6 @@ $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;
-$passive-text-color: $gold-star !default;
-$active-passive-text-color: $success-green !default;
 
 // For texts on inverted backgrounds
 $inverted-text-color: $ui-base-color !default;
diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss
index c33226b4474..1bc5e65869e 100644
--- a/app/javascript/styles/mastodon/accounts.scss
+++ b/app/javascript/styles/mastodon/accounts.scss
@@ -247,9 +247,9 @@
 }
 
 .simple_form .not_recommended {
-  color: lighten($error-red, 12%);
-  background-color: rgba(lighten($error-red, 12%), 0.1);
-  border-color: rgba(lighten($error-red, 12%), 0.5);
+  color: var(--clr-text-error);
+  background-color: var(--clr-bg-error-subtle);
+  border-color: var(--clr-border-on-bg-error-subtle);
 }
 
 .account__header__fields {
@@ -382,7 +382,7 @@
 }
 
 .batch-table__row--attention {
-  color: $gold-star;
+  color: var(--clr-text-warning);
 }
 
 .batch-table__row--attention .pending-account__header,
@@ -391,7 +391,7 @@
   &,
   a,
   strong {
-    color: $gold-star;
+    color: var(--clr-text-warning);
   }
 }
 
@@ -399,6 +399,6 @@
   tbody td.accounts-table__extra,
   &__count,
   &__count small {
-    color: $gold-star;
+    color: var(--clr-text-warning);
   }
 }
diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss
index 56c2cbe81f0..56a1687f3da 100644
--- a/app/javascript/styles/mastodon/admin.scss
+++ b/app/javascript/styles/mastodon/admin.scss
@@ -147,7 +147,7 @@ $content-width: 840px;
       }
 
       .warning a {
-        color: $gold-star;
+        color: var(--clr-text-warning);
         font-weight: 700;
       }
 
@@ -759,13 +759,13 @@ kbd {
   }
 
   &__timestamp {
-    color: $dark-text-color;
+    color: var(--clr-text-secondary);
   }
 
   &:hover,
   &:focus,
   &:active {
-    background: $ui-base-color;
+    background: var(--clr-bg-primary);
   }
 }
 
@@ -777,7 +777,7 @@ a.inline-name-tag,
   color: var(--clr-text-primary);
 
   &:hover {
-    color: $highlight-text-color;
+    color: var(--clr-text-accent);
   }
 
   .username {
@@ -787,7 +787,7 @@ a.inline-name-tag,
   &.suspended {
     .username {
       text-decoration: line-through;
-      color: lighten($error-red, 12%);
+      color: var(--clr-text-error);
     }
 
     .avatar {
@@ -820,18 +820,18 @@ a.name-tag,
 
 .speech-bubble {
   margin-bottom: 20px;
-  border-inline-start: 4px solid $ui-highlight-color;
+  border-inline-start: 4px solid var(--clr-text-accent);
 
   &.positive {
-    border-left-color: $success-green;
+    border-color: var(--clr-text-success);
   }
 
   &.negative {
-    border-left-color: lighten($error-red, 12%);
+    border-color: var(--clr-text-error);
   }
 
   &.warning {
-    border-left-color: $gold-star;
+    border-color: var(--clr-text-warning);
   }
 
   &__bubble {
@@ -1131,11 +1131,11 @@ a.name-tag,
 
   &.expired {
     .expiration {
-      color: lighten($error-red, 12%);
+      color: var(--clr-text-error);
     }
 
     .permissions-list__item__icon {
-      color: $dark-text-color;
+      color: var(--clr-text-secondary);
     }
   }
 }
@@ -1278,12 +1278,12 @@ a.name-tag,
     }
 
     path:first-child {
-      fill: var(--clr-bg-accent-subtle) !important;
+      fill: var(--clr-graph-primary-fill) !important;
       fill-opacity: 1 !important;
     }
 
     path:last-child {
-      stroke: var(--clr-text-accent) !important;
+      stroke: var(--clr-graph-primary-stroke) !important;
       fill: none !important;
     }
   }
diff --git a/app/javascript/styles/mastodon/annual_reports.scss b/app/javascript/styles/mastodon/annual_reports.scss
index 96500a18bb6..fefc95067b6 100644
--- a/app/javascript/styles/mastodon/annual_reports.scss
+++ b/app/javascript/styles/mastodon/annual_reports.scss
@@ -170,7 +170,7 @@
         }
 
         path:last-child {
-          stroke: var(--indigo-3) !important;
+          stroke: var(--clr-graph-primary-stroke) !important;
           fill: none !important;
         }
       }
diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss
index 16eea3c72d1..f3ad2283082 100644
--- a/app/javascript/styles/mastodon/basics.scss
+++ b/app/javascript/styles/mastodon/basics.scss
@@ -213,7 +213,7 @@ button {
   font-size: 16px;
   font-weight: 400;
   line-height: 1.7;
-  color: lighten($error-red, 4%);
+  color: var(--clr-text-error);
   text-align: center;
 
   & > div {
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index ae0037ddbd6..6df852a7aa1 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1072,7 +1072,7 @@
   text-align: end;
 
   &.character-counter--over {
-    color: $error-red;
+    color: var(--clr-text-error);
   }
 }
 
@@ -2615,13 +2615,13 @@ a.account__display-name {
   gap: 10px;
 
   .icon {
-    color: $highlight-text-color;
+    color: var(--clr-text-accent);
     width: 18px;
     height: 18px;
   }
 
   .icon-star {
-    color: $gold-star;
+    color: var(--clr-text-favourite-highlight);
   }
 
   > span {
@@ -2632,11 +2632,11 @@ a.account__display-name {
 }
 
 .icon-button.star-icon.active {
-  color: $gold-star;
+  color: var(--clr-text-favourite-highlight);
 }
 
 .icon-button.bookmark-icon.active {
-  color: var(--mas-accent-bookmark);
+  color: var(--clr-text-bookmark-highlight);
 }
 
 .no-reduce-motion .icon-button.star-icon {
@@ -3567,14 +3567,14 @@ a.account__display-name {
     position: absolute;
     inset-inline-start: 9px;
     top: -13px;
-    background: $ui-highlight-color;
+    color: var(--clr-text-on-accent-strong);
+    background: var(--clr-bg-accent-strong);
     border: 2px solid var(--clr-bg-primary);
     padding: 1px 6px;
     border-radius: 6px;
     font-size: 10px;
     font-weight: 500;
     line-height: 14px;
-    color: var(--clr-text-primary);
   }
 
   &__issue-badge {
@@ -3582,7 +3582,7 @@ a.account__display-name {
     inset-inline-start: 11px;
     bottom: 1px;
     display: block;
-    background: $error-red;
+    background: var(--clr-text-error);
     border-radius: 50%;
     width: 0.625rem;
     height: 0.625rem;
@@ -4862,10 +4862,9 @@ a.status-card {
 }
 
 .column-header__issue-btn {
-  color: $warning-red;
+  color: var(--clr-text-error);
 
   &:hover {
-    color: $error-red;
     text-decoration: underline;
   }
 }
@@ -6294,54 +6293,34 @@ a.status-card {
     padding: 16px;
 
     .icon-button {
-      color: $white;
+      --default-icon-color: white;
+      --default-bg-color: transparent;
+      --hover-icon-color: white;
+      --hover-bg-color: rgb(255 255 255 / 12%);
 
       .icon {
         filter: var(--overlay-icon-shadow);
       }
 
-      &:hover,
-      &:focus,
-      &:active {
-        color: $white;
-        background-color: color.change($white, $alpha: 0.15);
-      }
-
-      &:focus {
-        background-color: color.change($white, $alpha: 0.3);
-      }
-
       &.active {
-        color: $highlight-text-color;
-
-        &:hover,
-        &:focus,
-        &:active {
-          background: color.change($highlight-text-color, $alpha: 0.15);
-        }
-
-        &:focus {
-          background: color.change($highlight-text-color, $alpha: 0.3);
-        }
+        --default-icon-color: var(--clr-text-accent);
+        --hover-icon-color: var(--clr-text-accent);
+        --hover-bg-color: var(--clr-bg-accent-subtle-highlighted);
       }
 
       &.star-icon.active {
-        color: $gold-star;
-
-        &:hover,
-        &:focus,
-        &:active {
-          background: color.change($gold-star, $alpha: 0.15);
-        }
-
-        &:focus {
-          background: color.change($gold-star, $alpha: 0.3);
-        }
+        --default-icon-color: var(--clr-text-favourite-highlight);
+        --hover-icon-color: var(--clr-text-favourite-highlight);
+        --hover-bg-color: rgb(
+          from var(--clr-text-favourite-highlight) r g b /
+            var(--clr-bg-accent-subtle-strength)
+        );
       }
 
       &.disabled {
-        color: $white;
-        background-color: transparent;
+        --default-icon-color: white;
+        --default-bg-color: transparent;
+
         cursor: default;
         opacity: 0.4;
       }
@@ -8880,60 +8859,60 @@ noscript {
       width: 50px;
 
       path:first-child {
-        fill: color.change($highlight-text-color, $alpha: 0.25) !important;
+        fill: var(--clr-graph-primary-fill) !important;
         fill-opacity: 1 !important;
       }
 
       path:last-child {
-        stroke: lighten($highlight-text-color, 6%) !important;
+        stroke: var(--clr-graph-primary-stroke) !important;
         fill: none !important;
       }
     }
 
     &--requires-review {
       .trends__item__name {
-        color: $gold-star;
+        color: var(--clr-text-warning);
 
         a {
-          color: $gold-star;
+          color: var(--clr-text-warning);
         }
       }
 
       .trends__item__current {
-        color: $gold-star;
+        color: var(--clr-text-warning);
       }
 
       .trends__item__sparkline {
         path:first-child {
-          fill: color.change($gold-star, $alpha: 0.25) !important;
+          fill: var(--clr-graph-warning-fill) !important;
         }
 
         path:last-child {
-          stroke: lighten($gold-star, 6%) !important;
+          stroke: var(--clr-graph-warning-stroke) !important;
         }
       }
     }
 
     &--disabled {
       .trends__item__name {
-        color: lighten($ui-base-color, 12%);
+        color: var(--clr-text-disabled);
 
         a {
-          color: lighten($ui-base-color, 12%);
+          color: var(--clr-text-disabled);
         }
       }
 
       .trends__item__current {
-        color: lighten($ui-base-color, 12%);
+        color: var(--clr-text-disabled);
       }
 
       .trends__item__sparkline {
         path:first-child {
-          fill: rgba(lighten($ui-base-color, 12%), 0.25) !important;
+          fill: var(--clr-graph-disabled-fill) !important;
         }
 
         path:last-child {
-          stroke: lighten(lighten($ui-base-color, 12%), 6%) !important;
+          stroke: var(--clr-graph-disabled-stroke) !important;
         }
       }
     }
@@ -8951,7 +8930,7 @@ noscript {
   padding-bottom: 0;
 
   &:focus {
-    background: lighten($ui-base-color, 2%);
+    background: var(--clr-bg-secondary);
     outline: 0;
   }
 
@@ -8965,7 +8944,7 @@ noscript {
 
   &__unread {
     display: inline-block;
-    background: $highlight-text-color;
+    background: var(--clr-text-accent);
     border-radius: 50%;
     width: 0.625rem;
     height: 0.625rem;
@@ -9034,7 +9013,7 @@ noscript {
   }
 
   &__root {
-    background: lighten($ui-base-color, 8%);
+    background: var(--clr-bg-accent-subtle);
     font-size: 13px;
     display: flex;
     align-items: flex-end;
@@ -9082,7 +9061,7 @@ noscript {
     top: 19px;
     inset-inline-end: 19px;
     display: block;
-    background: $highlight-text-color;
+    background: var(--clr-text-accent);
     border-radius: 50%;
     width: 0.625rem;
     height: 0.625rem;
@@ -9767,7 +9746,7 @@ noscript {
     }
 
     &.invalid &__input {
-      border-color: $error-red;
+      border-color: var(--clr-text-error);
     }
 
     &.expanded .search__popout {
@@ -9823,49 +9802,6 @@ noscript {
   }
 }
 
-.copypaste {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-
-  input {
-    display: block;
-    font-family: inherit;
-    background: darken($ui-base-color, 8%);
-    border: 1px solid $highlight-text-color;
-    color: var(--clr-text-secondary);
-    border-radius: 4px;
-    padding: 6px 9px;
-    line-height: 22px;
-    font-size: 14px;
-    transition: border-color 300ms linear;
-    flex: 1 1 auto;
-    overflow: hidden;
-
-    &:focus {
-      outline: 0;
-      background: darken($ui-base-color, 4%);
-    }
-  }
-
-  .button {
-    flex: 0 0 auto;
-    transition: background 300ms linear;
-  }
-
-  &.copied {
-    input {
-      border: 1px solid var(--clr-text-success);
-      transition: none;
-    }
-
-    .button {
-      background: var(--clr-bg-success-strong);
-      transition: none;
-    }
-  }
-}
-
 .privacy-policy {
   padding: 20px;
 
@@ -10153,12 +10089,12 @@ noscript {
 }
 
 .warning-banner {
-  border: 1px solid $warning-red;
-  background: color.change($warning-red, $alpha: 0.15);
+  border: 1px solid var(--clr-border-on-bg-error-subtle);
+  background: var(--clr-bg-error-subtle);
 
   &__message {
     h1 {
-      color: $warning-red;
+      color: var(--clr-text-error);
     }
 
     a {
@@ -11087,11 +11023,11 @@ noscript {
 
   &--follow &__icon,
   &--follow-request &__icon {
-    color: $highlight-text-color;
+    color: var(--clr-text-accent);
   }
 
   &--favourite &__icon {
-    color: $gold-star;
+    color: var(--clr-text-favourite-highlight);
   }
 
   &--reblog &__icon {
@@ -11105,7 +11041,7 @@ noscript {
   }
 
   &--moderation-warning &__icon {
-    color: $red-bookmark;
+    color: var(--clr-text-bookmark-highlight);
   }
 
   &--follow-request &__actions {
diff --git a/app/javascript/styles/mastodon/css_variables.scss b/app/javascript/styles/mastodon/css_variables.scss
index 109456f9d6b..996bcc3cdd6 100644
--- a/app/javascript/styles/mastodon/css_variables.scss
+++ b/app/javascript/styles/mastodon/css_variables.scss
@@ -51,12 +51,14 @@
   --clr-text-on-success-strong: var(--clr-white);
   --clr-text-disabled: var(--clr-grey-600);
   --clr-text-on-disabled: var(--clr-grey-400);
+  --clr-text-bookmark-highlight: var(--clr-text-error);
+  --clr-text-favourite-highlight: var(--clr-text-warning);
 
   /* BACKGROUND TOKENS */
 
   --clr-bg-primary: var(--clr-grey-950);
   --clr-bg-secondary-base: var(--clr-indigo-200);
-  --clr-bg-secondary-strength: 12%;
+  --clr-bg-secondary-strength: 10%;
   --clr-bg-secondary: #{utils.css-alpha(
       var(--clr-bg-secondary-base),
       var(--clr-bg-secondary-strength)
@@ -158,6 +160,15 @@
       50%
     )};
 
+  /* GRAPHS/CHARTS TOKENS */
+
+  --clr-graph-primary-stroke: var(--clr-text-accent);
+  --clr-graph-primary-fill: var(--clr-bg-accent-subtle);
+  --clr-graph-warning-stroke: var(--clr-text-warning);
+  --clr-graph-warning-fill: var(--clr-bg-warning-subtle);
+  --clr-graph-disabled-stroke: var(--clr-text-disabled);
+  --clr-graph-disabled-fill: var(--clr-bg-disabled);
+
   /* LEGACY TOKENS */
 
   --rich-text-container-color: rgb(87 24 60 / 100%);
diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss
index a285d5eacfb..d1b221b049e 100644
--- a/app/javascript/styles/mastodon/forms.scss
+++ b/app/javascript/styles/mastodon/forms.scss
@@ -57,11 +57,13 @@ code {
   color: var(--clr-text-primary);
 
   &.success {
-    background: $success-green;
+    color: var(--clr-text-on-success-strong);
+    background: var(--clr-bg-success-strong);
   }
 
   &.failure {
-    background: $error-red;
+    color: var(--clr-text-on-error-strong);
+    background: var(--clr-bg-error-strong);
   }
 }
 
@@ -1074,7 +1076,7 @@ code {
 }
 
 .scope-danger {
-  color: $warning-red;
+  color: var(--clr-text-error);
 }
 
 .form_admin_settings_site_short_description,
diff --git a/app/javascript/styles/mastodon/tables.scss b/app/javascript/styles/mastodon/tables.scss
index d5758f60be4..25a49246752 100644
--- a/app/javascript/styles/mastodon/tables.scss
+++ b/app/javascript/styles/mastodon/tables.scss
@@ -18,7 +18,7 @@
 
     &.critical {
       font-weight: 700;
-      color: $gold-star;
+      color: var(--clr-text-warning);
     }
   }
 
diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss
index b5374fbacdf..7a6f2049c2e 100644
--- a/app/javascript/styles/mastodon/widgets.scss
+++ b/app/javascript/styles/mastodon/widgets.scss
@@ -25,12 +25,12 @@
       &:hover,
       &:active,
       &:focus {
-        background: $ui-base-color;
+        background: var(--clr-bg-primary);
       }
     }
 
     &.active > a {
-      background: $ui-highlight-color;
+      background: var(--clr-bg-accent-strong);
       cursor: default;
     }
 
@@ -76,7 +76,7 @@
     }
 
     &.active .avatar-stack .account__avatar {
-      border-color: $ui-highlight-color;
+      border-color: var(--clr-text-accent);
     }
 
     .trends__item__current {
@@ -113,7 +113,7 @@
   tbody td {
     padding: 15px 0;
     vertical-align: middle;
-    border-bottom: 1px solid lighten($ui-base-color, 8%);
+    border-bottom: 1px solid var(--clr-border-primary);
   }
 
   tbody tr:last-child td {
@@ -148,7 +148,7 @@
       &:focus,
       &:hover,
       &:active {
-        color: $highlight-text-color;
+        color: var(--clr-text-accent);
       }
     }
   }
@@ -165,15 +165,15 @@
 
   .icon {
     &.active {
-      color: $highlight-text-color;
+      color: var(--clr-text-accent);
     }
 
     &.passive {
-      color: $passive-text-color;
+      color: var(--clr-text-warning);
     }
 
     &.active.passive {
-      color: $active-passive-text-color;
+      color: var(--clr-text-success);
     }
   }