:root {
  --lavender: #b4a4f8;
  --lavender-dark: #8971f4;
  --violet: #738adb;
  --pink: #ffd1dc;

  --background-primary: #292841 !important;
  --background-secondary: #242338 !important;
  --background-secondary-alt: #3c3a5e !important;
  --background-tertiary: #1c1b29 !important;
  --background-accent: #413f66 !important;
  --background-accent-alt: #646194 !important;
  --background-floating: #15141e !important;
  --background-modifier-hover: rgba(255, 255, 255, 0.01) !important;
  --background-modifier-active: rgba(255, 255, 255, 0.03) !important;
  --background-modifier-selected: rgba(255, 255, 255, 0.04) !important;
  --background-modifier-accent: hsla(0, 0%, 100%, 0.06) !important;
  
  --channeltextarea-background: var(--background-accent) !important;

  --deprecated-card-bg: rgba(0, 0, 0, 0.2) !important;
  --deprecated-card-editable-bg: rgba(0, 0, 0, 0.1) !important;
  --deprecated-text-input-bg: var(--background-tertiary) !important;
  --deprecated-text-input-border: var(--background-floating) !important;
  --deprecated-text-input-border-disabled: var(--background-tertiary) !important;

  --activity-card-background: var(--background-primary) !important;
  --channels-default: #9f9f9f !important;

  --text-muted: #b6b6b6 !important;
  --text-normal: #fbfbfb !important;
  --text-link: var(--lavender) !important;
  
  --text-positive: var(--pink) !important;
  --info-positive-foreground: var(--pink) !important;

  --interactive-normal: #c8c8c8 !important;
  --interactive-hover: #dcddde !important;
  --interactive-active: #fff !important;
  --interactive-muted: #747474 !important;

  --header-primary: white !important;
  --header-secondary: #c9c9c9 !important;

  --toast-background: var(--background-primary) !important;
  --toast-header: var(--background-tertiary) !important;
  --toast-contents: var(--background-secondary) !important;
  --toast-box-shadow: rgba(0, 0, 0, 0.2) !important;
  --toast-border: var(--background-tertiary) !important;

  --brand-experiment: var(--lavender-dark) !important;
}

/* Bottom sidebar panels */ .sidebar .panels {
  background-color: var(--background-tertiary);
}

/* Buttons */
.buttonColor, .lookFilled.colorBrand {
  background-color: var(--lavender-dark);
}

.buttonColor:hover, .lookFilled.colorBrand:hover {
  background-color: var(--lavender);
}

.lookFilled.colorGrey {
  background-color: var(--background-secondary-alt) !important;
}

.lookFilled.colorGrey:hover {
  background-color: var(--background-accent-alt) !important;
}

/* Sidebar {add server, explore servers} buttons */
.tree .circleIconButton {
  color: var(--violet);
}

.tree .circleIconButton.selected {
  color: var(--background-secondary-alt);
  background-color: var(--violet);
}

/* Modals */ .root, .modal .footer, .uploadModal, 
/* Friends list */ .tabBody {
  background-color: var(--background-primary) !important;
}

.spoilerText.hidden {
  background-color: var(--background-tertiary) !important;
}

/* The role list has .root (applied by Modals), so reset background-color */
.userPopout .rolesList {
  background-color: transparent !important;
}


.button {
  border-radius: 0.75em;
}

.sidebar .content .containerDefault .selected {
  border-radius: 2em;
}