From 047a190b9d92b42bd5c8c3481d298334ee67f26a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Fri, 20 Feb 2026 10:10:37 +0100
Subject: [PATCH] style: move @utility prose to top-level for Tailwind v4
 compatibility

---
 assets/css/tailwind.css | 54 ++++++++++++++++++++---------------------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 83506a0..a4a1482 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -24,7 +24,6 @@
 /* 
    Theme Variable Definitions
    Using :root for default (Dark) and [data-theme='light'] for overrides.
-   This ensures maximum compatibility with Alpine.js and dynamic swapping.
 */
 :root {
   --bg-primary: #121212;
@@ -33,7 +32,7 @@
   --text-primary: #f2f2f2;
   --text-secondary: #a3a3a3;
   --text-tertiary: #737373;
-  --brand-primary: #ddc288; /* Bright Gold for Dark Theme */
+  --brand-primary: #ddc288;
   --brand-secondary: #c9a765;
 }
 
@@ -44,7 +43,7 @@
   --text-primary: #2d2114;
   --text-secondary: #624a29;
   --text-tertiary: #7d5e31;
-  --brand-primary: #9c763a; /* Darker Gold for Light Theme contrast */
+  --brand-primary: #9c763a;
   --brand-secondary: #7d5e31;
 }
 
@@ -58,7 +57,6 @@
     transition: background-color 0.3s ease, color 0.3s ease;
   }
 
-  /* Global Headings */
   h1, h2, h3, h4, h5, h6 {
     font-family: var(--font-heading);
     color: var(--brand-primary);
@@ -66,6 +64,30 @@
   }
 }
 
+/* 
+   Typography (Prose) Customization
+   Using @utility prose to override internal Typography plugin variables
+   as recommended for Tailwind CSS v4. Must be at the top level.
+*/
+@utility prose {
+  --tw-prose-body: var(--text-primary);
+  --tw-prose-headings: var(--brand-primary);
+  --tw-prose-links: var(--brand-primary);
+  --tw-prose-bold: var(--text-primary);
+  --tw-prose-counters: var(--text-secondary);
+  --tw-prose-bullets: var(--brand-primary);
+  --tw-prose-hr: var(--bg-tertiary);
+  --tw-prose-quotes: var(--text-primary);
+  --tw-prose-quote-borders: var(--brand-primary);
+  --tw-prose-captions: var(--text-secondary);
+  --tw-prose-code: var(--text-primary);
+  --tw-prose-pre-code: var(--text-primary);
+  --tw-prose-pre-bg: var(--bg-secondary);
+  --tw-prose-th-borders: var(--bg-tertiary);
+  --tw-prose-td-borders: var(--bg-secondary);
+  max-width: 100%;
+}
+
 @layer components {
   /* Main navigation styling */
   header nav ul {
@@ -115,35 +137,13 @@
     background-size: 100% 1px;
   }
 
-  /* Typography (Prose) Customization */
-  .prose {
-    --tw-prose-body: var(--text-primary);
-    --tw-prose-headings: var(--brand-primary);
-    --tw-prose-links: var(--brand-primary);
-    --tw-prose-bold: var(--text-primary);
-    --tw-prose-counters: var(--text-secondary);
-    --tw-prose-bullets: var(--brand-primary);
-    --tw-prose-hr: var(--bg-tertiary);
-    --tw-prose-quotes: var(--text-primary);
-    --tw-prose-quote-borders: var(--brand-primary);
-    --tw-prose-captions: var(--text-secondary);
-    --tw-prose-code: var(--text-primary);
-    --tw-prose-pre-code: var(--text-primary);
-    --tw-prose-pre-bg: var(--bg-secondary);
-    --tw-prose-th-borders: var(--bg-tertiary);
-    --tw-prose-td-borders: var(--bg-secondary);
-    max-width: 100%;
-    transition: color 0.3s ease;
-  }
-
-  /* Increase specificity to ensure headings follow our brand-primary theme */
+  /* Specific prose element overrides for fonts and effects */
   .prose :where(h1, h2, h3, h4, h5, h6) {
     color: var(--brand-primary) !important;
     font-family: var(--font-heading);
     @apply font-bold tracking-tight transition-colors duration-300;
   }
 
-  /* Link styling within prose */
   .prose a {
     color: var(--brand-primary) !important;
     text-decoration: none !important;