& {
  // weighted brand colors
  --brand-experiment: #{$brand};
  --bg-brand: #{$brand};

  --brand-100: #{lighten($brand, math.div(90%, 2))};
  --brand-130: #{lighten($brand, math.div(85%, 2))};
  --brand-160: #{lighten($brand, math.div(80%, 2))};
  --brand-200: #{lighten($brand, math.div(75%, 2))};
  --brand-230: #{lighten($brand, math.div(70%, 2))};
  --brand-260: #{lighten($brand, math.div(65%, 2))};
  --brand-300: #{lighten($brand, math.div(60%, 2))};
  --brand-330: #{lighten($brand, math.div(50%, 2))};
  --brand-360: #{lighten($brand, math.div(40%, 2))};
  --brand-400: #{lighten($brand, math.div(30%, 2))};
  --brand-430: #{lighten($brand, math.div(20%, 2))};
  --brand-460: #{lighten($brand, math.div(10%, 2))};
  --brand-500: #{$brand} !important;
  --brand-530: #{darken($brand, math.div(10%, 2))};
  --brand-560: #{darken($brand, math.div(20%, 2))};
  --brand-600: #{darken($brand, math.div(30%, 2))};
  --brand-630: #{darken($brand, math.div(40%, 2))};
  --brand-660: #{darken($brand, math.div(50%, 2))};
  --brand-700: #{darken($brand, math.div(60%, 2))};
  --brand-730: #{darken($brand, math.div(65%, 2))};
  --brand-760: #{darken($brand, math.div(70%, 2))};
  --brand-800: #{darken($brand, math.div(75%, 2))};
  --brand-830: #{darken($brand, math.div(80%, 2))};
  --brand-860: #{darken($brand, math.div(85%, 2))};
  --brand-900: #{darken($brand, math.div(90%, 2))};
  // similar to other brand colors, except alpha only
  --brand-05a: #{adjust-color($brand, $alpha: -0.95)};
  --brand-10a: #{adjust-color($brand, $alpha: -0.9)};
  --brand-15a: #{adjust-color($brand, $alpha: -0.85)};
  --brand-20a: #{adjust-color($brand, $alpha: -0.8)};
  --brand-25a: #{adjust-color($brand, $alpha: -0.75)};
  --brand-30a: #{adjust-color($brand, $alpha: -0.7)};
  --brand-35a: #{adjust-color($brand, $alpha: -0.65)};
  --brand-40a: #{adjust-color($brand, $alpha: -0.6)};
  --brand-45a: #{adjust-color($brand, $alpha: -0.55)};
  --brand-50a: #{adjust-color($brand, $alpha: -0.5)};
  --brand-55a: #{adjust-color($brand, $alpha: -0.45)};
  --brand-60a: #{adjust-color($brand, $alpha: -0.4)};
  --brand-65a: #{adjust-color($brand, $alpha: -0.35)};
  --brand-70a: #{adjust-color($brand, $alpha: -0.3)};
  --brand-75a: #{adjust-color($brand, $alpha: -0.25)};
  --brand-80a: #{adjust-color($brand, $alpha: -0.2)};
  --brand-85a: #{adjust-color($brand, $alpha: -0.15)};
  --brand-90a: #{adjust-color($brand, $alpha: -0.1)};
  --brand-95a: #{adjust-color($brand, $alpha: -0.05)};

  --header-primary: #{$text} !important;
  --header-secondary: #{$subtext0} !important;
  --__header-bar-background: #{$mantle} !important;

  --text-normal: #{$text} !important; // TODO: LEGACY
  --text-default: #{$text};
  --text-muted: #{$subtext0} !important;
  --text-link: #{$blue} !important;
  --text-link-low-saturation: #{$sapphire};
  --text-low-contrast: #{$overlay1};
  --text-positive: #{$green};
  --text-warning: #{$yellow};
  --text-danger: #{$red};
  --text-brand: #{$brand};
  --text-primary: #{$text};
  --text-secondary: #{$subtext1};
  --text-tertiary: #{$subtext0} !important;

  --text-feedback-positive: #{$green};
  --text-feedback-critical: #{$red};
  --text-feedback-warning: #{$yellow};
  --text-feedback-info: #{$blue};

  --background-feedback-positive: #{adjust-color($green, $alpha: -0.9)};
  --background-feedback-critical: #{adjust-color($red, $alpha: -0.9)};
  --background-feedback-warning: #{adjust-color($yellow, $alpha: -0.9)};
  --background-feedback-info: #{adjust-color($blue, $alpha: -0.9)};

  // Background of chatbox autocomplete (emoji, pings)
  --autocomplete-bg: #{$crust};

  --message-reacted-background: #{adjust-color($brand, $alpha: -0.7)} !important;
  --message-reacted-text: #{$brand};

  --opacity-blurple-8: #{adjust-color($brand, $alpha: -0.92)};
  --opacity-blurple-16: #{adjust-color($brand, $alpha: -0.84)};
  --opacity-blurple-24: #{adjust-color($brand, $alpha: -0.76)};
  --opacity-blurple-32: #{adjust-color($brand, $alpha: -0.68)};
  --opacity-blurple-60: #{adjust-color($brand, $alpha: -0.4)};
  --blurple-50: #{$brand};

  //TODO: `2025_04_desktop_refresh_fast_follows` "Darker Guild List Background"
  --app-background-frame: #{darken($crust, 2%)};

  --background-primary: #{$base} !important;
  --background-secondary: #{$mantle} !important;
  --background-secondary-alt: #{darken($base, 1%)} !important;
  --background-tertiary: #{$crust} !important;
  --background-accent: #{$surface1} !important;
  --background-floating: #{darken($crust, 2%)} !important;
  --background-surface-highest: #{$surface0} !important;
  --background-surface-higher: #{darken($surface0, 3%)} !important;
  --background-surface-high: #{$base} !important;

  --background-base-lowest: #{$crust} !important;
  --background-base-lower: #{$mantle} !important;
  --background-base-low: #{darken($base, 1%)} !important;
  --background-nested-floating: #{$mantle};
  --background-mobile-primary: #{$base};
  --background-mobile-secondary: #{$mantle};
  --bg-base-secondary: #{$mantle};
  --bg-base-tertiary: #{$crust} !important;
  --bg-surface-overlay: #{lighten($base, 2%)};
  --bg-surface-raised: #{$mantle};
  --bg-overlay-floating: #{darken($base, 1%)};
  --home-background: #{$base};

  --chat-background: #{$base};
  --chat-background-default: #{$base};
  --chat-border: #{$crust};
  --chat-input-container-background: #{$base};
  --chat-text-muted: #{$subtext0};

  --checkbox-border-default: #{$overlay0};

  --border-faint: #{$surface0};
  --border-strong: #{$mantle};
  --border-normal: #{$crust};
  --border-subtle: #{$base} !important;

  --background-modifier-hover: #{adjust-color($overlay2, $alpha: -0.85)};
  --background-modifier-selected: #{adjust-color($overlay0, $alpha: -0.8)};
  --background-modifier-accent: #{adjust-color($text, $alpha: -0.74)};
  --background-modifier-active: #{adjust-color($text, $alpha: -0.83)};
  --background-mod-faint: #{adjust-color($surface2, $alpha: -0.95)};
  --background-mod-normal: #{adjust-color($surface2, $alpha: -0.85)};
  --background-mod-subtle: #{adjust-color($surface2, $alpha: -0.75)} !important;
  --background-mod-strong: #{adjust-color($surface2, $alpha: -0.55)} !important;
  --custom-channel-members-bg: #{$mantle};
  --custom-status-bubble-background: #{$crust} !important;
  --custom-status-bubble-background-color: #{$mantle} !important;
  --card-primary-bg: #{$surface0} !important;

  --info-positive-background: #{adjust-color($green, $alpha: -0.85)};
  --info-positive-foreground: #{$green};
  --info-positive-text: #{$text};

  --info-warning-background: #{adjust-color($yellow, $alpha: -0.85)};
  --info-warning-foreground: #{$yellow};
  --info-warning-text: #{$text};

  --info-danger-background: #{adjust-color($red, $alpha: -0.85)};
  --info-danger-foreground: #{$red};
  --info-danger-text: #{$text};

  --info-help-background: #{adjust-color($sky, $alpha: -0.85)};
  --info-help-foreground: #{$sky};
  --info-help-text: #{$text};

  --status-positive-background: #{$green};
  --status-positive-text: #{$base};

  --status-warning-background: #{$yellow};
  --status-warning-text: #{$base};

  --status-danger-background: #{$red};
  --status-danger-text: #{$base};

  --status-danger: #{$red};
  --status-positive: #{$green};
  --status-warning: #{$yellow};

  // colorWarning
  --black-500: #{$crust};

  --green-360: #{$green};
  --green-300: #{$green};
  --yellow-360: #{$yellow};
  --yellow-300: #{$yellow};
  --red-400: #{$red};
  --red-430: #{darken($red, 10%)};
  --red-500: #{darken($red, 15%)};
  --blue-500: #{darken($blue, 10%)};
  --blue-530: #{darken($blue, 15%)};

  --primary-100: #{$subtext1};
  --primary-200: #{$subtext0};
  --primary-300: #{$subtext1};
  --primary-400: #{$subtext1};
  --primary-630: #{$surface0};
  --primary-700: #{$surface1};
  --primary-800: #{$crust};

  --white: #{$text};
  --white-400: #{$text};
  --white-500: #{$text};
  --white-600: #{$subtext1};
  --white-700: #{$subtext0};

  --guild-boosting-pink: #{$pink};
  --guild-boosting-blue: #{$blue};
  --guild-boosting-purple: #{$mauve};
  --premium-perk-yellow: #{$yellow};
  --premium-perk-purple: #{$mauve};
  --premium-perk-dark-blue: #{darken($blue, math.div(20%, 2))};
  --premium-perk-light-blue: #{lighten($blue, math.div(10%, 2))};
  --premium-perk-blue: #{$blue};
  --premium-perk-green: #{$green};
  --premium-perk-pink: #{$pink};
  --premium-perk-orange: #{$peach};

  --premium-tier-0-blue: #{$blue};
  --premium-tier-0-purple: #{$mauve};

  --premium-tier-1-blue-for-gradients: #{$sapphire};
  --premium-tier-1-dark-blue-for-gradients: #{$blue};

  --premium-tier-2-purple-for-gradients: #{darken($mauve, math.div(20%, 2))};
  --premium-tier-2-purple-for-gradients-2: #{$mauve};
  --premium-tier-2-pink-for-gradients: #{$pink};

  --button-danger-background: #{$red};
  --button-danger-background-hover: #{darken($red, math.div(10%, 2))};
  --button-danger-background-active: #{darken($red, math.div(20%, 2))};
  --button-danger-background-disabled: #{$red};

  --button-positive-background: #{$green};
  --button-positive-background-hover: #{darken($green, math.div(10%, 2))};
  --button-positive-background-active: #{darken($green, math.div(15%, 2))};
  --button-positive-background-disabled: #{$green};

  --button-secondary-background: #{$surface1} !important;
  --button-secondary-background-hover: #{darken($surface1, math.div(10%, 2))};
  --button-secondary-background-active: #{darken($surface1, math.div(15%, 2))};
  --button-secondary-background-disabled: #{$surface1};
  --button-secondary-text: #{$text} !important;

  --button-outline-danger-text: #{$text};
  --button-outline-danger-border: #{$red};
  --button-outline-danger-background: transparent;
  --button-outline-danger-background-hover: #{darken($red, math.div(5%, 2))};
  --button-outline-danger-text-hover: #{$base};
  --button-outline-danger-border-hover: #{darken($red, math.div(5%, 2))};
  --button-outline-danger-background-active: #{darken($red, math.div(10%, 2))};
  --button-outline-danger-text-active: #{$base};
  --button-outline-danger-border-active: #{darken($red, math.div(5%, 2))};

  --button-outline-positive-text: #{$text};
  --button-outline-positive-border: #{$green};
  --button-outline-positive-background: transparent;
  --button-outline-positive-background-hover: #{darken($green, math.div(5%, 2))};
  --button-outline-positive-text-hover: #{$base};
  --button-outline-positive-border-hover: #{darken($green, math.div(5%, 2))};
  --button-outline-positive-background-active: #{darken(
      $green,
      math.div(10%, 2)
    )};
  --button-outline-positive-text-active: #{$base};
  --button-outline-positive-border-active: #{darken($green, math.div(5%, 2))};

  --button-outline-brand-text: #{$text};
  --button-outline-brand-border: #{$brand};
  --button-outline-brand-background: transparent;
  --button-outline-brand-background-hover: #{darken($brand, math.div(5%, 2))};
  --button-outline-brand-text-hover: #{$base};
  --button-outline-brand-border-hover: #{darken($brand, math.div(5%, 2))};
  --button-outline-brand-background-active: #{darken($brand, math.div(10%, 2))};
  --button-outline-brand-text-active: #{$base};
  --button-outline-brand-border-active: #{darken($brand, math.div(5%, 2))};

  --button-outline-primary-text: #{$text};
  --button-outline-primary-border: #{$surface2};
  --button-outline-primary-background: transparent;
  --button-outline-primary-background-hover: #{darken(
      $surface2,
      math.div(5%, 2)
    )};
  --button-outline-primary-text-hover: #{$text};
  --button-outline-primary-border-hover: #{darken($surface2, math.div(5%, 2))};
  --button-outline-primary-background-active: #{darken(
      $surface2,
      math.div(10%, 2)
    )};
  --button-outline-primary-text-active: #{$text};
  --button-outline-primary-border-active: #{darken($surface2, math.div(5%, 2))};

  // Accent coloured buttons
  --button-filled-brand-text: #{$crust};
  --button-filled-brand-background: #{$brand};
  --button-filled-brand-background-hover: #{darken($brand, math.div(15%, 2))}; // TODO: Upcoming palette tints/shades
  --button-filled-brand-background-active: #{darken($brand, math.div(25%, 2))};

  --button-filled-brand-inverted-text: #{$crust};
  --button-filled-brand-inverted-background: #{$text};
  --button-filled-brand-inverted-background-hover: #{darken(
      $text,
      math.div(15%, 2)
    )};
  --button-filled-brand-inverted-background-active: #{darken(
      $text,
      math.div(25%, 2)
    )};

  // --button-filled-white-background is already --white-500
  --button-filled-white-text: var(--black-500);
  --button-filled-white-background-hover: var(--white-600);
  --button-filled-white-background-active: var(--white-700);

  --button-transparent-text: #{$text};
  --button-transparent-background: #{adjust-color($surface2, $alpha: -0.88)};
  --button-transparent-background-hover: #{adjust-color(
      $surface2,
      $alpha: -0.8
    )};
  --button-transparent-background-active: #{adjust-color(
      $surface2,
      $alpha: -0.7
    )};

  --modal-background: #{$base} !important;
  --modal-footer-background: #{$crust};

  --scrollbar-thin-thumb: #{$brand};
  --scrollbar-thin-track: transparent;
  --scrollbar-auto-thumb: #{$brand};
  --scrollbar-auto-track: #{$crust};

  --scrollbar-auto-scrollbar-color-thumb: #{$brand};
  --scrollbar-auto-scrollbar-color-track: #{$crust};

  --input-background: #{$crust};
  --input-border: #{$overlay0};
  --input-placeholder-text: #{$subtext1};

  --logo-primary: #{$text};

  --control-brand-foreground: #{$brand};
  --control-brand-foreground-new: #{$brand};
  --mention-foreground: #{$brand};
  --mention-background: #{adjust-color($brand, $alpha: -0.7)};

  --background-mentioned: #{adjust-color($yellow, $alpha: -0.9)};
  --background-mentioned-hover: #{adjust-color($yellow, $alpha: -0.92)};
  --background-message-hover: #{adjust-color($crust, $alpha: -0.7)} !important;
  --background-message-automod: #{adjust-color($rosewater, $alpha: -0.95)};
  --background-message-automod-hover: #{adjust-color($rosewater, $alpha: -0.9)};
  --background-message-highlight: #{adjust-color($brand, $alpha: -0.92)};
  --background-message-highlight-hover: #{adjust-color($brand, $alpha: -0.94)};

  --background-code: #{$base};

  --channels-default: #{$subtext0} !important;
  --channel-icon: #{$subtext0} !important;
  --channel-text-area-placeholder: #{adjust-color($text, $alpha: -0.5)};
  --channeltextarea-background: #{$mantle};

  --icon-muted: #{$surface2};
  --icon-default: #{$text};
  --icon-primary: #{$text};
  --icon-secondary: #{$subtext1};
  --icon-tertiary: #{darken($subtext0, 5%)} !important;

  --activity-card-background: #{$crust};

  --textbox-markdown-syntax: #{$overlay0};

  --spoiler-revealed-background: #{$surface0};
  --spoiler-hidden-background: #{$surface2};

  --android-navigation-bar-background: #{$crust};
  --android-ripple: #{adjust-color($crust, $alpha: -0.7)};

  --deprecated-card-bg: #{adjust-color($crust, $alpha: -0.4)};
  --deprecated-card-editable-bg: #{adjust-color($crust, $alpha: -0.7)};

  // TODO: LEGACY
  --bg-mod-faint: #{adjust-color($surface2, $alpha: -0.9)};
  --bg-mod-subtle: #{adjust-color($surface2, $alpha: -0.75)} !important;
  --bg-mod-strong: #{adjust-color($surface2, $alpha: -0.55)} !important;

  --deprecated-text-input-bg: #{$crust};
  --deprecated-text-input-border: #{adjust-color($crust, $alpha: -0.7)};
  --deprecated-text-input-border-hover: #{darken($crust, math.div(10%, 2))};
  --deprecated-text-input-border-disabled: #{$mantle};

  --focus-primary: #{$brand};

  --interactive-normal: #{$text} !important;
  --interactive-muted: #{$overlay0};
  --interactive-hover: #{$text};
  --interactive-active: #{$text};

  --search-popout-option-non-text-color: #{$subtext0};

  --__spoiler-background-color--hidden: #{$surface2};
  --__spoiler-warning-background-color: #{lighten($surface2, 5%)};

  --user-profile-overlay-background: #{$mantle};
  --user-profile-overlay-background-hover: #{$surface0};

  --plum-23: #{$base};

  --badge-brand-bg: #{$brand};
  --badge-brand-text: #{$crust};

  --twitch: #{darken($mauve, 10%)};
  --playstation: #{darken($blue, 10%)};
  --spotify: #{$green};

  --notice-background-critical: #{$red};
  --notice-background-info: #{$blue};
  --notice-background-positive: #{$green};
  --notice-background-warning: #{$yellow};
  --notice-text-critical: #{$crust};
  --notice-text-info: #{$crust};
  --notice-text-positive: #{$crust};
  --notice-text-warning: #{$crust};
}

.visual-refresh.theme-dark,
.visual-refresh.theme-light {
  --text-feedback-positive: #{$green};
}

::selection {
  background-color: #{rgba($brand, 0.6)};
}

// modified from https://stackoverflow.com/a/62880368
@mixin recolor($color: #000) {
  filter: url('data:image/svg+xml;utf8,\
    <svg xmlns="http://www.w3.org/2000/svg">\
      <filter id="ctp-recolor" color-interpolation-filters="sRGB">\
        <feColorMatrix type="matrix" values="\
          0 0 0 0 #{math.div(red($color), 255)}\
          0 0 0 0 #{math.div(green($color), 255)}\
          0 0 0 0 #{math.div(blue($color), 255)}\
          0 0 0 1 0\
        "/>\
      </filter>\
    </svg>\
    #ctp-recolor');
}
