1 files changed, 45 insertions, 50 deletions

diff --git a/assets/base.css b/assets/base.css
index 9dc14ce..7d525a2 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -10,8 +10,8 @@
 
   --c-indigo: #2c3e50;
 
-  --c-divider-light-1: rgba(60, 60, 60, 0.2);
-  --c-divider-light-2: rgba(60, 60, 60, 0.4);
+  --c-divider-light-1: rgba(60, 60, 60, 0.1);
+  --c-divider-light-2: rgba(60, 60, 60, 0.2);
   --c-divider-dark-1: rgba(84, 84, 84, 0.2);
   --c-divider-dark-2: rgba(84, 84, 84, 0.4);
 
@@ -43,6 +43,7 @@
   --color-text: var(--c-text-dark-1);
   --color-text-mute: var(--c-text-dark-2);
   --color-text-primary: var(--c-brand-dark);
+  --color-text-on-primary: var(--c-text-light-1);
 
   --color-primary: var(--c-brand);
   --color-primary-light: var(--c-brand-light);
@@ -55,6 +56,9 @@
   --color-false: var(--c-false);
 
   --section-gap: 160px;
+  
+  --ff-sans-serif: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --ff-monospace: monospace;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -69,7 +73,7 @@
     --color-heading: var(--c-text-light-1);
     --color-text: var(--c-text-light-1);
     --color-text-mute: var(--c-text-light-2);
-  --color-text-primary: var(--c-brand-light);
+    --color-text-primary: var(--c-brand-light);
   }
 }
 
@@ -89,19 +93,7 @@ body {
     color 0.5s,
     background-color 0.5s;
   line-height: 1.6;
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
+  font-family: var(--ff-sans-serif);
   font-size: 15px;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -109,11 +101,11 @@ body {
 }
 
 code {
-  font-family: 'Fira Code', monospace;
+  font-family: var(--ff-monospace);
 }
 
 input, textarea {
-  font-family: inherit;
+  font-family: monospace;
   font-size: inherit;
   color: inherit;
   background: var(--color-background-soft);
@@ -123,6 +115,10 @@ input, textarea {
   transition: border-color 0.5s;
 }
 
+input::placeholder, textarea::placeholder {
+  font-family: var(--ff-sans-serif);
+}
+
 input:focus, textarea:focus {
   outline: none;
   border-color: var(--color-primary);
@@ -152,12 +148,13 @@ input[type="radio"] {
 }
 
 .multiselect__input {
-  background: var(--color-background-soft) !important ;
-  color: inherit !important;
+  background: var(--color-background-soft) !important;
+  color: var(--color-text) !important;
+  font-family: monospace !important;
+}
 
-  &::placeholder {
-    color: rgba(255, 255, 255, .2) !important;
-  }
+.multiselect__input::placeholder {
+  color: var(--color-text) !important;
 }
 
 .multiselect__tags {
@@ -167,6 +164,10 @@ input[type="radio"] {
   overflow-y: auto !important;
 }
 
+.multiselect__tag-icon::after {
+  color: var(--color-text) !important;
+}
+
 .multiselect__single {
   font-family: monospace !important;
   background: var(--color-background-soft) !important;
@@ -176,40 +177,34 @@ input[type="radio"] {
 
 .multiselect__content {
   font-family: monospace;
-
-  &-wrapper {
-    background: var(--color-background);
-    border: 0;
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
-    box-shadow: 0 -1rem 2rem rgba(0, 0, 0, .1);
-  }
+  font-size: 0.8rem;
 }
 
-.multiselect__element {
-  &:not(:first-child) {
-    border-top: 1px solid rgba(0, 0, 0, .2);
-  }
+.multiselect__content-wrapper {
+  background: var(--color-background) !important;
+  color: var(--color-text) !important;
+  border: 1px solid var(--color-border);
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  box-shadow: 0 -1rem 2rem rgba(0, 0, 0, .1);
 }
 
-.multiselect__option {
-  &--highlight {
-    background: rgba(255, 255, 255, .2);
-
-    &:after {
-      background: rgba(0, 0, 0, .2);
-    }
-  }
+.multiselect__element:not(:first-child) {
+  border-top: 1px solid var(--color-border);
+}
 
-  &--selected {
-    background: var(--color-primary);
-    color: white;
+.multiselect__option--highlight, .multiselect__option--highlight:after {
+  background: var(--color-hover) !important;
+}
 
-    &:after {
-      color: rgba(0, 0, 0, .5);
-    }
+.multiselect__option--selected, .multiselect__option--selected:after {
+  background: var(--color-primary-dark) !important;
+  color: var(--color-text) !important;
+}
 
-  }
+.multiselect__tag {
+  font-family: monospace;
+  background: var(--color-primary-dark) !important;
 }
 
 .control-group {