diff --git a/src/app/shared/modal-shell/modal-shell.css b/src/app/shared/modal-shell/modal-shell.css
index 506d2ff..e4e2ed4 100644
--- a/src/app/shared/modal-shell/modal-shell.css
+++ b/src/app/shared/modal-shell/modal-shell.css
@@ -1,6 +1,6 @@
-.modal-shell__backdrop { background: rgb(0 0 0 / .5); inset: 0; position: fixed; z-index: 10020; }
-.modal-shell { background: #fff; border: 1px solid #cbd5e1; border-radius: 1rem; box-shadow: 0 25px 50px rgb(15 23 42 / .25); display: flex; flex-direction: column; left: 50%; max-height: min(88vh, 800px); max-width: var(--modal-shell-max-width, 680px); position: fixed; top: 50%; transform: translate(-50%, -50%); width: min(94vw, var(--modal-shell-max-width, 680px)); z-index: 10021; }
-header { align-items: center; border-bottom: 1px solid #e2e8f0; display: flex; gap: 1rem; justify-content: space-between; padding: 1rem 1.25rem; }
+.modal-shell__backdrop { background: rgb(0 0 0 / .5); inset: 0; position: fixed; z-index: var(--z-modal-backdrop); }
+.modal-shell { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-modal); box-shadow: var(--shadow-modal); display: flex; flex-direction: column; left: 50%; max-height: min(88vh, 800px); max-width: var(--modal-shell-max-width, 680px); position: fixed; top: 50%; transform: translate(-50%, -50%); width: min(94vw, var(--modal-shell-max-width, 680px)); z-index: var(--z-modal); }
+header { align-items: center; border-bottom: 1px solid var(--color-divider); display: flex; gap: 1rem; justify-content: space-between; padding: 1rem 1.25rem; }
 header h3, header p { margin: 0; }
-header p { color: #64748b; font-size: .85rem; }
+header p { color: var(--color-text-muted); font-size: .85rem; }
 .modal-shell__content { display: grid; gap: .9rem; overflow: auto; padding: 1.25rem; }
diff --git a/src/styles.css b/src/styles.css
index 04b8c56..6274f8c 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -43,6 +43,30 @@
     'Noto Color Emoji';
 }
 
+/* ── Design tokens (dialogs & modals) ─────────────────────────────
+ * Shared across modal-shell and (progressively) the other dialog
+ * components, so a single value change stays consistent everywhere
+ * instead of being copied per-component.
+ * ─────────────────────────────────────────────────────────────── */
+:root {
+  --radius-modal: 1rem;
+  --shadow-modal: 0 25px 50px rgb(15 23 42 / 25%);
+  --color-surface: #ffffff;
+  --color-border: #cbd5e1;
+  --color-divider: #e2e8f0;
+  --color-text-body: #0f172a;
+  --color-text-muted: #64748b;
+  --color-accent: #2563eb;
+  --color-danger: #dc2626;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --z-modal-backdrop: 10020;
+  --z-modal: 10021;
+}
+
 /* ── Semantic surface colours (hard-coded) ──────────────────────
  *  #0f172a  slate-900   — body text, modal text
  *  #1e293b  slate-800   — param text