Use --accent-color more through UI

app/styles/accounts.scss

@@ -580,7 +580,7 @@ a .account__avatar {
 }
 
 .account__section-headline {
-  background: var(--brand-color--faint);
+  background: var(--accent-color--faint);
 
   button,
   a {

app/styles/components/account-header.scss

@@ -36,14 +36,14 @@
     min-height: 74px;
     width: 100%;
     position: relative;
-    background: var(--brand-color--med);
+    background: var(--accent-color--med);
     @media (min-width: 895px) {height: 74px;}
   }
 
   &__avatar {
     display: block;
     position: absolute;
-    border: 5px solid var(--brand-color--faint);
+    border: 5px solid var(--accent-color--faint);
     left: 0;
     top: -90px;
     border-radius: 50%;
@@ -162,7 +162,7 @@
   @media screen and (max-width: 895px) {
     .account-mobile-container {
       display: block;
-      background: var(--brand-color--faint);
+      background: var(--accent-color--faint);
       margin-top: 10px;
       position: relative;
       padding: 10px 10px 0;

app/styles/components/columns.scss

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

app/styles/components/tabs-bar.scss

@@ -122,6 +122,10 @@
     font-size: 16px;
     transition: 0.2s;
 
+    > span {
+      text-shadow: 0 0 3px hsla(0, 0%, 0%, 0.15);
+    }
+
     &:hover {
       background-color: var(--accent-color--bright);
     }
@@ -151,6 +155,7 @@
   font-weight: bold;
   transition: 0.1s;
   outline: none;
+  text-shadow: 0 0 3px hsla(0, 0%, 0%, 0.15);
 
   @media screen and (max-width: 895px) {
     width: 36px;

app/styles/themes.scss

@@ -36,14 +36,15 @@ body {
   --accent-color_hsl: var(--accent-color_h), var(--accent-color_s), var(--accent-color_l);
   --primary-text-color_hsl: var(--primary-text-color_h), var(--primary-text-color_s), var(--primary-text-color_l);
   --background-color_hsl: var(--background-color_h), var(--background-color_s), var(--background-color_l);
-  --accent-color_h: calc(var(--brand-color_h) - 20);
-  --accent-color_s: calc(var(--brand-color_s) + 10%);
-  --accent-color_l: calc(var(--brand-color_l) + 5%);
+  --accent-color_h: calc(var(--brand-color_h) - 15);
+  --accent-color_s: 86%;
+  --accent-color_l: 44%;
 
   // Modifiers
   --brand-color--faint: hsla(var(--brand-color_hsl), 0.1);
   --brand-color--med: hsla(var(--brand-color_hsl), 0.2);
-  --accent-color--faint: hsla(var(--accent-color_hsl), 0.1);
+  --accent-color--faint: hsla(var(--accent-color_hsl), 0.15);
+  --accent-color--med: hsla(var(--accent-color_hsl), 0.25);
   --accent-color--bright: hsl(
     var(--accent-color_h),
     var(--accent-color_s),