Update account colors to be more silimar to existing Soapbox color patterns

app/styles/accounts.scss

@@ -13,7 +13,7 @@
     &:active,
     &:focus {
       .card__bar {
-        background: var(--brand-color--med);
+        background: var(--foreground-color);
       }
     }
   }
@@ -584,7 +584,7 @@ a .account__avatar {
 }
 
 .account__section-headline {
-  background: var(--accent-color--faint);
+  background: var(--foreground-color);
 
   button,
   a {

app/styles/components/account-header.scss

@@ -19,7 +19,7 @@
     overflow: hidden;
     height: 350px;
     position: relative;
-    background: var(--accent-color--med);
+    background: var(--accent-color--faint);
     @media screen and (max-width: 895px) {height: 225px;}
     &--none {height: 125px;}
 
@@ -58,7 +58,7 @@
     min-height: 74px;
     width: 100%;
     position: relative;
-    background: var(--accent-color--med);
+    background: var(--background-color);
     @media (min-width: 895px) {height: 74px;}
   }
 

app/styles/components/columns.scss

@@ -205,7 +205,7 @@
 }
 
 .column-back-button {
-  background: var(--accent-color--med);
+  background: var(--accent-color--faint);
   color: var(--highlight-text-color);
   cursor: pointer;
   flex: 0 0 auto;

app/styles/ui.scss

@@ -654,6 +654,7 @@
 
       &::after {
         bottom: -1px;
+        border-color: transparent transparent var(--foreground-color);
       }
     }
   }