fix(prose): ensure headings and links are adaptive and readable in both themes

assets/css/tailwind.css

@@ -38,8 +38,10 @@
   --font-serif: "Playfair Display", serif;
   --font-heading: "Playfair Display", serif;
   --font-sans: "Urbanist", sans-serif;
+}
 
-  /* Typography (Prose) - Mapping to semantic variables */
+/* 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);
@@ -64,6 +66,9 @@ html[data-theme='light'] {
   --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);
 }
 
 @layer base {
@@ -79,6 +84,7 @@ html[data-theme='light'] {
   h1, h2, h3, h4, h5, h6 {
     font-family: var(--font-heading);
     color: var(--brand-primary);
+    transition: color 0.3s ease;
   }
 }
 
@@ -103,9 +109,11 @@ html[data-theme='light'] {
     max-width: 100%;
   }
 
-  .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
+  /* Force prose headings to use our brand-primary which is now adaptive */
+  .prose :where(h1, h2, h3, h4, h5, h6) {
+    color: var(--brand-primary);
     font-family: var(--font-heading);
-    @apply font-bold tracking-tight;
+    @apply font-bold tracking-tight transition-colors duration-300;
   }
 
   .prose a {