diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index ccac8bb..b13b921 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -15,60 +15,37 @@
   --color-brand-900: #624a29;
   --color-brand-950: #4c3a23;
 
-  /* Semantic Theme Variables - Default (Dark) */
-  --bg-primary: #121212;
-  --bg-secondary: #1e1e1e;
-  --bg-tertiary: #2a2a2a;
-  --text-primary: #f2f2f2;
-  --text-secondary: #a3a3a3;
-  --text-tertiary: #737373;
-  --brand-primary: var(--color-brand-400);
-  --brand-secondary: var(--color-brand-500);
-
-  /* Gray Palette for standard UI */
-  --color-gray-900: #1a1a1a;
-  --color-gray-800: #2b2b2b;
-  --color-gray-700: #3c3c3c;
-  --color-gray-500: #808080;
-  --color-gray-400: #a0a0a0;
-  --color-gray-200: #e0e0e0;
-  --color-gray-100: #f5f5f5;
-
   /* Font Families */
   --font-serif: "Playfair Display", serif;
   --font-heading: "Playfair Display", serif;
   --font-sans: "Urbanist", sans-serif;
 }
 
-/* Base Theme Variables applied to html for maximum inheritance */
-html {
-  --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-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);
+/* 
+   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;
+  --bg-secondary: #1e1e1e;
+  --bg-tertiary: #2a2a2a;
+  --text-primary: #f2f2f2;
+  --text-secondary: #a3a3a3;
+  --text-tertiary: #737373;
+  --brand-primary: #ddc288; /* Bright Gold for Dark Theme */
+  --brand-secondary: #c9a765;
 }
 
-/* Light Theme Overrides */
-html[data-theme='light'] {
+[data-theme='light'] {
   --bg-primary: #fdfcf9;
   --bg-secondary: #f4f1e8;
   --bg-tertiary: #e9e4d5;
   --text-primary: #2d2114;
   --text-secondary: #624a29;
   --text-tertiary: #7d5e31;
-  /* Use a darker gold shade in light mode for proper readability/contrast */
-  --brand-primary: var(--color-brand-700);
-  --brand-secondary: var(--color-brand-800);
+  --brand-primary: #9c763a; /* Darker Gold for Light Theme contrast */
+  --brand-secondary: #7d5e31;
 }
 
 @layer base {
@@ -81,6 +58,7 @@ html[data-theme='light'] {
     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);
@@ -105,18 +83,39 @@ html[data-theme='light'] {
     @apply text-[var(--text-primary)] text-3xl font-bold hover:text-[var(--brand-primary)] transition-colors duration-200;
   }
 
+  /* 
+     Typography (Prose) Customization
+     We explicitly set the internal prose variables to our theme variables.
+  */
   .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-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;
   }
 
-  /* Force prose headings to use our brand-primary which is now adaptive */
+  /* Increase specificity to ensure headings follow our brand-primary theme */
   .prose :where(h1, h2, h3, h4, h5, h6) {
-    color: var(--brand-primary);
+    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;
     @apply font-medium no-underline border-b border-[var(--brand-primary)]/30 hover:border-[var(--brand-primary)] transition-all duration-200;
   }
 }