Replace previous variables style

src/scss/components/_button.scss

@@ -1,6 +1,6 @@
 .btn {
-  --hover: var(--dark-2);
+  --hover: rgba(var(--neutral-highest), .8);
-  --active: var(--dark-2);
+  --active: rgba(var(--neutral-highest), .8);
   text-decoration: none;
   transition: background-color .1s ease-in-out;
   display: inline-flex;

src/scss/components/_header.scss

@@ -1,5 +1,5 @@
 header {
-  background-color: var(--primary);
+  background-color: rgb(var(--brand-primary-medium));
   position: fixed;
   z-index: 10;
   inset-block-start: 0;

src/scss/components/_variables.scss

@@ -1,20 +1,9 @@
 :root {
-  --light-1: rgb(var(--neutral-lower));
-  --dark-1: rgb(var(--neutral-highest));
-  --dark-2: rgba(var(--neutral-highest), .8);
-
-  --primary: rgb(var(--brand-primary-medium));
-  --primary-light: rgb(var(--brand-primary-low));
-  --primary-dark: rgb(var(--brand-primary-medium));
-  --secondary: rgb(var(--brand-secondary-low));
-  --secondary-light: rgb(var(--brand-secondary-lower));
-  --secondary-dark: rgb(var(--brand-secondary-medium));
-
   --bg-gradient: linear-gradient(180deg, rgb(var(--brand-primary-medium)) 0%, rgb(var(--brand-primary-medium)) 5%, rgb(var(--brand-primary-low)) 30%, rgb(var(--brand-primary-lower)) 50%, rgb(var(--brand-secondary-lower)) 51%, rgb(var(--brand-secondary-low)) 65%, rgb(var(--brand-secondary-medium)) 98%, rgb(var(--brand-secondary-medium)) 100%);
 
-  --background: var(--primary-light);
+  --background: rgb(var(--brand-primary-low));
-  --text: var(--dark-1);
+  --text: rgb(var(--neutral-highest));
-  --text-2: var(--dark-2);
+  --text-2: rgba(var(--neutral-highest), .8);
 
   --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", sans-serif;
   --font-italic: "Georgia", serif;

src/scss/critical.scss

@@ -48,7 +48,6 @@ main {
   }
 }
 footer {
-  /* background-color: var(--secondary); */
   background-color: rgb(var(--brand-secondary-medium));
   justify-items: center;
   margin-block-start: 1.5rem;
@@ -77,7 +76,7 @@ footer {
 
 i {
   vertical-align: text-top;
-  fill: var(--fill-color, var(--primary-light));
+  fill: var(--fill-color, rgb(var(--brand-primary-low)));
   display: inline-block;
 
   svg {
@@ -196,7 +195,7 @@ i {
     inline-size: clamp(200px, 100%, 400px);
     aspect-ratio: 1;
     border-radius: 100%;
-    border: 4px solid var(--primary-dark)
+    border: 4px solid rgb(var(--brand-primary-medium))
   }
   
 
@@ -218,22 +217,21 @@ i {
   margin-block-start: 1rem;
   gap: .2rem;
 
-  a {
-    &:hover {
-      --item-color: black;
-    }
-  }
-
   &--label {
     gap: 1rem;
 
     a {
-      color: black;
+      --item-color: black;
       --icon-color: #262626;
       text-decoration: underline;
       text-underline-offset: .25rem;
       text-decoration-color: #262626;
       font-weight: 500;
+
+      &:hover {
+        --item-color: var(--text-2);
+        --icon-color: var(--text-2);
+      }
     }
   }
 }
@@ -249,7 +247,7 @@ i {
     content: '';
     position: absolute;
     inline-size: 6px;
-    background-color: var(--light-1);
+    background-color: rgb(var(--neutral-lower));
     inset: 1.5rem 0 0 1.5rem;
     margin-inline-start: -3px;
   }
@@ -274,9 +272,8 @@ i {
       position: absolute;
       aspect-ratio: 1;
       inline-size: var(--size);
-      background-color: var(--light-1);
+      background-color: rgb(var(--neutral-lower));
       border: 6px solid rgb(var(--brand-secondary-medium));
-      /* border: 6px solid var(--secondary-dark); */
       inset-inline-start: 0;
       // inset-inline-start: .9rem;
       inset-block-end: 50%;