style: refine mdx prose math and images

mdx-components.tsx

@@ -30,12 +30,12 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
       <h6 className="text-sm font-medium uppercase tracking-wider text-ink-soft mt-6 mb-2" {...props}>{children}</h6>
     ),
     p: ({ children }) => (
-      <p className="leading-7 [&:not(:first-child)]:mt-6 text-ink">
+      <p className="text-ink leading-7 [&:not(:first-child)]:mt-6">
         {children}
       </p>
     ),
     blockquote: ({ children }) => (
-      <blockquote className="border-l-4 border-border pl-4 italic text-ink-soft my-6">
+      <blockquote className="my-6 border-l-4 border-accent/40 bg-surface/60 py-1 pl-5 pr-4 italic text-ink-soft">
         {children}
       </blockquote>
     ),
@@ -75,11 +75,18 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
       </pre>
     ),
     img: ({ src, alt, ...rest }) => (
-      <img src={src} alt={alt} className="my-8 rounded-xl w-full" {...rest} />
+      <img
+        src={src}
+        alt={alt ?? ''}
+        className="mx-auto my-8 h-auto max-h-[80vh] w-auto max-w-full rounded-2xl border border-border bg-surface object-contain shadow-card"
+        loading="lazy"
+        decoding="async"
+        {...rest}
+      />
     ),
     table: ({ children }) => (
-      <div className="my-6 overflow-x-auto">
-        <table className="w-full border-collapse text-sm">
+      <div className="my-8 overflow-x-auto rounded-xl border border-border bg-canvas">
+        <table className="w-full min-w-[40rem] border-collapse text-sm">
           {children}
         </table>
       </div>
@@ -91,8 +98,8 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     li: (props) => <li className="leading-7" {...props} />,
 
     // Figures and captions
-    figure: (props) => <figure className="my-8" {...props} />,
-    figcaption: (props) => <figcaption className="text-center text-sm text-ink-soft mt-2" {...props} />,
+    figure: (props) => <figure className="my-10" {...props} />,
+    figcaption: (props) => <figcaption className="mx-auto mt-3 max-w-2xl text-center text-sm leading-6 text-ink-soft" {...props} />,
 
     // Subscripts and superscripts
     sup: (props) => <sup className="text-xs" {...props} />,
@@ -104,7 +111,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     ),
 
     // Collapsible sections
-    details: (props) => <details className="my-4 rounded-lg border border-border p-4" {...props} />,
-    summary: (props) => <summary className="cursor-pointer font-semibold" {...props} />,
+    details: (props) => <details className="my-6 rounded-xl border border-border bg-surface/70 p-4 shadow-card" {...props} />,
+    summary: (props) => <summary className="cursor-pointer font-semibold text-ink" {...props} />,
   }
 }