Better selected-border colors for headerbar

src/styles/main.scss

@@ -24,13 +24,13 @@ html {
     --border-selected-500: #909090;
     --text-500: #282828;
 
-    --accent-500: #d6ffc2;
+    --accent-500: #6cc16c;
-    --accent-100: #6cc16c;
+    --accent-100: #d6ffc2;
     --accent-900: #244624;
 }
 
 body.dark-mode {
-    --bg-500: hsl(269, 24%, 18%);
+    --bg-500: hsl(269, 24%, 20%);
     --bg-selected-500: #722da0;
     --bg-highlight-500: #a64edb;
     --border-400: hsl(269, 40%, 50%);
@@ -40,9 +40,9 @@ body.dark-mode {
     --border-selected-500: #b66af6;
     --text-500: #e6cff6;
 
-    --accent-100: hsl(269, 44%, 24%);
+    --accent-500: hsl(269, 40%, 70%);
-    --accent-500: hsl(269, 50%, 60%);
+    --accent-100: hsl(269, 50%, 50%);
-    --accent-900: hsl(269, 20%, 80%);
+    --accent-900: hsl(269, 30%, 90%);
 }
 
 $device-s-width: 600px;
@@ -138,8 +138,8 @@ button,
     }
 
     &.primary {
-        background: var(--accent-500);
+        background: var(--accent-100);
-        border-color: var(--accent-100);
+        border-color: var(--accent-500);
 
         &:hover::after {
             background: #00000020;
@@ -316,11 +316,11 @@ button,
 
         &.radio {
             &.selected {
-                background: var(--accent-500);
+                background: var(--accent-100);
-                border-color: var(--accent-100);
+                border-color: var(--accent-500);
 
                 & + .radio {
-                    border-left-color: var(--accent-100);
+                    border-left-color: var(--accent-500);
                 }
 
                 &:hover::after {