Use the new variables in page style

src/scss/components/_variables.scss

@@ -1,16 +1,14 @@
 :root {
-  --light-1: #efefef;
-  --dark-1: #1e1e1e;
-  --dark-2: #0f0f0f;
+  --light-1: rgb(var(--shark-100));
+  --dark-1: rgb(var(--shark-950));
+  --dark-2: rgb(var(--shark-950) / .95);
 
-  --primary-hsl: 45, 35%, 63%;
-  --primary: hsl(var(--primary-hsl));
-  --primary-light: hsl(45, 36%, 73%);
-  --primary-dark: hsl(46, 20%, 66%);
-  --secondary-hsl: 91, 36%, 71%;
-  --secondary: hsl(var(--secondary-hsl));
-  --secondary-light: hsl(91, 37%, 76%);
-  --secondary-dark: hsl(90, 17%, 62%);
+  --primary: rgb(var(--sand-400));
+  --primary-light: rgb(var(--sand-300));
+  --primary-dark: rgb(var(--sand-500));
+  --secondary: rgb(var(--forest-300));
+  --secondary-light: rgb(var(--forest-200));
+  --secondary-dark: rgb(var(--forest-400));
 
   --background: var(--primary-light);
   --text: var(--dark-1);

src/scss/critical.scss

@@ -1,3 +1,4 @@
+@use './components/colors';
 @use './components/variables';
 @use './components/reset';
 @use './components/superminimal';
@@ -15,10 +16,11 @@ html {
   }
 }
 body {
-  --start: var(--primary-light);
-  --end: var(--secondary);
-  background: var(--start);
-  background: linear-gradient(180deg, var(--start) 0%, var(--start) 35%, var(--end) 100%);
+  /* --start: var(--primary-light);
+  --end: var(--secondary);*/
+  background: rgb(var(--sand-400));
+  /*background: linear-gradient(180deg, var(--start) 0%, var(--start) 35%, var(--end) 100%); */
+  background: linear-gradient(180deg, rgb(var(--sand-400)) 0%, rgb(var(--sand-400)) 3%, rgb(var(--sand-300)) 20%, rgb(var(--sand-200)) 35%, rgb(var(--forest-200)) 60%, rgb(var(--forest-300)) 75%, rgb(var(--forest-400)) 98%, rgb(var(--forest-400)) 100%);
 
   header, footer {
     padding: .5rem clamp(.2rem, 3vw, 2rem);  
@@ -79,7 +81,8 @@ main {
   }
 }
 footer {
-  background-color: var(--secondary);
+  /* background-color: var(--secondary); */
+  background-color: rgb(var(--forest-400));
   justify-items: center;
   margin-block-start: 1.5rem;
 
@@ -252,6 +255,19 @@ i {
       --item-color: black;
     }
   }
+
+  &--label {
+    gap: 1rem;
+
+    a {
+      color: black;
+      --icon-color: #262626;
+      text-decoration: underline;
+      text-underline-offset: .25rem;
+      text-decoration-color: #262626;
+      font-weight: 500;
+    }
+  }
 }
 
 .timeline {
@@ -285,13 +301,14 @@ i {
       margin-top: -20px;
     }
 
-    &:after {
+    &:before {
       content: '';
       position: absolute;
       aspect-ratio: 1;
       inline-size: var(--size);
       background-color: var(--light-1);
-      border: 6px solid var(--secondary-dark);
+      border: 6px solid rgb(var(--forest-500));
+      /* border: 6px solid var(--secondary-dark); */
       inset-inline-start: 0;
       // inset-inline-start: .9rem;
       inset-block-end: 50%;
@@ -300,6 +317,13 @@ i {
       // inset-block-start: 1.5rem;
       border-radius: 50%;
       z-index: 1;
+      transition: all .2s ease-in-out;
+    }
+
+    &:hover {
+      &:before {
+        border-color: rgb(var(--forest-600));
+      }
     }
   }
 }
@@ -318,7 +342,8 @@ i {
   }
 
   .btn {
-    color: var(--secondary-light);
+    color: rgb(var(--forest-200));
+    /* color: var(--secondary-light); */
   }
 
   p {