docs: decrease header margin, lighten body font

Author: jahooma

web/src/components/docs/mdx/mdx-components.tsx

@@ -210,7 +210,7 @@ const components = {
   ),
   p: ({ className, ...props }: HTMLAttributes<HTMLParagraphElement>) => (
     <p
-      className={cn('leading-7 mt-2 mb-3 text-muted-foreground', className)}
+      className={cn('leading-7 mt-2 mb-3', className)}
       {...props}
     />
   ),

web/src/styles/globals.css

@@ -9,14 +9,32 @@
 @layer base {
   .prose-compact {
     & > * + * {
-      margin-top: 0.75em;
+      margin-top: 0.6em;
       margin-bottom: 0;
     }
+    & h1 {
+      margin-top: 1.0em;
+      margin-bottom: 0.8em;
+    }
     & h2 {
-      margin-top: 1.5em;
+      margin-top: 0.8em;
+      margin-bottom: 0.8em;
+    }
+    & h3 {
+      margin-top: 0.6em;
+      margin-bottom: 0.6em;
+    }
+    & h4, & h5, & h6 {
+      margin-top: 0.4em;
+      margin-bottom: 0.4em;
     }
   }
 
+  /* Prose body text - lighter gray for better contrast in dark mode */
+  .prose-invert {
+    --tw-prose-invert-body: #b8b8bf;
+  }
+
   /* Feature section headers */
   h2.feature-heading {
     @apply text-4xl md:text-5xl lg:text-[56px] font-medium;