Add Tailwind v3 integration aligned with production config

- Create tailwind.config.js merging production tokens with design
  system palettes from Style Dictionary
- Extend Style Dictionary to output tailwind-tokens.js module
- Add PostCSS config and Tailwind directive CSS
- Import Tailwind CSS in Storybook preview
- Production breakpoints, colours, typography, spacing preserved
- Design system brand/sage/neutral/red/amber/green/blue palettes
  added alongside production's generic color-1..6 naming

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/theme/generated/tailwind-tokens.js

@@ -0,0 +1,160 @@
+/**
+ * Auto-generated Tailwind tokens from Style Dictionary.
+ * Do not edit directly — edit tokens/*.json and run npm run build:tokens.
+ */
+module.exports = {
+  "colors": {
+    "brand": {
+      "50": "#fef9f5",
+      "100": "#f7ecdf",
+      "200": "#ebdac8",
+      "300": "#d8c3b5",
+      "400": "#d0a070",
+      "500": "#ba834e",
+      "600": "#b0610f",
+      "700": "#8b4e0d",
+      "800": "#6b3c13",
+      "900": "#51301b",
+      "950": "#251913"
+    },
+    "sage": {
+      "50": "#f2f5f6",
+      "100": "#e3eaeb",
+      "200": "#d7e1e2",
+      "300": "#c8d4d6",
+      "400": "#b9c7c9",
+      "500": "#8ea2a7",
+      "600": "#687d84",
+      "700": "#4c5b6b",
+      "800": "#4c5459",
+      "900": "#343c40",
+      "950": "#1e2528"
+    },
+    "neutral": {
+      "50": "#fafafa",
+      "100": "#f5f5f5",
+      "200": "#e8e8e8",
+      "300": "#d4d4d4",
+      "400": "#a3a3a3",
+      "500": "#737373",
+      "600": "#525252",
+      "700": "#404040",
+      "800": "#2c2e35",
+      "900": "#1a1a1c",
+      "950": "#0a0a0b"
+    },
+    "red": {
+      "50": "#fef2f2",
+      "100": "#fde8e8",
+      "200": "#f9bfbf",
+      "300": "#f09898",
+      "400": "#e56b6b",
+      "500": "#d64545",
+      "600": "#bc2f2f",
+      "700": "#9b2424",
+      "800": "#7a1d1d",
+      "900": "#5c1616",
+      "950": "#3d0e0e"
+    },
+    "amber": {
+      "50": "#fff9eb",
+      "100": "#fff0cc",
+      "200": "#ffe099",
+      "300": "#ffcc66",
+      "400": "#ffb833",
+      "500": "#f5a000",
+      "600": "#cc8500",
+      "700": "#a36b00",
+      "800": "#7a5000",
+      "900": "#523600",
+      "950": "#331f00"
+    },
+    "green": {
+      "50": "#f0f7f0",
+      "100": "#d8ecd8",
+      "200": "#b8d8b8",
+      "300": "#8dc08d",
+      "400": "#66a866",
+      "500": "#4a8f4a",
+      "600": "#3b7a3b",
+      "700": "#2e6b2e",
+      "800": "#235523",
+      "900": "#1a3f1a",
+      "950": "#0f2a0f"
+    },
+    "blue": {
+      "50": "#eff6ff",
+      "100": "#dbeafe",
+      "200": "#bfdbfe",
+      "300": "#93c5fd",
+      "400": "#60a5fa",
+      "500": "#3b82f6",
+      "600": "#2563eb",
+      "700": "#1d4ed8",
+      "800": "#1e40af",
+      "900": "#1e3a8a",
+      "950": "#172554"
+    },
+    "white": "#ffffff",
+    "black": "#000000"
+  },
+  "spacing": {
+    "1": "4px",
+    "2": "8px",
+    "3": "12px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "8": "32px",
+    "10": "40px",
+    "12": "48px",
+    "16": "64px",
+    "20": "80px",
+    "05": "2px"
+  },
+  "borderRadius": {
+    "none": "0px",
+    "sm": "4px",
+    "md": "8px",
+    "lg": "12px",
+    "xl": "16px",
+    "full": "9999px"
+  },
+  "fontFamily": {
+    "body": "'Montserrat', 'Helvetica Neue', Arial, sans-serif",
+    "display": "'Noto Serif SC', Georgia, 'Times New Roman', serif",
+    "mono": "'JetBrains Mono', 'Fira Code', Consolas, monospace"
+  },
+  "fontSize": {
+    "2xs": "0.6875rem",
+    "xs": "0.75rem",
+    "sm": "0.875rem",
+    "base": "1rem",
+    "md": "1.125rem",
+    "lg": "1.25rem",
+    "xl": "1.5rem",
+    "2xl": "1.875rem",
+    "3xl": "2.25rem",
+    "4xl": "3rem"
+  },
+  "fontWeight": {
+    "regular": 400,
+    "medium": 500,
+    "semibold": 600,
+    "bold": 700
+  },
+  "lineHeight": {
+    "tight": 1.25,
+    "snug": 1.375,
+    "normal": 1.5,
+    "relaxed": 1.75
+  },
+  "letterSpacing": {
+    "tighter": "-0.02em",
+    "tight": "-0.01em",
+    "normal": "0em",
+    "wide": "0.02em",
+    "wider": "0.05em",
+    "widest": "0.08em"
+  }
+};