upgrade to tailwind v4.0 (#33)

* begin switching to tailwind v4

* remove old tw config file

* convert colors back to hex

* move all content out of tw config

* fixed colors

* better match colors

* remove abnormally large margins

src/styles/global.css

@@ -2,33 +2,101 @@
 @import "@fontsource-variable/outfit";
 @import "@fontsource/borel";
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
 
-@layer base {
-  :root {
-    --primary: 0deg 0% 99%;
-    --secondary: 0deg 0% 13%;
-    --tertiary: 0deg 0% 45%;
-    --accent: 0deg 0% 39%;
+@theme inline {
+  --color-primary: var(--primary);
+  --color-secondary: var(--secondary);
+  --color-tertiary: var(--tertiary);
+  --color-accent: var(--accent);
+}
+
+@theme {
+  --font-sans: "Outfit Variable", "sans-serif";
+  --font-mono: "Red Hat Mono Variable", "monospace";
+
+  --animate-reveal: reveal 0.3s forwards ease-in-out;
+  --animate-logo: logo 0.5s forwards ease-out;
+  --animate-gradient-x: gradient-x 6s ease infinite;
+  --animate-gradient-y: gradient-y 6s ease infinite;
+  --animate-gradient-xy: gradient-xy 6s ease infinite;
+  @keyframes reveal {
+    0% {
+      opacity: 0;
+      transform: translateY(20px);
+      filter: blur(4px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0px);
+      filter: blur(0px);
+    }
   }
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --primary: 0deg 0% 0%;
-      --secondary: 0deg 0% 93%;
-      --tertiary: 0deg 0% 50%;
-      --accent: 0deg 0% 71%;
+  @keyframes logo {
+    0% {
+      transform: translateY(100%);
+      color: var(--primary);
+    }
+    100% {
+      transform: translateY(0%);
+      color: var(--secondary);
+    }
+  }
+  @keyframes gradient-x {
+    0%,
+    100% {
+      background-size: 200% 200%;
+      background-position: left center;
+    }
+    50% {
+      background-size: 200% 200%;
+      background-position: right center;
+    }
+  }
+  @keyframes gradient-y {
+    0%,
+    100% {
+      background-size: 400% 400%;
+      background-position: center top;
+    }
+    50% {
+      background-size: 200% 200%;
+      background-position: center center;
+    }
+  }
+  @keyframes gradient-xy {
+    0%,
+    100% {
+      background-size: 400% 400%;
+      background-position: left center;
+    }
+    50% {
+      background-size: 200% 200%;
+      background-position: right center;
     }
   }
 }
 
+:root {
+  --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: 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;