:root {
  --indigo-1: #06333b;
  --indigo-2: #0c6a7a;
  --indigo-3: #2cc0fc;
  --indigo-5: #85d6fa;
  --indigo-6: #ccfff1;
  --lime: #baff3b;
  --goldenrod-2: #ffc954;
  --darkteal: #3d7564;
  --lightteal: #4c9a83;
}

body {backdrop-filter: brightness(92%);}
.compose-panel {backdrop-filter: brightness(100%);}
.sidebar__toggle {backdrop-filter: brightness(95%);}

@media only screen and (prefers-color-scheme: dark) {
:root {
  --background-color: hsl(240, 16%, 11%);
  --background-color-tint: rgba(10, 50, 32.538, .9);
}
}

.button, .btn, .simple_form .btn, .admin-wrapper .content__heading__tabs a.selected {
  background-color: var(--lightteal);
}
.simple_form .btn:active, .simple_form .btn:focus, .simple_form .btn:hover {
  background-color: var(--darkteal);
}

.column-link.active, .dropdown-button, .icon-button, .compose-form__actions .icon-button {color: var(--darkteal);}
.dropdown-button {border: 1px solid var(--darkteal);}

.logo {filter: hue-rotate(-80deg) contrast(120%) brightness(150%);} /* Teal the logo! */