diff --git a/libs/chat/src/lib/a2ui/catalog/button.component.ts b/libs/chat/src/lib/a2ui/catalog/button.component.ts
index f18515876..163ddc549 100644
--- a/libs/chat/src/lib/a2ui/catalog/button.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/button.component.ts
@@ -24,26 +24,27 @@ import { RenderElementComponent } from '@ngaf/render';
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      padding: 8px 16px;
-      border-radius: 8px;
-      font-size: 14px;
+      padding: var(--a2ui-spacing-2) var(--a2ui-spacing-4);
+      border-radius: var(--a2ui-shape-small);
+      font-size: var(--a2ui-typography-body-size);
       font-weight: 500;
       cursor: pointer;
-      transition: background 120ms, opacity 120ms;
+      transition: background var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard),
+                  opacity var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard);
       border: none;
     }
     .a2ui-btn:disabled { opacity: 0.5; cursor: not-allowed; }
     .a2ui-btn--primary {
-      background: var(--a2ui-primary, #2563eb);
-      color: #fff;
+      background: var(--a2ui-primary);
+      color: var(--a2ui-on-primary);
     }
-    .a2ui-btn--primary:hover:not(:disabled) { background: var(--a2ui-primary-hover, #1d4ed8); }
+    .a2ui-btn--primary:hover:not(:disabled) { background: var(--a2ui-primary-hover); }
     .a2ui-btn--secondary {
-      background: transparent;
-      color: var(--a2ui-input-text, rgba(255,255,255,0.8));
-      border: 1px solid var(--a2ui-border, rgba(255,255,255,0.2));
+      background: var(--a2ui-surface-variant);
+      color: var(--a2ui-on-surface);
+      border: 1px solid var(--a2ui-outline);
     }
-    .a2ui-btn--secondary:hover:not(:disabled) { background: rgba(255,255,255,0.08); }
+    .a2ui-btn--secondary:hover:not(:disabled) { background: var(--a2ui-outline); }
   `],
 })
 export class A2uiButtonComponent {
diff --git a/libs/chat/src/lib/a2ui/catalog/card.component.ts b/libs/chat/src/lib/a2ui/catalog/card.component.ts
index 5783beeee..958886337 100644
--- a/libs/chat/src/lib/a2ui/catalog/card.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/card.component.ts
@@ -18,11 +18,12 @@ import { RenderElementComponent } from '@ngaf/render';
     .a2ui-card {
       display: flex;
       flex-direction: column;
-      gap: 8px;
-      border-radius: 12px;
-      border: 1px solid var(--a2ui-border, rgba(255,255,255,0.1));
-      background: var(--a2ui-card-bg, rgba(255,255,255,0.05));
-      padding: 16px;
+      gap: var(--a2ui-spacing-2);
+      border-radius: var(--a2ui-shape-medium);
+      border: 1px solid var(--a2ui-outline);
+      background: var(--a2ui-surface);
+      padding: var(--a2ui-spacing-4);
+      box-shadow: var(--a2ui-elevation-1);
     }
   `],
 })
diff --git a/libs/chat/src/lib/a2ui/catalog/check-box.component.ts b/libs/chat/src/lib/a2ui/catalog/check-box.component.ts
index e63de547e..3df6c9774 100644
--- a/libs/chat/src/lib/a2ui/catalog/check-box.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/check-box.component.ts
@@ -17,16 +17,16 @@ import { emitBinding } from './emit-binding';
     .a2ui-cb {
       display: flex;
       align-items: center;
-      gap: 8px;
-      font-size: 14px;
+      gap: var(--a2ui-spacing-2);
+      font-size: var(--a2ui-typography-body-size);
       cursor: pointer;
     }
     .a2ui-cb__input {
       width: 16px;
       height: 16px;
-      border-radius: 4px;
+      border-radius: var(--a2ui-shape-extra-small);
       cursor: pointer;
-      accent-color: var(--a2ui-primary, #2563eb);
+      accent-color: var(--a2ui-primary);
     }
   `],
 })
diff --git a/libs/chat/src/lib/a2ui/catalog/date-time-input.component.ts b/libs/chat/src/lib/a2ui/catalog/date-time-input.component.ts
index c875bc769..9c0516898 100644
--- a/libs/chat/src/lib/a2ui/catalog/date-time-input.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/date-time-input.component.ts
@@ -22,22 +22,27 @@ import { emitBinding } from './emit-binding';
     </div>
   `,
   styles: [`
-    .a2ui-dti { display: flex; flex-direction: column; gap: 4px; }
+    .a2ui-dti { display: flex; flex-direction: column; gap: var(--a2ui-spacing-1); }
     .a2ui-dti__label {
-      font-size: 12px;
-      color: var(--a2ui-label, rgba(255,255,255,0.6));
+      font-size: var(--a2ui-typography-label-size);
+      font-weight: var(--a2ui-typography-label-weight);
+      color: var(--a2ui-label);
     }
     .a2ui-dti__input {
-      padding: 8px 12px;
-      font-size: 14px;
-      border-radius: 8px;
-      background: var(--a2ui-input-bg, rgba(255,255,255,0.05));
-      color: var(--a2ui-input-text, white);
-      border: 1px solid var(--a2ui-border, rgba(255,255,255,0.1));
+      padding: var(--a2ui-spacing-2) var(--a2ui-spacing-3);
+      font-size: var(--a2ui-typography-body-size);
+      border-radius: var(--a2ui-shape-small);
+      background: var(--a2ui-input-bg);
+      color: var(--a2ui-on-surface);
+      border: 1px solid var(--a2ui-outline);
       outline: none;
-      transition: border-color 120ms;
+      transition: border-color var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard);
+    }
+    .a2ui-dti__input:focus {
+      outline: var(--a2ui-focus-ring-width) solid var(--a2ui-focus-ring-color);
+      outline-offset: 2px;
+      border-color: var(--a2ui-primary);
     }
-    .a2ui-dti__input:focus { border-color: var(--a2ui-primary, #4f8df5); }
   `],
 })
 export class A2uiDateTimeInputComponent {
diff --git a/libs/chat/src/lib/a2ui/catalog/divider.component.ts b/libs/chat/src/lib/a2ui/catalog/divider.component.ts
index 25416c911..60393b55b 100644
--- a/libs/chat/src/lib/a2ui/catalog/divider.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/divider.component.ts
@@ -17,15 +17,15 @@ import type { Spec } from '@json-render/core';
       display: block;
       width: 100%;
       border: none;
-      border-top: 1px solid var(--a2ui-border, rgba(255,255,255,0.1));
-      margin: 8px 0;
+      border-top: 1px solid var(--a2ui-outline);
+      margin: var(--a2ui-spacing-2) 0;
     }
     .a2ui-divider--vertical {
       display: inline-block;
       align-self: stretch;
       width: 1px;
-      background: var(--a2ui-border, rgba(255,255,255,0.1));
-      margin: 0 8px;
+      background: var(--a2ui-outline);
+      margin: 0 var(--a2ui-spacing-2);
     }
   `],
 })
diff --git a/libs/chat/src/lib/a2ui/catalog/image.component.ts b/libs/chat/src/lib/a2ui/catalog/image.component.ts
index fb7b38ab1..a5f906a64 100644
--- a/libs/chat/src/lib/a2ui/catalog/image.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/image.component.ts
@@ -18,7 +18,7 @@ import type { Spec } from '@json-render/core';
     .a2ui-img {
       display: block;
       max-width: 100%;
-      border-radius: 4px;
+      border-radius: var(--a2ui-shape-extra-small);
     }
   `],
 })
diff --git a/libs/chat/src/lib/a2ui/catalog/list.component.ts b/libs/chat/src/lib/a2ui/catalog/list.component.ts
index bac85947b..cb9043d88 100644
--- a/libs/chat/src/lib/a2ui/catalog/list.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/list.component.ts
@@ -18,14 +18,14 @@ import { RenderElementComponent } from '@ngaf/render';
     .a2ui-list--vertical {
       display: flex;
       flex-direction: column;
-      gap: 4px;
+      gap: var(--a2ui-spacing-1);
       overflow-y: auto;
       max-height: 384px;
     }
     .a2ui-list--horizontal {
       display: flex;
       flex-direction: row;
-      gap: 4px;
+      gap: var(--a2ui-spacing-1);
       overflow-x: auto;
     }
   `],
diff --git a/libs/chat/src/lib/a2ui/catalog/modal.component.ts b/libs/chat/src/lib/a2ui/catalog/modal.component.ts
index 29e16e832..c3871cfbc 100644
--- a/libs/chat/src/lib/a2ui/catalog/modal.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/modal.component.ts
@@ -55,24 +55,24 @@ import { RenderElementComponent } from '@ngaf/render';
     .a2ui-modal__backdrop {
       position: absolute;
       inset: 0;
-      background: rgba(0,0,0,0.6);
+      background: var(--a2ui-scrim);
       backdrop-filter: blur(4px);
     }
     .a2ui-modal__panel {
       position: relative;
-      background: var(--a2ui-card-bg, #111827);
-      border: 1px solid var(--a2ui-border, rgba(255,255,255,0.1));
-      border-radius: 12px;
-      padding: 24px;
+      background: var(--a2ui-surface);
+      border: 1px solid var(--a2ui-outline);
+      border-radius: var(--a2ui-shape-medium);
+      padding: var(--a2ui-spacing-5);
       max-width: 512px;
       width: 100%;
-      margin: 0 16px;
-      box-shadow: 0 25px 50px rgba(0,0,0,0.5);
+      margin: 0 var(--a2ui-spacing-4);
+      box-shadow: var(--a2ui-elevation-4);
     }
     .a2ui-modal__title {
-      font-size: 18px;
-      font-weight: 600;
-      margin: 0 0 16px;
+      font-size: var(--a2ui-typography-h4-size);
+      font-weight: var(--a2ui-typography-h4-weight);
+      margin: 0 0 var(--a2ui-spacing-4);
     }
   `],
 })
diff --git a/libs/chat/src/lib/a2ui/catalog/multiple-choice.component.ts b/libs/chat/src/lib/a2ui/catalog/multiple-choice.component.ts
index 5dc2e74be..0416fabd7 100644
--- a/libs/chat/src/lib/a2ui/catalog/multiple-choice.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/multiple-choice.component.ts
@@ -45,33 +45,41 @@ interface ResolvedOption {
     </div>
   `,
   styles: [`
-    .a2ui-mc { display: flex; flex-direction: column; gap: 4px; }
-    .a2ui-mc__label { font-size: 12px; color: var(--a2ui-label, rgba(255,255,255,0.6)); }
+    .a2ui-mc { display: flex; flex-direction: column; gap: var(--a2ui-spacing-1); }
+    .a2ui-mc__label {
+      font-size: var(--a2ui-typography-label-size);
+      font-weight: var(--a2ui-typography-label-weight);
+      color: var(--a2ui-label);
+    }
     .a2ui-mc__select {
-      padding: 8px 12px;
-      font-size: 14px;
-      border-radius: 8px;
-      background: var(--a2ui-input-bg, rgba(255,255,255,0.05));
-      color: var(--a2ui-input-text, white);
-      border: 1px solid var(--a2ui-border, rgba(255,255,255,0.1));
+      padding: var(--a2ui-spacing-2) var(--a2ui-spacing-3);
+      font-size: var(--a2ui-typography-body-size);
+      border-radius: var(--a2ui-shape-small);
+      background: var(--a2ui-input-bg);
+      color: var(--a2ui-on-surface);
+      border: 1px solid var(--a2ui-outline);
       outline: none;
-      transition: border-color 120ms;
+      transition: border-color var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard);
+    }
+    .a2ui-mc__select:focus {
+      outline: var(--a2ui-focus-ring-width) solid var(--a2ui-focus-ring-color);
+      outline-offset: 2px;
+      border-color: var(--a2ui-primary);
     }
-    .a2ui-mc__select:focus { border-color: var(--a2ui-primary, #4f8df5); }
-    .a2ui-mc__checks { display: flex; flex-direction: column; gap: 8px; }
+    .a2ui-mc__checks { display: flex; flex-direction: column; gap: var(--a2ui-spacing-2); }
     .a2ui-mc__check-row {
       display: flex;
       align-items: center;
-      gap: 8px;
-      font-size: 14px;
+      gap: var(--a2ui-spacing-2);
+      font-size: var(--a2ui-typography-body-size);
       cursor: pointer;
     }
     .a2ui-mc__checkbox {
       width: 16px;
       height: 16px;
-      border-radius: 4px;
+      border-radius: var(--a2ui-shape-extra-small);
       cursor: pointer;
-      accent-color: var(--a2ui-primary, #2563eb);
+      accent-color: var(--a2ui-primary);
     }
   `],
 })
diff --git a/libs/chat/src/lib/a2ui/catalog/slider.component.ts b/libs/chat/src/lib/a2ui/catalog/slider.component.ts
index 5458c9081..73246fd51 100644
--- a/libs/chat/src/lib/a2ui/catalog/slider.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/slider.component.ts
@@ -25,15 +25,16 @@ import { emitBinding } from './emit-binding';
     </div>
   `,
   styles: [`
-    .a2ui-slider { display: flex; flex-direction: column; gap: 4px; }
+    .a2ui-slider { display: flex; flex-direction: column; gap: var(--a2ui-spacing-1); }
     .a2ui-slider__label {
-      font-size: 12px;
-      color: var(--a2ui-label, rgba(255,255,255,0.6));
+      font-size: var(--a2ui-typography-label-size);
+      font-weight: var(--a2ui-typography-label-weight);
+      color: var(--a2ui-label);
     }
     .a2ui-slider__input {
       width: 100%;
       cursor: pointer;
-      accent-color: var(--a2ui-primary, #2563eb);
+      accent-color: var(--a2ui-primary);
     }
   `],
 })
diff --git a/libs/chat/src/lib/a2ui/catalog/tabs.component.ts b/libs/chat/src/lib/a2ui/catalog/tabs.component.ts
index 17c2c6a6e..b35502a5d 100644
--- a/libs/chat/src/lib/a2ui/catalog/tabs.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/tabs.component.ts
@@ -30,26 +30,27 @@ import { RenderElementComponent } from '@ngaf/render';
     .a2ui-tabs { display: flex; flex-direction: column; }
     .a2ui-tabs__tablist {
       display: flex;
-      border-bottom: 1px solid var(--a2ui-border, rgba(255,255,255,0.1));
+      border-bottom: 1px solid var(--a2ui-outline);
     }
     .a2ui-tabs__tab {
-      padding: 8px 16px;
-      font-size: 14px;
+      padding: var(--a2ui-spacing-2) var(--a2ui-spacing-4);
+      font-size: var(--a2ui-typography-body-size);
       font-weight: 500;
       cursor: pointer;
       background: transparent;
       border: none;
       border-bottom: 2px solid transparent;
-      color: var(--a2ui-label, rgba(255,255,255,0.5));
-      transition: color 120ms, border-color 120ms;
+      color: var(--a2ui-label);
+      transition: color var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard),
+                  border-color var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard);
       margin-bottom: -1px;
     }
-    .a2ui-tabs__tab:hover { color: var(--a2ui-input-text, rgba(255,255,255,0.8)); }
+    .a2ui-tabs__tab:hover { color: var(--a2ui-on-surface); }
     .a2ui-tabs__tab--active {
-      border-bottom-color: var(--a2ui-primary, #3b82f6);
-      color: var(--a2ui-input-text, white);
+      border-bottom-color: var(--a2ui-primary);
+      color: var(--a2ui-on-surface);
     }
-    .a2ui-tabs__panel { padding-top: 12px; }
+    .a2ui-tabs__panel { padding-top: var(--a2ui-spacing-3); }
   `],
 })
 export class A2uiTabsComponent {
diff --git a/libs/chat/src/lib/a2ui/catalog/text-field.component.ts b/libs/chat/src/lib/a2ui/catalog/text-field.component.ts
index 836aef42e..cbf21cb4a 100644
--- a/libs/chat/src/lib/a2ui/catalog/text-field.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/text-field.component.ts
@@ -47,23 +47,28 @@ const TYPE_MAP: Record<TextFieldType, string> = {
     </div>
   `,
   styles: [`
-    .a2ui-tf { display: flex; flex-direction: column; gap: 4px; }
+    .a2ui-tf { display: flex; flex-direction: column; gap: var(--a2ui-spacing-1); }
     .a2ui-tf__label {
-      font-size: 12px;
-      color: var(--a2ui-label, rgba(255,255,255,0.6));
+      font-size: var(--a2ui-typography-label-size);
+      font-weight: var(--a2ui-typography-label-weight);
+      color: var(--a2ui-label);
     }
     .a2ui-tf__input {
-      padding: 8px 12px;
-      font-size: 14px;
-      border-radius: 8px;
-      background: var(--a2ui-input-bg, rgba(255,255,255,0.05));
-      color: var(--a2ui-input-text, white);
-      border: 1px solid var(--a2ui-border, rgba(255,255,255,0.1));
+      padding: var(--a2ui-spacing-2) var(--a2ui-spacing-3);
+      font-size: var(--a2ui-typography-body-size);
+      border-radius: var(--a2ui-shape-small);
+      background: var(--a2ui-input-bg);
+      color: var(--a2ui-on-surface);
+      border: 1px solid var(--a2ui-outline);
       outline: none;
-      transition: border-color 120ms;
+      transition: border-color var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard);
       resize: vertical;
     }
-    .a2ui-tf__input:focus { border-color: var(--a2ui-primary, #4f8df5); }
+    .a2ui-tf__input:focus {
+      outline: var(--a2ui-focus-ring-width) solid var(--a2ui-focus-ring-color);
+      outline-offset: 2px;
+      border-color: var(--a2ui-primary);
+    }
   `],
 })
 export class A2uiTextFieldComponent {
diff --git a/libs/chat/src/lib/a2ui/catalog/text.component.ts b/libs/chat/src/lib/a2ui/catalog/text.component.ts
index a9d1f03a5..ebf9bcdcf 100644
--- a/libs/chat/src/lib/a2ui/catalog/text.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/text.component.ts
@@ -11,49 +11,51 @@ type UsageHint = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'caption' | 'body';
   styles: [`
     .a2ui-text-h1 {
       display: block;
-      font-size: 2rem;
-      font-weight: 700;
-      line-height: 1.2;
+      font-size: var(--a2ui-typography-h1-size);
+      font-weight: var(--a2ui-typography-h1-weight);
+      line-height: var(--a2ui-typography-h1-line-height);
       margin: 0;
     }
     .a2ui-text-h2 {
       display: block;
-      font-size: 1.5rem;
-      font-weight: 600;
-      line-height: 1.3;
+      font-size: var(--a2ui-typography-h2-size);
+      font-weight: var(--a2ui-typography-h2-weight);
+      line-height: var(--a2ui-typography-h2-line-height);
       margin: 0;
     }
     .a2ui-text-h3 {
       display: block;
-      font-size: 1.25rem;
-      font-weight: 600;
-      line-height: 1.4;
+      font-size: var(--a2ui-typography-h3-size);
+      font-weight: var(--a2ui-typography-h3-weight);
+      line-height: var(--a2ui-typography-h3-line-height);
       margin: 0;
     }
     .a2ui-text-h4 {
       display: block;
-      font-size: 1.125rem;
-      font-weight: 500;
-      line-height: 1.4;
+      font-size: var(--a2ui-typography-h4-size);
+      font-weight: var(--a2ui-typography-h4-weight);
+      line-height: var(--a2ui-typography-h4-line-height);
       margin: 0;
     }
     .a2ui-text-h5 {
       display: block;
-      font-size: 1rem;
-      font-weight: 500;
-      line-height: 1.5;
+      font-size: var(--a2ui-typography-h5-size);
+      font-weight: var(--a2ui-typography-h5-weight);
+      line-height: var(--a2ui-typography-h5-line-height);
       margin: 0;
     }
     .a2ui-text-caption {
       display: block;
-      font-size: 0.75rem;
-      color: var(--a2ui-caption, rgba(255,255,255,0.5));
-      line-height: 1.4;
+      font-size: var(--a2ui-typography-caption-size);
+      font-weight: var(--a2ui-typography-caption-weight);
+      color: var(--a2ui-caption);
+      line-height: var(--a2ui-typography-caption-line-height);
     }
     .a2ui-text-body {
       display: block;
-      font-size: 0.875rem;
-      line-height: 1.6;
+      font-size: var(--a2ui-typography-body-size);
+      font-weight: var(--a2ui-typography-body-weight);
+      line-height: var(--a2ui-typography-body-line-height);
     }
   `],
 })
diff --git a/libs/chat/src/lib/a2ui/catalog/video.component.ts b/libs/chat/src/lib/a2ui/catalog/video.component.ts
index 1a0f6be5e..d8d55d576 100644
--- a/libs/chat/src/lib/a2ui/catalog/video.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/video.component.ts
@@ -17,7 +17,7 @@ import type { Spec } from '@json-render/core';
     .a2ui-video {
       display: block;
       width: 100%;
-      border-radius: 8px;
+      border-radius: var(--a2ui-shape-small);
     }
   `],
 })
diff --git a/libs/chat/src/lib/a2ui/surface.component.ts b/libs/chat/src/lib/a2ui/surface.component.ts
index dfbdf9b3d..b18934524 100644
--- a/libs/chat/src/lib/a2ui/surface.component.ts
+++ b/libs/chat/src/lib/a2ui/surface.component.ts
@@ -21,6 +21,102 @@ import { buildA2uiActionMessage } from './build-action-message';
     '[style.--a2ui-primary]': 'primaryColor()',
     '[style.font-family]': 'fontFamily()',
   },
+  styles: [`
+    :host {
+      /* === Spacing scale (4px base) === */
+      --a2ui-spacing-1: 4px;
+      --a2ui-spacing-2: 8px;
+      --a2ui-spacing-3: 12px;
+      --a2ui-spacing-4: 16px;
+      --a2ui-spacing-5: 24px;
+      --a2ui-spacing-6: 32px;
+      --a2ui-spacing-7: 40px;
+
+      /* === Typography (per Text usageHint) === */
+      /* h1 — display heading */
+      --a2ui-typography-h1-size: 32px;
+      --a2ui-typography-h1-weight: 700;
+      --a2ui-typography-h1-line-height: 1.2;
+      /* h2 — section heading */
+      --a2ui-typography-h2-size: 24px;
+      --a2ui-typography-h2-weight: 600;
+      --a2ui-typography-h2-line-height: 1.3;
+      /* h3 — subsection heading */
+      --a2ui-typography-h3-size: 20px;
+      --a2ui-typography-h3-weight: 600;
+      --a2ui-typography-h3-line-height: 1.3;
+      /* h4 */
+      --a2ui-typography-h4-size: 18px;
+      --a2ui-typography-h4-weight: 500;
+      --a2ui-typography-h4-line-height: 1.4;
+      /* h5 */
+      --a2ui-typography-h5-size: 16px;
+      --a2ui-typography-h5-weight: 500;
+      --a2ui-typography-h5-line-height: 1.4;
+      /* body */
+      --a2ui-typography-body-size: 14px;
+      --a2ui-typography-body-weight: 400;
+      --a2ui-typography-body-line-height: 1.5;
+      /* caption */
+      --a2ui-typography-caption-size: 12px;
+      --a2ui-typography-caption-weight: 400;
+      --a2ui-typography-caption-line-height: 1.4;
+      /* label (used by TextField/Slider/etc. labels) */
+      --a2ui-typography-label-size: 12px;
+      --a2ui-typography-label-weight: 500;
+
+      /* === Shape radius === */
+      --a2ui-shape-extra-small: 4px;
+      --a2ui-shape-small: 8px;
+      --a2ui-shape-medium: 12px;
+      --a2ui-shape-large: 16px;
+      --a2ui-shape-extra-large: 28px;
+
+      /* === Focus ring === */
+      --a2ui-focus-ring-color: var(--a2ui-primary);
+      --a2ui-focus-ring-width: 2px;
+
+      /* === Motion === */
+      --a2ui-motion-duration-short: 100ms;
+      --a2ui-motion-duration-medium: 200ms;
+      --a2ui-motion-duration-long: 300ms;
+      --a2ui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+      --a2ui-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1.4);
+
+      /* === Elevation (box-shadow) === */
+      --a2ui-elevation-0: none;
+      --a2ui-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3);
+      --a2ui-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.35);
+      --a2ui-elevation-3: 0 4px 8px rgba(0, 0, 0, 0.4);
+      --a2ui-elevation-4: 0 8px 16px rgba(0, 0, 0, 0.45);
+      --a2ui-elevation-5: 0 16px 32px rgba(0, 0, 0, 0.5);
+
+      /* === Color === */
+      /* (--a2ui-primary is set by host binding from beginRendering.styles, default below) */
+      --a2ui-primary: #4f8df5;
+      --a2ui-on-primary: #ffffff;
+      --a2ui-primary-hover: #6699f7;
+      --a2ui-secondary: #8a92a3;
+      --a2ui-on-secondary: #ffffff;
+      --a2ui-surface: #1a1d23;
+      --a2ui-on-surface: #ffffff;
+      --a2ui-surface-variant: rgba(255, 255, 255, 0.05);
+      --a2ui-on-surface-variant: rgba(255, 255, 255, 0.7);
+      --a2ui-outline: rgba(255, 255, 255, 0.1);
+      --a2ui-outline-variant: rgba(255, 255, 255, 0.05);
+      --a2ui-error: #f5524f;
+      --a2ui-on-error: #ffffff;
+      --a2ui-scrim: rgba(0, 0, 0, 0.6);
+
+      /* === Carry-over from existing tokens (kept for back-compat) === */
+      --a2ui-card-bg: var(--a2ui-surface);
+      --a2ui-input-bg: var(--a2ui-surface-variant);
+      --a2ui-input-text: var(--a2ui-on-surface);
+      --a2ui-label: var(--a2ui-on-surface-variant);
+      --a2ui-caption: var(--a2ui-on-surface-variant);
+      --a2ui-border: var(--a2ui-outline);
+    }
+  `],
   template: `
     @if (spec(); as s) {
       <render-spec