From c493eea5cae3144791e4b480a675a7981984bd2d Mon Sep 17 00:00:00 2001
From: Troy <hello@troylusty.com>
Date: Thu, 23 Jan 2025 18:39:34 +0000
Subject: [PATCH] better match colors

---
 src/components/Hero.astro |  2 +-
 src/styles/global.css     | 17 ++++++++---------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index b81aa84..25028c6 100644
--- a/src/components/Hero.astro
+++ b/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>
diff --git a/src/styles/global.css b/src/styles/global.css
index a650858..2dda23b 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -79,25 +79,24 @@
 }
 
 :root {
-  --primary: #fcfcfc;
-  --secondary: #212121;
-  --tertiary: #737373;
-  --accent: #636363;
+  --primary: oklch(99% 0 0);
+  --secondary: oklch(15% 0 0);
+  --tertiary: oklch(40% 0 0);
+  --accent: oklch(25% 0 0);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --primary: #000000;
-    --secondary: #ededed;
-    --tertiary: #737373;
-    --accent: #636363;
+    --primary: oklch(0% 0 0);
+    --secondary: oklch(95% 0 0);
+    --tertiary: oklch(60% 0 0);
+    --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;