diff --git a/src/design-system/colors_and_type.css b/src/design-system/colors_and_type.css
index 13949e3..5f50b8d 100644
--- a/src/design-system/colors_and_type.css
+++ b/src/design-system/colors_and_type.css
@@ -1,7 +1,14 @@
 /* ============================================================
-   Magnotia — Colors & Type
-   Single source of truth for CSS variables + semantic type.
-   Import this into any Magnotia design artefact.
+   Magnotia — Colors & Type (preview surface only)
+
+   Reflects the runtime tokens defined in src/app.css @theme.
+   The runtime app reads from app.css; this file exists so the
+   static preview pages under design-system/preview/*.html render
+   with the same values without bringing in the Tailwind v4 build.
+
+   When app.css @theme changes, mirror the change here. There is
+   no automated sync; intentional duplication keeps the preview
+   pages buildless.
    ============================================================ */
 
 /* --- Brand Webfonts (local woff2, shipped with Magnotia) --- */
@@ -61,18 +68,21 @@
   /* — Borders — */
   --border: #2c2923;
   --border-subtle: #221f1b;
-  --border-focus: #e8a87c;
+  --border-focus: #c98555;
 
   /* — Text (warm hierarchy) — */
   --text: #f0ece4;
   --text-secondary: #9a9486;
-  --text-tertiary: #716b60;
+  /* Phase 10a a11y P1: lifted from #716b60 to #8c8678 to clear AA 4.5:1. */
+  --text-tertiary: #8c8678;
 
-  /* — Accent (amber/copper — always meaningful) — */
-  --accent: #e8a87c;
-  --accent-hover: #d4976a;
-  --accent-subtle: #e8a87c10;
-  --accent-glow: #e8a87c25;
+  /* — Accent (amber/copper, always meaningful) —
+     Phase 10a a11y P2: dark accent darkened from #e8a87c to #c98555 so
+     white text on accent fill clears AA in dark theme. */
+  --accent: #c98555;
+  --accent-hover: #b8754a;
+  --accent-subtle: #c9855510;
+  --accent-glow: #c9855525;
 
   /* — Semantic — */
   --success: #7ec89a;
@@ -101,7 +111,7 @@
   --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
   --shadow-md: 0 4px 12px rgba(0,0,0,0.25);
   --shadow-lg: 0 12px 28px rgba(0,0,0,0.35);
-  --shadow-accent: 0 4px 20px rgba(232,168,124,0.3);
+  --shadow-accent: 0 4px 20px rgba(201,133,85,0.3);
 
   /* — Typography — */
   --font-body: 'Lexend', system-ui, -apple-system, sans-serif;
@@ -151,15 +161,21 @@
 
   --text: #1a1816;
   --text-secondary: #5c574d;
-  --text-tertiary: #8a8578;
+  /* Phase 10a a11y P1: darkened from #8a8578 to #6b6557 to clear AA 4.5:1
+     on cream/card surfaces in light theme. */
+  --text-tertiary: #6b6557;
 
-  --accent: #b87a4a;
-  --accent-hover: #a06b3e;
-  --accent-subtle: #b87a4a10;
-  --accent-glow: #b87a4a20;
+  /* Phase 10a a11y P2: darkened from #b87a4a to #a06a3e so white text on
+     accent fill (selected pills, primary buttons) clears AA. */
+  --accent: #a06a3e;
+  --accent-hover: #8a5a32;
+  --accent-subtle: #a06a3e10;
+  --accent-glow: #a06a3e20;
 
-  --success: #3d8a5a;
-  --danger: #c44d4d;
+  /* Phase 10a a11y G3 / FR3 / D4: success and danger darkened so coloured
+     text on light surfaces clears AA. */
+  --success: #2f7549;
+  --danger: #a83838;
   --warning: #b89a3e;
 }