feat: consolidate css into tailwind

src/styles/global.css

@@ -1,5 +1,7 @@
 @import 'tailwindcss';
-@import './utilities.css';
+@import './utilities-buttons.css';
+@import './utilities-cards.css';
+@import './utilities-misc.css';
 
 @plugin '@tailwindcss/typography';
 @plugin '@tailwindcss/forms';
@@ -43,6 +45,33 @@
   --color-background-card: light-dark(color-mix(in srgb, var(--color-neutral-100) 80%, transparent), color-mix(in srgb, var(--color-neutral-800) 60%, transparent));
 
   --color-divider: light-dark(color-mix(in srgb, var(--color-slate-400) 40%, transparent), color-mix(in srgb, var(--color-neutral-500) 50%, transparent));
+
+  /* Typography */
+  --color-prose-blog-body: var(--color-neutral-700);
+  --color-prose-blog-headings: var(--color-neutral-900);
+  --color-prose-blog-links: var(--color-orange-300);
+  
+  --color-prose-blog-invert-body: var(--color-neutral-400);
+  --color-prose-blog-invert-headings: var(--color-neutral-200);
+
+  --radius-markdown-img: 0.5rem;
+
+  /* Shiki */
+  --color-shiki-bg: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+  --color-shiki-text: light-dark(var(--shiki-light), var(--shiki-dark));
+
+  /* Reveal Animations */
+  --animate-reveal: reveal 0.8s ease forwards;
+  --animate-reveal-fade: reveal-fade 1.8s ease forwards;
+
+  @keyframes reveal {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  @keyframes reveal-fade {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
 }
 
 @layer base {
@@ -51,7 +80,6 @@
     -moz-osx-font-smoothing: grayscale;
     
     --theme-transition: 0.3s ease;
-    --scroll-offset: 0px;
   }
 
   :root:where(.dark, .dark *) {
@@ -90,56 +118,56 @@
       border-color var(--theme-transition);
   }
 
-  /* Shiki syntax highlighting */
-  :root {
-    --shiki-fg: var(--shiki-light);
-    --shiki-bg: var(--color-neutral-200);
+  /* Typography */
+  .prose blockquote {
+    font-style: normal;
+    quotes: none;
   }
 
-  .dark {
-    --shiki-fg: var(--shiki-dark);
-    --shiki-bg: var(--color-neutral-800);
+  .prose img {
+    @apply rounded-lg;
   }
 
+  .prose-blog {
+    --tw-prose-body: var(--color-neutral-700);
+    --tw-prose-headings: var(--color-neutral-900);
+    --tw-prose-lead: var(--color-neutral-700);
+    --tw-prose-links: var(--color-orange-300);
+    --tw-prose-bold: var(--color-neutral-900);
+    --tw-prose-counters: var(--color-neutral-600);
+    --tw-prose-bullets: var(--color-neutral-400);
+    --tw-prose-hr: var(--color-neutral-300);
+    --tw-prose-quotes: var(--color-neutral-500);
+    --tw-prose-quote-borders: var(--color-neutral-300);
+    --tw-prose-captions: var(--color-neutral-700);
+    --tw-prose-code: var(--color-neutral-700);
+    --tw-prose-pre-code: var(--color-neutral-900);
+    --tw-prose-pre-bg: var(--color-white);
+    --tw-prose-th-borders: var(--color-neutral-300);
+    --tw-prose-td-borders: var(--color-neutral-200);
+
+    &:where(.dark, .dark *) {
+      --tw-prose-body: var(--color-neutral-400);
+      --tw-prose-headings: var(--color-neutral-200);
+      --tw-prose-lead: var(--color-neutral-300);
+      --tw-prose-links: var(--color-orange-300);
+      --tw-prose-bold: var(--color-neutral-300);
+      --tw-prose-counters: var(--color-neutral-400);
+      --tw-prose-bullets: var(--color-neutral-600);
+      --tw-prose-hr: var(--color-neutral-700);
+      --tw-prose-quotes: var(--color-neutral-500);
+      --tw-prose-quote-borders: var(--color-neutral-500);
+      --tw-prose-captions: var(--color-neutral-400);
+      --tw-prose-code: var(--color-neutral-350);
+      --tw-prose-pre-code: var(--color-neutral-300);
+      --tw-prose-th-borders: var(--color-neutral-600);
+      --tw-prose-td-borders: var(--color-neutral-700);
+    }
+  }
+
+  /* Shiki */
   pre.shiki {
     background-color: var(--shiki-bg) !important;
     color: var(--shiki-fg) !important;
   }
-
-  pre.shiki span {
-    color: var(--shiki-light);
-  }
-
-  .dark pre.shiki span {
-    color: var(--shiki-dark) !important;
-  }
-}
-
-/* Content reveal animations */
-.smooth-reveal,
-.smooth-reveal-2,
-.smooth-reveal-cards {
-  opacity: 0;
-  transform: translateY(20px);
-  transition:
-    opacity 0.8s ease,
-    transform 0.8s ease;
-}
-
-.animate-reveal {
-  opacity: 1 !important;
-  transform: translateY(0) !important;
-}
-
-.smooth-reveal-fade {
-  opacity: 0;
-  transform: translateY(0px);
-  transition:
-    opacity 1.8s ease,
-    transform 0.8s ease;
-}
-
-.animate-reveal-fade {
-  opacity: 1 !important;
-  transform: translateY(0) !important;
 }