better match colors

src/components/Hero.astro

@@ -15,7 +15,7 @@ import borel from "@fontsource/borel/files/borel-latin-400-normal.woff2?url";
     class="--translate-y-full animate-logo text-4xl font-bold text-pretty md:text-6xl"
   >
     Digital designer based in the <span
-      class="animate-gradient-x bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% bg-clip-text px-1 font-['Borel'] text-3xl font-bold text-transparent md:text-5xl"
+      class="animate-gradient-x bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% bg-clip-text px-1 font-['Borel'] text-3xl text-transparent md:text-5xl"
       >United Kingdom</span
     >.
   </h1>

src/styles/global.css

@@ -79,25 +79,24 @@
 }
 
 :root {
-  --primary: #fcfcfc;
+  --primary: oklch(99% 0 0);
-  --secondary: #212121;
+  --secondary: oklch(15% 0 0);
-  --tertiary: #737373;
+  --tertiary: oklch(40% 0 0);
-  --accent: #636363;
+  --accent: oklch(25% 0 0);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --primary: #000000;
+    --primary: oklch(0% 0 0);
-    --secondary: #ededed;
+    --secondary: oklch(95% 0 0);
-    --tertiary: #737373;
+    --tertiary: oklch(60% 0 0);
-    --accent: #636363;
+    --accent: oklch(75% 0 0);
   }
 
   .astro-code,
   .astro-code span {
     color: var(--shiki-dark) !important;
     background-color: var(--shiki-dark-bg) !important;
-    /* Optional, if you also want font styles */
     font-style: var(--shiki-dark-font-style) !important;
     font-weight: var(--shiki-dark-font-weight) !important;
     text-decoration: var(--shiki-dark-text-decoration) !important;