Implement Phase 1: Mermaid Blueprint Authority theme and accessibility

- Configure astro-mermaid with Blueprint Authority themeVariables (limestone cream canvas, Egyptian gold/blue accents)
- Update all 3 Statsbomb diagrams with standardized classDef:
  * Atomic nodes: #FEF3C7 bg, #F59E0B border (warm amber)
  * Derived nodes: #DBEAFE bg, #0EA5E9 border (sky blue)
  * System nodes: #D1FAE5 bg, #10B981 border (emerald)
- Add WCAG-compliant accessibility markup to all diagrams:
  * Wrap in <figure role="img" aria-labelledby> with <figcaption>
  * Include <details> with text alternative describing relationships
  * Screen reader friendly descriptions
- Update link styles to use Blueprint Authority colors (#475569 slate, #0EA5E9 blue)
- All diagrams now rendering with consistent Egyptian design system

Author: saadshahd

astro.config.mjs

@@ -1,12 +1,42 @@
 import { defineConfig, fontProviders } from "astro/config";
 import tailwindcss from "@tailwindcss/vite";
 import astrobook from "@northstarthemes/astrobook";
+import mdx from "@astrojs/mdx";
+import mermaid from "astro-mermaid";
 
 // https://astro.build/config
 export default defineConfig({
   site: "https://saadshahd.github.io",
   trailingSlash: 'never',  // Prevent trailing slash redirects in production
   integrations: [
+    mermaid({
+      mermaidConfig: {
+        theme: 'base',  // Required for custom variables
+        themeVariables: {
+          // Default node styling (Blueprint Authority palette)
+          primaryColor: '#F5F1E8',           // Limestone cream background
+          primaryBorderColor: '#CBD5E1',     // Warm gray border
+          primaryTextColor: '#0F172A',       // Blueprint ink text
+
+          // Typography
+          fontFamily: 'Inter, system-ui, sans-serif',
+          fontSize: '14px',
+
+          // Connections
+          lineColor: '#475569',              // Slate ink
+          edgeLabelBackground: '#FEFDFB',    // Surface color
+
+          // Clusters/subgraphs
+          clusterBkg: '#FEFDFB',            // Clean surface
+          clusterBorder: '#CBD5E1',         // Light border
+
+          // Secondary elements
+          secondaryColor: '#DBEAFE',         // Sky blue (derived nodes)
+          tertiaryColor: '#FEF3C7',          // Warm amber (atomic nodes)
+        }
+      }
+    }),  // ⚠️ Must come BEFORE mdx() to process code fences first
+    mdx(),
     astrobook({
       title: "Egyptian Engineering Design System",
       subpath: "/design-system",