diff --git a/app/javascript/mastodon/components/status.jsx b/app/javascript/mastodon/components/status.jsx
index 2a8c9bfb2d8..1e746e5f710 100644
--- a/app/javascript/mastodon/components/status.jsx
+++ b/app/javascript/mastodon/components/status.jsx
@@ -553,7 +553,6 @@ class Status extends ImmutablePureComponent {
     }
 
     const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status);
-
     return (
       <Hotkeys handlers={handlers} focusable={!unfocusable}>
         <div className={classNames('status__wrapper', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id'), unread, focusable: !this.props.muted })} tabIndex={this.props.muted || unfocusable ? null : 0} data-featured={featured ? 'true' : null} aria-label={textForScreenReader({intl, status, rebloggedByText, isQuote: isQuotedPost})} ref={this.handleRef} data-nosnippet={status.getIn(['account', 'noindex'], true) || undefined}>
diff --git a/app/javascript/mastodon/components/status/boost_button.tsx b/app/javascript/mastodon/components/status/boost_button.tsx
index cdbe242289d..764e5ce704a 100644
--- a/app/javascript/mastodon/components/status/boost_button.tsx
+++ b/app/javascript/mastodon/components/status/boost_button.tsx
@@ -63,6 +63,7 @@ const StandaloneBoostButton: FC<ReblogButtonProps> = ({ status, counters }) => {
       title={intl.formatMessage(meta ?? title)}
       icon='retweet'
       iconComponent={iconComponent}
+      className='status__action-bar__button'
       onClick={!disabled ? handleClick : undefined}
       counter={
         counters
@@ -192,6 +193,7 @@ const BoostOrQuoteMenu: FC<ReblogButtonProps> = ({ status, counters }) => {
           isMenuDisabled ? messages.all_disabled : messages.reblog_or_quote,
         )}
         icon='retweet'
+        className='status__action-bar__button'
         iconComponent={boostIcon}
         counter={
           counters
diff --git a/app/javascript/mastodon/components/status_action_bar/index.jsx b/app/javascript/mastodon/components/status_action_bar/index.jsx
index 91b9e05b145..0763ec10889 100644
--- a/app/javascript/mastodon/components/status_action_bar/index.jsx
+++ b/app/javascript/mastodon/components/status_action_bar/index.jsx
@@ -405,15 +405,19 @@ class StatusActionBar extends ImmutablePureComponent {
               scrollKey={scrollKey}
               status={status}
               items={menu}
-              icon='ellipsis-h'
-              iconComponent={MoreHorizIcon}
               direction='right'
-              title={intl.formatMessage(messages.more)}
               onOpen={() => {
                 dismissQuoteHint();
                 return true;
               }}
-            />
+            >
+              <IconButton
+                className='status__action-bar__button'
+                icon='ellipsis-h'
+                iconComponent={MoreHorizIcon}
+                title={intl.formatMessage(messages.more)}
+              />
+            </Dropdown>
           )}
         </RemoveQuoteHint>
       </div>
diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss
index b328d8ee342..a3f25481b30 100644
--- a/app/javascript/styles/application.scss
+++ b/app/javascript/styles/application.scss
@@ -1,27 +1,2 @@
-@use 'mastodon/functions';
-@use 'mastodon/mixins';
-@use 'mastodon/variables';
 @use 'mastodon/css_variables';
-@use 'fonts/roboto';
-@use 'fonts/roboto-mono';
-
-@use 'mastodon/reset';
-@use 'mastodon/basics';
-@use 'mastodon/branding';
-@use 'mastodon/containers';
-@use 'mastodon/lists';
-@use 'mastodon/widgets';
-@use 'mastodon/forms';
-@use 'mastodon/accounts';
-@use 'mastodon/components';
-@use 'mastodon/polls';
-@use 'mastodon/modal';
-@use 'mastodon/emoji_picker';
-@use 'mastodon/annual_reports';
-@use 'mastodon/about';
-@use 'mastodon/tables';
-@use 'mastodon/admin';
-@use 'mastodon/dashboard';
-@use 'mastodon/rtl';
-@use 'mastodon/accessibility';
-@use 'mastodon/rich_text';
+@use 'common';
diff --git a/app/javascript/styles/common.scss b/app/javascript/styles/common.scss
new file mode 100644
index 00000000000..07e572cd1c0
--- /dev/null
+++ b/app/javascript/styles/common.scss
@@ -0,0 +1,26 @@
+@use 'mastodon/functions';
+@use 'mastodon/mixins';
+@use 'mastodon/variables';
+@use 'fonts/roboto';
+@use 'fonts/roboto-mono';
+
+@use 'mastodon/reset';
+@use 'mastodon/basics';
+@use 'mastodon/branding';
+@use 'mastodon/containers';
+@use 'mastodon/lists';
+@use 'mastodon/widgets';
+@use 'mastodon/forms';
+@use 'mastodon/accounts';
+@use 'mastodon/components';
+@use 'mastodon/polls';
+@use 'mastodon/modal';
+@use 'mastodon/emoji_picker';
+@use 'mastodon/annual_reports';
+@use 'mastodon/about';
+@use 'mastodon/tables';
+@use 'mastodon/admin';
+@use 'mastodon/dashboard';
+@use 'mastodon/rtl';
+@use 'mastodon/accessibility';
+@use 'mastodon/rich_text';
diff --git a/app/javascript/styles/contrast/diff.scss b/app/javascript/styles/contrast/diff.scss
index 0adf8802eeb..668885a937e 100644
--- a/app/javascript/styles/contrast/diff.scss
+++ b/app/javascript/styles/contrast/diff.scss
@@ -1,4 +1,5 @@
 @use '../mastodon/variables' as *;
+@use '../mastodon/theme_utils' as *;
 
 .status__content a,
 .reply-indicator__content a,
@@ -34,7 +35,7 @@
 .status__content a,
 .reply-indicator__content a,
 .edit-indicator__content a {
-  color: $highlight-text-color;
+  color: var(--text-accent-color);
 }
 
 .report-dialog-modal__textarea::placeholder {
diff --git a/app/javascript/styles/contrast/variables.scss b/app/javascript/styles/contrast/variables.scss
index e057352ba38..7bb3a027767 100644
--- a/app/javascript/styles/contrast/variables.scss
+++ b/app/javascript/styles/contrast/variables.scss
@@ -14,9 +14,7 @@ $ui-secondary-color: $classic-secondary-color !default;
 $ui-highlight-color: $classic-highlight-color !default;
 
 @use '../mastodon/variables' with (
-  $darker-text-color: lighten($ui-primary-color, 20%),
   $dark-text-color: lighten($ui-primary-color, 12%),
-  $secondary-text-color: lighten($ui-secondary-color, 6%),
   $highlight-text-color: lighten($ui-highlight-color, 10%),
   $action-button-color: lighten($ui-base-color, 50%),
   $inverted-text-color: $black,
diff --git a/app/javascript/styles/mastodon-light.scss b/app/javascript/styles/mastodon-light.scss
index b530616a3c3..f7c5344f392 100644
--- a/app/javascript/styles/mastodon-light.scss
+++ b/app/javascript/styles/mastodon-light.scss
@@ -1,4 +1,3 @@
 @use 'mastodon-light/variables';
 @use 'mastodon-light/css_variables';
-@use 'application';
-@use 'mastodon-light/diff';
+@use 'common';
diff --git a/app/javascript/styles/mastodon-light/css_variables.scss b/app/javascript/styles/mastodon-light/css_variables.scss
index d96c368b251..de6d75b12cc 100644
--- a/app/javascript/styles/mastodon-light/css_variables.scss
+++ b/app/javascript/styles/mastodon-light/css_variables.scss
@@ -1,23 +1,155 @@
-@use 'sass:color';
-@use '../mastodon/variables' as *;
-@use 'variables' as *;
-@use '../mastodon/functions' as *;
+@use '../mastodon/theme_utils' as *;
 
-body {
-  --dropdown-border-color: hsl(240deg, 25%, 88%);
-  --dropdown-background-color: #fff;
-  --modal-border-color: hsl(240deg, 25%, 88%);
-  --modal-background-color: var(--background-color);
-  --background-border-color: hsl(240deg, 25%, 88%);
-  --background-color: #fff;
-  --background-color-tint: rgba(255, 255, 255, 80%);
-  --background-filter: blur(10px);
-  --surface-variant-background-color: #f1ebfb;
-  --surface-border-color: #cac4d0;
-  --on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.65)};
-  --rich-text-container-color: rgba(255, 216, 231, 100%);
-  --rich-text-text-color: rgba(114, 47, 83, 100%);
-  --rich-text-decorations-color: rgba(255, 175, 212, 100%);
-  --input-placeholder-color: #{color.adjust($dark-text-color, $alpha: -0.5)};
-  --input-background-color: #{darken($ui-base-color, 10%)};
+:root {
+  --clr-black: #000;
+  --clr-grey-950: #181821;
+  --clr-grey-700: #444664;
+  --clr-grey-600: #545778;
+  --clr-grey-500: #696d91;
+  --clr-grey-400: #8b8dac;
+  --clr-grey-300: #b4b6cb;
+  --clr-grey-200: #d8d9e3;
+  --clr-grey-100: #f0f0f5;
+  --clr-grey-50: #f0f1ff;
+  --clr-white: #fff;
+  --clr-indigo-600: #6147e6;
+  --clr-indigo-200: #c8cdfe;
+  --clr-indigo-100: #e0e3ff;
+  --clr-indigo-50: #f0f1ff;
+  --clr-light-pink: #ededff;
+  --clr-red: #df405a;
+  --clr-red-100: #ffe4e6;
+  --clr-red-600: #ec003f;
+  --clr-yellow-50: #fffbeb;
+  --clr-yellow-600: #e17100;
+  --clr-green: #79bd9a;
+  --clr-green-100: #dcfce7;
+  --clr-green-600: #00a63e;
+
+  /* TEXT TOKENS */
+
+  --clr-text-primary: var(--clr-grey-950);
+  --clr-text-secondary: var(--clr-grey-600);
+  --clr-text-on-inverted: var(--clr-white);
+  --clr-text-accent: var(--clr-indigo-600);
+  --clr-text-accent-subtle: color-mix(
+    in oklab,
+    var(--clr-text-primary),
+    var(--clr-text-accent)
+  );
+  --clr-text-on-accent-strong: var(--clr-white);
+  --clr-text-error: var(--clr-red-600);
+  --clr-text-on-error-strong: var(--clr-white);
+  --clr-text-warning: var(--clr-yellow-600);
+  --clr-text-on-warning-strong: var(--clr-white);
+  --clr-text-success: var(--clr-green-600);
+  --clr-text-on-success-strong: var(--clr-white);
+  --clr-text-disabled: var(--clr-grey-300);
+  --clr-text-on-disabled: var(--clr-grey-200);
+
+  /* BACKGROUND TOKENS */
+
+  --clr-bg-primary: var(--clr-white);
+  --clr-bg-secondary-base: var(--clr-grey-600);
+  --clr-bg-secondary-strength: 5%;
+  --clr-bg-secondary: #{color-mix(
+      in oklab,
+      var(--clr-bg-primary),
+      var(--clr-bg-secondary-base) var(--clr-bg-secondary-strength)
+    )};
+  --clr-bg-secondary-solid: #{color-mix(
+      in srgb,
+      var(--clr-bg-primary),
+      var(--clr-bg-secondary-base) var(--clr-bg-secondary-strength)
+    )};
+  --clr-bg-tertiary: #{color-mix(
+      in oklab,
+      var(--clr-bg-primary),
+      var(--clr-bg-secondary-base) calc(2 * var(--clr-bg-secondary-strength))
+    )};
+  --clr-bg-elevated: var(--clr-bg-primary);
+  --clr-bg-inverted: var(--clr-grey-950);
+  --clr-bg-disabled: var(--clr-grey-400);
+  --clr-bg-accent-subtle-base: var(--clr-indigo-600);
+  --clr-bg-accent-subtle-strength: 12%;
+  --clr-bg-accent-subtle: #{css-alpha(
+      var(--clr-bg-accent-subtle-base),
+      var(--clr-bg-accent-subtle-strength)
+    )};
+  --clr-bg-accent-subtle-highlighted: #{css-alpha(
+      var(--clr-bg-accent-subtle-base),
+      calc(var(--clr-bg-accent-subtle-strength) * 1.5)
+    )};
+  --clr-bg-accent-strong: var(--clr-indigo-600);
+  --clr-bg-accent-strong-highlighted: color-mix(
+    in oklab,
+    var(--clr-bg-accent-strong),
+    black var(--clr-bg-accent-subtle-strength)
+  );
+  --clr-bg-error-subtle-base: #f41b3b;
+  --clr-bg-error-subtle-strength: 12%;
+  --clr-bg-error-subtle: #{css-alpha(
+      var(--clr-bg-error-subtle-base),
+      var(--clr-bg-error-subtle-strength)
+    )};
+  --clr-bg-error-strong: var(--clr-red-600);
+  --clr-bg-error-strong-highlighted: color-mix(
+    in oklab,
+    var(--clr-bg-error-strong),
+    black var(--clr-bg-error-subtle-strength)
+  );
+  --clr-bg-warning-subtle-base: #ffca1b;
+  --clr-bg-warning-subtle-strength: 10%;
+  --clr-bg-warning-subtle: #{css-alpha(
+      var(--clr-bg-warning-subtle-base),
+      var(--clr-bg-warning-subtle-strength)
+    )};
+  --clr-bg-warning-strong: var(--clr-yellow-600);
+  --clr-bg-warning-strong-highlighted: color-mix(
+    in oklab,
+    var(--clr-bg-warning-strong),
+    black var(--clr-bg-warning-subtle-strength)
+  );
+  --clr-bg-success-subtle-base: #17e865;
+  --clr-bg-success-subtle-strength: 15%;
+  --clr-bg-success-subtle: #{css-alpha(
+      var(--clr-bg-success-subtle-base),
+      var(--clr-bg-success-subtle-strength)
+    )};
+  --clr-bg-success-strong: var(--clr-green-600);
+  --clr-bg-success-strong-highlighted: color-mix(
+    in oklab,
+    var(--clr-bg-success-strong),
+    black var(--clr-bg-success-subtle-strength)
+  );
+
+  /* BORDER TOKENS */
+
+  --clr-border-primary-base: #000856;
+  --clr-border-primary-strength: 15%;
+  --clr-border-primary: color-mix(
+    in oklab,
+    var(--clr-bg-primary),
+    var(--clr-border-primary-base) var(--clr-border-primary-strength)
+  );
+  --clr-border-strong: var(--clr-grey-950);
+  --clr-border-media: rgb(252 248 255 / 15%);
+  --clr-border-on-bg-secondary: var(--clr-grey-200);
+  --clr-border-on-bg-accent-subtle: var(--clr-indigo-200);
+  --clr-border-on-bg-error-subtle: #{css-alpha(var(--clr-text-error), 50%)};
+  --clr-border-on-bg-warning-subtle: #{css-alpha(var(--clr-text-warning), 50%)};
+  --clr-border-on-bg-success-subtle: #{css-alpha(var(--clr-text-success), 50%)};
+
+  /* LEGACY TOKENS */
+
+  --rich-text-container-color: rgb(255 216 231 / 100%);
+  --rich-text-text-color: rgb(114 47 83 / 100%);
+  --rich-text-decorations-color: rgb(255 175 212 / 100%);
+
+  /* MISCELLANEOUS */
+
+  --avatar-border-radius: 8px;
+  --dropdown-shadow:
+    0 20px 25px -5px rgb(0 0 0 / 25%), 0 8px 10px -6px rgb(0 0 0 / 25%);
+  --overlay-icon-shadow: drop-shadow(0 0 8px rgb(0 0 0 / 35%));
 }
diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index 665271c5354..be80c17dba6 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -3,6 +3,7 @@
 @use 'sass:color';
 @use '../mastodon/functions' as *;
 @use '../mastodon/variables' as *;
+@use '../mastodon/theme_utils' as *;
 
 .simple_form .button.button-tertiary {
   color: $highlight-text-color;
@@ -28,7 +29,7 @@
 // Change default background colors of columns
 .interaction-modal {
   background: $white;
-  border: 1px solid var(--background-border-color);
+  border: 1px solid var(--clr-border-primary);
 }
 
 .rules-list li::before {
@@ -39,10 +40,6 @@
   background: lighten($ui-base-color, 12%);
 }
 
-.account__header {
-  background: $white;
-}
-
 .column-header__button.active {
   color: $ui-highlight-color;
 
@@ -71,27 +68,19 @@
   &:hover,
   &:focus,
   &:active {
-    color: $primary-text-color;
+    color: var(--text-primary-color);
   }
 }
 
 .getting-started .navigation-bar {
-  border-top: 1px solid var(--background-border-color);
-  border-bottom: 1px solid var(--background-border-color);
+  border-top: 1px solid var(--clr-border-primary);
+  border-bottom: 1px solid var(--clr-border-primary);
 
   @media screen and (max-width: $no-gap-breakpoint) {
     border-top: 0;
   }
 }
 
-.search__input,
-.search__popout,
-.setting-text,
-.report-dialog-modal__textarea,
-.audio-player {
-  border: 1px solid var(--background-border-color);
-}
-
 .report-dialog-modal .dialog-option .poll__input {
   color: $white;
 }
@@ -133,7 +122,7 @@
 
 .dialog-modal__content__preview {
   background: #fff;
-  border-bottom: 1px solid var(--modal-border-color);
+  border-bottom: 1px solid var(--clr-border-primary);
 }
 
 .reactions-bar__item:hover,
@@ -179,10 +168,6 @@
   color: $white;
 }
 
-.flash-message.warning {
-  color: lighten($gold-star, 16%);
-}
-
 .boost-modal__action-bar,
 .confirmation-modal__action-bar,
 .mute-modal__action-bar,
@@ -207,7 +192,7 @@
 
 .embed-modal .embed-modal__container .embed-modal__html {
   background: $white;
-  border: 1px solid var(--background-border-color);
+  border: 1px solid var(--clr-border-primary);
 
   &:focus {
     border-color: lighten($ui-base-color, 12%);
@@ -231,7 +216,7 @@
 // Change the default color used for the text in an empty column or on the error column
 .empty-column-indicator,
 .error-column {
-  color: $primary-text-color;
+  color: var(--text-primary-color);
   background: $white;
 }
 
@@ -246,7 +231,7 @@
 .directory__tag > a,
 .directory__tag > div {
   background: $white;
-  border: 1px solid var(--background-border-color);
+  border: 1px solid var(--clr-border-primary);
 }
 
 .picture-in-picture-placeholder {
@@ -275,22 +260,22 @@
   .account-grid-card {
     .controls {
       .icon-button {
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
       }
     }
 
     .name {
       a {
-        color: $primary-text-color;
+        color: var(--text-primary-color);
       }
     }
 
     .username {
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
     }
 
     .account__header__content {
-      color: $primary-text-color;
+      color: var(--text-primary-color);
     }
   }
 }
@@ -382,25 +367,6 @@
   }
 }
 
-.compose-form__actions .icon-button.active,
-.dropdown-button.active,
-.language-dropdown__dropdown__results__item:focus,
-.language-dropdown__dropdown__results__item.active,
-.language-dropdown__dropdown__results__item:focus
-  .language-dropdown__dropdown__results__item__common-name,
-.language-dropdown__dropdown__results__item.active
-  .language-dropdown__dropdown__results__item__common-name {
-  color: $white;
-}
-
-.privacy-dropdown__option,
-.visibility-dropdown__option {
-  &:focus,
-  &.active {
-    --dropdown-text-color: #{$white};
-  }
-}
-
 .compose-form .spoiler-input__input {
   color: lighten($ui-highlight-color, 8%);
 }
@@ -515,7 +481,7 @@ a.sparkline {
 @supports not selector(::-webkit-scrollbar) {
   html {
     scrollbar-color: color.change($action-button-color, $alpha: 0.25)
-      var(--background-border-color);
+      var(--clr-border-primary);
   }
 }
 
diff --git a/app/javascript/styles/mastodon-light/variables.scss b/app/javascript/styles/mastodon-light/variables.scss
index a6a5e5556b5..e0724c7818c 100644
--- a/app/javascript/styles/mastodon-light/variables.scss
+++ b/app/javascript/styles/mastodon-light/variables.scss
@@ -33,8 +33,6 @@ $classic-highlight-color: $blurple-500;
   $ui-button-tertiary-color: $blurple-500,
   $ui-button-tertiary-border-color: $blurple-500,
 
-  $primary-text-color: $black,
-  $darker-text-color: $classic-base-color,
   $lighter-text-color: $classic-base-color,
   $highlight-text-color: $classic-highlight-color,
   $dark-text-color: hsl(240deg, 16%, 32%),
diff --git a/app/javascript/styles/mastodon/_mixins.scss b/app/javascript/styles/mastodon/_mixins.scss
index d66fa405819..57a7f702410 100644
--- a/app/javascript/styles/mastodon/_mixins.scss
+++ b/app/javascript/styles/mastodon/_mixins.scss
@@ -1,5 +1,6 @@
 @use 'sass:color';
 @use 'variables' as *;
+@use 'theme_utils' as *;
 
 @mixin search-input {
   outline: 0;
@@ -7,17 +8,17 @@
   width: 100%;
   box-shadow: none;
   font-family: inherit;
-  background: var(--input-background-color);
-  color: $darker-text-color;
+  background: var(--clr-bg-secondary);
+  color: var(--clr-text-primary);
   border-radius: 4px;
-  border: 1px solid var(--background-border-color);
+  border: 1px solid var(--clr-border-on-bg-secondary);
   font-size: 17px;
   line-height: normal;
   margin: 0;
 }
 
 @mixin search-popout {
-  background: $simple-background-color;
+  background: var(--clr-bg-elevated);
   border-radius: 4px;
   padding: 10px 14px;
   padding-bottom: 14px;
diff --git a/app/javascript/styles/mastodon/_theme_utils.scss b/app/javascript/styles/mastodon/_theme_utils.scss
new file mode 100644
index 00000000000..62e0f516bb9
--- /dev/null
+++ b/app/javascript/styles/mastodon/_theme_utils.scss
@@ -0,0 +1,7 @@
+@function css-alpha($base-color, $amount) {
+  @return #{rgb(from $base-color r g b / $amount)};
+}
+
+@function css-mix($base-color, $mix-color, $amount) {
+  @return #{color-mix(in oklab, $base-color, $mix-color $amount)};
+}
diff --git a/app/javascript/styles/mastodon/_variables.scss b/app/javascript/styles/mastodon/_variables.scss
index 816a9d9998c..fa9a9961989 100644
--- a/app/javascript/styles/mastodon/_variables.scss
+++ b/app/javascript/styles/mastodon/_variables.scss
@@ -31,8 +31,6 @@ $base-shadow-color: $black !default;
 $base-overlay-background: $black !default;
 $base-border-color: $white !default;
 $simple-background-color: $white !default;
-$valid-value-color: $success-green !default;
-$error-value-color: $error-red !default;
 
 // Tell UI to use selected colors
 $ui-base-color: $classic-base-color !default; // Darkest
@@ -64,17 +62,8 @@ $ui-button-tertiary-border-color: $blurple-300 !default;
 $ui-button-tertiary-focus-background-color: $blurple-600 !default;
 $ui-button-tertiary-focus-color: $white !default;
 
-$ui-button-destructive-background-color: $red-500 !default;
-$ui-button-destructive-focus-background-color: $red-600 !default;
-
-$ui-button-icon-focus-outline: $ui-button-focus-outline !default;
-$ui-button-icon-hover-background-color: rgba(140, 141, 255, 40%) !default;
-
 // Variables for texts
-$primary-text-color: $white !default;
-$darker-text-color: $ui-primary-color !default;
 $dark-text-color: $ui-base-lighter-color !default;
-$secondary-text-color: $ui-secondary-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/about.scss b/app/javascript/styles/mastodon/about.scss
index ba0605b79e9..33011515969 100644
--- a/app/javascript/styles/mastodon/about.scss
+++ b/app/javascript/styles/mastodon/about.scss
@@ -28,7 +28,7 @@ $fluid-breakpoint: $maximum-width + 20px;
 
   li {
     position: relative;
-    border-bottom: 1px solid var(--background-border-color);
+    border-bottom: 1px solid var(--clr-border-primary);
     padding: 1em 1.75em;
     padding-inline-start: 3em;
     font-weight: 500;
@@ -85,13 +85,13 @@ $fluid-breakpoint: $maximum-width + 20px;
   }
 
   &__text {
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
   }
 
   &__hint {
     font-size: 14px;
     font-weight: 400;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
   }
 }
 
@@ -104,21 +104,21 @@ $fluid-breakpoint: $maximum-width + 20px;
   > label {
     font-size: 14px;
     font-weight: 600;
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
   }
 
   > select {
     appearance: none;
     box-sizing: border-box;
     font-size: 14px;
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
     display: block;
     width: 100%;
     outline: 0;
     font-family: inherit;
     resize: vertical;
     background: $ui-base-color;
-    border: 1px solid var(--background-border-color);
+    border: 1px solid var(--clr-border-primary);
     border-radius: 4px;
     padding-inline-start: 10px;
     padding-inline-end: 30px;
diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss
index da4b9bdaa81..c33226b4474 100644
--- a/app/javascript/styles/mastodon/accounts.scss
+++ b/app/javascript/styles/mastodon/accounts.scss
@@ -23,7 +23,7 @@
     height: 130px;
     position: relative;
     background: $ui-base-color;
-    border: 1px solid var(--background-border-color);
+    border: 1px solid var(--clr-border-primary);
     border-bottom: none;
 
     img {
@@ -45,8 +45,8 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    background: var(--background-color);
-    border: 1px solid var(--background-border-color);
+    background: var(--clr-bg-primary);
+    border: 1px solid var(--clr-border-primary);
     border-top: none;
 
     .avatar {
@@ -76,7 +76,7 @@
 
       strong {
         font-size: 15px;
-        color: $primary-text-color;
+        color: var(--clr-text-primary);
         font-weight: 500;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -85,7 +85,7 @@
       span {
         display: block;
         font-size: 14px;
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
         font-weight: 400;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -106,7 +106,7 @@
   .page,
   .gap {
     font-size: 14px;
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
     font-weight: 500;
     display: inline-block;
     padding: 6px 10px;
@@ -128,7 +128,7 @@
   .older,
   .newer {
     text-transform: uppercase;
-    color: $secondary-text-color;
+    color: var(--clr-text-primary);
   }
 
   .older {
@@ -163,7 +163,7 @@
 .nothing-here {
   background: $ui-base-color;
   box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
-  color: $darker-text-color;
+  color: var(--clr-text-secondary);
   font-size: 14px;
   font-weight: 500;
   text-align: center;
@@ -196,7 +196,7 @@
   font-size: 12px;
   line-height: 12px;
   font-weight: 500;
-  color: $ui-secondary-color;
+  color: var(--clr-text-primary);
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -206,8 +206,16 @@
 .simple_form .overridden,
 .simple_form .recommended,
 .simple_form .not_recommended {
-  background-color: color.change($ui-secondary-color, $alpha: 0.1);
-  border: 1px solid color.change($ui-secondary-color, $alpha: 0.5);
+  background-color: var(--clr-bg-secondary);
+  border: 1px solid var(--clr-border-primary);
+}
+
+.information-badge {
+  &.superapp {
+    color: var(--clr-text-success);
+    background-color: var(--clr-bg-success-subtle);
+    border-color: var(--clr-border-on-bg-success-subtle);
+  }
 }
 
 .account-role {
@@ -238,14 +246,6 @@
   }
 }
 
-.information-badge {
-  &.superapp {
-    color: $success-green;
-    background-color: color.change($success-green, $alpha: 0.1);
-    border-color: color.change($success-green, $alpha: 0.5);
-  }
-}
-
 .simple_form .not_recommended {
   color: lighten($error-red, 12%);
   background-color: rgba(lighten($error-red, 12%), 0.1);
@@ -282,13 +282,13 @@
     font-weight: 500;
     width: 120px;
     flex: 0 0 auto;
-    color: $secondary-text-color;
+    color: var(--clr-text-primary);
     background: rgba(darken($ui-base-color, 8%), 0.5);
   }
 
   dd {
     flex: 1 1 auto;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
   }
 
   a {
@@ -303,16 +303,16 @@
   }
 
   .verified {
-    border: 1px solid color.change($valid-value-color, $alpha: 0.5);
-    background: color.change($valid-value-color, $alpha: 0.25);
+    border: 1px solid var(--clr-border-on-bg-success-subtle);
+    background: var(--clr-bg-success-subtle);
 
     a {
-      color: $valid-value-color;
+      color: var(--clr-text-success);
       font-weight: 500;
     }
 
     &__mark {
-      color: $valid-value-color;
+      color: var(--clr-text-success);
     }
   }
 
@@ -327,7 +327,7 @@
 
 .pending-account {
   &__header {
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
 
     a {
       color: $ui-secondary-color;
@@ -341,7 +341,7 @@
     }
 
     strong {
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
       font-weight: 700;
     }
 
diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss
index 6a5008909db..9f532eb2f58 100644
--- a/app/javascript/styles/mastodon/admin.scss
+++ b/app/javascript/styles/mastodon/admin.scss
@@ -34,7 +34,7 @@ $content-width: 840px;
     &__inner {
       display: flex;
       justify-content: flex-end;
-      background: var(--background-color);
+      background: var(--clr-bg-primary);
       height: 100%;
     }
   }
@@ -46,7 +46,7 @@ $content-width: 840px;
 
     &__toggle {
       display: none;
-      background: var(--background-color);
+      background: var(--clr-bg-primary);
       border-bottom: 1px solid lighten($ui-base-color, 4%);
       align-items: center;
 
@@ -61,7 +61,7 @@ $content-width: 840px;
 
       &__icon {
         display: block;
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
         text-decoration: none;
         flex: 0 0 auto;
         font-size: 18px;
@@ -124,20 +124,20 @@ $content-width: 840px;
         align-items: center;
         gap: 6px;
         padding: 15px;
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
         text-decoration: none;
         transition: all 200ms linear;
         transition-property: color, background-color;
 
         &:hover {
-          color: $primary-text-color;
+          color: var(--clr-text-primary);
           transition: all 100ms linear;
           transition-property: color, background-color;
         }
       }
 
       ul {
-        background: var(--background-color);
+        background: var(--clr-bg-primary);
         margin: 0;
 
         a {
@@ -227,7 +227,7 @@ $content-width: 840px;
           align-items: center;
           padding: 7px 10px;
           border-radius: 4px;
-          color: $darker-text-color;
+          color: var(--clr-text-secondary);
           text-decoration: none;
           font-weight: 500;
           gap: 5px;
@@ -245,7 +245,7 @@ $content-width: 840px;
 
           &.selected {
             font-weight: 700;
-            color: $primary-text-color;
+            color: var(--clr-text-primary);
             background: $ui-highlight-color;
           }
         }
@@ -270,7 +270,7 @@ $content-width: 840px;
         font-size: 12px;
         display: block;
         font-weight: 500;
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
         line-height: 18px;
       }
 
@@ -281,14 +281,14 @@ $content-width: 840px;
     }
 
     h2 {
-      color: $secondary-text-color;
+      color: var(--clr-text-primary);
       font-size: 24px;
       line-height: 36px;
       font-weight: 700;
     }
 
     h3 {
-      color: $secondary-text-color;
+      color: var(--clr-text-primary);
       font-size: 20px;
       line-height: 28px;
       font-weight: 400;
@@ -299,21 +299,21 @@ $content-width: 840px;
       text-transform: uppercase;
       font-size: 13px;
       font-weight: 700;
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
       padding-top: 24px;
       margin-bottom: 8px;
-      border-top: 1px solid var(--background-border-color);
+      border-top: 1px solid var(--clr-border-primary);
     }
 
     h6 {
       font-size: 16px;
-      color: $secondary-text-color;
+      color: var(--clr-text-primary);
       line-height: 28px;
       font-weight: 500;
     }
 
     .fields-group h6 {
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
       font-weight: 500;
     }
 
@@ -325,7 +325,7 @@ $content-width: 840px;
     .directory__tag h4 {
       font-size: 18px;
       font-weight: 700;
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
       text-transform: none;
       padding-bottom: 0;
       margin-bottom: 0;
@@ -339,12 +339,12 @@ $content-width: 840px;
 
         &.private-comment {
           display: block;
-          color: $darker-text-color;
+          color: var(--clr-text-secondary);
         }
 
         &.public-comment {
           display: block;
-          color: $secondary-text-color;
+          color: var(--clr-text-primary);
         }
       }
     }
@@ -352,11 +352,11 @@ $content-width: 840px;
     & > p {
       font-size: 14px;
       line-height: 21px;
-      color: $secondary-text-color;
+      color: var(--clr-text-primary);
       margin-bottom: 20px;
 
       strong {
-        color: $primary-text-color;
+        color: var(--clr-text-primary);
         font-weight: 500;
 
         @each $lang in $cjk-langs {
@@ -371,7 +371,7 @@ $content-width: 840px;
       width: 100%;
       height: 0;
       border: 0;
-      border-bottom: 1px solid var(--background-border-color);
+      border-bottom: 1px solid var(--clr-border-primary);
       margin: 20px 0;
 
       &.spacer {
@@ -409,7 +409,7 @@ $content-width: 840px;
           inset-inline-start: 0;
           bottom: 0;
           overflow-y: auto;
-          background: var(--background-color);
+          background: var(--clr-bg-primary);
         }
       }
 
@@ -445,10 +445,10 @@ hr.spacer {
 body,
 .admin-wrapper .content {
   .muted-hint {
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
 
     a {
-      color: $highlight-text-color;
+      color: var(--clr-text-accent);
     }
   }
 
@@ -468,22 +468,22 @@ body,
   }
 
   .positive-hint {
-    color: $valid-value-color;
+    color: var(--clr-text-success);
     font-weight: 500;
   }
 
   .negative-hint {
-    color: $error-value-color;
+    color: var(--clr-text-error);
     font-weight: 500;
   }
 
   .neutral-hint {
-    color: $dark-text-color;
+    color: var(--clr-text-primary);
     font-weight: 500;
   }
 
   .warning-hint {
-    color: $gold-star;
+    color: var(--clr-text-warning);
     font-weight: 500;
   }
 }
@@ -543,7 +543,7 @@ kbd {
 
     a {
       display: inline-block;
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
       text-decoration: none;
       text-transform: uppercase;
       font-size: 12px;
@@ -551,7 +551,7 @@ kbd {
       border-bottom: 2px solid $ui-base-color;
 
       &:hover {
-        color: $primary-text-color;
+        color: var(--clr-text-primary);
         border-bottom: 2px solid lighten($ui-base-color, 5%);
       }
 
@@ -581,7 +581,7 @@ kbd {
     font-weight: 500;
     font-size: 14px;
     line-height: 18px;
-    color: $secondary-text-color;
+    color: var(--clr-text-primary);
 
     @each $lang in $cjk-langs {
       &:lang(#{$lang}) {
@@ -670,25 +670,25 @@ kbd {
   line-height: 20px;
   padding: 15px;
   padding-inline-start: 15px * 2 + 40px;
-  background: var(--background-color);
-  border-right: 1px solid var(--background-border-color);
-  border-left: 1px solid var(--background-border-color);
-  border-bottom: 1px solid var(--background-border-color);
+  background: var(--clr-bg-primary);
+  border-right: 1px solid var(--clr-border-primary);
+  border-left: 1px solid var(--clr-border-primary);
+  border-bottom: 1px solid var(--clr-border-primary);
   position: relative;
   text-decoration: none;
-  color: $darker-text-color;
+  color: var(--clr-text-secondary);
   font-size: 14px;
 
   &:first-child {
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
-    border-top: 1px solid var(--background-border-color);
+    border-top: 1px solid var(--clr-border-primary);
   }
 
   &:last-child {
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
-    border-bottom: 1px solid var(--background-border-color);
+    border-bottom: 1px solid var(--clr-border-primary);
   }
 
   &__avatar {
@@ -714,7 +714,7 @@ kbd {
   a,
   .username,
   .target {
-    color: $secondary-text-color;
+    color: var(--clr-text-primary);
     text-decoration: none;
     font-weight: 500;
   }
@@ -733,12 +733,12 @@ kbd {
   line-height: 20px;
   padding: 15px;
   padding-inline-start: 15px * 2 + 40px;
-  background: var(--background-color);
-  border: 1px solid var(--background-border-color);
+  background: var(--clr-bg-primary);
+  border: 1px solid var(--clr-border-primary);
   border-radius: 4px;
   position: relative;
   text-decoration: none;
-  color: $darker-text-color;
+  color: var(--clr-text-secondary);
   font-size: 14px;
   margin-bottom: 15px;
 
@@ -774,7 +774,7 @@ a.name-tag,
 a.inline-name-tag,
 .inline-name-tag {
   text-decoration: none;
-  color: $secondary-text-color;
+  color: var(--clr-text-primary);
 
   &:hover {
     color: $highlight-text-color;
@@ -844,7 +844,7 @@ a.name-tag,
     font-weight: 500;
 
     a {
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
     }
   }
 
@@ -859,8 +859,8 @@ a.name-tag,
 }
 
 .report-card {
-  background: var(--background-color);
-  border: 1px solid var(--background-border-color);
+  background: var(--clr-bg-primary);
+  border: 1px solid var(--clr-border-primary);
   border-radius: 4px;
   margin-bottom: 20px;
 
@@ -882,7 +882,7 @@ a.name-tag,
     &__stats {
       flex: 0 0 auto;
       font-weight: 500;
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
       text-transform: uppercase;
       text-align: end;
 
@@ -893,12 +893,12 @@ a.name-tag,
         &:focus,
         &:hover,
         &:active {
-          color: $highlight-text-color;
+          color: var(--clr-text-accent);
         }
       }
 
       .red {
-        color: $error-value-color;
+        color: var(--clr-text-error);
       }
     }
   }
@@ -907,7 +907,7 @@ a.name-tag,
     &__item {
       display: flex;
       justify-content: flex-start;
-      border-top: 1px solid var(--background-border-color);
+      border-top: 1px solid var(--clr-border-primary);
 
       &__reported-by,
       &__assigned {
@@ -915,7 +915,7 @@ a.name-tag,
         flex: 0 0 auto;
         box-sizing: border-box;
         width: 150px;
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
 
         &,
         .username {
@@ -941,10 +941,10 @@ a.name-tag,
         width: 100%;
         padding: 15px;
         text-decoration: none;
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
 
         &:hover {
-          color: $highlight-text-color;
+          color: var(--clr-text-accent);
         }
       }
     }
@@ -981,15 +981,15 @@ a.name-tag,
 
   .account__header__fields,
   .account__header__content {
-    background: var(--background-color);
-    border: 1px solid var(--background-border-color);
+    background: var(--clr-bg-primary);
+    border: 1px solid var(--clr-border-primary);
     border-radius: 4px;
     height: 100%;
   }
 
   .account__header__fields {
     margin: 0;
-    border: 1px solid var(--background-border-color);
+    border: 1px solid var(--clr-border-primary);
 
     a {
       color: $highlight-text-color;
@@ -1000,14 +1000,14 @@ a.name-tag,
     }
 
     .verified a {
-      color: $valid-value-color;
+      color: var(--clr-text-success);
     }
   }
 
   .account__header__content {
     box-sizing: border-box;
     padding: 20px;
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
   }
 }
 
@@ -1018,8 +1018,8 @@ a.name-tag,
 .applications-list__item,
 .filters-list__item {
   padding: 15px 0;
-  background: var(--background-color);
-  border: 1px solid var(--background-border-color);
+  background: var(--clr-bg-primary);
+  border: 1px solid var(--clr-border-primary);
   border-radius: 4px;
   margin-top: 15px;
 }
@@ -1036,13 +1036,13 @@ a.name-tag,
 
 .announcements-list,
 .filters-list {
-  border: 1px solid var(--background-border-color);
+  border: 1px solid var(--clr-border-primary);
   border-radius: 4px;
   border-bottom: none;
 
   &__item {
     padding: 15px 0;
-    border-bottom: 1px solid var(--background-border-color);
+    border-bottom: 1px solid var(--clr-border-primary);
 
     &__title {
       padding: 0 15px;
@@ -1050,7 +1050,7 @@ a.name-tag,
       font-weight: 500;
       font-size: 18px;
       line-height: 1.5;
-      color: $secondary-text-color;
+      color: var(--clr-text-primary);
       text-decoration: none;
       margin-bottom: 10px;
 
@@ -1071,7 +1071,7 @@ a.name-tag,
       &:hover,
       &:focus,
       &:active {
-        color: $primary-text-color;
+        color: var(--clr-text-primary);
       }
     }
 
@@ -1167,7 +1167,7 @@ a.name-tag,
 
   &__table {
     &__number {
-      color: var(--background-color);
+      color: var(--clr-bg-primary);
       padding: 10px;
     }
 
@@ -1189,23 +1189,26 @@ a.name-tag,
 
     &__label {
       font-weight: 700;
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
     }
 
     &__box {
       box-sizing: border-box;
-      background: var(--background-color);
-      padding: 10px;
-      font-weight: 500;
-      color: $primary-text-color;
       width: 52px;
       margin: 1px;
+      padding: 10px;
+      font-weight: 500;
+      color: var(--clr-text-primary);
+      background: var(--clr-bg-primary);
 
       @for $i from 0 through 10 {
         &--#{10 * $i} {
-          background-color: rgba(
-            $ui-highlight-color,
-            1 * (math.div(max(1, $i), 10))
+          @if $i > 5 {
+            color: var(--clr-text-on-accent-strong);
+          }
+
+          background-color: rgb(
+            from var(--clr-bg-accent-strong) r g b / #{math.div(max(1, $i), 10)}
           );
         }
       }
@@ -1216,9 +1219,9 @@ a.name-tag,
 .sparkline {
   display: block;
   text-decoration: none;
-  background: var(--background-color);
+  background: var(--clr-bg-primary);
   border-radius: 4px;
-  border: 1px solid var(--background-border-color);
+  border: 1px solid var(--clr-border-primary);
   padding: 0;
   position: relative;
   padding-bottom: 55px + 20px;
@@ -1236,22 +1239,22 @@ a.name-tag,
       margin-inline-end: 10px;
       font-weight: 500;
       font-size: 28px;
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
     }
 
     &__change {
       display: block;
       font-weight: 500;
       font-size: 18px;
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
       margin-bottom: -3px;
 
       &.positive {
-        color: $valid-value-color;
+        color: var(--clr-text-success);
       }
 
       &.negative {
-        color: $error-value-color;
+        color: var(--clr-text-error);
       }
     }
   }
@@ -1260,7 +1263,7 @@ a.name-tag,
     padding: 0 20px;
     padding-bottom: 10px;
     text-transform: uppercase;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     font-weight: 500;
   }
 
@@ -1275,12 +1278,12 @@ a.name-tag,
     }
 
     path:first-child {
-      fill: color.change($highlight-text-color, $alpha: 0.25) !important;
+      fill: var(--clr-bg-accent-subtle) !important;
       fill-opacity: 1 !important;
     }
 
     path:last-child {
-      stroke: lighten($highlight-text-color, 6%) !important;
+      stroke: var(--clr-text-accent) !important;
       fill: none !important;
     }
   }
@@ -1290,17 +1293,17 @@ a.sparkline {
   &:hover,
   &:focus,
   &:active {
-    background: $ui-base-color;
+    background: var(--clr-bg-accent-subtle);
   }
 }
 
 .skeleton {
-  background-color: var(--background-color);
+  background-color: var(--clr-bg-primary);
   background-image: linear-gradient(
     90deg,
-    lighten($ui-base-color, 8%),
-    lighten($ui-base-color, 12%),
-    lighten($ui-base-color, 8%)
+    var(--clr-bg-primary),
+    var(--clr-bg-secondary),
+    var(--clr-bg-primary)
   );
   background-size: 200px 100%;
   background-repeat: no-repeat;
@@ -1327,7 +1330,7 @@ a.sparkline {
   }
 
   &__item {
-    border-bottom: 1px solid lighten($ui-base-color, 4%);
+    border-bottom: 1px solid var(--clr-border-primary);
 
     &__key {
       font-weight: 500;
@@ -1336,7 +1339,7 @@ a.sparkline {
 
     &__value {
       text-align: end;
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
       padding: 11px 10px;
     }
 
@@ -1345,14 +1348,13 @@ a.sparkline {
       width: 8px;
       height: 8px;
       border-radius: 50%;
-      background: $ui-highlight-color;
+      background: var(--clr-text-accent);
       margin-inline-end: 10px;
 
       @for $i from 0 through 10 {
         &--#{10 * $i} {
-          background-color: rgba(
-            $ui-highlight-color,
-            1 * (math.div(max(1, $i), 10))
+          background-color: rgb(
+            from var(--clr-text-accent) r g b / #{math.div(max(1, $i), 10)}
           );
         }
       }
@@ -1363,11 +1365,11 @@ a.sparkline {
     }
 
     &.negative {
-      color: $error-value-color;
+      color: var(--clr-text-error);
       font-weight: 700;
 
       .dimension__item__value {
-        color: $error-value-color;
+        color: var(--clr-text-error);
       }
     }
   }
@@ -1375,12 +1377,12 @@ a.sparkline {
 
 .report-reason-selector {
   border-radius: 4px;
-  background: var(--background-color);
+  background: var(--clr-bg-primary);
   margin-bottom: 20px;
 
   &__category {
     cursor: pointer;
-    border-bottom: 1px solid darken($ui-base-color, 8%);
+    border-bottom: 1px solid var(--clr-border-primary);
 
     &__label {
       padding: 15px;
@@ -1410,7 +1412,7 @@ a.sparkline {
 
   &__details {
     &__item {
-      border-bottom: 1px solid var(--background-border-color);
+      border-bottom: 1px solid var(--clr-border-primary);
       padding: 15px 0;
 
       &:last-child {
@@ -1441,7 +1443,7 @@ a.sparkline {
 
 .account-card {
   border-radius: 4px;
-  border: 1px solid var(--background-border-color);
+  border: 1px solid var(--clr-border-primary);
   position: relative;
 
   &__warning-badge {
@@ -1453,7 +1455,7 @@ a.sparkline {
     background:
       url('@/images/warning-stripes.svg') repeat-y left,
       url('@/images/warning-stripes.svg') repeat-y right,
-      var(--background-color);
+      var(--clr-bg-primary);
   }
 
   &__permalink {
@@ -1472,7 +1474,7 @@ a.sparkline {
       width: 100%;
       height: 100%;
       object-fit: cover;
-      background: darken($ui-base-color, 8%);
+      background: var(--clr-bg-secondary);
     }
   }
 
@@ -1490,21 +1492,21 @@ a.sparkline {
         margin: 0;
         width: 56px;
         height: 56px;
-        background-color: darken($ui-base-color, 8%);
+        background-color: var(--clr-bg-secondary);
         border-radius: 8px;
-        border: 1px solid $ui-base-color;
+        border: 1px solid var(--clr-border-media);
       }
     }
 
     .display-name {
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
       padding-bottom: 15px;
       font-size: 15px;
       line-height: 20px;
 
       bdi {
         display: block;
-        color: $primary-text-color;
+        color: var(--clr-text-primary);
         font-weight: 700;
       }
     }
@@ -1533,7 +1535,7 @@ a.sparkline {
     }
 
     a {
-      color: $secondary-text-color;
+      color: var(--clr-text-primary);
       text-decoration: none;
       unicode-bidi: isolate;
 
@@ -1584,14 +1586,14 @@ a.sparkline {
     &__item {
       padding: 15px 0;
       text-align: center;
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
       font-weight: 600;
       font-size: 15px;
       line-height: 21px;
 
       small {
         display: block;
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
         font-weight: 400;
         font-size: 13px;
         line-height: 18px;
@@ -1604,11 +1606,11 @@ a.sparkline {
   margin-bottom: 20px;
 
   &__item {
-    background: var(--background-color);
+    background: var(--clr-bg-primary);
     position: relative;
     padding: 15px;
     padding-inline-start: 15px * 2 + 40px;
-    border: 1px solid var(--background-border-color);
+    border: 1px solid var(--clr-border-primary);
 
     &:first-child {
       border-top-left-radius: 4px;
@@ -1630,13 +1632,13 @@ a.sparkline {
     }
 
     &__header {
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
       font-size: 15px;
       line-height: 20px;
       margin-bottom: 4px;
 
       .username {
-        color: $primary-text-color;
+        color: var(--clr-text-primary);
         font-weight: 500;
         margin-inline-end: 5px;
 
@@ -1653,7 +1655,7 @@ a.sparkline {
       }
 
       a.timestamp {
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
         text-decoration: none;
 
         &:hover,
@@ -1674,7 +1676,7 @@ a.sparkline {
       line-height: 20px;
       overflow-wrap: break-word;
       font-weight: 400;
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
 
       p {
         margin-bottom: 20px;
@@ -1776,10 +1778,10 @@ a.sparkline {
   line-height: 20px;
   overflow-wrap: break-word;
   font-weight: 400;
-  color: $primary-text-color;
+  color: var(--clr-text-primary);
   box-sizing: border-box;
   min-height: 100%;
-  border: 1px solid var(--background-border-color);
+  border: 1px solid var(--clr-border-primary);
   border-radius: 4px;
 
   a {
@@ -1808,34 +1810,34 @@ a.sparkline {
     list-style: disc;
     padding-inline-start: 15px;
     margin-bottom: 20px;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
 
     &:last-child {
       margin-bottom: 0;
     }
 
     &__text {
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
     }
   }
 
   &__statuses-list {
     border-radius: 4px;
-    border: 1px solid var(--background-border-color);
+    border: 1px solid var(--clr-border-primary);
     font-size: 13px;
     line-height: 18px;
     overflow: hidden;
 
     &__item {
       padding: 16px;
-      border-bottom: 1px solid var(--background-border-color);
+      border-bottom: 1px solid var(--clr-border-primary);
 
       &:last-child {
         border-bottom: 0;
       }
 
       &__meta {
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
       }
 
       a {
@@ -1872,16 +1874,16 @@ a.sparkline {
       flex: 0 0 auto;
       width: 4px;
       height: 21px;
-      background: lighten($ui-base-color, 8%);
+      background: var(--clr-bg-secondary);
       margin: 0 2px;
       border-radius: 2px;
 
       &.positive {
-        background: $valid-value-color;
+        background: var(--clr-bg-success-strong);
       }
 
       &.negative {
-        background: $error-value-color;
+        background: var(--clr-bg-error-strong);
       }
     }
   }
@@ -1938,7 +1940,7 @@ a.sparkline {
   &__entry {
     h5 {
       font-weight: 500;
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
       line-height: 25px;
       margin-bottom: 16px;
     }
@@ -1959,7 +1961,7 @@ a.sparkline {
   overflow-wrap: break-word;
   font-weight: 400;
   border: 1px solid lighten($ui-base-color, 4%);
-  color: $primary-text-color;
+  color: var(--clr-text-primary);
   box-sizing: border-box;
   min-height: 100%;
 
@@ -2103,23 +2105,23 @@ a.sparkline {
 .admin {
   &__terms-of-service {
     &__container {
-      background: var(--surface-background-color);
+      background: var(--clr-bg-tertiary);
       border-radius: 8px;
-      border: 1px solid var(--background-border-color);
+      border: 1px solid var(--clr-border-primary);
       overflow: hidden;
 
       &__header {
         padding: 16px;
         font-size: 14px;
         line-height: 20px;
-        color: $secondary-text-color;
+        color: var(--clr-text-primary);
         display: flex;
         align-items: center;
         gap: 12px;
       }
 
       &__body {
-        background: var(--background-color);
+        background: var(--clr-bg-primary);
         padding: 16px;
         overflow-y: scroll;
         height: 30vh;
@@ -2128,7 +2130,7 @@ a.sparkline {
 
     &__history {
       & > li {
-        border-bottom: 1px solid var(--background-border-color);
+        border-bottom: 1px solid var(--clr-border-primary);
 
         &:last-child {
           border-bottom: 0;
@@ -2170,10 +2172,10 @@ a.sparkline {
   }
 
   &.success {
-    color: $valid-value-color;
+    color: var(--clr-text-success);
 
     .dot-indicator__indicator {
-      background-color: $valid-value-color;
+      background-color: var(--clr-bg-success-strong);
     }
   }
 }
diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss
index 3d8bba7c00c..16eea3c72d1 100644
--- a/app/javascript/styles/mastodon/basics.scss
+++ b/app/javascript/styles/mastodon/basics.scss
@@ -1,5 +1,6 @@
 @use 'variables' as *;
 @use 'functions' as *;
+@use 'theme_utils' as *;
 
 html.has-modal {
   &,
@@ -17,11 +18,11 @@ html.has-modal {
 
 body {
   font-family: $font-sans-serif, sans-serif;
-  background: var(--background-color);
+  background: var(--clr-bg-ambient);
   font-size: 13px;
   line-height: 18px;
   font-weight: 400;
-  color: $primary-text-color;
+  color: var(--clr-text-primary);
   text-rendering: optimizelegibility;
 
   // Disable kerning for Japanese text to preserve monospaced alignment for readability
@@ -228,7 +229,7 @@ button {
   }
 
   a {
-    color: $highlight-text-color;
+    color: var(--clr-text-accent);
 
     &:hover,
     &:focus,
@@ -238,11 +239,11 @@ button {
   }
 
   &__footer {
-    color: $dark-text-color;
+    color: var(--clr-text-secondary);
     font-size: 13px;
 
     a {
-      color: $dark-text-color;
+      color: var(--clr-text-secondary);
     }
   }
 
@@ -250,7 +251,7 @@ button {
     display: inline;
     border: 0;
     background: transparent;
-    color: $dark-text-color;
+    color: var(--clr-text-secondary);
     font: inherit;
     padding: 0;
     margin: 0;
@@ -267,7 +268,7 @@ button {
     }
 
     &.copied {
-      color: $valid-value-color;
+      color: var(--mas-status-success-color);
       transition: none;
     }
   }
diff --git a/app/javascript/styles/mastodon/branding.scss b/app/javascript/styles/mastodon/branding.scss
index 8e8dd3530bc..db00ed473b1 100644
--- a/app/javascript/styles/mastodon/branding.scss
+++ b/app/javascript/styles/mastodon/branding.scss
@@ -1,5 +1,5 @@
 @use 'variables' as *;
 
 .logo {
-  color: $primary-text-color;
+  color: var(--clr-text-primary);
 }
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index bd09f3b8b06..5b6cdaf9c84 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -17,7 +17,7 @@
 }
 
 .inline-alert {
-  color: $valid-value-color;
+  color: var(--clr-text-success);
   font-weight: 400;
 
   .no-reduce-motion & {
@@ -29,7 +29,7 @@
   display: block;
   font-size: 15px;
   line-height: 20px;
-  color: $highlight-text-color;
+  color: var(--clr-text-accent);
   border: 0;
   background: transparent;
   padding: 0;
@@ -37,7 +37,7 @@
   text-decoration: none;
 
   &--destructive {
-    color: $error-value-color;
+    color: var(--clr-text-error);
   }
 
   &:hover,
@@ -46,12 +46,12 @@
   }
 
   &:disabled {
-    color: $ui-primary-color;
+    color: var(--clr-text-primary);
     cursor: default;
   }
 
   &:focus-visible {
-    outline: $ui-button-icon-focus-outline;
+    outline: var(--outline-focus-default);
   }
 }
 
@@ -74,7 +74,7 @@
   }
 
   &:focus-visible {
-    outline: $ui-button-icon-focus-outline;
+    outline: var(--outline-focus-default);
   }
 
   .icon {
@@ -84,11 +84,11 @@
 }
 
 .button {
-  background-color: $ui-button-background-color;
+  background-color: var(--clr-bg-accent-strong);
   border: 10px none;
   border-radius: 4px;
   box-sizing: border-box;
-  color: $ui-button-color;
+  color: var(--clr-text-on-accent-strong);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
@@ -111,11 +111,12 @@
   &:active,
   &:focus,
   &:hover {
-    background-color: $ui-button-focus-background-color;
+    background-color: var(--clr-bg-accent-strong-highlighted);
   }
 
   &:focus-visible {
-    outline: $ui-button-icon-focus-outline;
+    outline: 2px solid var(--clr-bg-accent-strong);
+    outline-offset: 2px;
   }
 
   &--compact {
@@ -127,13 +128,17 @@
   }
 
   &--dangerous {
-    background-color: var(--error-background-color);
-    color: var(--on-error-color);
+    background-color: var(--clr-bg-error-strong);
+    color: var(--clr-text-on-error-strong);
 
     &:active,
     &:focus,
     &:hover {
-      background-color: var(--error-active-background-color);
+      background-color: color-mix(
+        in oklab,
+        var(--clr-bg-error-strong),
+        black var(--clr-bg-error-subtle-strength)
+      );
       transition: none;
     }
   }
@@ -142,14 +147,16 @@
     &:active,
     &:focus,
     &:hover {
-      background-color: $ui-button-destructive-focus-background-color;
+      color: var(--clr-text-on-error-strong);
+      background-color: var(--clr-bg-error-strong);
       transition: none;
     }
   }
 
   &:disabled,
   &.disabled {
-    background-color: $ui-button-disabled-color;
+    color: var(--clr-text-on-disabled);
+    background-color: var(--clr-bg-disabled);
     cursor: not-allowed;
   }
 
@@ -158,21 +165,22 @@
   }
 
   &.copied {
-    background: $valid-value-color;
+    color: var(--clr-text-on-success-strong);
+    background-color: var(--clr-bg-success-strong);
     transition: none;
   }
 
   &.button-secondary {
-    color: $highlight-text-color;
+    color: var(--clr-text-accent);
     background: transparent;
     padding: 6px 17px;
-    border: 1px solid $highlight-text-color;
+    border: 1px solid var(--clr-text-accent);
 
     &:active,
     &:focus,
     &:hover {
-      border-color: lighten($highlight-text-color, 4%);
-      color: lighten($highlight-text-color, 4%);
+      border-color: var(--clr-text-accent);
+      color: var(--clr-text-accent);
       background-color: transparent;
       text-decoration: none;
     }
@@ -181,22 +189,21 @@
       &:active,
       &:focus,
       &:hover {
-        border-color: $ui-button-destructive-focus-background-color;
-        color: $ui-button-destructive-focus-background-color;
+        border-color: var(--clr-text-error);
+        color: var(--clr-text-error);
       }
     }
 
     &:disabled,
     &.disabled {
-      opacity: 0.7;
-      border-color: $ui-button-disabled-color;
-      color: $ui-button-disabled-color;
+      border-color: var(--clr-text-disabled);
+      color: var(--clr-text-disabled);
 
       &:active,
       &:focus,
       &:hover {
-        border-color: $ui-button-disabled-color;
-        color: $ui-button-disabled-color;
+        border-color: var(--clr-text-disabled);
+        color: var(--clr-text-disabled);
       }
     }
   }
@@ -256,26 +263,26 @@
     }
 
     &.button--confirmation {
-      color: $valid-value-color;
-      border-color: $valid-value-color;
+      color: var(--clr-text-success);
+      border-color: var(--clr-text-success);
 
       &:active,
       &:focus,
       &:hover {
-        background: $valid-value-color;
-        color: $primary-text-color;
+        background: var(--clr-bg-primary);
+        color: var(--clr-text-primary);
       }
     }
 
     &.button--destructive {
-      color: $error-value-color;
-      border-color: $error-value-color;
+      color: var(--clr-text-error);
+      border-color: var(--clr-text-error);
 
       &:active,
       &:focus,
       &:hover {
-        background: $error-value-color;
-        color: $primary-text-color;
+        background: var(--clr-bg-success-strong);
+        color: var(--clr-text-on-success-strong);
       }
     }
   }
@@ -323,12 +330,17 @@
 }
 
 .icon-button {
+  --default-icon-color: var(--clr-text-secondary);
+  --default-bg-color: transparent;
+  --hover-icon-color: var(--clr-text-primary);
+  --hover-bg-color: var(--clr-bg-secondary);
+
   display: inline-flex;
-  color: $action-button-color;
+  color: var(--default-icon-color);
   border: 0;
   padding: 0;
   border-radius: 4px;
-  background: transparent;
+  background: var(--default-bg-color);
   cursor: pointer;
   align-items: center;
   justify-content: center;
@@ -345,66 +357,41 @@
   &:hover,
   &:active,
   &:focus-visible {
-    color: lighten($action-button-color, 7%);
-    background-color: color.change($action-button-color, $alpha: 0.15);
+    color: var(--hover-icon-color);
+    background-color: var(--hover-bg-color);
   }
 
   &:focus-visible {
-    outline: $ui-button-icon-focus-outline;
+    outline: var(--clr-text-accent);
   }
 
   &.disabled {
-    color: darken($action-button-color, 13%);
-    background-color: transparent;
+    color: var(--clr-text-disabled);
+    background-color: var(--default-bg-color);
     cursor: default;
   }
 
   &.inverted {
-    color: $lighter-text-color;
-
-    &:hover,
-    &:active,
-    &:focus-visible {
-      color: darken($lighter-text-color, 7%);
-      background-color: color.change($lighter-text-color, $alpha: 0.15);
-    }
-
-    &:focus-visible {
-      outline: $ui-button-icon-focus-outline;
-    }
-
-    &.disabled {
-      color: lighten($lighter-text-color, 7%);
-      background-color: transparent;
-    }
+    --default-icon-color: var(--clr-text-primary);
+    --hover-icon-color: var(--clr-text-secondary);
   }
 
   &.active {
-    color: $highlight-text-color;
-
-    &:hover,
-    &:active,
-    &:focus-visible {
-      color: $highlight-text-color;
-      background-color: transparent;
-    }
-
-    &.disabled {
-      color: lighten($highlight-text-color, 13%);
-    }
+    --default-icon-color: var(--clr-text-accent);
+    --hover-icon-color: var(--clr-text-accent);
+    --hover-bg-color: transparent;
   }
 
   &.overlayed {
+    --default-icon-color: color.change($white, $alpha: 0.7);
+    --default-bg-color: color.change($black, $alpha: 0.65);
+    --hover-icon-color: var(--clr-text-accent);
+    --hover-bg-color: color.change($black, $alpha: 0.9);
+
     box-sizing: content-box;
-    background: color.change($black, $alpha: 0.65);
     backdrop-filter: $backdrop-blur-filter;
-    color: color.change($white, $alpha: 0.7);
     border-radius: 4px;
     padding: 2px;
-
-    &:hover {
-      background: color.change($black, $alpha: 0.9);
-    }
   }
 
   &--with-counter {
@@ -423,10 +410,10 @@
   }
 
   &.copied {
-    border-color: $valid-value-color;
-    color: $valid-value-color;
+    color: var(--clr-text-success);
     transition: none;
-    background-color: color.change($valid-value-color, $alpha: 0.15);
+    background-color: var(--clr-bg-success-subtle);
+    border-color: var(--clr-border-on-bg-accent-subtle);
   }
 }
 
@@ -450,7 +437,7 @@
   }
 
   &:focus-visible {
-    outline: $ui-button-icon-focus-outline;
+    outline: var(--outline-focus-default);
   }
 
   &.disabled {
@@ -514,10 +501,10 @@
 
   &__suggestions {
     box-shadow: var(--dropdown-shadow);
-    background: var(--input-background-color);
-    border: 1px solid var(--background-border-color);
+    background: var(--clr-bg-elevated);
+    border: 1px solid var(--clr-border-primary);
     border-radius: 0 0 4px 4px;
-    color: var(--on-input-color);
+    color: var(--clr-text-primary);
     font-size: 14px;
     padding: 0;
 
@@ -530,7 +517,7 @@
       font-size: 14px;
       line-height: 20px;
       letter-spacing: 0.25px;
-      color: var(--on-input-color);
+      color: var(--clr-text-primary);
 
       &:last-child {
         border-radius: 0 0 4px 4px;
@@ -539,7 +526,7 @@
       &:hover,
       &:focus,
       &:active {
-        background: var(--dropdown-border-color);
+        background: var(--clr-bg-secondary);
 
         .autosuggest-account .display-name__account {
           color: inherit;
@@ -639,14 +626,14 @@
     flex-direction: column;
     flex: 0 1 auto;
     border-radius: 4px;
-    border: 1px solid var(--background-border-color);
+    border: 1px solid var(--clr-border-on-bg-secondary);
     transition: border-color 300ms linear;
     position: relative;
-    background: var(--input-background-color);
+    background: var(--clr-bg-secondary);
 
     &.active {
       transition: none;
-      border-color: $ui-highlight-color;
+      border-color: var(--clr-text-accent);
     }
   }
 
@@ -695,7 +682,7 @@
 
     .autosuggest-input {
       flex: 1 1 auto;
-      border: 1px solid var(--background-border-color);
+      border: 1px solid var(--clr-border-primary);
       border-width: 1px 0;
     }
   }
@@ -706,8 +693,10 @@
     box-sizing: border-box;
     width: 100%;
     margin: 0;
-    color: $secondary-text-color;
-    background: var(--input-background-color);
+    color: var(--clr-text-primary);
+
+    // background: var(--clr-bg-secondary);
+    background: transparent;
     font-family: inherit;
     font-size: 14px;
     padding: 12px;
@@ -880,22 +869,21 @@
 
     .icon-button {
       box-sizing: content-box;
-      color: $highlight-text-color;
+      color: var(--clr-text-accent);
 
       &:hover,
       &:focus,
       &:active {
-        color: $highlight-text-color;
+        color: var(--clr-text-accent);
       }
 
       &.disabled {
-        color: $highlight-text-color;
-        opacity: 0.5;
+        color: var(--clr-text-disabled);
       }
 
       &.active {
-        background: $ui-highlight-color;
-        color: $primary-text-color;
+        background: var(--clr-bg-accent-strong);
+        color: var(--clr-text-on-accent-strong);
       }
     }
   }
@@ -919,7 +907,7 @@
     .poll__input {
       width: 17px;
       height: 17px;
-      border-color: $darker-text-color;
+      border-color: var(--clr-text-secondary);
     }
 
     &__footer {
@@ -950,7 +938,7 @@
         font-weight: 500;
         line-height: 16px;
         letter-spacing: 0.5px;
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
@@ -966,8 +954,8 @@
         font-weight: 500;
         line-height: 20px;
         letter-spacing: 0.1px;
-        color: $highlight-text-color;
-        background-color: var(--input-background-color);
+        color: var(--clr-text-accent);
+        background-color: var(--clr-bg-secondary-solid);
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
@@ -978,7 +966,6 @@
   .status__quote {
     margin: 0 8px;
     max-height: 220px;
-    overflow: hidden;
 
     // Override .status__content .status__content__text.status__content__text--visible
     .status__content__text.status__content__text {
@@ -998,10 +985,10 @@
   display: flex;
   align-items: center;
   gap: 4px;
+  color: var(--clr-text-accent);
   background: transparent;
-  color: $highlight-text-color;
+  border: 1px solid var(--clr-text-accent);
   border-radius: 6px;
-  border: 1px solid $highlight-text-color;
   padding: 4px 8px;
   font-size: 13px;
   line-height: normal;
@@ -1012,9 +999,8 @@
 
   &[disabled] {
     cursor: default;
-    color: $highlight-text-color;
-    border-color: $highlight-text-color;
-    opacity: 0.5;
+    color: var(--clr-text-disabled);
+    border-color: var(--clr-text-disabled);
   }
 
   .icon {
@@ -1031,18 +1017,19 @@
   }
 
   &.active {
-    background: $ui-highlight-color;
-    border-color: $ui-highlight-color;
-    color: $primary-text-color;
+    color: var(--clr-text-on-accent-strong);
+    border-color: var(--clr-bg-accent-strong);
+    background: var(--clr-bg-accent-strong);
   }
 
   &.warning {
-    border-color: var(--goldenrod-2);
-    color: var(--goldenrod-2);
+    color: var(--clr-text-warning);
+    border-color: var(--clr-text-warning);
 
     &.active {
-      background-color: var(--goldenrod-2);
-      color: var(--indigo-1);
+      color: var(--clr-text-on-warning-strong);
+      border-color: var(--clr-bg-warning-strong);
+      background-color: var(--clr-bg-warning-strong);
     }
   }
 }
@@ -1053,7 +1040,7 @@
   font-size: 14px;
   font-weight: 400;
   line-height: normal;
-  color: $darker-text-color;
+  color: var(--clr-text-secondary);
   flex: 1 0 auto;
   text-align: end;
 
@@ -1074,7 +1061,7 @@
   p {
     font-size: 15px;
     line-height: 22px;
-    color: $secondary-text-color;
+    color: var(--clr-text-primary);
     margin-bottom: 20px;
 
     strong {
@@ -1082,7 +1069,7 @@
     }
 
     a {
-      color: $secondary-text-color;
+      color: var(--clr-text-primary);
       text-decoration: none;
       unicode-bidi: isolate;
 
@@ -1129,7 +1116,7 @@
   font-size: 15px;
   line-height: 22px;
   padding-top: 2px;
-  color: $primary-text-color;
+  color: var(--clr-text-primary);
 
   &:focus {
     outline: 0;
@@ -1160,7 +1147,12 @@
   }
 
   a {
-    color: $secondary-text-color;
+    color: var(--clr-text-secondary);
+    color: color-mix(
+      in oklab,
+      var(--clr-text-primary),
+      var(--clr-text-secondary)
+    );
     text-decoration: none;
     unicode-bidi: isolate;
 
@@ -1253,12 +1245,12 @@
     padding: 0;
     max-height: 4 * 20px;
     overflow: hidden;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
   }
 
   &__attachments {
     margin-top: 4px;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     font-size: 12px;
     line-height: 16px;
     display: flex;
@@ -1287,7 +1279,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     font-size: 12px;
     line-height: 16px;
     overflow: hidden;
@@ -1320,7 +1312,7 @@
   }
 
   &__content {
-    color: $secondary-text-color;
+    color: var(--clr-text-primary);
     font-size: 14px;
     line-height: 20px;
     letter-spacing: 0.25px;
@@ -1338,7 +1330,7 @@
   }
 
   &__attachments {
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     font-size: 12px;
     line-height: 16px;
     opacity: 0.75;
@@ -1382,7 +1374,7 @@
   }
 
   a {
-    color: $secondary-text-color;
+    color: var(--clr-text-primary);
     text-decoration: none;
 
     &:hover {
@@ -1461,7 +1453,7 @@
   box-sizing: border-box;
   width: 100%;
   clear: both;
-  border-bottom: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--clr-border-primary);
 
   &__button {
     display: inline;
@@ -1490,7 +1482,7 @@
 .status {
   padding: 16px;
   min-height: 54px;
-  border-bottom: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--clr-border-primary);
   cursor: auto;
   opacity: 1;
   animation: fade 150ms linear;
@@ -1561,7 +1553,7 @@
   }
 
   &--first-in-thread {
-    border-top: 1px solid var(--background-border-color);
+    border-top: 1px solid var(--clr-border-primary);
   }
 
   &__line {
@@ -1616,7 +1608,7 @@
   height: 40px;
   order: 2;
   flex: 0 0 auto;
-  color: $dark-text-color;
+  color: var(--clr-text-secondary);
 }
 
 .notification__relative_time {
@@ -1637,7 +1629,11 @@
 }
 
 .status__display-name {
-  color: $dark-text-color;
+  color: var(--clr-text-secondary);
+}
+
+.status__action-bar__button:not(.active) {
+  color: var(--clr-text-secondary);
 }
 
 .status__info .status__display-name {
@@ -1724,7 +1720,7 @@
   font-size: 15px;
   line-height: 22px;
   font-weight: 500;
-  color: $dark-text-color;
+  color: var(--clr-text-secondary);
 
   &__icon {
     display: flex;
@@ -1750,22 +1746,22 @@
   }
 }
 
-.status__wrapper-direct,
-.notification-ungrouped--direct,
-.notification-group--direct,
-.notification-group--annual-report {
-  background: color.change($ui-highlight-color, $alpha: 0.05);
+// .status__wrapper-direct,
+// .notification-ungrouped--direct,
+// .notification-group--direct,
+// .notification-group--annual-report {
+//   background: color.change($ui-highlight-color, $alpha: 0.05);
 
-  &:focus {
-    background: color.change($ui-highlight-color, $alpha: 0.1);
-  }
-}
+//   &:focus {
+//     background: color.change($ui-highlight-color, $alpha: 0.1);
+//   }
+// }
 
 .status__wrapper-direct,
 .notification-ungrouped--direct {
   .status__prepend,
   .notification-ungrouped__header {
-    color: $highlight-text-color;
+    color: var(--clr-text-accent);
   }
 }
 
@@ -1787,7 +1783,7 @@
 
 .detailed-status {
   padding: 16px;
-  border-top: 1px solid var(--background-border-color);
+  border-top: 1px solid var(--clr-border-primary);
 
   .status__content {
     font-size: 19px;
@@ -1854,7 +1850,7 @@
   line-height: 18px;
 
   &__line {
-    border-bottom: 1px solid var(--background-border-color);
+    border-bottom: 1px solid var(--clr-border-primary);
     padding: 8px 0;
     display: flex;
     align-items: center;
@@ -1876,14 +1872,14 @@
   }
 
   .animated-number {
-    color: $secondary-text-color;
+    color: var(--clr-text-primary);
     font-weight: 500;
   }
 }
 
 .detailed-status__action-bar {
-  border-top: 1px solid var(--background-border-color);
-  border-bottom: 1px solid var(--background-border-color);
+  border-top: 1px solid var(--clr-border-primary);
+  border-bottom: 1px solid var(--clr-border-primary);
   display: flex;
   flex-direction: row;
   padding: 10px 0;
@@ -1926,11 +1922,12 @@
   --quote-margin: var(--status-gutter-width);
 
   position: relative;
+  overflow: hidden;
   margin-block-start: 16px;
   margin-inline-start: calc(var(--quote-margin) + var(--thread-margin, 0px));
   border-radius: 12px;
-  color: var(--nested-card-text);
-  border: 1px solid var(--surface-border-color);
+  color: var(--clr-text-primary);
+  border: 1px solid var(--clr-border-primary);
 }
 
 .status__quote--error {
@@ -1964,8 +1961,8 @@
   font-weight: 400;
   line-height: 20px;
   letter-spacing: 0.25px;
-  color: $darker-text-color;
-  background: var(--surface-variant-background-color);
+  color: var(--clr-text-secondary);
+  background: var(--clr-bg-accent-subtle);
   border-radius: 8px;
   cursor: default;
 }
@@ -2029,14 +2026,14 @@
 
 .domain {
   padding: 16px;
-  border-bottom: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--clr-border-primary);
   display: flex;
   align-items: center;
   gap: 8px;
 
   &__domain-name {
     flex: 1 1 auto;
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
     font-size: 15px;
     line-height: 21px;
     font-weight: 500;
@@ -2045,14 +2042,14 @@
 
 .account {
   padding: 16px;
-  border-bottom: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--clr-border-primary);
 
   .account__display-name {
     flex: 1 1 auto;
     display: flex;
     align-items: center;
     gap: 10px;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     overflow: hidden;
     text-decoration: none;
     font-size: 14px;
@@ -2063,6 +2060,7 @@
 
     .display-name strong {
       display: inline;
+      color: var(--clr-text-primary);
     }
   }
 
@@ -2102,9 +2100,9 @@
     }
 
     &__popout {
-      background: var(--dropdown-background-color);
+      background: var(--clr-bg-elevated);
       backdrop-filter: $backdrop-blur-filter;
-      border: 1px solid var(--dropdown-border-color);
+      border: 1px solid var(--clr-border-primary);
       box-shadow: var(--dropdown-shadow);
       max-width: 320px;
       padding: 16px;
@@ -2114,7 +2112,7 @@
       gap: 24px;
       font-size: 14px;
       line-height: 20px;
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
 
       .link-button {
         display: inline;
@@ -2142,7 +2140,7 @@
         h3 {
           font-size: 17px;
           line-height: 22px;
-          color: $primary-text-color;
+          color: var(--clr-text-primary);
         }
       }
 
@@ -2193,7 +2191,7 @@
           font-size: 14px;
           line-height: 20px;
           font-weight: 500;
-          color: $primary-text-color;
+          color: var(--clr-text-primary);
         }
       }
     }
@@ -2209,7 +2207,7 @@
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
     margin-top: 10px;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
 
     &--missing {
       color: $dark-text-color;
@@ -2276,7 +2274,7 @@
   display: block;
   position: relative;
   border-radius: var(--avatar-border-radius);
-  background: var(--surface-background-color);
+  background: var(--clr-bg-tertiary);
   flex-shrink: 0;
 
   img {
@@ -2288,7 +2286,7 @@
   }
 
   &--loading {
-    background-color: var(--surface-background-color);
+    background-color: var(--clr-bg-tertiary);
   }
 
   &--inline {
@@ -2319,7 +2317,7 @@
       top: 50%;
       inset-inline-start: 50%;
       transform: translate(-50%, -50%);
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
       text-shadow: 1px 1px 2px $base-shadow-color;
       font-weight: 700;
       font-size: 15px;
@@ -2343,7 +2341,7 @@
     color: $white;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--background-color);
+    border-color: var(--clr-bg-primary);
     font-size: 11px;
     font-weight: 500;
     text-align: center;
@@ -2381,7 +2379,7 @@ a .account__avatar {
   }
 
   .account__avatar {
-    box-shadow: 0 0 0 2px var(--background-color);
+    box-shadow: 0 0 0 2px var(--clr-bg-primary);
   }
 }
 
@@ -2406,7 +2404,7 @@ a .account__avatar {
 .account__relationship,
 .explore-suggestions-card {
   .icon-button {
-    border: 1px solid var(--background-border-color);
+    border: 1px solid var(--clr-border-primary);
     border-radius: 4px;
     box-sizing: content-box;
     padding: 5px;
@@ -2446,7 +2444,7 @@ a .account__avatar {
 .status__display-name,
 .account__display-name {
   .display-name strong {
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
   }
 }
 
@@ -2477,7 +2475,7 @@ a.account__display-name {
 }
 
 .detailed-status__display-name {
-  color: $darker-text-color;
+  color: var(--clr-text-secondary);
   display: flex;
   align-items: center;
   gap: 10px;
@@ -2494,7 +2492,7 @@ a.account__display-name {
   }
 
   strong {
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
   }
 }
 
@@ -2516,7 +2514,7 @@ a.account__display-name {
 
 .notification__report {
   padding: 16px;
-  border-bottom: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--clr-border-primary);
   display: flex;
   gap: 10px;
 
@@ -2529,7 +2527,7 @@ a.account__display-name {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     gap: 10px;
     font-size: 15px;
     line-height: 22px;
@@ -2552,7 +2550,7 @@ a.account__display-name {
 }
 
 .notification-group--link {
-  color: $secondary-text-color;
+  color: var(--clr-text-primary);
   text-decoration: none;
 
   .notification-group__main {
@@ -2581,7 +2579,7 @@ a.account__display-name {
   padding: 16px;
   padding-bottom: 0;
   cursor: default;
-  color: $darker-text-color;
+  color: var(--clr-text-secondary);
   font-size: 15px;
   line-height: 22px;
   font-weight: 500;
@@ -2611,7 +2609,7 @@ a.account__display-name {
 }
 
 .icon-button.bookmark-icon.active {
-  color: $red-bookmark;
+  color: var(--mas-accent-bookmark);
 }
 
 .no-reduce-motion .icon-button.star-icon {
@@ -2681,7 +2679,7 @@ a.account__display-name {
     max-height: $media-modal-media-max-height;
     width: auto;
     height: auto;
-    outline: 1px solid var(--media-outline-color);
+    outline: 1px solid var(--clr-border-media);
     outline-offset: -1px;
     border-radius: 8px;
     touch-action: none;
@@ -2710,7 +2708,7 @@ a.account__display-name {
     max-height: $media-modal-media-max-height;
     position: absolute;
     z-index: 1;
-    outline: 1px solid var(--media-outline-color);
+    outline: 1px solid var(--clr-border-media);
     outline-offset: -1px;
     border-radius: 8px;
     overflow: hidden;
@@ -2761,7 +2759,7 @@ a.account__display-name {
 
   .icon-button {
     padding: 8px;
-    color: $secondary-text-color;
+    color: var(--clr-text-primary);
   }
 
   .icon-button .icon {
@@ -2798,15 +2796,15 @@ a.account__display-name {
 }
 
 .dropdown-menu__separator {
-  border-bottom: 1px solid var(--dropdown-border-color);
+  border-bottom: 1px solid var(--clr-border-primary);
   margin: 5px 0;
   height: 0;
 }
 
 .dropdown-menu {
-  background: var(--dropdown-background-color);
+  background: var(--clr-bg-elevated);
   backdrop-filter: $backdrop-blur-filter;
-  border: 1px solid var(--dropdown-border-color);
+  border: 1px solid var(--clr-border-primary);
   padding: 4px;
   border-radius: 4px;
   box-shadow: var(--dropdown-shadow);
@@ -2840,13 +2838,13 @@ a.account__display-name {
 
   &__container {
     &__header {
-      border-bottom: 1px solid var(--dropdown-border-color);
+      border-bottom: 1px solid var(--clr-border-primary);
       padding: 10px 14px;
       padding-bottom: 14px;
       margin-bottom: 4px;
       font-size: 13px;
       line-height: 18px;
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
     }
 
     &__list {
@@ -2890,7 +2888,7 @@ a.account__display-name {
   display: block;
 
   &--dangerous {
-    color: $error-value-color;
+    color: var(--clr-text-error);
   }
 
   &--highlighted {
@@ -2928,7 +2926,7 @@ a.account__display-name {
     &:hover,
     &:active {
       &:not(:disabled, [aria-disabled='true']) {
-        background: var(--dropdown-border-color);
+        background: var(--clr-bg-secondary);
         outline: 0;
       }
     }
@@ -2936,12 +2934,12 @@ a.account__display-name {
 
   button:disabled,
   button[aria-disabled='true'] {
-    color: $dark-text-color;
+    color: var(--clr-text-disabled);
     cursor: default;
 
     &:focus {
-      color: rgb(from $dark-text-color r g b / 70%);
-      background: var(--dropdown-border-color);
+      color: rgb(from var(--clr-text-disabled) r g b / 70%);
+      background: var(--clr-bg-disabled);
       outline: 0;
     }
   }
@@ -3020,6 +3018,8 @@ a.account__display-name {
       flex-direction: column;
       contain: inline-size layout paint style;
       container: column / inline-size;
+      color: var(--clr-text-primary);
+      background-color: var(--clr-bg-primary);
 
       @media screen and (min-width: $no-gap-breakpoint) {
         max-width: 600px;
@@ -3038,9 +3038,9 @@ a.account__display-name {
   width: 100%;
   gap: 8px;
   padding-bottom: env(safe-area-inset-bottom);
-  background: var(--background-color);
+  background: var(--clr-bg-primary);
   backdrop-filter: $backdrop-blur-filter;
-  border-top: 1px solid var(--background-border-color);
+  border-top: 1px solid var(--clr-border-primary);
   box-sizing: border-box;
 
   .layout-multiple-columns & {
@@ -3083,7 +3083,7 @@ a.account__display-name {
     color: inherit;
 
     &.active {
-      color: $highlight-text-color;
+      color: var(--clr-text-accent);
     }
 
     &:focus {
@@ -3091,22 +3091,22 @@ a.account__display-name {
     }
 
     &:focus-visible {
-      border-top-color: $ui-button-focus-outline-color;
+      border-top-color: var(--clr-text-accent);
       border-radius: 0;
     }
   }
 }
 
 .tabs-bar__wrapper {
-  background: var(--background-color);
+  background: var(--clr-bg-primary);
   backdrop-filter: $backdrop-blur-filter;
   position: sticky;
   top: 0;
   z-index: 2;
-  padding-top: 0;
+  border-top: 0;
 
   @media screen and (min-width: $no-gap-breakpoint) {
-    padding-top: 10px;
+    border-top: 10px solid var(--clr-bg-ambient);
   }
 }
 
@@ -3134,13 +3134,13 @@ a.account__display-name {
   flex-direction: column;
 
   > .scrollable {
-    border: 1px solid var(--background-border-color);
+    border: 1px solid var(--clr-border-primary);
     border-top: 0;
     border-radius: 0 0 4px 4px;
 
     &.about,
     &.privacy-policy {
-      border-top: 1px solid var(--background-border-color);
+      border-top: 1px solid var(--clr-border-primary);
       border-radius: 4px;
 
       @media screen and (max-width: $no-gap-breakpoint) {
@@ -3208,7 +3208,7 @@ a.account__display-name {
   display: flex;
   flex: 1 1 auto;
   padding: 13px 3px 11px;
-  color: $darker-text-color;
+  color: var(--clr-text-secondary);
   text-decoration: none;
   text-align: center;
   font-size: 16px;
@@ -3340,7 +3340,7 @@ a.account__display-name {
 
     .navigation-panel {
       margin: 0;
-      border-inline-start: 1px solid var(--background-border-color);
+      border-inline-start: 1px solid var(--clr-border-primary);
       height: 100dvh;
     }
 
@@ -3390,7 +3390,7 @@ a.account__display-name {
 
   .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
     pointer-events: auto;
-    background: var(--background-color);
+    background: var(--clr-bg-primary);
     position: fixed;
     width: 284px + 70px;
     inset-inline-end: -70px;
@@ -3440,7 +3440,7 @@ a.account__display-name {
   gap: 8px;
   display: flex;
   flex-direction: column;
-  border-bottom: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--clr-border-primary);
 
   &:last-child {
     border-bottom: 0;
@@ -3490,14 +3490,14 @@ a.account__display-name {
     .display-name {
       font-size: 15px;
       line-height: 20px;
-      color: $secondary-text-color;
+      color: var(--clr-text-primary);
 
       strong {
         font-weight: 700;
       }
 
       &__account {
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
         display: block;
       }
     }
@@ -3536,13 +3536,13 @@ a.account__display-name {
     inset-inline-start: 9px;
     top: -13px;
     background: $ui-highlight-color;
-    border: 2px solid var(--background-color);
+    border: 2px solid var(--clr-bg-primary);
     padding: 1px 6px;
     border-radius: 6px;
     font-size: 10px;
     font-weight: 500;
     line-height: 14px;
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
   }
 
   &__issue-badge {
@@ -3558,7 +3558,7 @@ a.account__display-name {
 }
 
 .column-link--transparent .icon-with-badge__badge {
-  border-color: var(--background-color);
+  border-color: var(--clr-bg-primary);
 }
 
 .column-title {
@@ -3576,7 +3576,7 @@ a.account__display-name {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
   }
 
   @media screen and (width >= 600px) {
@@ -3587,9 +3587,9 @@ a.account__display-name {
 .copy-paste-text {
   background: lighten($ui-base-color, 4%);
   border-radius: 8px;
-  border: 1px solid var(--background-border-color);
+  border: 1px solid var(--clr-border-primary);
   padding: 16px;
-  color: $primary-text-color;
+  color: var(--clr-text-primary);
   font-size: 15px;
   line-height: 22px;
   display: flex;
@@ -3606,7 +3606,7 @@ a.account__display-name {
   }
 
   &.copied {
-    border-color: $valid-value-color;
+    border-color: var(--clr-text-success);
     transition: none;
   }
 
@@ -3633,7 +3633,7 @@ a.account__display-name {
   margin-top: -20px;
 
   .app-form__avatar-input {
-    border: 2px solid var(--background-color);
+    border: 2px solid var(--clr-bg-primary);
     position: absolute;
     inset-inline-start: -2px;
     bottom: -40px;
@@ -3686,7 +3686,7 @@ a.account__display-name {
       &__sep {
         width: 0;
         height: 24px;
-        border-left: 1px solid var(--background-border-color);
+        border-left: 1px solid var(--clr-border-primary);
       }
 
       .column-link {
@@ -3786,7 +3786,7 @@ a.account__display-name {
     flex: 0 0 auto;
     border: 0;
     background: transparent;
-    border-top: 1px solid var(--background-border-color);
+    border-top: 1px solid var(--clr-border-primary);
     margin: 10px 0;
   }
 
@@ -3803,14 +3803,14 @@ a.account__display-name {
   overflow: hidden;
   display: flex;
   border-radius: 4px;
-  border: 1px solid var(--background-border-color);
+  border: 1px solid var(--clr-border-primary);
 }
 
 .drawer__inner {
   position: absolute;
   top: 0;
   inset-inline-start: 0;
-  background: var(--background-color);
+  background: var(--clr-bg-primary);
   box-sizing: border-box;
   padding: 0;
   display: flex;
@@ -3823,7 +3823,7 @@ a.account__display-name {
 }
 
 .drawer__inner__mastodon {
-  background: var(--background-color)
+  background: var(--clr-bg-primary)
     url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color(darken($ui-base-color, 4%))}"/></svg>')
     no-repeat bottom / 100% auto;
   flex: 1;
@@ -3848,7 +3848,7 @@ a.account__display-name {
 .drawer__header {
   flex: 0 0 auto;
   font-size: 16px;
-  border: 1px solid var(--background-border-color);
+  border: 1px solid var(--clr-border-primary);
   margin-bottom: 10px;
   display: flex;
   flex-direction: row;
@@ -3858,7 +3858,7 @@ a.account__display-name {
   a:hover,
   a:focus,
   a:active {
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
   }
 }
 
@@ -3904,7 +3904,7 @@ a.account__display-name {
   box-sizing: border-box;
   width: 100%;
   background: transparent;
-  border: 1px solid var(--background-border-color);
+  border: 1px solid var(--clr-border-primary);
   border-radius: 4px 4px 0 0;
   color: $highlight-text-color;
   cursor: pointer;
@@ -4059,7 +4059,11 @@ a.account__display-name {
   text-decoration: none;
   overflow: hidden;
   white-space: nowrap;
-  color: $secondary-text-color;
+  color: color-mix(
+    in oklab,
+    var(--clr-text-primary),
+    var(--clr-text-secondary)
+  );
   background: transparent;
   border: 0;
   border-left: 4px solid transparent;
@@ -4068,11 +4072,11 @@ a.account__display-name {
   &:hover,
   &:focus,
   &:active {
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
   }
 
   &.active {
-    color: $highlight-text-color;
+    color: var(--clr-text-accent);
   }
 
   &:focus {
@@ -4080,7 +4084,7 @@ a.account__display-name {
   }
 
   &:focus-visible {
-    border-color: $ui-button-focus-outline-color;
+    border-color: var(--clr-text-accent);
     border-radius: 0;
   }
 
@@ -4102,14 +4106,14 @@ a.account__display-name {
   font-size: 12px;
   line-height: 19px;
   font-weight: 500;
-  background: $ui-base-color;
+  background: var(--clr-bg-primary);
   padding: 4px 8px;
   margin: -6px 10px;
 }
 
 .column-subheading {
-  background: var(--surface-background-color);
-  color: $darker-text-color;
+  background: var(--clr-bg-secondary);
+  color: var(--clr-text-secondary);
   padding: 8px 20px;
   font-size: 12px;
   font-weight: 500;
@@ -4128,7 +4132,7 @@ a.account__display-name {
 .getting-started {
   color: $dark-text-color;
   overflow: auto;
-  border: 1px solid var(--background-border-color);
+  border: 1px solid var(--clr-border-primary);
   border-top: 0;
 
   &__trends {
@@ -4138,14 +4142,14 @@ a.account__display-name {
     margin-top: 10px;
 
     h4 {
-      border-bottom: 1px solid var(--background-border-color);
+      border-bottom: 1px solid var(--clr-border-primary);
       padding: 10px;
       font-size: 12px;
       text-transform: uppercase;
       font-weight: 500;
 
       a {
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
         text-decoration: none;
       }
     }
@@ -4155,7 +4159,7 @@ a.account__display-name {
       padding: 10px;
 
       &__current {
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
       }
     }
   }
@@ -4187,11 +4191,11 @@ a.account__display-name {
   align-items: center;
   position: relative;
   font-size: 14px;
-  color: $darker-text-color;
+  color: var(--clr-text-secondary);
   margin-top: 14px;
   text-decoration: none;
   overflow: hidden;
-  border: 1px solid var(--background-border-color);
+  border: 1px solid var(--clr-border-primary);
   border-radius: 8px;
   contain: inline-size layout paint style;
 
@@ -4224,7 +4228,7 @@ a.account__display-name {
     button,
     a {
       display: inline;
-      color: $secondary-text-color;
+      color: var(--clr-text-primary);
       background: transparent;
       border: 0;
       padding: 0 8px;
@@ -4235,7 +4239,7 @@ a.account__display-name {
       &:hover,
       &:active,
       &:focus {
-        color: $primary-text-color;
+        color: var(--clr-text-primary);
       }
     }
 
@@ -4303,7 +4307,7 @@ a.status-card {
   font-weight: 700;
   font-size: 19px;
   line-height: 24px;
-  color: $primary-text-color;
+  color: var(--clr-text-primary);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -4338,7 +4342,7 @@ a.status-card {
   display: block;
   margin-top: 8px;
   font-size: 14px;
-  color: $primary-text-color;
+  color: var(--clr-text-primary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -4444,7 +4448,7 @@ a.status-card {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: $dark-text-color;
+  color: var(--clr-text-primary);
   background-color: transparent;
   border: 0;
   font-size: inherit;
@@ -4455,11 +4459,11 @@ a.status-card {
   text-decoration: none;
 
   &:hover {
-    background: var(--on-surface-color);
+    background: var(--clr-bg-secondary);
   }
 
   &:focus-visible {
-    outline: 2px solid $ui-button-focus-outline-color;
+    outline: 2px solid var(--clr-text-accent);
     outline-offset: -2px;
   }
 
@@ -4470,12 +4474,12 @@ a.status-card {
 }
 
 .load-gap {
-  border-bottom: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--clr-border-primary);
 }
 
 .timeline-hint {
   text-align: center;
-  color: $dark-text-color;
+  color: var(--clr-text-secondary);
   padding: 16px;
   box-sizing: border-box;
   width: 100%;
@@ -4499,13 +4503,13 @@ a.status-card {
   }
 
   &--with-descendants {
-    border-top: 1px solid var(--background-border-color);
+    border-top: 1px solid var(--clr-border-primary);
   }
 }
 
 .regeneration-indicator {
-  color: $darker-text-color;
-  border: 1px solid var(--background-border-color);
+  color: var(--clr-text-secondary);
+  border: 1px solid var(--clr-border-primary);
   border-top: 0;
   cursor: default;
   display: flex;
@@ -4531,7 +4535,7 @@ a.status-card {
       font-weight: 500;
       display: block;
       margin-bottom: 10px;
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
     }
 
     span {
@@ -4577,7 +4581,7 @@ a.status-card {
 .column-header__select-row {
   border-width: 0 1px 1px;
   border-style: solid;
-  border-color: var(--background-border-color);
+  border-color: var(--clr-border-primary);
   padding: 15px;
   display: flex;
   align-items: center;
@@ -4606,7 +4610,7 @@ a.status-card {
 .column-header {
   display: flex;
   font-size: 16px;
-  border: 1px solid var(--background-border-color);
+  border: 1px solid var(--clr-border-primary);
   border-radius: 4px 4px 0 0;
   flex: 0 0 auto;
   cursor: pointer;
@@ -4632,7 +4636,7 @@ a.status-card {
     flex: 1;
 
     &:focus-visible {
-      outline: $ui-button-icon-focus-outline;
+      outline: var(--outline-focus-default);
     }
 
     .logo {
@@ -4650,7 +4654,7 @@ a.status-card {
 
     &.compact {
       flex: 0 0 auto;
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
     }
   }
 
@@ -4697,7 +4701,7 @@ a.status-card {
   justify-content: center;
   align-items: center;
   border: 0;
-  color: $darker-text-color;
+  color: var(--clr-text-primary);
   background: transparent;
   cursor: pointer;
   font-size: 16px;
@@ -4708,18 +4712,18 @@ a.status-card {
   }
 
   &:hover {
-    color: lighten($darker-text-color, 4%);
+    color: var(--clr-text-secondary);
   }
 
   &:focus-visible {
-    outline: $ui-button-focus-outline;
+    outline: var(--clr-text-accent);
   }
 
   &.active {
-    color: $primary-text-color;
+    color: var(--clr-text-accent);
 
     &:hover {
-      color: $primary-text-color;
+      color: var(--clr-text-accent);
     }
   }
 
@@ -4737,16 +4741,16 @@ a.status-card {
   max-height: 70vh;
   overflow: hidden;
   overflow-y: auto;
-  color: $darker-text-color;
+  color: var(--clr-text-secondary);
   transition:
     max-height 150ms ease-in-out,
     opacity 300ms linear;
   opacity: 1;
   z-index: 1;
   position: relative;
-  border-left: 1px solid var(--background-border-color);
-  border-right: 1px solid var(--background-border-color);
-  border-bottom: 1px solid var(--background-border-color);
+  border-left: 1px solid var(--clr-border-primary);
+  border-right: 1px solid var(--clr-border-primary);
+  border-bottom: 1px solid var(--clr-border-primary);
 
   @media screen and (max-width: $no-gap-breakpoint) {
     border-left: 0;
@@ -4767,7 +4771,7 @@ a.status-card {
     height: 0;
     background: transparent;
     border: 0;
-    border-top: 1px solid var(--background-border-color);
+    border-top: 1px solid var(--clr-border-primary);
     margin: 10px 0;
   }
 }
@@ -4779,7 +4783,7 @@ a.status-card {
 .column-header__setting-btn {
   &:hover,
   &:focus {
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     text-decoration: underline;
   }
 }
@@ -4959,7 +4963,7 @@ a.status-card {
 .video-error-cover {
   align-items: center;
   background: $base-overlay-background;
-  color: $primary-text-color;
+  color: var(--clr-text-primary);
   cursor: pointer;
   display: flex;
   flex-direction: column;
@@ -5033,8 +5037,8 @@ a.status-card {
 }
 
 .account--panel {
-  border-top: 1px solid var(--background-border-color);
-  border-bottom: 1px solid var(--background-border-color);
+  border-top: 1px solid var(--clr-border-primary);
+  border-bottom: 1px solid var(--clr-border-primary);
   display: flex;
   flex-direction: row;
   padding: 10px 0;
@@ -5052,7 +5056,7 @@ a.status-card {
 
   &__section {
     // FIXME: Legacy
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     cursor: default;
     display: block;
     font-weight: 500;
@@ -5064,7 +5068,7 @@ a.status-card {
 
   section {
     padding: 16px;
-    border-bottom: 1px solid var(--background-border-color);
+    border-bottom: 1px solid var(--clr-border-primary);
 
     &:last-child {
       border-bottom: 0;
@@ -5076,7 +5080,7 @@ a.status-card {
     line-height: 24px;
     letter-spacing: 0.5px;
     font-weight: 500;
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
     margin-bottom: 16px;
   }
 
@@ -5105,7 +5109,11 @@ a.status-card {
       @include search-input;
 
       &::placeholder {
-        color: lighten($darker-text-color, 4%);
+        color: color-mix(
+          in oklab,
+          var(--clr-text-primary),
+          var(--clr-text-secondary)
+        );
       }
 
       &::-moz-focus-inner {
@@ -5119,7 +5127,7 @@ a.status-card {
       }
 
       &:focus {
-        background: lighten($ui-base-color, 4%);
+        background: var(--clr-bg-secondary);
       }
 
       @media screen and (width <= 600px) {
@@ -5147,7 +5155,11 @@ a.status-card {
         &:active,
         &:focus {
           background: lighten($ui-base-color, 12%);
-          color: lighten($darker-text-color, 4%);
+          color: color-mix(
+            in oklab,
+            var(--clr-text-primary),
+            var(--clr-text-secondary)
+          );
         }
       }
     }
@@ -5155,7 +5167,7 @@ a.status-card {
     &__multi-value__label,
     &__input,
     &__input-container {
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
     }
 
     &__clear-indicator,
@@ -5212,12 +5224,12 @@ a.status-card {
 }
 
 .setting-toggle__label {
-  color: $darker-text-color;
+  color: var(--clr-text-secondary);
 }
 
 .limited-account-hint {
   p {
-    color: $secondary-text-color;
+    color: var(--clr-text-primary);
     font-size: 15px;
     font-weight: 500;
     margin-bottom: 20px;
@@ -5269,7 +5281,7 @@ a.status-card {
 
 .error-column {
   padding: 20px;
-  border: 1px solid var(--background-border-color);
+  border: 1px solid var(--clr-border-primary);
   border-radius: 4px;
   display: flex;
   flex: 1 1 auto;
@@ -5286,7 +5298,7 @@ a.status-card {
 
   &__message {
     text-align: center;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     font-size: 15px;
     line-height: 22px;
 
@@ -5295,7 +5307,7 @@ a.status-card {
       line-height: 33px;
       font-weight: 700;
       margin-bottom: 15px;
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
     }
 
     p {
@@ -5348,9 +5360,9 @@ a.status-card {
   position: relative;
   margin-top: 5px;
   z-index: 2;
-  background: var(--dropdown-background-color);
+  background: var(--clr-bg-elevated);
   backdrop-filter: $backdrop-blur-filter;
-  border: 1px solid var(--dropdown-border-color);
+  border: 1px solid var(--clr-border-primary);
   box-shadow: var(--dropdown-shadow);
   border-radius: 5px;
 
@@ -5375,8 +5387,8 @@ a.status-card {
   z-index: 4;
   top: -5px;
   inset-inline-start: -9px;
-  background: var(--dropdown-background-color);
-  border: 1px solid var(--dropdown-border-color);
+  background: var(--clr-bg-elevated);
+  border: 1px solid var(--clr-border-primary);
   border-radius: 4px;
   box-shadow: var(--dropdown-shadow);
   overflow: hidden;
@@ -5391,7 +5403,7 @@ a.status-card {
     &:hover,
     &:focus,
     &:active {
-      background: var(--dropdown-border-color);
+      background: var(--clr-border-primary);
     }
   }
 
@@ -5452,7 +5464,7 @@ a.status-card {
   align-items: center;
   justify-content: center;
   text-align: center;
-  color: $secondary-text-color;
+  color: var(--clr-text-primary);
   font-size: 18px;
   font-weight: 500;
   border: 2px dashed $ui-base-lighter-color;
@@ -5460,7 +5472,7 @@ a.status-card {
 }
 
 .upload-progress {
-  color: $darker-text-color;
+  color: var(--clr-text-secondary);
   overflow: hidden;
   display: flex;
   gap: 8px;
@@ -5489,7 +5501,7 @@ a.status-card {
   width: 100%;
   height: 6px;
   border-radius: 6px;
-  background: var(--background-color);
+  background: var(--clr-bg-primary);
   position: relative;
   margin-top: 5px;
 }
@@ -5533,7 +5545,7 @@ a.status-card {
 
   &:focus-visible {
     img {
-      outline: $ui-button-icon-focus-outline;
+      outline: var(--outline-focus-default);
     }
   }
 }
@@ -5547,9 +5559,9 @@ a.status-card {
 .language-dropdown__dropdown,
 .visibility-dropdown__dropdown {
   box-shadow: var(--dropdown-shadow);
-  background: var(--dropdown-background-color);
+  background: var(--clr-bg-elevated);
   backdrop-filter: $backdrop-blur-filter;
-  border: 1px solid var(--dropdown-border-color);
+  border: 1px solid var(--clr-border-primary);
   padding: 4px;
   border-radius: 4px;
   overflow: hidden;
@@ -5575,8 +5587,6 @@ a.status-card {
 
 .privacy-dropdown__option,
 .visibility-dropdown__option {
-  --dropdown-text-color: $primary-text-color;
-
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.25px;
@@ -5586,7 +5596,7 @@ a.status-card {
   align-items: center;
   gap: 12px;
   border-radius: 4px;
-  color: var(--dropdown-text-color);
+  color: var(--clr-text-primary);
 
   // Make sure adjacent hover/active states don't have a meeting radius.
   &:hover + &:is(:focus, .active),
@@ -5605,13 +5615,13 @@ a.status-card {
 
   &:hover,
   &:active {
-    background: var(--dropdown-border-color);
+    background: var(--clr-bg-secondary);
   }
 
   &:focus,
   &.active {
-    background: $ui-highlight-color;
-    color: var(--dropdown-text-color);
+    background: var(--clr-bg-accent-strong);
+    color: var(--clr-text-on-accent-strong);
     outline: 0;
 
     .privacy-dropdown__option__content,
@@ -5620,7 +5630,7 @@ a.status-card {
     .visibility-dropdown__option__content,
     .visibility-dropdown__option__content strong,
     .visibility-dropdown__option__additional {
-      color: var(--dropdown-text-color);
+      color: var(--clr-text-on-accent-strong);
     }
   }
 
@@ -5628,7 +5638,7 @@ a.status-card {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     cursor: help;
   }
 }
@@ -5643,10 +5653,10 @@ a.status-card {
 .privacy-dropdown__option__content,
 .visibility-dropdown__option__content {
   flex: 1 1 auto;
-  color: $darker-text-color;
+  color: var(--clr-text-secondary);
 
   strong {
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
     font-weight: 500;
     display: block;
 
@@ -5665,13 +5675,13 @@ a.status-card {
 
     .emoji-mart-search {
       padding: 10px;
-      background: var(--dropdown-background-color);
+      background: var(--clr-bg-elevated);
 
       input {
         padding: 8px 12px;
-        background: $ui-base-color;
-        border: 1px solid var(--background-border-color);
-        color: $darker-text-color;
+        background: var(--clr-bg-primary);
+        border: 1px solid var(--clr-border-primary);
+        color: var(--clr-text-secondary);
 
         @media screen and (width <= 600px) {
           font-size: 16px;
@@ -5684,7 +5694,7 @@ a.status-card {
     .emoji-mart-search-icon {
       inset-inline-end: 15px;
       opacity: 1;
-      color: $darker-text-color;
+      color: var(--clr-text-primary);
 
       .icon {
         width: 18px;
@@ -5692,13 +5702,13 @@ a.status-card {
       }
 
       &:disabled {
-        opacity: 0.38;
+        color: var(--clr-text-secondary);
       }
     }
 
     .emoji-mart-scroll {
       padding: 0 10px 10px;
-      background: var(--dropdown-background-color);
+      background: var(--clr-bg-elevated);
     }
 
     &__results {
@@ -5707,7 +5717,7 @@ a.status-card {
         align-items: center;
         gap: 0.5em;
         cursor: pointer;
-        color: $primary-text-color;
+        color: var(--clr-text-primary);
         font-size: 14px;
         line-height: 20px;
         letter-spacing: 0.25px;
@@ -5719,23 +5729,23 @@ a.status-card {
         text-overflow: ellipsis;
 
         &__common-name {
-          color: $darker-text-color;
+          color: var(--clr-text-secondary);
           font-weight: 400;
         }
 
         &:active,
         &:hover {
-          background: var(--dropdown-border-color);
+          background: var(--clr-bg-secondary);
         }
 
         &:focus,
         &.active {
-          background: $ui-highlight-color;
-          color: $primary-text-color;
+          background: var(--clr-bg-accent-strong);
+          color: var(--clr-text-on-accent-strong);
           outline: 0;
 
           .language-dropdown__dropdown__results__item__common-name {
-            color: $primary-text-color;
+            color: var(--clr-text-on-accent-strong);
           }
         }
       }
@@ -5762,9 +5772,9 @@ a.status-card {
   &__button {
     display: flex;
     align-items: center;
-    color: $primary-text-color;
-    background: var(--input-background-color);
-    border: 1px solid var(--background-border-color);
+    color: var(--clr-text-primary);
+    background: var(--clr-bg-secondary-solid);
+    border: 1px solid var(--clr-border-primary);
     padding: 8px 12px;
     width: 100%;
     text-align: left;
@@ -5787,7 +5797,7 @@ a.status-card {
   &__helper {
     margin-top: 4px;
     font-size: 0.8em;
-    color: $dark-text-color;
+    color: var(--clr-text-secondary);
   }
 }
 
@@ -5806,8 +5816,8 @@ a.status-card {
     inset-inline-start: 0;
     margin-top: -2px;
     width: 100%;
-    background: var(--input-background-color);
-    border: 1px solid var(--background-border-color);
+    background: var(--clr-bg-elevated);
+    border: 1px solid var(--clr-border-primary);
     border-radius: 0 0 4px 4px;
     box-shadow: var(--dropdown-shadow);
     z-index: 99;
@@ -5816,7 +5826,7 @@ a.status-card {
 
     h4 {
       text-transform: uppercase;
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
       font-weight: 500;
       padding: 0 10px;
       margin-bottom: 10px;
@@ -5824,7 +5834,7 @@ a.status-card {
 
     .icon-button {
       padding: 0;
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
     }
 
     .icon {
@@ -5840,7 +5850,7 @@ a.status-card {
       }
 
       &__message {
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
         padding: 0 10px;
       }
 
@@ -5851,7 +5861,7 @@ a.status-card {
         border: 0;
         font: inherit;
         background: transparent;
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
         padding: 10px;
         cursor: pointer;
         border-radius: 4px;
@@ -5874,17 +5884,17 @@ a.status-card {
         &:active,
         &.selected {
           background: $ui-highlight-color;
-          color: $primary-text-color;
+          color: var(--clr-text-primary);
 
           .icon-button {
-            color: $primary-text-color;
+            color: var(--clr-text-primary);
           }
         }
 
         mark {
           background: transparent;
           font-weight: 700;
-          color: $primary-text-color;
+          color: var(--clr-text-primary);
         }
 
         span {
@@ -5947,7 +5957,7 @@ a.status-card {
   grid-area: 1 / 1;
   transition: all 100ms linear;
   transition-property: transform, opacity;
-  color: $darker-text-color;
+  color: var(--clr-text-secondary);
 }
 
 .search__icon.icon-search {
@@ -5987,19 +5997,19 @@ a.status-card {
 }
 
 .search-results__section {
-  border-bottom: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--clr-border-primary);
 
   &:last-child {
     border-bottom: 0;
   }
 
   &__header {
-    border-bottom: 1px solid var(--background-border-color);
-    background: var(--surface-background-color);
+    border-bottom: 1px solid var(--clr-border-primary);
+    background: var(--clr-bg-tertiary);
     padding: 15px;
     font-weight: 500;
     font-size: 14px;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     display: flex;
     justify-content: space-between;
 
@@ -6032,7 +6042,7 @@ a.status-card {
 
 .search-results__info {
   padding: 20px;
-  color: $darker-text-color;
+  color: var(--clr-text-secondary);
   text-align: center;
 }
 
@@ -6298,9 +6308,9 @@ a.status-card {
   width: 588px;
   min-height: 478px;
   flex-direction: column;
-  background: var(--modal-background-color);
+  background: var(--clr-bg-primary);
   backdrop-filter: $backdrop-blur-filter;
-  border: 1px solid var(--modal-border-color);
+  border: 1px solid var(--clr-border-primary);
   border-radius: 16px;
 
   &__error {
@@ -6342,9 +6352,9 @@ a.status-card {
     gap: 8px;
     padding: 24px;
     flex-direction: column;
-    background: var(--modal-background-color);
+    background: var(--clr-bg-primary);
     backdrop-filter: $backdrop-blur-filter;
-    border: 1px solid var(--modal-border-color);
+    border: 1px solid var(--clr-border-primary);
   }
 
   &__top {
@@ -6370,7 +6380,7 @@ a.status-card {
     align-items: center;
     font-size: 14px;
     line-height: 20px;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
 
     &__icon {
       border-radius: 64px;
@@ -6392,19 +6402,19 @@ a.status-card {
     h1 {
       font-size: 22px;
       line-height: 28px;
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
     }
   }
 
   &__confirmation {
     font-size: 14px;
     line-height: 20px;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
 
     h1 {
       font-size: 16px;
       line-height: 24px;
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
       font-weight: 500;
 
       &:not(:only-child) {
@@ -6414,12 +6424,12 @@ a.status-card {
 
     strong {
       font-weight: 700;
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
     }
   }
 
   &__status {
-    border: 1px solid var(--modal-border-color);
+    border: 1px solid var(--clr-border-primary);
     border-radius: 8px;
     padding: 8px;
     cursor: pointer;
@@ -6479,7 +6489,7 @@ a.status-card {
     }
 
     &--deemphasized {
-      color: $secondary-text-color;
+      color: var(--clr-text-primary);
     }
 
     &__icon {
@@ -6531,7 +6541,7 @@ a.status-card {
     }
 
     &.active {
-      background: var(--modal-background-variant-color);
+      background: var(--clr-bg-secondary);
       padding-top: 24px;
 
       .safety-action-modal__bottom__collapsible {
@@ -6563,14 +6573,14 @@ a.status-card {
   width: 588px;
   max-height: 80vh;
   flex-direction: column;
-  background: var(--modal-background-color);
+  background: var(--clr-bg-elevated);
   backdrop-filter: $backdrop-blur-filter;
-  border: 1px solid var(--modal-border-color);
+  border: 1px solid var(--clr-border-primary);
   border-radius: 16px;
 
   &__header {
     box-sizing: border-box;
-    border-bottom: 1px solid var(--modal-border-color);
+    border-bottom: 1px solid var(--clr-border-primary);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -6594,7 +6604,7 @@ a.status-card {
 
     &__description {
       margin: 24px 24px 0;
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
 
       a {
         color: inherit;
@@ -6623,7 +6633,7 @@ a.status-card {
 
       img,
       .gifv video {
-        outline: 1px solid var(--media-outline-color);
+        outline: 1px solid var(--clr-border-media);
         outline-offset: -1px;
         border-radius: 8px;
       }
@@ -6647,9 +6657,9 @@ a.status-card {
   }
 
   &__popout {
-    background: var(--dropdown-background-color);
+    background: var(--clr-bg-elevated);
     backdrop-filter: $backdrop-blur-filter;
-    border: 1px solid var(--dropdown-border-color);
+    border: 1px solid var(--clr-border-primary);
     box-shadow: var(--dropdown-shadow);
     max-width: 320px;
     padding: 16px;
@@ -6657,7 +6667,7 @@ a.status-card {
     z-index: 9999 !important;
     font-size: 14px;
     line-height: 20px;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
   }
 
   .copy-paste-text {
@@ -6672,7 +6682,7 @@ a.status-card {
 
   kbd {
     padding: 3px 5px;
-    border: 1px solid var(--background-border-color);
+    border: 1px solid var(--clr-border-primary);
     border-radius: 4px;
   }
 }
@@ -6681,10 +6691,10 @@ a.status-card {
 .report-modal,
 .actions-modal,
 .compare-history-modal {
-  background: var(--background-color);
-  color: $primary-text-color;
+  background: var(--clr-bg-primary);
+  color: var(--clr-text-primary);
   border-radius: 4px;
-  border: 1px solid var(--background-border-color);
+  border: 1px solid var(--clr-border-primary);
   overflow: hidden;
   max-width: 90vw;
   width: 480px;
@@ -6734,17 +6744,17 @@ a.status-card {
 .report-modal {
   width: 90vw;
   max-width: 700px;
-  border: 1px solid var(--background-border-color);
+  border: 1px solid var(--clr-border-primary);
 }
 
 .report-dialog-modal {
   max-width: 90vw;
   width: 480px;
   height: 80vh;
-  background: var(--background-color);
-  color: $primary-text-color;
+  background: var(--clr-bg-primary);
+  color: var(--clr-text-primary);
   border-radius: 4px;
-  border: 1px solid var(--background-border-color);
+  border: 1px solid var(--clr-border-primary);
   overflow: hidden;
   position: relative;
   flex-direction: column;
@@ -6752,7 +6762,7 @@ a.status-card {
 
   &__container {
     box-sizing: border-box;
-    border-top: 1px solid var(--background-border-color);
+    border-top: 1px solid var(--clr-border-primary);
     padding: 20px;
     flex-grow: 1;
     display: flex;
@@ -6782,7 +6792,7 @@ a.status-card {
   &__lead {
     font-size: 17px;
     line-height: 22px;
-    color: $secondary-text-color;
+    color: var(--clr-text-primary);
     margin-bottom: 30px;
 
     a {
@@ -6817,7 +6827,7 @@ a.status-card {
 
   .status__content,
   .status__content p {
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
   }
 
   .dialog-option {
@@ -6826,7 +6836,7 @@ a.status-card {
   }
 
   .dialog-option .poll__input {
-    border-color: $darker-text-color;
+    border-color: var(--clr-text-secondary);
     color: $ui-secondary-color;
     display: inline-flex;
     align-items: center;
@@ -6840,20 +6850,20 @@ a.status-card {
     &:active,
     &:focus,
     &:hover {
-      border-color: $valid-value-color;
+      border-color: var(--clr-text-success);
       border-width: 4px;
     }
 
     &.active {
-      border-color: $valid-value-color;
-      background: $valid-value-color;
+      border-color: var(--clr-text-success);
+      background: var(--clr-text-success);
     }
   }
 
   .poll__option.dialog-option {
     padding: 15px 0;
     flex: 0 0 auto;
-    border-bottom: 1px solid var(--background-border-color);
+    border-bottom: 1px solid var(--clr-border-primary);
 
     &:last-child {
       border-bottom: 0;
@@ -6861,13 +6871,13 @@ a.status-card {
 
     & > .poll__option__text {
       font-size: 13px;
-      color: $secondary-text-color;
+      color: var(--clr-text-primary);
 
       strong {
         font-size: 17px;
         font-weight: 500;
         line-height: 22px;
-        color: $primary-text-color;
+        color: var(--clr-text-primary);
         display: block;
         margin-bottom: 4px;
 
@@ -6886,7 +6896,7 @@ a.status-card {
     display: block;
     box-sizing: border-box;
     width: 100%;
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
     background: $ui-base-color;
     padding: 10px;
     font-family: inherit;
@@ -6894,7 +6904,7 @@ a.status-card {
     line-height: 22px;
     resize: vertical;
     border: 0;
-    border: 1px solid var(--background-border-color);
+    border: 1px solid var(--clr-border-primary);
     outline: 0;
     border-radius: 4px;
     margin: 20px 0;
@@ -6919,16 +6929,16 @@ a.status-card {
   }
 
   .button.button-secondary {
-    border-color: $ui-button-destructive-background-color;
-    color: $ui-button-destructive-background-color;
+    border-color: var(--clr-text-error);
+    color: var(--clr-text-error);
     flex: 0 0 auto;
 
     &:hover,
     &:focus,
     &:active {
-      background: $ui-button-destructive-background-color;
-      border-color: $ui-button-destructive-background-color;
-      color: $white;
+      color: var(--clr-text-on-error-strong);
+      background: var(--clr-bg-error-strong);
+      border-color: var(--clr-bg-error-strong);
     }
   }
 
@@ -6949,7 +6959,7 @@ a.status-card {
 
 .report-modal__container {
   display: flex;
-  border-top: 1px solid var(--background-border-color);
+  border-top: 1px solid var(--clr-border-primary);
 
   @media screen and (width <= 480px) {
     flex-wrap: wrap;
@@ -7007,9 +7017,9 @@ a.status-card {
 
 .actions-modal {
   border-radius: 8px 8px 0 0;
-  background: var(--dropdown-background-color);
+  background: var(--clr-bg-elevated);
   backdrop-filter: $backdrop-blur-filter;
-  border-color: var(--dropdown-border-color);
+  border-color: var(--clr-border-primary);
   box-shadow: var(--dropdown-shadow);
   max-height: 80vh;
   max-width: 80vw;
@@ -7036,7 +7046,7 @@ a.status-card {
     &:hover,
     &:active,
     &:focus {
-      background: var(--dropdown-border-color);
+      background: var(--clr-border-primary);
     }
   }
 }
@@ -7072,7 +7082,7 @@ a.status-card {
 
 .compare-history-modal {
   .report-modal__target {
-    border-bottom: 1px solid var(--background-border-color);
+    border-bottom: 1px solid var(--clr-border-primary);
   }
 
   &__container {
@@ -7082,7 +7092,7 @@ a.status-card {
   }
 
   .status__content {
-    color: $secondary-text-color;
+    color: var(--clr-text-primary);
     font-size: 19px;
     line-height: 24px;
 
@@ -7227,7 +7237,7 @@ a.status-card {
 .attachment-list {
   display: flex;
   font-size: 14px;
-  border: 1px solid var(--background-border-color);
+  border: 1px solid var(--clr-border-primary);
   border-radius: 4px;
   margin-top: 16px;
   overflow: hidden;
@@ -7237,7 +7247,7 @@ a.status-card {
     color: $dark-text-color;
     padding: 8px 18px;
     cursor: default;
-    border-inline-end: 1px solid var(--background-border-color);
+    border-inline-end: 1px solid var(--clr-border-primary);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -7368,7 +7378,7 @@ a.status-card {
   position: relative;
   border-radius: 8px;
   overflow: hidden;
-  outline: 1px solid var(--media-outline-color);
+  outline: 1px solid var(--clr-border-media);
   outline-offset: -1px;
   z-index: 1;
 
@@ -7418,7 +7428,7 @@ a.status-card {
   cursor: pointer;
   display: block;
   text-decoration: none;
-  color: $secondary-text-color;
+  color: var(--clr-text-primary);
   position: relative;
   z-index: -1;
 
@@ -7487,9 +7497,9 @@ a.status-card {
   width: 100%;
   aspect-ratio: 16 / 9;
   color: var(--player-foreground-color);
-  background: var(--player-background-color, var(--background-color));
+  background: var(--player-background-color, var(--clr-bg-primary));
   border-radius: 8px;
-  outline: 1px solid var(--media-outline-color);
+  outline: 1px solid var(--clr-border-media);
   outline-offset: -1px;
 
   &__controls {
@@ -7629,7 +7639,7 @@ a.status-card {
   color: $white;
   display: flex;
   align-items: center;
-  outline: 1px solid var(--media-outline-color);
+  outline: 1px solid var(--clr-border-media);
   outline-offset: -1px;
   z-index: 2;
 
@@ -7705,7 +7715,7 @@ a.status-card {
     z-index: 4;
     border: 0;
     background: $base-overlay-background;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     transition: none;
     pointer-events: none;
 
@@ -7716,7 +7726,11 @@ a.status-card {
       &:hover,
       &:active,
       &:focus {
-        color: lighten($darker-text-color, 7%);
+        color: color-mix(
+          in oklab,
+          var(--clr-text-primary),
+          var(--clr-text-secondary)
+        );
       }
     }
 
@@ -7999,7 +8013,7 @@ a.status-card {
 
 .scrollable .account-card__title__avatar {
   img {
-    border: 2px solid var(--background-color);
+    border: 2px solid var(--clr-bg-primary);
   }
 
   .account__avatar {
@@ -8014,7 +8028,7 @@ a.status-card {
 }
 
 .scrollable .account-card__bio::after {
-  background: linear-gradient(to left, var(--background-color), transparent);
+  background: linear-gradient(to left, var(--clr-bg-primary), transparent);
 }
 
 .account-gallery__container {
@@ -8034,7 +8048,7 @@ a.status-card {
 
 .notification__filter-bar,
 .account__section-headline {
-  border: 1px solid var(--background-border-color);
+  border: 1px solid var(--clr-border-primary);
   border-top: 0;
   cursor: default;
   display: flex;
@@ -8055,7 +8069,7 @@ a.status-card {
   a {
     display: block;
     flex: 1 1 auto;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     padding: 15px 0;
     font-size: 14px;
     font-weight: 500;
@@ -8066,7 +8080,7 @@ a.status-card {
     white-space: nowrap;
 
     &.active {
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
 
       &::before {
         display: block;
@@ -8078,7 +8092,7 @@ a.status-card {
         width: 40px;
         height: 3px;
         border-radius: 4px 4px 0 0;
-        background: $highlight-text-color;
+        background: var(--clr-text-accent);
       }
     }
   }
@@ -8090,7 +8104,7 @@ a.status-card {
 }
 
 .filter-form {
-  border-bottom: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--clr-border-primary);
 
   &__column {
     display: flex;
@@ -8120,7 +8134,7 @@ a.status-card {
   text-overflow: ellipsis;
   cursor: pointer;
   gap: 10px;
-  color: $secondary-text-color;
+  color: var(--clr-text-primary);
 
   input[type='radio'],
   input[type='checkbox'] {
@@ -8132,7 +8146,7 @@ a.status-card {
     align-items: center;
     justify-content: center;
     position: relative;
-    border: 2px solid $secondary-text-color;
+    border: 2px solid var(--clr-text-primary);
     box-sizing: border-box;
     width: 20px;
     height: 20px;
@@ -8186,7 +8200,7 @@ noscript {
   div {
     font-size: 14px;
     margin: 30px auto;
-    color: $secondary-text-color;
+    color: var(--clr-text-primary);
     max-width: 400px;
 
     a {
@@ -8218,13 +8232,13 @@ noscript {
 .follow-request-banner,
 .account-memorial-banner {
   padding: 20px;
-  background: var(--surface-background-color);
+  background: var(--clr-bg-tertiary);
   display: flex;
   align-items: center;
   flex-direction: column;
 
   &__message {
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     padding: 8px 0;
     padding-top: 0;
     padding-bottom: 4px;
@@ -8261,7 +8275,7 @@ noscript {
   justify-content: flex-start;
   gap: 15px;
   align-items: center;
-  border: 1px solid var(--background-border-color);
+  border: 1px solid var(--clr-border-primary);
   border-top: 0;
 
   label {
@@ -8313,7 +8327,7 @@ noscript {
 }
 
 .account__header__content {
-  color: $darker-text-color;
+  color: var(--clr-text-secondary);
   font-size: 14px;
   font-weight: 400;
   overflow: hidden;
@@ -8365,8 +8379,8 @@ noscript {
     overflow: hidden;
     height: 145px;
     position: relative;
-    background: darken($ui-base-color, 4%);
-    border-bottom: 1px solid var(--background-border-color);
+    background: var(--clr-bg-tertiary);
+    border-bottom: 1px solid var(--clr-border-primary);
 
     img {
       object-fit: cover;
@@ -8380,15 +8394,15 @@ noscript {
   &__bar {
     position: relative;
     padding: 0 20px;
-    border-bottom: 1px solid var(--background-border-color);
+    border-bottom: 1px solid var(--clr-border-primary);
 
     .avatar {
       display: block;
       flex: 0 0 auto;
 
       .account__avatar {
-        background: var(--background-color);
-        border: 1px solid var(--background-border-color);
+        background: var(--clr-bg-primary);
+        border: 1px solid var(--clr-border-primary);
         border-radius: var(--avatar-border-radius);
       }
     }
@@ -8426,7 +8440,7 @@ noscript {
       h1 {
         font-size: 17px;
         line-height: 22px;
-        color: $primary-text-color;
+        color: var(--clr-text-primary);
         font-weight: 600;
         overflow: hidden;
         white-space: nowrap;
@@ -8438,7 +8452,7 @@ noscript {
           gap: 4px;
           font-size: 14px;
           line-height: 20px;
-          color: $darker-text-color;
+          color: var(--clr-text-secondary);
           font-weight: 400;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -8509,7 +8523,7 @@ noscript {
     }
 
     .icon-button {
-      border: 1px solid var(--background-border-color);
+      border: 1px solid var(--clr-border-primary);
       border-radius: 4px;
       box-sizing: content-box;
       padding: 5px;
@@ -8520,26 +8534,26 @@ noscript {
       }
 
       &.copied {
-        border-color: $valid-value-color;
+        border-color: var(--clr-text-success);
       }
     }
   }
 
   &__bio {
     .account__header__content {
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
     }
 
     .account__header__fields {
       margin: 0;
       margin-top: 16px;
       border-radius: 4px;
-      border: 1px solid var(--background-border-color);
+      border: 1px solid var(--clr-border-primary);
 
       dl {
         display: block;
         padding: 11px 16px;
-        border-bottom-color: var(--background-border-color);
+        border-bottom-color: var(--clr-border-primary);
       }
 
       dd,
@@ -8558,7 +8572,7 @@ noscript {
       }
 
       dd {
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
       }
 
       a {
@@ -8571,7 +8585,7 @@ noscript {
       }
 
       .verified {
-        border: 1px solid color.change($valid-value-color, $alpha: 0.5);
+        border: 1px solid var(--clr-text-success);
         margin-top: -1px;
         margin-inline: -1px;
 
@@ -8588,7 +8602,7 @@ noscript {
 
         dt,
         dd {
-          color: $valid-value-color;
+          color: var(--clr-text-success);
         }
 
         dd {
@@ -8602,7 +8616,7 @@ noscript {
         }
 
         a {
-          color: $valid-value-color;
+          color: var(--clr-text-success);
         }
       }
     }
@@ -8613,28 +8627,28 @@ noscript {
 
     &__links {
       font-size: 14px;
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
       margin: 0 -10px;
       padding-top: 16px;
       padding-bottom: 10px;
 
       a {
         display: inline-block;
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
         text-decoration: none;
         padding: 5px 10px;
         font-weight: 500;
 
         strong {
           font-weight: 700;
-          color: $primary-text-color;
+          color: var(--clr-text-primary);
         }
       }
     }
   }
 
   &__account-note {
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
     font-size: 14px;
     font-weight: 400;
     margin-bottom: 10px;
@@ -8657,7 +8671,7 @@ noscript {
       display: block;
       font-size: 12px;
       font-weight: 500;
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
       text-transform: uppercase;
       margin-bottom: 5px;
     }
@@ -8666,7 +8680,7 @@ noscript {
       display: block;
       box-sizing: border-box;
       width: calc(100% + 20px);
-      color: $secondary-text-color;
+      color: var(--clr-text-primary);
       background: transparent;
       padding: 10px;
       margin: 0 -10px;
@@ -8693,12 +8707,12 @@ noscript {
     align-items: center;
     gap: 10px;
     margin-block: 16px;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
 
     a:any-link {
       font-weight: 500;
       text-decoration: none;
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
     }
   }
 }
@@ -8716,7 +8730,7 @@ noscript {
 .verified-badge {
   display: inline-flex;
   align-items: center;
-  color: $valid-value-color;
+  color: var(--clr-text-success);
   gap: 4px;
   overflow: hidden;
   white-space: nowrap;
@@ -8743,7 +8757,7 @@ noscript {
     display: flex;
     align-items: center;
     padding: 16px;
-    border-bottom: 1px solid var(--background-border-color);
+    border-bottom: 1px solid var(--clr-border-primary);
     gap: 8px;
 
     &__name {
@@ -8758,7 +8772,7 @@ noscript {
       }
 
       a {
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
         text-decoration: none;
         font-size: 14px;
         font-weight: 500;
@@ -8782,7 +8796,7 @@ noscript {
       font-size: 24px;
       font-weight: 500;
       text-align: end;
-      color: $secondary-text-color;
+      color: var(--clr-text-primary);
       text-decoration: none;
     }
 
@@ -8857,7 +8871,7 @@ noscript {
 
 .conversation {
   display: flex;
-  border-bottom: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--clr-border-primary);
   padding: 5px;
   padding-bottom: 0;
 
@@ -8898,12 +8912,12 @@ noscript {
 
     &__relative-time {
       font-size: 15px;
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
       padding-inline-start: 15px;
     }
 
     &__names {
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
       font-size: 15px;
       white-space: nowrap;
       overflow: hidden;
@@ -8913,7 +8927,7 @@ noscript {
       flex-grow: 1;
 
       a {
-        color: $primary-text-color;
+        color: var(--clr-text-primary);
         text-decoration: none;
 
         &:hover,
@@ -8997,7 +9011,7 @@ noscript {
 
   &__pagination {
     padding: 15px;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     position: absolute;
     bottom: 3px;
     inset-inline-end: 0;
@@ -9026,7 +9040,7 @@ noscript {
   &__item {
     flex-shrink: 0;
     background: lighten($ui-base-color, 12%);
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     border: 0;
     border-radius: 3px;
     margin: 2px;
@@ -9070,7 +9084,11 @@ noscript {
       background: lighten($ui-base-color, 16%);
       transition: all 200ms ease-out;
       transition-property: background-color, color;
-      color: lighten($darker-text-color, 4%);
+      color: color-mix(
+        in oklab,
+        var(--clr-text-primary),
+        var(--clr-text-secondary)
+      );
     }
 
     &.active {
@@ -9095,7 +9113,7 @@ noscript {
   }
 
   .emoji-button {
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     margin: 0;
     font-size: 16px;
     width: auto;
@@ -9112,7 +9130,11 @@ noscript {
     &:active,
     &:focus {
       opacity: 1;
-      color: lighten($darker-text-color, 4%);
+      color: color-mix(
+        in oklab,
+        var(--clr-text-primary),
+        var(--clr-text-secondary)
+      );
       transition: all 200ms ease-out;
       transition-property: background-color, color;
     }
@@ -9129,6 +9151,7 @@ noscript {
 .status__wrapper,
 .conversation {
   position: relative;
+  background-color: var(--clr-bg-primary);
 
   // When scrolling these elements into view, take into account
   // the column header height
@@ -9142,7 +9165,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;
     }
   }
@@ -9157,9 +9180,9 @@ noscript {
 
   &__footer {
     border-radius: 0 0 4px 4px;
-    background: var(--modal-background-variant-color);
+    background: var(--clr-bg-secondary);
     backdrop-filter: $backdrop-blur-filter;
-    border: 1px solid var(--modal-border-color);
+    border: 1px solid var(--clr-border-primary);
     border-top: 0;
     padding: 12px;
     display: flex;
@@ -9168,9 +9191,9 @@ noscript {
 
   &__header {
     border-radius: 4px 4px 0 0;
-    background: var(--modal-background-variant-color);
+    background: var(--clr-bg-secondary);
     backdrop-filter: $backdrop-blur-filter;
-    border: 1px solid var(--modal-border-color);
+    border: 1px solid var(--clr-border-primary);
     border-bottom: 0;
     padding: 12px;
     display: flex;
@@ -9191,7 +9214,7 @@ noscript {
     }
 
     .display-name {
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
       text-decoration: none;
 
       strong,
@@ -9202,7 +9225,7 @@ noscript {
       }
 
       span {
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
       }
     }
   }
@@ -9216,7 +9239,7 @@ noscript {
 .picture-in-picture-placeholder {
   border-radius: 8px;
   box-sizing: border-box;
-  border: 1px dashed var(--background-border-color);
+  border: 1px dashed var(--clr-border-primary);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -9238,7 +9261,7 @@ noscript {
   &:hover,
   &:active,
   &:focus {
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
   }
 
   &:focus-visible {
@@ -9249,7 +9272,7 @@ noscript {
 
 .notifications-permission-banner {
   padding: 30px;
-  border-bottom: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--clr-border-primary);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -9270,7 +9293,7 @@ noscript {
   }
 
   p {
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     margin-bottom: 15px;
     text-align: center;
 
@@ -9285,7 +9308,7 @@ noscript {
 .explore__search-header {
   justify-content: center;
   align-items: center;
-  border: 1px solid var(--background-border-color);
+  border: 1px solid var(--clr-border-primary);
   border-top: 0;
   border-bottom: 0;
   padding: 16px;
@@ -9297,13 +9320,12 @@ noscript {
   }
 
   .search__input {
-    border: 1px solid var(--background-border-color);
     padding-block: 12px;
     padding-inline-end: 30px;
   }
 
   .search__popout {
-    border: 1px solid var(--background-border-color);
+    border: 1px solid var(--clr-border-primary);
   }
 
   .search__icon {
@@ -9327,7 +9349,7 @@ noscript {
   flex-direction: column;
 
   @media screen and (min-width: $no-gap-breakpoint) {
-    border: 1px solid var(--background-border-color);
+    border: 1px solid var(--clr-border-primary);
     border-top: 0;
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
@@ -9337,9 +9359,9 @@ noscript {
 .story {
   display: flex;
   align-items: center;
-  color: $primary-text-color;
+  color: var(--clr-text-primary);
   padding: 16px;
-  border-bottom: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--clr-border-primary);
   gap: 16px;
 
   &:last-child {
@@ -9350,7 +9372,7 @@ noscript {
     flex: 1 1 auto;
 
     &__publisher {
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
       margin-bottom: 8px;
       font-size: 14px;
       line-height: 20px;
@@ -9363,7 +9385,7 @@ noscript {
       font-weight: 500;
       margin-bottom: 8px;
       text-decoration: none;
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
 
       &:hover,
       &:active,
@@ -9375,14 +9397,14 @@ noscript {
     &__shared {
       display: flex;
       align-items: baseline;
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
       gap: 8px;
       justify-content: space-between;
       font-size: 14px;
       line-height: 20px;
 
       &__pill {
-        background: var(--surface-variant-background-color);
+        background: var(--clr-bg-tertiary);
         border-radius: 4px;
         color: inherit;
         text-decoration: none;
@@ -9397,7 +9419,7 @@ noscript {
         display: inline-flex;
         align-items: center;
         gap: 4px;
-        color: $primary-text-color;
+        color: var(--clr-text-primary);
         font-weight: 500;
         text-decoration: none;
 
@@ -9474,7 +9496,7 @@ noscript {
   &__introduction {
     font-size: 15px;
     line-height: 22px;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     margin-bottom: 20px;
 
     strong {
@@ -9508,7 +9530,7 @@ noscript {
   &__description {
     font-size: 15px;
     line-height: 22px;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     margin-bottom: 20px;
   }
 
@@ -9526,19 +9548,19 @@ noscript {
 
   &__number {
     font-weight: 600;
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
     font-size: 14px;
   }
 
   &__number-label {
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     font-weight: 500;
     font-size: 14px;
   }
 
   h4 {
     text-transform: uppercase;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     margin-bottom: 10px;
     font-weight: 600;
   }
@@ -9569,9 +9591,9 @@ noscript {
   position: relative;
   display: block;
   border-radius: 16px;
-  background: var(--modal-background-color);
+  background: var(--clr-bg-primary);
   backdrop-filter: $backdrop-blur-filter;
-  border: 1px solid var(--modal-border-color);
+  border: 1px solid var(--clr-border-primary);
   padding: 24px;
   box-sizing: border-box;
 
@@ -9595,10 +9617,10 @@ noscript {
     text-align: center;
     font-size: 17px;
     line-height: 22px;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
 
     strong {
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
       font-weight: 700;
     }
   }
@@ -9623,9 +9645,9 @@ noscript {
     &__input {
       @include search-input;
 
-      border: 1px solid var(--background-border-color);
+      border: 1px solid var(--clr-border-primary);
       padding: 4px 6px;
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
       font-size: 16px;
       line-height: 18px;
       display: flex;
@@ -9641,7 +9663,11 @@ noscript {
         min-width: 0;
 
         &::placeholder {
-          color: lighten($darker-text-color, 4%);
+          color: color-mix(
+            in oklab,
+            var(--clr-text-primary),
+            var(--clr-text-secondary)
+          );
         }
 
         &:focus {
@@ -9658,7 +9684,7 @@ noscript {
       margin-top: -1px;
       padding-top: 5px;
       padding-bottom: 5px;
-      border: 1px solid var(--background-border-color);
+      border: 1px solid var(--clr-border-primary);
     }
 
     &.invalid &__input {
@@ -9687,7 +9713,7 @@ noscript {
       }
 
       p {
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
         margin-bottom: 20px;
         font-size: 15px;
       }
@@ -9728,7 +9754,7 @@ noscript {
     font-family: inherit;
     background: darken($ui-base-color, 8%);
     border: 1px solid $highlight-text-color;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     border-radius: 4px;
     padding: 6px 9px;
     line-height: 22px;
@@ -9750,12 +9776,12 @@ noscript {
 
   &.copied {
     input {
-      border: 1px solid $valid-value-color;
+      border: 1px solid var(--clr-text-success);
       transition: none;
     }
 
     .button {
-      background: $valid-value-color;
+      background: var(--clr-bg-success-strong);
       transition: none;
     }
   }
@@ -9774,7 +9800,7 @@ noscript {
 }
 
 .prose {
-  color: $secondary-text-color;
+  color: var(--clr-text-primary);
   font-size: 15px;
   line-height: 22px;
 
@@ -9858,7 +9884,7 @@ noscript {
   ul > li::before {
     content: '';
     position: absolute;
-    background-color: $darker-text-color;
+    background-color: var(--clr-text-secondary);
     border-radius: 50%;
     width: 0.375em;
     height: 0.375em;
@@ -9909,7 +9935,7 @@ noscript {
   h6,
   strong,
   b {
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
     font-weight: 700;
   }
 
@@ -9997,7 +10023,7 @@ noscript {
     font-size: 15px;
     line-height: 22px;
     font-weight: 500;
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
 
     p {
       margin-bottom: 15px;
@@ -10057,7 +10083,7 @@ noscript {
     }
 
     a {
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
     }
   }
 }
@@ -10105,7 +10131,7 @@ noscript {
   }
 
   p {
-    color: $dark-text-color;
+    color: var(--clr-text-secondary);
     margin-bottom: 20px;
 
     .version {
@@ -10117,7 +10143,7 @@ noscript {
     }
 
     a {
-      color: $dark-text-color;
+      color: var(--clr-text-secondary);
       text-decoration: underline;
 
       &:hover,
@@ -10131,7 +10157,7 @@ noscript {
 
 .about {
   padding: 20px;
-  border-top: 1px solid var(--background-border-color);
+  border-top: 1px solid var(--clr-border-primary);
 
   @media screen and (min-width: $no-gap-breakpoint) {
     border-radius: 4px;
@@ -10173,12 +10199,12 @@ noscript {
       font-size: 16px;
       line-height: 24px;
       font-weight: 400;
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
     }
   }
 
   &__meta {
-    border: 1px solid var(--background-border-color);
+    border: 1px solid var(--clr-border-primary);
     border-radius: 4px;
     display: flex;
     margin-bottom: 30px;
@@ -10194,7 +10220,7 @@ noscript {
       width: 0;
       border: 0;
       border-style: solid;
-      border-color: var(--background-border-color);
+      border-color: var(--clr-border-primary);
       border-left-width: 1px;
       min-height: calc(100% - 60px);
       flex: 0 0 auto;
@@ -10203,7 +10229,7 @@ noscript {
     h4 {
       font-size: 15px;
       text-transform: uppercase;
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
       font-weight: 500;
       margin-bottom: 20px;
     }
@@ -10254,7 +10280,7 @@ noscript {
   }
 
   &__mail {
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
     text-decoration: none;
     font-weight: 500;
 
@@ -10302,7 +10328,7 @@ noscript {
       line-height: 22px;
       padding: 20px;
       border-radius: 4px;
-      border: 1px solid var(--background-border-color);
+      border: 1px solid var(--clr-border-primary);
       color: $highlight-text-color;
       cursor: pointer;
       width: 100%;
@@ -10314,7 +10340,7 @@ noscript {
     }
 
     &__body {
-      border: 1px solid var(--background-border-color);
+      border: 1px solid var(--clr-border-primary);
       border-top: 0;
       padding: 20px;
       font-size: 15px;
@@ -10324,14 +10350,14 @@ noscript {
 
   &__domain-blocks {
     margin-top: 30px;
-    border: 1px solid var(--background-border-color);
+    border: 1px solid var(--clr-border-primary);
     border-radius: 4px;
 
     &__domain {
-      border-bottom: 1px solid var(--background-border-color);
+      border-bottom: 1px solid var(--clr-border-primary);
       padding: 10px;
       font-size: 15px;
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
 
       &:nth-child(2n) {
         background: darken($ui-base-color, 4%);
@@ -10350,7 +10376,7 @@ noscript {
       }
 
       h6 {
-        color: $secondary-text-color;
+        color: var(--clr-text-primary);
         font-size: inherit;
         white-space: nowrap;
         overflow: hidden;
@@ -10471,11 +10497,11 @@ noscript {
 }
 
 .hashtag-header {
-  border-bottom: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--clr-border-primary);
   padding: 15px;
   font-size: 17px;
   line-height: 22px;
-  color: $darker-text-color;
+  color: var(--clr-text-secondary);
 
   strong {
     font-weight: 700;
@@ -10489,7 +10515,7 @@ noscript {
     gap: 15px;
 
     h1 {
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
@@ -10510,7 +10536,7 @@ noscript {
       }
 
       .icon-button {
-        border: 1px solid var(--background-border-color);
+        border: 1px solid var(--clr-border-primary);
         border-radius: 4px;
         box-sizing: content-box;
         padding: 5px;
@@ -10531,21 +10557,25 @@ noscript {
   font-size: 12px;
   line-height: 16px;
   gap: 6px;
-  color: $darker-text-color;
+  color: color-mix(
+    in oklab,
+    var(--clr-text-primary),
+    var(--clr-text-secondary)
+  );
 
   a {
     display: inline-flex;
     color: inherit;
     text-decoration: none;
     padding: 4px 12px;
-    background: var(--surface-variant-background-color);
+    background: var(--clr-bg-accent-subtle);
     border-radius: 4px;
     font-weight: 500;
 
     &:hover,
     &:focus,
     &:active {
-      background: var(--surface-variant-active-background-color);
+      background: var(--clr-bg-accent-subtle-highlighted);
     }
   }
 
@@ -10563,11 +10593,11 @@ noscript {
   gap: 12px;
   padding: 16px 0;
   padding-bottom: 0;
-  border-bottom: 1px solid var(--background-border-color);
-  background: color.change($ui-highlight-color, $alpha: 0.05);
+  border-bottom: 1px solid var(--clr-border-primary);
+  background: var(--clr-bg-accent-subtle);
 
   &.focusable:focus-visible {
-    background: color.change($ui-highlight-color, $alpha: 0.05);
+    background: var(--clr-bg-accent-subtle);
   }
 
   &__header {
@@ -10604,7 +10634,7 @@ noscript {
       border: none;
       cursor: pointer;
       top: 0;
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
       opacity: 0.5;
 
       &.left {
@@ -10617,7 +10647,8 @@ noscript {
 
       &__icon {
         border-radius: 50%;
-        background: $ui-highlight-color;
+        color: var(--clr-text-on-accent-strong);
+        background: var(--clr-bg-accent-strong);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -10655,8 +10686,8 @@ noscript {
       scrollbar-width: none;
 
       &__card {
-        background: var(--background-color);
-        border: 1px solid var(--background-border-color);
+        background: var(--clr-bg-primary);
+        border: 1px solid var(--clr-border-primary);
         border-radius: 4px;
         display: flex;
         flex-direction: column;
@@ -10693,7 +10724,7 @@ noscript {
         .account__avatar {
           flex-shrink: 0;
           align-self: flex-end;
-          border: 1px solid var(--background-border-color);
+          border: 1px solid var(--clr-border-primary);
           background-color: $ui-base-color;
         }
 
@@ -10742,12 +10773,12 @@ noscript {
           &__html {
             font-size: 15px;
             font-weight: 500;
-            color: $secondary-text-color;
+            color: var(--clr-text-primary);
           }
 
           &__account {
             font-size: 14px;
-            color: $darker-text-color;
+            color: var(--clr-text-secondary);
           }
         }
 
@@ -10768,16 +10799,16 @@ noscript {
 .filtered-notifications-banner {
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--clr-border-primary);
   padding: 16px 24px;
   gap: 8px;
-  color: $darker-text-color;
+  color: var(--clr-text-secondary);
   text-decoration: none;
 
   &:hover,
   &:active,
   &:focus {
-    color: $secondary-text-color;
+    color: var(--clr-text-primary);
   }
 
   .notification-group__icon {
@@ -10811,7 +10842,7 @@ noscript {
   padding: $padding;
   gap: 8px;
   position: relative;
-  border-bottom: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--clr-border-primary);
 
   &__checkbox {
     position: absolute;
@@ -10843,7 +10874,7 @@ noscript {
 
   &__name {
     flex: 1 1 auto;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     font-size: 14px;
     line-height: 20px;
     overflow: hidden;
@@ -10856,7 +10887,7 @@ noscript {
       font-size: 16px;
       letter-spacing: 0.5px;
       line-height: 24px;
-      color: $secondary-text-color;
+      color: var(--clr-text-primary);
 
       bdi {
         overflow: hidden;
@@ -10880,7 +10911,7 @@ noscript {
 
     .icon-button {
       border-radius: 4px;
-      border: 1px solid var(--background-border-color);
+      border: 1px solid var(--clr-border-primary);
       padding: 5px;
     }
   }
@@ -10893,7 +10924,7 @@ noscript {
     cursor: pointer;
 
     &:hover {
-      background: var(--on-surface-color);
+      background: var(--clr-bg-secondary);
     }
 
     .notification-request__checkbox {
@@ -10914,9 +10945,9 @@ noscript {
 .more-from-author {
   box-sizing: border-box;
   font-size: 14px;
-  color: $darker-text-color;
-  background: var(--surface-background-color);
-  border: 1px solid var(--background-border-color);
+  color: var(--clr-text-secondary);
+  background: var(--clr-bg-tertiary);
+  border: 1px solid var(--clr-border-primary);
   border-top: 0;
   border-radius: 0 0 8px 8px;
   padding: 15px;
@@ -10928,7 +10959,7 @@ noscript {
   .logo {
     width: 16px;
     height: 16px;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
   }
 
   & > span {
@@ -10942,7 +10973,7 @@ noscript {
     align-items: center;
     gap: 4px;
     font-weight: 500;
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
     text-decoration: none;
     min-width: 0;
 
@@ -10959,7 +10990,7 @@ noscript {
   align-items: flex-start;
   gap: 8px;
   padding: 16px 24px;
-  border-bottom: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--clr-border-primary);
 
   &__icon {
     width: 40px;
@@ -10985,7 +11016,7 @@ noscript {
   }
 
   &--reblog &__icon {
-    color: $valid-value-color;
+    color: var(--clr-text-success);
   }
 
   &--relationships-severance-event &__icon,
@@ -11004,7 +11035,7 @@ noscript {
     gap: 8px;
 
     .icon-button {
-      border: 1px solid var(--background-border-color);
+      border: 1px solid var(--clr-border-primary);
       border-radius: 50%;
       padding: 1px;
     }
@@ -11034,7 +11065,7 @@ noscript {
         gap: 2px 8px;
         font-size: 15px;
         line-height: 22px;
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
 
         a {
           color: inherit;
@@ -11043,7 +11074,7 @@ noscript {
 
         bdi {
           font-weight: 700;
-          color: $primary-text-color;
+          color: var(--clr-text-primary);
         }
 
         time {
@@ -11060,7 +11091,7 @@ noscript {
     }
 
     &__status {
-      border: 1px solid var(--background-border-color);
+      border: 1px solid var(--clr-border-primary);
       border-radius: 8px;
       padding: 8px;
     }
@@ -11093,7 +11124,7 @@ noscript {
       line-height: 22px;
 
       bdi {
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
       }
 
       .account__avatar {
@@ -11105,7 +11136,7 @@ noscript {
       display: -webkit-box;
       font-size: 15px;
       line-height: 22px;
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
       -webkit-line-clamp: 4;
       line-clamp: 4;
       -webkit-box-orient: vertical;
@@ -11141,7 +11172,7 @@ noscript {
 
 .notification-ungrouped {
   padding: 16px 24px;
-  border-bottom: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--clr-border-primary);
 
   &__header {
     display: flex;
@@ -11243,9 +11274,9 @@ noscript {
 
 .hover-card {
   box-shadow: var(--dropdown-shadow);
-  background: var(--modal-background-color);
+  background: var(--clr-bg-primary);
   backdrop-filter: $backdrop-blur-filter;
-  border: 1px solid var(--modal-border-color);
+  border: 1px solid var(--clr-border-primary);
   border-radius: 8px;
   padding: 16px;
   width: 270px;
@@ -11276,7 +11307,7 @@ noscript {
   &__numbers {
     font-size: 15px;
     line-height: 22px;
-    color: $secondary-text-color;
+    color: var(--clr-text-primary);
 
     strong {
       font-weight: 700;
@@ -11290,7 +11321,7 @@ noscript {
   }
 
   &__bio {
-    color: $secondary-text-color;
+    color: var(--clr-text-primary);
     font-size: 14px;
     line-height: 20px;
     display: -webkit-box;
@@ -11326,7 +11357,7 @@ noscript {
 
     dd {
       white-space: pre-line;
-      color: $secondary-text-color;
+      color: var(--clr-text-primary);
       overflow: hidden;
       line-clamp: 3; // Not yet supported in browers
       display: -webkit-box; // The next 3 properties are needed
@@ -11346,7 +11377,7 @@ noscript {
 
     bdi {
       font-weight: 500;
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
     }
 
     &__account {
@@ -11356,7 +11387,7 @@ noscript {
   }
 
   .account-fields {
-    color: $secondary-text-color;
+    color: var(--clr-text-primary);
     font-size: 14px;
     line-height: 20px;
 
@@ -11403,7 +11434,7 @@ noscript {
           gap: 4px;
           overflow: hidden;
           white-space: nowrap;
-          color: $valid-value-color;
+          color: var(--clr-text-success);
 
           & > span {
             overflow: hidden;
@@ -11427,9 +11458,13 @@ noscript {
 .content-warning {
   display: block;
   box-sizing: border-box;
-  background: var(--nested-card-background);
-  color: var(--nested-card-text);
-  border: var(--nested-card-border);
+  color: color-mix(
+    in oklab,
+    var(--clr-text-primary),
+    var(--clr-text-secondary)
+  );
+  background: var(--clr-bg-accent-subtle);
+  border: 1px solid var(--clr-border-on-bg-accent-subtle);
   border-radius: 8px;
   padding: 8px (5px + 8px);
   position: relative;
@@ -11449,7 +11484,7 @@ noscript {
   }
 
   &--filter {
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
 
     p {
       font-weight: normal;
@@ -11457,7 +11492,7 @@ noscript {
 
     .filter-name {
       font-weight: 500;
-      color: $secondary-text-color;
+      color: var(--clr-text-primary);
     }
   }
 }
@@ -11467,7 +11502,7 @@ noscript {
   align-items: center;
   gap: 16px;
   padding-inline-end: 13px;
-  border-bottom: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--clr-border-primary);
 
   &__title {
     display: flex;
@@ -11477,13 +11512,13 @@ noscript {
     flex: 1 1 auto;
     font-size: 16px;
     line-height: 24px;
-    color: $secondary-text-color;
+    color: var(--clr-text-secondary);
     text-decoration: none;
 
     &:is(a):hover,
     &:is(a):focus,
     &:is(a):active {
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
     }
 
     input {
@@ -11498,7 +11533,7 @@ noscript {
       color: inherit;
 
       &::placeholder {
-        color: var(--input-placeholder-color);
+        color: var(--clr-text-secondary);
         opacity: 1;
       }
 
@@ -11513,16 +11548,16 @@ noscript {
   display: flex;
   gap: 12px;
   align-items: center;
-  border: 1px solid var(--background-border-color);
+  border: 1px solid var(--clr-border-primary);
   border-top: 0;
   border-bottom: 0;
   padding: 16px;
   padding-bottom: 8px;
 
   input {
-    background: var(--input-background-color);
-    border: 1px solid var(--background-border-color);
-    color: var(--on-input-color);
+    background: var(--clr-bg-secondary);
+    border: 1px solid var(--clr-border-primary);
+    color: var(--clr-text-primary);
     padding: 12px;
     font-size: 16px;
     line-height: normal;
@@ -11531,7 +11566,7 @@ noscript {
     flex: 1 1 auto;
 
     &::placeholder {
-      color: var(--input-placeholder-color);
+      color: var(--clr-text-secondary);
       opacity: 1;
     }
 
@@ -11552,7 +11587,7 @@ noscript {
 .featured-carousel {
   overflow: hidden;
   flex-shrink: 0;
-  border-bottom: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--clr-border-primary);
   touch-action: pan-y;
 
   &__slides {
@@ -11574,7 +11609,7 @@ noscript {
 
   &__header {
     padding: 8px 16px;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     inset-inline-end: 0;
     display: flex;
     align-items: center;
diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss
index 7db9ca409d7..3c4b8eb1a49 100644
--- a/app/javascript/styles/mastodon/containers.scss
+++ b/app/javascript/styles/mastodon/containers.scss
@@ -1,4 +1,5 @@
 @use 'variables' as *;
+@use 'theme_utils' as *;
 
 .container-alt {
   width: 700px;
@@ -27,7 +28,7 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
       text-decoration: none;
       outline: 0;
       padding: 12px 16px;
@@ -65,7 +66,7 @@
   padding: 20px 0;
   margin-top: 40px;
   margin-bottom: 10px;
-  border-bottom: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--clr-border-primary);
 
   @media screen and (width <= 440px) {
     width: 100%;
@@ -89,7 +90,7 @@
 
   .name {
     flex: 1 1 auto;
-    color: $secondary-text-color;
+    color: var(--clr-text-primary);
 
     .username {
       display: block;
@@ -97,7 +98,7 @@
       line-height: 24px;
       text-overflow: ellipsis;
       overflow: hidden;
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
     }
   }
 
diff --git a/app/javascript/styles/mastodon/css_variables.scss b/app/javascript/styles/mastodon/css_variables.scss
index 78915ae10ee..0f88ce4539b 100644
--- a/app/javascript/styles/mastodon/css_variables.scss
+++ b/app/javascript/styles/mastodon/css_variables.scss
@@ -1,42 +1,170 @@
 @use 'sass:color';
 @use 'functions' as *;
 @use 'variables' as *;
+@use 'theme_utils' as *;
 
 :root {
-  --dropdown-border-color: #{lighten($ui-base-color, 4%)};
-  --dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)};
-  --dropdown-shadow:
-    0 20px 25px -5px #{color.change($base-shadow-color, $alpha: 0.25)},
-    0 8px 10px -6px #{color.change($base-shadow-color, $alpha: 0.25)};
-  --modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)};
-  --modal-background-variant-color: #{color.change($ui-base-color, $alpha: 0.7)};
-  --modal-border-color: #{lighten($ui-base-color, 4%)};
-  --background-border-color: #{lighten($ui-base-color, 4%)};
-  --background-color: #{darken($ui-base-color, 8%)};
-  --background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)};
-  --surface-background-color: #{darken($ui-base-color, 4%)};
-  --surface-variant-background-color: #{$ui-base-color};
-  --surface-variant-active-background-color: #{lighten($ui-base-color, 4%)};
-  --surface-border-color: #{lighten($ui-base-color, 8%)};
-  --on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.5)};
-  --avatar-border-radius: 8px;
-  --media-outline-color: #{rgba(#fcf8ff, 0.15)};
-  --overlay-icon-shadow: drop-shadow(
-    0 0 8px #{color.change($base-shadow-color, $alpha: 0.35)}
+  --clr-black: #000;
+  --clr-grey-950: #181821;
+  --clr-grey-800: #292938;
+  --clr-grey-700: #444664;
+  --clr-grey-600: #545778;
+  --clr-grey-500: #606085;
+  --clr-grey-400: #8b8dac;
+  --clr-grey-300: #b4b6cb;
+  --clr-grey-200: #d8d9e3;
+  --clr-grey-100: #f0f0f5;
+  --clr-grey-50: #f0f1ff;
+  --clr-white: #fff;
+  --clr-indigo-600: #6147e6;
+  --clr-indigo-400: #8886ff;
+  --clr-indigo-200: #c8cdfe;
+  --clr-indigo-100: #e0e3ff;
+  --clr-indigo-50: #f0f1ff;
+  --clr-light-pink: #ededff;
+  --clr-red: #df405a;
+  --clr-red-100: #ffe4e6;
+  --clr-red-500: #ff637e;
+  --clr-red-600: #ec003f;
+  --clr-yellow-50: #fffbeb;
+  --clr-yellow-400: #ffb900;
+  --clr-yellow-600: #e17100;
+  --clr-green: #79bd9a;
+  --clr-green-100: #dcfce7;
+  --clr-green-400: #05df72;
+  --clr-green-600: #00a63e;
+
+  /* TEXT TOKENS */
+
+  --clr-text-primary: var(--clr-grey-50);
+  --clr-text-secondary: var(--clr-grey-400);
+  --clr-text-on-inverted: var(--clr-grey-950);
+  --clr-text-accent: var(--clr-indigo-400);
+  --clr-text-accent-subtle: color-mix(
+    in oklab,
+    var(--clr-text-primary),
+    var(--clr-text-accent)
   );
-  --error-background-color: #{darken($error-red, 16%)};
-  --error-active-background-color: #{darken($error-red, 12%)};
-  --on-error-color: #fff;
-  --rich-text-container-color: rgba(87, 24, 60, 100%);
-  --rich-text-text-color: rgba(255, 175, 212, 100%);
-  --rich-text-decorations-color: rgba(128, 58, 95, 100%);
-  --nested-card-background: color(from #{$ui-highlight-color} srgb r g b / 5%);
-  --nested-card-text: #{$secondary-text-color};
-  --nested-card-border: 1px solid
-    color(from #{$ui-highlight-color} srgb r g b / 15%);
-  --input-placeholder-color: #{$dark-text-color};
-  --input-background-color: var(--surface-variant-background-color);
-  --on-input-color: #{$secondary-text-color};
+  --clr-text-on-accent-strong: var(--clr-white);
+  --clr-text-error: var(--clr-red-500);
+  --clr-text-on-error-strong: var(--clr-white);
+  --clr-text-warning: var(--clr-yellow-400);
+  --clr-text-on-warning-strong: var(--clr-white);
+  --clr-text-success: var(--clr-green-400);
+  --clr-text-on-success-strong: var(--clr-white);
+  --clr-text-disabled: var(--clr-grey-400);
+  --clr-text-on-disabled: var(--clr-grey-400);
+
+  /* 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: #{css-alpha(
+      var(--clr-bg-secondary-base),
+      var(--clr-bg-secondary-strength)
+    )};
+  --clr-bg-secondary-solid: #{color-mix(
+      in srgb,
+      var(--clr-bg-primary),
+      var(--clr-bg-secondary-base) var(--clr-bg-secondary-strength)
+    )};
+
+  /* Secondary with doubled mix amount */
+  --clr-bg-tertiary: #{color-mix(
+      in oklab,
+      var(--clr-bg-primary),
+      var(--clr-bg-secondary-base) calc(2 * var(--clr-bg-secondary-strength))
+    )};
+  --clr-bg-ambient: var(--clr-bg-primary);
+  --clr-bg-elevated: var(--clr-grey-800);
+  --clr-bg-inverted: var(--clr-grey-950);
+  --clr-bg-disabled: var(--clr-grey-700);
+  --clr-bg-accent-subtle-base: var(--clr-indigo-400);
+  --clr-bg-accent-subtle-strength: 10%;
+  --clr-bg-accent-subtle: #{css-alpha(
+      var(--clr-bg-accent-subtle-base),
+      var(--clr-bg-accent-subtle-strength)
+    )};
+  --clr-bg-accent-subtle-highlighted: #{css-alpha(
+      var(--clr-bg-accent-subtle-base),
+      calc(var(--clr-bg-accent-subtle-strength) * 1.5)
+    )};
+  --clr-bg-accent-strong: var(--clr-indigo-600);
+  --clr-bg-accent-strong-highlighted: color-mix(
+    in oklab,
+    var(--clr-bg-accent-strong),
+    black var(--clr-bg-accent-subtle-strength)
+  );
+  --clr-bg-error-subtle-base: #f41b3b;
+  --clr-bg-error-subtle-strength: 12%;
+  --clr-bg-error-subtle: #{css-alpha(
+      var(--clr-bg-error-subtle-base),
+      var(--clr-bg-error-subtle-strength)
+    )};
+  --clr-bg-error-strong: var(--clr-red-600);
+  --clr-bg-error-strong-highlighted: color-mix(
+    in oklab,
+    var(--clr-bg-error-strong),
+    black var(--clr-bg-error-subtle-strength)
+  );
+  --clr-bg-warning-subtle-base: #ffca1b;
+  --clr-bg-warning-subtle-strength: 10%;
+  --clr-bg-warning-subtle: #{css-alpha(
+      var(--clr-bg-warning-subtle-base),
+      var(--clr-bg-warning-subtle-strength)
+    )};
+  --clr-bg-warning-strong: var(--clr-yellow-600);
+  --clr-bg-warning-strong-highlighted: color-mix(
+    in oklab,
+    var(--clr-bg-warning-strong),
+    black var(--clr-bg-warning-subtle-strength)
+  );
+  --clr-bg-success-subtle-base: #17e865;
+  --clr-bg-success-subtle-strength: 15%;
+  --clr-bg-success-subtle: #{css-alpha(
+      var(--clr-bg-success-subtle-base),
+      var(--clr-bg-success-subtle-strength)
+    )};
+  --clr-bg-success-strong: var(--clr-green-600);
+  --clr-bg-success-strong-highlighted: color-mix(
+    in oklab,
+    var(--clr-bg-success-strong),
+    black var(--clr-bg-success-subtle-strength)
+  );
+
+  /* BORDER TOKENS */
+
+  --clr-border-primary-base: var(--clr-indigo-200);
+  --clr-border-primary-strength: 18%;
+  --clr-border-primary: #{css-alpha(
+      var(--clr-border-primary-base),
+      var(--clr-border-primary-strength)
+    )};
+  --clr-border-strong: var(--clr-grey-200);
+  --clr-border-media: rgb(252 248 255 / 15%);
+  --clr-border-on-bg-secondary: #{css-alpha(
+      var(--clr-border-primary-base),
+      calc(var(--clr-border-primary-strength) / 1.5)
+    )};
+  --clr-border-on-bg-accent-subtle: var(--clr-border-primary);
+  --clr-border-on-bg-error-subtle: #{css-alpha(var(--clr-text-error), 50%)};
+  --clr-border-on-bg-warning-subtle: #{css-alpha(var(--clr-text-warning), 50%)};
+  --clr-border-on-bg-success-subtle: #{css-alpha(var(--clr-text-success), 50%)};
+
+  /* LEGACY TOKENS */
+
+  --rich-text-container-color: rgb(87 24 60 / 100%);
+  --rich-text-text-color: rgb(255 175 212 / 100%);
+  --rich-text-decorations-color: rgb(128 58 95 / 100%);
+
+  /* MISCELLANEOUS */
+
+  --outline-focus-default: 2px solid var(--clr-text-accent);
+  --avatar-border-radius: 8px;
+  --dropdown-shadow:
+    0 20px 25px -5px rgb(0 0 0 / 80%), 0 8px 10px -6px rgb(0 0 0 / 80%);
+  --overlay-icon-shadow: drop-shadow(0 0 8px rgb(0 0 0 / 80%));
 }
 
 body {
diff --git a/app/javascript/styles/mastodon/dashboard.scss b/app/javascript/styles/mastodon/dashboard.scss
index 8326022f71a..9ec30f2289e 100644
--- a/app/javascript/styles/mastodon/dashboard.scss
+++ b/app/javascript/styles/mastodon/dashboard.scss
@@ -16,9 +16,9 @@
     & > div,
     & > a {
       padding: 20px;
-      background: var(--background-color);
+      background: var(--clr-bg-primary);
       border-radius: 4px;
-      border: 1px solid var(--background-border-color);
+      border: 1px solid var(--clr-border-primary);
       box-sizing: border-box;
       height: 100%;
     }
@@ -41,7 +41,7 @@
     text-align: center;
     font-weight: 500;
     font-size: 24px;
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
     margin-bottom: 20px;
     line-height: 30px;
   }
@@ -52,7 +52,7 @@
 
   &__label {
     font-size: 14px;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     text-align: center;
     font-weight: 500;
   }
@@ -85,8 +85,8 @@
     display: flex;
     align-items: baseline;
     border-radius: 4px;
-    background: $ui-button-background-color;
-    color: $primary-text-color;
+    background: var(--clr-bg-accent-strong);
+    color: var(--clr-text-on-accent-strong);
     transition: all 100ms ease-in;
     font-size: 14px;
     padding: 8px 16px;
@@ -96,18 +96,18 @@
     &:active,
     &:focus,
     &:hover {
-      background-color: $ui-button-focus-background-color;
+      background-color: var(--clr-bg-accent-strong-highlighted);
       transition: all 200ms ease-out;
     }
 
     &.positive {
-      background: lighten($ui-base-color, 4%);
-      color: $valid-value-color;
+      background: var(--clr-bg-success-subtle);
+      color: var(--clr-text-success);
     }
 
     &.negative {
-      background: lighten($ui-base-color, 4%);
-      color: $error-value-color;
+      background: var(--clr-bg-error-subtle);
+      color: var(--clr-text-error);
     }
 
     span {
diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss
index 716c790e656..4aeac5c809e 100644
--- a/app/javascript/styles/mastodon/emoji_picker.scss
+++ b/app/javascript/styles/mastodon/emoji_picker.scss
@@ -18,7 +18,7 @@
 
 .emoji-mart-bar {
   &:first-child {
-    background: var(--dropdown-border-color);
+    background: var(--clr-border-primary);
   }
 }
 
@@ -39,10 +39,14 @@
   cursor: pointer;
   background: transparent;
   border: 0;
-  color: $darker-text-color;
+  color: var(--clr-text-secondary);
 
   &:hover {
-    color: lighten($darker-text-color, 4%);
+    color: color-mix(
+      in oklab,
+      var(--clr-text-primary),
+      var(--clr-text-secondary)
+    );
   }
 }
 
@@ -101,9 +105,9 @@
     font-family: inherit;
     display: block;
     width: 100%;
-    background: $ui-base-color;
-    color: $darker-text-color;
-    border: 1px solid var(--background-border-color);
+    background: var(--clr-bg-secondary);
+    color: var(--clr-text-secondary);
+    border: 1px solid var(--clr-border-primary);
     border-radius: 4px;
 
     &::-moz-focus-inner {
@@ -133,7 +137,6 @@
   transition: all 100ms linear;
   transition-property: opacity;
   pointer-events: auto;
-  opacity: 0.7;
 
   &:disabled {
     cursor: default;
@@ -141,7 +144,7 @@
   }
 
   svg {
-    fill: $darker-text-color;
+    fill: currentColor;
   }
 }
 
@@ -165,7 +168,7 @@
     inset-inline-start: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--dropdown-border-color);
+    background-color: var(--clr-border-primary);
     border-radius: 100%;
   }
 }
diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss
index e0ccd0a27fd..a285d5eacfb 100644
--- a/app/javascript/styles/mastodon/forms.scss
+++ b/app/javascript/styles/mastodon/forms.scss
@@ -16,7 +16,7 @@ code {
 
 .form-section {
   border-radius: 8px;
-  background: var(--surface-background-color);
+  background: var(--clr-bg-tertiary);
   padding: 24px;
   margin-bottom: 24px;
 }
@@ -31,11 +31,7 @@ code {
   &::after {
     content: '';
     display: block;
-    background: linear-gradient(
-      to bottom,
-      var(--surface-background-color),
-      transparent
-    );
+    background: linear-gradient(to bottom, var(--clr-bg-tertiary), transparent);
     position: absolute;
     top: 0;
     inset-inline-start: 0;
@@ -58,7 +54,7 @@ code {
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  color: $primary-text-color;
+  color: var(--clr-text-primary);
 
   &.success {
     background: $success-green;
@@ -126,7 +122,7 @@ code {
         font-family: inherit;
         font-size: 14px;
         padding-top: 5px;
-        color: $primary-text-color;
+        color: var(--clr-text-primary);
         display: block;
         width: auto;
       }
@@ -189,7 +185,7 @@ code {
   .lead {
     font-size: 17px;
     line-height: 22px;
-    color: $secondary-text-color;
+    color: var(--clr-text-primary);
     margin-bottom: 30px;
 
     &.invited-by {
@@ -208,7 +204,7 @@ code {
   }
 
   .hint {
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
 
     a {
       color: $highlight-text-color;
@@ -242,7 +238,7 @@ code {
 
   p.hint {
     margin-bottom: 15px;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
 
     &.subtle-hint {
       text-align: center;
@@ -278,7 +274,7 @@ code {
       & > label {
         font-family: inherit;
         font-size: 14px;
-        color: $primary-text-color;
+        color: var(--clr-text-primary);
         font-weight: 500;
         min-width: 150px;
         flex: 0 0 auto;
@@ -300,7 +296,7 @@ code {
     .label_input > label {
       font-family: inherit;
       font-size: 14px;
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
       display: block;
       margin-bottom: 8px;
       overflow-wrap: break-word;
@@ -322,7 +318,7 @@ code {
     & > label {
       font-family: inherit;
       font-size: 14px;
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
       display: block;
       font-weight: 600;
       line-height: 20px;
@@ -381,7 +377,7 @@ code {
 
   .required abbr {
     text-decoration: none;
-    color: lighten($error-value-color, 12%);
+    color: var(--clr-text-error);
   }
 
   .fields-group {
@@ -474,7 +470,7 @@ code {
     margin-bottom: 5px;
     font-family: inherit;
     font-size: 14px;
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
     display: block;
     width: auto;
   }
@@ -484,7 +480,7 @@ code {
       label {
         font-family: inherit;
         font-size: 14px;
-        color: $primary-text-color;
+        color: var(--clr-text-primary);
         display: inline-block;
         width: auto;
         position: relative;
@@ -505,7 +501,7 @@ code {
   .input.static .label_input__wrapper {
     font-size: 14px;
     padding: 10px;
-    border: 1px solid $dark-text-color;
+    border: 1px solid var(--clr-border-primary);
     border-radius: 4px;
   }
 
@@ -519,14 +515,14 @@ code {
     box-sizing: border-box;
     font-size: 14px;
     line-height: 20px;
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
     display: block;
     width: 100%;
     outline: 0;
     font-family: inherit;
     resize: vertical;
-    background: $ui-base-color;
-    border: 1px solid var(--background-border-color);
+    background: var(--clr-bg-primary);
+    border: 1px solid var(--clr-border-primary);
     border-radius: 4px;
     padding: 10px 16px;
 
@@ -535,7 +531,7 @@ code {
     }
 
     &:required:valid {
-      border-color: $valid-value-color;
+      border-color: var(--clr-text-success);
     }
 
     @media screen and (width <= 600px) {
@@ -550,13 +546,13 @@ code {
   input[type='datetime-local'] {
     &:focus:invalid:not(:placeholder-shown),
     &:required:invalid:not(:placeholder-shown) {
-      border-color: lighten($error-red, 12%);
+      border-color: var(--clr-text-error);
     }
   }
 
   .input.field_with_errors {
     label {
-      color: lighten($error-red, 12%);
+      color: var(--clr-text-error);
     }
 
     input[type='text'],
@@ -566,13 +562,13 @@ code {
     input[type='datetime-local'],
     textarea,
     select {
-      border-color: lighten($error-red, 12%);
+      border-color: var(--clr-text-error);
     }
 
     .error {
       display: block;
       font-weight: 500;
-      color: lighten($error-red, 12%);
+      color: var(--clr-text-error);
       margin-top: 4px;
     }
   }
@@ -605,8 +601,8 @@ code {
     width: 100%;
     border: 0;
     border-radius: 4px;
-    background: $ui-button-background-color;
-    color: $ui-button-color;
+    background: var(--clr-bg-accent-strong);
+    color: var(--clr-text-on-accent-strong);
     font-size: 15px;
     line-height: 22px;
     height: auto;
@@ -625,21 +621,22 @@ code {
     &:active,
     &:focus,
     &:hover {
-      background-color: $ui-button-focus-background-color;
+      background: var(--clr-bg-accent-strong-highlighted);
     }
 
     &:disabled,
     &:disabled:hover {
-      background-color: $ui-button-disabled-color;
+      color: var(--clr-text-on-disabled);
+      background: var(--clr-bg-disabled);
     }
 
     &.negative {
-      background: $ui-button-destructive-background-color;
+      background: var(--clr-bg-error-strong);
 
       &:hover,
       &:active,
       &:focus {
-        background-color: $ui-button-destructive-focus-background-color;
+        background: var(--clr-bg-error-strong-highlighted);
       }
     }
   }
@@ -648,7 +645,7 @@ code {
     appearance: none;
     box-sizing: border-box;
     font-size: 14px;
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
     display: block;
     width: 100%;
     outline: 0;
@@ -657,7 +654,7 @@ code {
     background: $ui-base-color
       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
       no-repeat right 8px center / auto 14px;
-    border: 1px solid var(--background-border-color);
+    border: 1px solid var(--clr-border-primary);
     border-radius: 4px;
     padding-inline-start: 10px;
     padding-inline-end: 30px;
@@ -729,30 +726,30 @@ code {
 }
 
 .flash-message {
-  background: var(--background-color);
-  color: $highlight-text-color;
-  border: 1px solid $highlight-text-color;
+  color: var(--clr-text-accent);
+  background: var(--clr-bg-accent-subtle);
+  border: 1px solid var(--clr-text-accent);
   border-radius: 4px;
   padding: 15px 10px;
   margin-bottom: 30px;
   text-align: center;
 
   &.notice {
-    border: 1px solid color.change($valid-value-color, $alpha: 0.5);
-    background: color.change($valid-value-color, $alpha: 0.25);
-    color: $valid-value-color;
+    border: 1px solid var(--clr-border-on-bg-accent-subtle);
+    background: var(--clr-bg-success-subtle);
+    color: var(--clr-text-success);
   }
 
   &.warning {
-    border: 1px solid color.change($gold-star, $alpha: 0.5);
-    background: color.change($gold-star, $alpha: 0.25);
-    color: $gold-star;
+    border: 1px solid var(--clr-border-on-bg-warning-subtle);
+    background: var(--clr-bg-warning-subtle);
+    color: var(--clr-text-warning);
   }
 
   &.alert {
-    border: 1px solid color.change($error-value-color, $alpha: 0.5);
-    background: color.change($error-value-color, $alpha: 0.1);
-    color: $error-value-color;
+    border: 1px solid var(--clr-border-on-bg-error-subtle);
+    background: var(--clr-bg-error-subtle);
+    color: var(--clr-text-error);
   }
 
   &.hidden {
@@ -767,11 +764,11 @@ code {
 
   a {
     display: inline-block;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     text-decoration: none;
 
     &:hover {
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
       text-decoration: underline;
     }
   }
@@ -802,7 +799,7 @@ code {
     padding: 10px;
     font-family: $font-monospace, monospace;
     background: $ui-base-color;
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
     font-size: 14px;
     margin: 0;
 
@@ -873,7 +870,7 @@ code {
   text-align: center;
 
   a {
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     text-decoration: none;
 
     &:hover {
@@ -909,7 +906,7 @@ code {
 .oauth-prompt,
 .follow-prompt {
   margin-bottom: 30px;
-  color: $darker-text-color;
+  color: var(--clr-text-secondary);
 
   h2 {
     font-size: 16px;
@@ -918,7 +915,7 @@ code {
   }
 
   strong {
-    color: $secondary-text-color;
+    color: var(--clr-text-primary);
     font-weight: 500;
 
     @each $lang in $cjk-langs {
@@ -987,7 +984,7 @@ code {
 
 .qr-alternative {
   margin-bottom: 20px;
-  color: $secondary-text-color;
+  color: var(--clr-text-primary);
   flex: 150px;
 
   samp {
@@ -999,8 +996,8 @@ code {
 .simple_form {
   .warning {
     box-sizing: border-box;
-    background: color.change($error-value-color, $alpha: 0.5);
-    color: $primary-text-color;
+    background: var(--clr-bg-error-subtle);
+    color: var(--clr-text-primary);
     text-shadow: 1px 1px 0 color.change($base-shadow-color, $alpha: 0.3);
     box-shadow: 0 2px 6px color.change($base-shadow-color, $alpha: 0.4);
     border-radius: 4px;
@@ -1008,7 +1005,7 @@ code {
     margin-bottom: 15px;
 
     a {
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
       text-decoration: underline;
 
       &:hover,
@@ -1051,7 +1048,7 @@ code {
 
 .post-follow-actions {
   text-align: center;
-  color: $darker-text-color;
+  color: var(--clr-text-secondary);
 
   div {
     margin-bottom: 4px;
@@ -1064,7 +1061,7 @@ code {
 
   h4 {
     font-size: 16px;
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
     text-align: center;
     margin-bottom: 20px;
     border: 0;
@@ -1127,11 +1124,11 @@ code {
   }
 
   &.copied {
-    border-color: $valid-value-color;
+    border-color: var(--clr-text-success);
     transition: none;
 
     button {
-      background: $valid-value-color;
+      background: var(--clr-bg-success-strong);
       transition: none;
     }
   }
@@ -1166,7 +1163,7 @@ code {
       }
 
       &__type {
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
         overflow-wrap: anywhere;
       }
     }
@@ -1175,7 +1172,7 @@ code {
       flex: 0 0 auto;
       font-size: 18px;
       width: 30px;
-      color: $valid-value-color;
+      color: var(--clr-text-success);
       display: flex;
       align-items: center;
     }
@@ -1268,7 +1265,7 @@ code {
     position: absolute;
     font-size: 14px;
     font-weight: 500;
-    color: $secondary-text-color;
+    color: var(--clr-text-primary);
     padding-top: 10px;
     text-align: center;
     width: 100px;
@@ -1319,10 +1316,14 @@ code {
   &__header-input {
     display: block;
     border-radius: 8px;
-    background: var(--surface-variant-background-color);
+    background: var(--clr-bg-secondary);
     position: relative;
     cursor: pointer;
 
+    &:hover {
+      background-color: var(--clr-bg-accent-subtle);
+    }
+
     img {
       position: absolute;
       width: 100%;
@@ -1337,12 +1338,12 @@ code {
       inset-inline-start: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
       z-index: 3;
     }
 
     &.selected .icon {
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
       transform: none;
       inset-inline-start: auto;
       inset-inline-end: 8px;
@@ -1351,7 +1352,7 @@ code {
     }
 
     &.invalid img {
-      outline: 1px solid $error-value-color;
+      outline: 1px solid var(--clr-text-error);
       outline-offset: -1px;
     }
 
@@ -1361,14 +1362,10 @@ code {
       width: 100%;
       height: 100%;
       position: absolute;
-      background: color.change($error-value-color, $alpha: 0.25);
+      background: var(--clr-bg-error-subtle);
       z-index: 2;
       border-radius: 8px;
     }
-
-    &:hover {
-      background-color: var(--surface-variant-active-background-color);
-    }
   }
 
   &__avatar-input {
@@ -1384,7 +1381,7 @@ code {
     display: flex;
     align-items: center;
     gap: 16px;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     font-size: 14px;
     line-height: 20px;
 
@@ -1401,14 +1398,14 @@ code {
       flex: 1 1 auto;
 
       strong {
-        color: $primary-text-color;
+        color: var(--clr-text-primary);
         font-weight: 600;
       }
 
       .hint {
         display: block;
         font-size: 14px;
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
       }
 
       .recommended {
@@ -1426,7 +1423,7 @@ code {
 
     &__toggle > div {
       display: flex;
-      border-inline-start: 1px solid var(--background-border-color);
+      border-inline-start: 1px solid var(--clr-border-primary);
       padding-inline-start: 16px;
     }
   }
@@ -1437,19 +1434,19 @@ code {
     padding: 8px 0;
     align-items: center;
     text-decoration: none;
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
     margin-bottom: 16px;
 
     &__text {
       flex: 1 1 auto;
       font-size: 14px;
       line-height: 20px;
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
 
       strong {
         font-weight: 600;
         display: block;
-        color: $primary-text-color;
+        color: var(--clr-text-primary);
       }
 
       .icon {
diff --git a/app/javascript/styles/mastodon/polls.scss b/app/javascript/styles/mastodon/polls.scss
index e8f2f5c3940..943a727bf5f 100644
--- a/app/javascript/styles/mastodon/polls.scss
+++ b/app/javascript/styles/mastodon/polls.scss
@@ -78,11 +78,11 @@
       box-sizing: border-box;
       width: 100%;
       font-size: 14px;
-      color: $secondary-text-color;
+      color: var(--clr-text-primary);
       outline: 0;
       font-family: inherit;
       background: $ui-base-color;
-      border: 1px solid $darker-text-color;
+      border: 1px solid var(--clr-text-secondary);
       border-radius: 4px;
       padding: 8px 12px;
 
@@ -111,7 +111,7 @@
   &__input {
     display: block;
     position: relative;
-    border: 1px solid $ui-primary-color;
+    border: 1px solid var(--clr-bg-primary);
     box-sizing: border-box;
     width: 17px;
     height: 17px;
@@ -125,13 +125,13 @@
     &:active,
     &:focus,
     &:hover {
-      border-color: lighten($valid-value-color, 15%);
+      border-color: var(--clr-text-success);
       border-width: 4px;
     }
 
     &.active {
-      background-color: $valid-value-color;
-      border-color: $valid-value-color;
+      background-color: var(--clr-bg-success-strong);
+      border-color: var(--clr-text-success);
     }
 
     &::-moz-focus-inner {
diff --git a/app/javascript/styles/mastodon/reset.scss b/app/javascript/styles/mastodon/reset.scss
index 2dce637a061..07be34e56a3 100644
--- a/app/javascript/styles/mastodon/reset.scss
+++ b/app/javascript/styles/mastodon/reset.scss
@@ -1,4 +1,5 @@
 @use 'variables' as *;
+@use 'theme_utils' as *;
 
 /* http://meyerweb.com/eric/tools/css/reset/
    v2.0 | 20110126
@@ -57,7 +58,7 @@ table {
 
 @supports not selector(::-webkit-scrollbar) {
   html {
-    scrollbar-color: $action-button-color var(--background-border-color);
+    scrollbar-color: $action-button-color var(--clr-border-primary);
   }
 }
 
@@ -69,14 +70,14 @@ table {
 
   ::-webkit-scrollbar-thumb {
     background-color: $action-button-color;
-    border: 2px var(--background-border-color);
+    border: 2px var(--clr-border-primary);
     border-radius: 12px;
     width: 6px;
-    box-shadow: inset 0 0 0 2px var(--background-border-color);
+    box-shadow: inset 0 0 0 2px var(--clr-border-primary);
   }
 
   ::-webkit-scrollbar-track {
-    background-color: var(--background-border-color);
+    background-color: var(--clr-border-primary);
     border-radius: 0px;
   }
 
diff --git a/app/javascript/styles/mastodon/tables.scss b/app/javascript/styles/mastodon/tables.scss
index e82f2b551c1..d5758f60be4 100644
--- a/app/javascript/styles/mastodon/tables.scss
+++ b/app/javascript/styles/mastodon/tables.scss
@@ -12,9 +12,9 @@
     padding: 8px;
     line-height: 18px;
     vertical-align: top;
-    border-bottom: 1px solid var(--background-border-color);
+    border-bottom: 1px solid var(--clr-border-primary);
     text-align: start;
-    background: var(--background-color);
+    background: var(--clr-bg-primary);
 
     &.critical {
       font-weight: 700;
@@ -33,7 +33,7 @@
 
   & > tbody > tr:nth-child(odd) > td,
   & > tbody > tr:nth-child(odd) > th {
-    background: var(--background-color);
+    background: var(--clr-bg-primary);
   }
 
   & > tbody > tr:last-child > td,
@@ -42,7 +42,7 @@
   }
 
   a {
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     text-decoration: none;
 
     &:hover {
@@ -84,30 +84,30 @@
     & > tbody > tr > td {
       padding: 11px 10px;
       background: transparent;
-      border: 1px solid var(--background-border-color);
-      color: $secondary-text-color;
+      border: 1px solid var(--clr-border-primary);
+      color: var(--clr-text-primary);
     }
 
     & > tbody > tr > th {
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
       font-weight: 600;
     }
   }
 
   &.batch-table {
     & > thead > tr > th {
-      background: var(--background-color);
-      border-top: 1px solid var(--background-border-color);
-      border-bottom: 1px solid var(--background-border-color);
+      background: var(--clr-bg-primary);
+      border-top: 1px solid var(--clr-border-primary);
+      border-bottom: 1px solid var(--clr-border-primary);
 
       &:first-child {
         border-radius: 4px 0 0;
-        border-inline-start: 1px solid var(--background-border-color);
+        border-inline-start: 1px solid var(--clr-border-primary);
       }
 
       &:last-child {
         border-radius: 0 4px 0 0;
-        border-inline-end: 1px solid var(--background-border-color);
+        border-inline-end: 1px solid var(--clr-border-primary);
       }
     }
   }
@@ -138,7 +138,7 @@ a.table-action-link {
   display: inline-block;
   margin-inline-end: 5px;
   padding: 0 10px;
-  color: $darker-text-color;
+  color: var(--clr-text-secondary);
   font-weight: 500;
   white-space: nowrap;
 
@@ -196,8 +196,8 @@ a.table-action-link {
     position: sticky;
     top: 0;
     z-index: 200;
-    border: 1px solid var(--background-border-color);
-    background: var(--background-color);
+    border: 1px solid var(--clr-border-primary);
+    background: var(--clr-bg-primary);
     border-radius: 4px 4px 0 0;
     height: 47px;
     align-items: center;
@@ -213,13 +213,13 @@ a.table-action-link {
   }
 
   &__select-all {
-    background: var(--background-color);
+    background: var(--clr-bg-primary);
     height: 47px;
     align-items: center;
     justify-content: center;
-    border: 1px solid var(--background-border-color);
+    border: 1px solid var(--clr-border-primary);
     border-top: 0;
-    color: $secondary-text-color;
+    color: var(--clr-text-primary);
     display: none;
 
     &.active {
@@ -263,9 +263,9 @@ a.table-action-link {
 
   &__form {
     padding: 16px;
-    border: 1px solid var(--background-border-color);
+    border: 1px solid var(--clr-border-primary);
     border-top: 0;
-    background: var(--background-color);
+    background: var(--clr-bg-primary);
 
     .fields-row {
       padding-top: 0;
@@ -274,13 +274,13 @@ a.table-action-link {
   }
 
   &__row {
-    border: 1px solid var(--background-border-color);
+    border: 1px solid var(--clr-border-primary);
     border-top: 0;
-    background: var(--background-color);
+    background: var(--clr-bg-primary);
 
     @media screen and (max-width: $no-gap-breakpoint) {
       .optional &:first-child {
-        border-top: 1px solid var(--background-border-color);
+        border-top: 1px solid var(--clr-border-primary);
       }
     }
 
@@ -331,7 +331,7 @@ a.table-action-link {
       &__extra {
         flex: 0 0 auto;
         text-align: end;
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
         font-weight: 500;
       }
     }
@@ -363,17 +363,17 @@ a.table-action-link {
   }
 
   .nothing-here {
-    border: 1px solid var(--background-border-color);
+    border: 1px solid var(--clr-border-primary);
     border-top: 0;
     box-shadow: none;
-    background: var(--background-color);
+    background: var(--clr-bg-primary);
 
     @media screen and (max-width: $no-gap-breakpoint) {
-      border-top: 1px solid var(--background-border-color);
+      border-top: 1px solid var(--clr-border-primary);
     }
 
     &--no-toolbar {
-      border-top: 1px solid var(--background-border-color);
+      border-top: 1px solid var(--clr-border-primary);
     }
   }
 
diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss
index 266a9ca9307..b5374fbacdf 100644
--- a/app/javascript/styles/mastodon/widgets.scss
+++ b/app/javascript/styles/mastodon/widgets.scss
@@ -1,6 +1,7 @@
 @use 'sass:color';
 @use 'variables' as *;
 @use 'functions' as *;
+@use 'theme_utils' as *;
 
 .directory {
   &__tag {
@@ -12,7 +13,7 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      border: 1px solid var(--background-border-color);
+      border: 1px solid var(--clr-border-primary);
       border-radius: 4px;
       padding: 15px;
       text-decoration: none;
@@ -42,13 +43,13 @@
       flex: 1 1 auto;
       font-size: 18px;
       font-weight: 700;
-      color: $primary-text-color;
+      color: var(--clr-text-primary);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
 
       .fa {
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
       }
 
       small {
@@ -56,7 +57,7 @@
         font-weight: 400;
         font-size: 15px;
         margin-top: 8px;
-        color: $darker-text-color;
+        color: var(--clr-text-secondary);
       }
     }
 
@@ -65,7 +66,7 @@
       .fa,
       small,
       .trends__item__current {
-        color: $primary-text-color;
+        color: var(--clr-text-primary);
       }
     }
 
@@ -100,7 +101,7 @@
   thead th {
     text-align: center;
     text-transform: uppercase;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     font-weight: 700;
     padding: 10px;
 
@@ -124,11 +125,11 @@
     text-align: center;
     font-size: 15px;
     font-weight: 500;
-    color: $primary-text-color;
+    color: var(--clr-text-primary);
 
     small {
       display: block;
-      color: $darker-text-color;
+      color: var(--clr-text-secondary);
       font-weight: 400;
       font-size: 14px;
     }
@@ -137,7 +138,7 @@
   tbody td.accounts-table__extra {
     width: 120px;
     text-align: end;
-    color: $darker-text-color;
+    color: var(--clr-text-secondary);
     padding-inline-end: 16px;
 
     a {