:root {
  /* Light-ramp aliases. Do not theme-switch these — components use --ui-tok-* / --ui-color-*. */
  --ui-neutral-0: var(--ui-palette-neutral-light-08);
  --ui-neutral-25: var(--ui-palette-neutral-light-07);
  --ui-neutral-40: var(--ui-palette-neutral-light-06);
  --ui-neutral-60: var(--ui-palette-neutral-dark-01);
  --ui-neutral-90: var(--ui-palette-neutral-dark-02);
  --ui-neutral-125: var(--ui-palette-neutral-light-05);
  --ui-neutral-200: var(--ui-palette-neutral-light-045);
  --ui-neutral-350: var(--ui-palette-neutral-dark-03);
  --ui-neutral-400: var(--ui-palette-neutral-light-04);
  --ui-neutral-600: var(--ui-palette-neutral-light-03);
  --ui-neutral-800: var(--ui-palette-neutral-light-02);
  --ui-neutral-850: var(--ui-palette-neutral-light-01);
  --ui-neutral-860: var(--ui-palette-neutral-dark-06);
  --ui-neutral-880: var(--ui-palette-neutral-dark-07);
  --ui-neutral-950: var(--ui-palette-neutral-dark-09);

  /* Semantic color roles. Theme-switched via --ui-tok-*. */
  --ui-color-canvas: var(--ui-tok-background-app);
  --ui-color-surface: var(--ui-tok-background-app);
  --ui-color-surface-subtle: var(--ui-tok-background-subtle);
  --ui-color-control: var(--ui-tok-background-component);
  --ui-color-control-hover: var(--ui-tok-background-hover);
  --ui-color-control-disabled: var(--ui-tok-background-subtle);
  --ui-color-border: var(--ui-tok-border-default);
  --ui-color-border-strong: var(--ui-tok-border-strong);

  /* Divider (Figma: Divider) */
  --ui-divider-color: var(--ui-tok-border-default);
  --ui-divider-one: 1px;
  --ui-divider-two: 2px;
  --ui-divider-vertical: 2.5rem; /* 40 hug, not a cap */
  --ui-color-text: var(--ui-tok-text-primary);
  --ui-color-text-muted: var(--ui-tok-text-muted);
  --ui-color-text-disabled: var(--ui-tok-text-muted);
  --ui-color-inverse: var(--ui-palette-neutral-light-08);
  --ui-color-inverse-surface: var(--ui-tok-toast-bg);
  --ui-color-focus-ring: var(--ui-tok-text-primary);
  --ui-color-interactive-hover: var(--ui-tok-background-hover);
  --ui-color-interactive-active: var(--ui-tok-background-active);
  --ui-color-inverse-hover: var(--ui-tok-text-secondary);
  --ui-color-success-surface: var(--ui-tok-tag-green-bg);
  --ui-color-success-border: var(--ui-tok-accent-green-03);
  --ui-color-success-text: var(--ui-tok-tag-green-text);
  --ui-color-warning-surface: var(--ui-tok-tag-yellow-bg);
  --ui-color-warning-border: var(--ui-tok-accent-yellow-03);
  --ui-color-warning-text: var(--ui-tok-tag-yellow-text);
  --ui-color-danger-surface: var(--ui-tok-accent-red-04);
  --ui-color-danger-border: var(--ui-tok-accent-red-03);
  --ui-color-danger-text: var(--ui-tok-accent-red-01);
  --ui-color-danger-text-pressed: var(--ui-tok-accent-red-02);
  --ui-color-focus-shadow: rgb(21 21 21 / 18%);
  --ui-shadow-raised: 0 1rem 3rem rgb(21 21 21 / 9%);

  /* Button kit (Figma: Fill / Stroke / Ghost / No fill / Danger × M S XS). */
  --ui-button-radius: 1.5rem;
  --ui-button-md: 2.5rem; /* 40 — labeled M */
  --ui-button-icon-md: 3.5rem; /* 56 — icon-only M */
  --ui-button-blur: blur(20px);
  --ui-button-stroke-bg: var(--ui-tok-button-stroke-bg-default);
  --ui-button-stroke-bg-pressed: var(--ui-tok-button-stroke-bg-pressed);
  --ui-button-fill-bg: var(--ui-tok-button-fill-bg-default);
  --ui-button-fill-bg-hover: var(--ui-tok-button-fill-bg-hover);
  --ui-button-fill-bg-disabled: var(--ui-tok-button-fill-bg-disabled);
  --ui-button-fill-fg: var(--ui-tok-button-fill-text-default);
  --ui-button-fill-fg-pressed: var(--ui-tok-button-fill-text-pressed);
  --ui-button-fill-glyph-pressed: var(--ui-tok-button-fill-icon-pressed);
  --ui-button-fill-fg-disabled: var(--ui-tok-button-fill-text-disabled);
  --ui-button-icon: var(--ui-tok-button-fill-icon-default);
  --ui-button-stroke-border: var(--ui-tok-button-stroke-border-default);
  --ui-button-stroke-border-hover: var(--ui-tok-button-stroke-border-hover);
  --ui-button-muted-fg: var(--ui-tok-button-stroke-text-pressed);
  --ui-button-pressed-icon: var(--ui-tok-button-stroke-icon-pressed);
  --ui-button-disabled-fg: var(--ui-tok-button-fill-text-disabled);
  --ui-button-ghost-bg: var(--ui-tok-button-ghost-bg-default);
  --ui-button-ghost-bg-hover: var(--ui-tok-button-ghost-bg-hover);
  --ui-button-ghost-bg-pressed: var(--ui-tok-button-ghost-bg-pressed);
  --ui-button-quiet-bg-hover: var(--ui-tok-button-no-fill-bg-hover);
  --ui-button-quiet-bg-pressed: var(--ui-tok-button-no-fill-bg-pressed);
  --ui-button-quiet-bg-disabled: var(--ui-tok-button-no-fill-bg-disabled);
  --ui-button-danger-bg: var(--ui-tok-button-danger-bg-default);
  --ui-button-danger-bg-hover: var(--ui-tok-button-danger-bg-hover);
  --ui-button-danger-fg: var(--ui-tok-button-danger-text-default);
  --ui-button-danger-icon: var(--ui-tok-button-danger-icon-default);

  /* Chip kit (Figma: Unselected/Selected × M S XS). */
  --ui-chip-md: 2.5rem; /* 40 — Chip M */
  --ui-chip-selected-bg: var(--ui-tok-chip-bg-default);
  --ui-chip-selected-bg-hover: var(--ui-tok-chip-bg-hover);
  --ui-chip-selected-fg: var(--ui-tok-chip-text-default);
  --ui-chip-icon: var(--ui-tok-text-muted);
  --ui-chip-hover-bg: var(--ui-tok-background-component);
  --ui-chip-disabled-bg: var(--ui-tok-background-subtle);
  --ui-chip-selected-disabled-bg: var(--ui-tok-chip-bg-disabled);

  /* Tag kit (Figma: Strong × Color × XS/S/M). */
  --ui-tag-xs: 1rem; /* 16 */
  --ui-tag-sm: 1.25rem; /* 20 */
  --ui-tag-md: 1.5rem; /* 24 */
  --ui-tag-radius-xs: 0.375rem; /* 6 */
  --ui-tag-radius-sm: 0.5rem; /* 8 */
  --ui-tag-radius-md: 0.625rem; /* 10 */
  --ui-knob-shadow: 0 1px 2px rgb(0 0 0 / 15%);
  --ui-knob-shadow-s: 0 0.833px 1.667px rgb(0 0 0 / 15%);
  --ui-switch-md-w: 2.5rem; /* 40 */
  --ui-switch-md-h: 1.5rem; /* 24 */
  --ui-switch-sm-w: 2rem; /* 32 */
  --ui-switch-sm-h: 1.25rem; /* 20 */
  --ui-switch-pad: 2px;
  --ui-switch-radius: 0.75rem; /* 12 */
  --ui-knob-md: 1.25rem; /* 20 */
  --ui-knob-sm: 1rem; /* 16 */
  --ui-check-md: 1.5rem; /* 24 */
  --ui-check-sm: 1.25rem; /* 20 */
  --ui-check-radius: 0.25rem; /* 4 */
  --ui-radio-md-radius: 0.75rem; /* 12 */
  --ui-radio-sm-radius: 0.625rem; /* 10 */
  --ui-radio-dot-md: 0.75rem; /* 12 */
  --ui-radio-dot-sm: 0.625rem; /* 10 */
  --ui-control-glyph-hover: var(--ui-tok-checkbox-checkmark-hover);
  --ui-input-sm-h: 2.25rem; /* 36 */
  --ui-input-md-h: 2.5rem; /* 40 */
  --ui-input-sm-pad: 0.75rem; /* 12 */
  --ui-input-md-pad: 1rem; /* 16 */
  --ui-input-sm-gap: 0.5rem; /* 8 */
  --ui-input-md-gap: 0.75rem; /* 12 */
  --ui-input-sm-radius: 0.75rem; /* 12 */
  --ui-input-md-radius: 1rem; /* 16 */
  --ui-input-border: var(--ui-tok-input-border-default);
  --ui-input-border-hover: var(--ui-tok-input-search-border-hover);
  --ui-input-border-active: var(--ui-tok-input-border-active);
  --ui-input-border-disabled: var(--ui-tok-checkbox-border-disabled);
  --ui-field-gap: 0.5rem; /* 8 */
  --ui-field-label-pad: 1rem; /* 16 */
  --ui-field-helper-pad: 0.75rem; /* 12 */
  --ui-field-helper-offset: -0.25rem; /* 4px below field */
  --ui-field-control-pad-block: 0.625rem; /* 10 */

  /* Side menu button (Figma: Side-menu-btn). */
  --ui-side-menu-radius: 0.5rem;
  --ui-side-menu-fg: var(--ui-tok-sidemenu-item-text-default);
  --ui-side-menu-fg-hover: var(--ui-tok-sidemenu-item-text-hover);
  --ui-side-menu-fg-active: var(--ui-tok-sidemenu-item-text-active);
  --ui-side-menu-icon: var(--ui-tok-sidemenu-item-icon-default);
  --ui-side-menu-icon-hover: var(--ui-tok-sidemenu-item-icon-hover);
  --ui-side-menu-bg-hover: var(--ui-tok-sidemenu-item-bg-hover);
  --ui-side-menu-bg-active: var(--ui-tok-sidemenu-item-bg-active);
  --ui-project-logo-radius: 0.25rem; /* 4 — 24/20 */
  --ui-project-logo-radius-md: 0.375rem; /* 6 — 32 */
  --ui-project-logo-radius-lg: 0.75rem; /* 12 — 48 */
  --ui-project-logo-radius-xl: 0.875rem; /* 14 — 64 */
  --ui-project-logo-xl: 4rem; /* 64 */
  --ui-project-logo-lg: 3rem; /* 48 */
  --ui-project-logo-md: 2rem; /* 32 */
  --ui-project-logo-sm: 1.5rem; /* 24 */
  --ui-project-logo-xs: 1.25rem; /* 20 */
  --ui-project-logo-empty-bg: var(--ui-tok-ava-project-bg);
  --ui-project-logo-empty-fg: var(--ui-tok-ava-project-icon);
  --ui-project-logo-tile-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 8%);
  --ui-project-select-name-max: 9.75rem; /* 156 — Figma Project-select name */
  --ui-bg-pattern-height: 10.5rem; /* 168 — Figma BG Pattern */
  --ui-bg-pattern-tile: 8rem; /* 128 — 256 tile × 0.5 */
  --ui-bg-pattern-opacity: 0.16;
  --ui-bg-pattern-fade: 37.19%;

  /* Context menu (Figma: context-menu). Labeled Select composes this. Compact unlabeled stays native. */
  --ui-menu-min: 14.375rem; /* 230 */
  --ui-menu-wide: 19.375rem; /* 310 — skill menu / flyout */
  --ui-menu-radius: 1.25rem; /* 20 */
  --ui-menu-pad: 0.5rem; /* 8 */
  --ui-menu-item-gap: 0.0625rem; /* 1 */
  --ui-menu-item-pad: 0.75rem; /* 12 */
  --ui-menu-item-icon-gap: 0.625rem; /* 10 */
  --ui-menu-item-radius: 0.75rem; /* 12 */
  --ui-menu-divider-pad-block: 0.25rem; /* 4 */
  --ui-menu-shadow: 0 0.5rem 1.25rem rgb(0 0 0 / 8%);
  --ui-menu-bg: var(--ui-tok-context-menu-bg);
  --ui-menu-border: var(--ui-tok-border-default);
  --ui-menu-fg: var(--ui-tok-context-menu-item-text-default);
  --ui-menu-fg-hover: var(--ui-tok-context-menu-item-text-hover);
  --ui-menu-fg-pressed: var(--ui-tok-context-menu-item-text-pressed);
  --ui-menu-fg-selected: var(--ui-tok-context-menu-item-text-active);
  --ui-menu-icon: var(--ui-tok-context-menu-item-icon-default);
  --ui-menu-check: var(--ui-tok-context-menu-item-checkmark);
  --ui-menu-bg-hover: var(--ui-tok-context-menu-item-bg-hover);
  --ui-menu-bg-pressed: var(--ui-tok-context-menu-item-bg-pressed);
  --ui-menu-item-height: var(--ui-control-sm); /* 36 */
  --ui-menu-z: 80;

  /* Tabs: pill (Figma Tabs) + line (Figma Tabs line / tab-item-line). */
  --ui-tabs-height: 3rem; /* 48 */
  --ui-tabs-pad: 0.25rem; /* 4 */
  --ui-tabs-gap: 0.125rem; /* 2 */
  --ui-tabs-radius: 3.75rem; /* 60 */
  --ui-tabs-item-height: 2.5rem; /* 40 */
  --ui-tabs-item-pad: 1.25rem; /* 20 */
  --ui-tabs-item-gap: 0.5rem; /* 8 */
  --ui-tabs-item-radius: 1.5rem; /* 24 */
  --ui-tabs-counter: 1rem; /* 16 */
  --ui-tabs-counter-pad: 0.25rem; /* 4 */
  --ui-tabs-counter-radius: 0.625rem; /* 10 */
  --ui-tabs-bg: var(--ui-tok-background-app);
  --ui-tabs-border: var(--ui-tok-border-default);
  --ui-tabs-item-fg: var(--ui-tok-tab-item-text-default);
  --ui-tabs-item-fg-active: var(--ui-tok-tab-item-btn-text-active);
  --ui-tabs-item-bg-active: var(--ui-tok-tab-item-btn-bg-active);
  --ui-tabs-item-bg-hover: var(--ui-tok-tab-item-btn-bg-hover);
  --ui-tabs-counter-bg: var(--ui-tok-counter-bg-grey);
  --ui-tabs-counter-fg: var(--ui-tok-counter-text);
  --ui-tabs-line-height: 3rem; /* 48 */
  --ui-tabs-line-item-pad: 1.5rem; /* 24 */
  --ui-tabs-line-border-width: 2px;
  --ui-tabs-line-border: transparent;
  --ui-tabs-line-border-active: var(--ui-tok-tab-item-line-border-active);
  --ui-tabs-line-border-hover: var(--ui-tok-tab-item-line-border-hover);
  --ui-tabs-line-fg: var(--ui-tok-tab-item-line-text-default);
  --ui-tabs-line-fg-active: var(--ui-tok-tab-item-line-text-active);
  --ui-tabs-line-fg-hover: var(--ui-tok-tab-item-line-text-hover);

  /* Banner (Figma: Benner-error) */
  --ui-banner-pad: 1.5rem; /* 24 */
  --ui-banner-gap: 1.25rem; /* 20 */
  --ui-banner-radius: 1.5rem; /* 24 */
  --ui-banner-icon: 2rem; /* 32 */
  --ui-banner-bg: var(--ui-tok-accent-red-04);
  --ui-banner-icon-bg: var(--ui-tok-accent-red-01);
  --ui-banner-icon-fg: var(--ui-neutral-0);
  --ui-banner-fg: var(--ui-tok-text-primary);
  --ui-banner-muted: var(--ui-tok-text-secondary);

  /* Toast (Figma: Toast) */
  --ui-toast-height: 2.5rem; /* 40 */
  --ui-toast-pad: 0.5rem 1rem; /* 8 16 */
  --ui-toast-gap: 1rem; /* 16 */
  --ui-toast-cluster-gap: 0.5rem; /* 8 */
  --ui-toast-radius: 1.5rem; /* 24 */
  --ui-toast-icon: 0.75rem; /* 12 */
  --ui-toast-close: 1rem; /* 16 */
  --ui-toast-fill: var(--ui-palette-neutral-light-08);
  --ui-toast-border: var(--ui-tok-border-subtle);
  --ui-toast-shadow: var(--ui-menu-shadow);
  --ui-toast-text: var(--ui-tok-button-stroke-text-default);
  --ui-toast-text-error: var(--ui-palette-accent-red-light-01);
  --ui-toast-close-fg: var(--ui-palette-neutral-light-03);

  /* Appearance button (Figma: Appearance-btn) */
  --ui-appearance-btn-width: 13rem; /* 208 */
  --ui-appearance-btn-height: 10rem; /* 160 */
  --ui-appearance-btn-radius: 1.25rem; /* 20 */
  --ui-appearance-btn-pad: 2.8125rem 5.3125rem; /* 45 85 */
  --ui-appearance-btn-gap: 1rem; /* 16 */
  --ui-appearance-btn-bg: var(--ui-tok-button-theme-toggle-bg-default);
  --ui-appearance-btn-bg-hover: var(--ui-tok-button-theme-toggle-bg-hover);
  --ui-appearance-btn-bg-active: var(--ui-tok-button-theme-toggle-bg-active);
  --ui-appearance-btn-border: var(--ui-tok-button-theme-toggle-border-default);
  --ui-appearance-btn-border-hover: var(--ui-tok-button-theme-toggle-border-hover);
  --ui-appearance-btn-border-active: var(--ui-tok-button-theme-toggle-border-active);
  --ui-appearance-btn-icon: var(--ui-tok-button-theme-toggle-icon-default);
  --ui-appearance-btn-icon-hover: var(--ui-tok-button-theme-toggle-icon-hover);
  --ui-appearance-btn-icon-active: var(--ui-tok-button-theme-toggle-icon-active);
  --ui-appearance-btn-text: var(--ui-tok-button-theme-toggle-text-default);
  --ui-appearance-btn-text-hover: var(--ui-tok-button-theme-toggle-text-hover);
  --ui-appearance-btn-text-active: var(--ui-tok-button-theme-toggle-text-active);

  /* Recommendation card (Figma: Recomendations) */
  --ui-rec-width: 17.375rem; /* 278 */
  --ui-rec-height: 16.25rem; /* 260 */
  --ui-rec-radius: 1rem; /* 16 */
  --ui-rec-pad: 1.25rem 2.25rem 1.25rem 1.25rem;
  --ui-rec-gap: 0.5rem; /* 8 */
  --ui-rec-bg: var(--ui-tok-background-app);
  --ui-rec-border: var(--ui-tok-border-default);
  --ui-rec-label: var(--ui-tok-text-muted);
  --ui-rec-title: var(--ui-tok-text-primary);
  --ui-rec-desc: var(--ui-tok-text-secondary);
  --ui-rec-featured-bg: var(--ui-tok-accent-blue-01);
  --ui-rec-featured-bg-hover: var(--ui-palette-accent-blue-light-05);
  --ui-rec-featured-fg: var(--ui-neutral-0);
  --ui-rec-featured-label: var(--ui-palette-neutral-light-08-64);

  /* Integration widget (Figma: Integration widget) */
  --ui-integration-widget-width: 16.875rem; /* 270 */
  --ui-integration-widget-height: 16.25rem; /* 260 */
  --ui-integration-widget-radius: 1rem; /* 16 */
  --ui-integration-widget-pad: 1rem 1.5rem 1rem 1.25rem; /* 16 24 16 20 */
  --ui-integration-widget-start-gap: 1rem; /* 16 */
  --ui-integration-widget-copy-gap: 0.5rem; /* 8 */
  --ui-integration-widget-bg: var(--ui-tok-background-component);
  --ui-integration-widget-bg-hover: var(--ui-tok-background-hover);
  --ui-integration-widget-bg-active: var(--ui-tok-background-app);
  --ui-integration-widget-border-active: var(--ui-tok-border-default);
  --ui-integration-widget-title: var(--ui-tok-text-primary);
  --ui-integration-widget-desc: var(--ui-tok-text-secondary);
  --ui-integration-widget-action: var(--ui-tok-text-secondary);
  --ui-integration-widget-action-hover: var(--ui-tok-text-primary);

  /* Launch row (Figma: Launches S) */
  --ui-launch-height: 5rem; /* 80 */
  --ui-launch-pad: 0 1.5rem 0 1rem; /* 0 24 0 16 */
  --ui-launch-gap: 1rem; /* 16 */
  --ui-launch-radius: 1rem; /* 16 */
  --ui-launch-ava: 3rem; /* 48 */
  --ui-launch-ava-bg: var(--ui-tok-skill-ava-bg-normal);
  --ui-launch-ava-fg: var(--ui-tok-skill-ava-icon-normal);

  /* Metrics card (Figma: Frame 485020 / 787:125797) */
  --ui-metrics-card-height: 10rem; /* 160 */
  --ui-metrics-card-pad: 1rem 1rem 1rem 1.5rem; /* 16 16 16 24 */
  --ui-metrics-card-radius: 1rem; /* 16 */
  --ui-metrics-card-copy-gap: 0.125rem; /* 2 */
  --ui-metrics-card-bg: var(--ui-tok-background-app);
  --ui-metrics-card-border: var(--ui-tok-border-default);
  --ui-metrics-card-value: var(--ui-tok-text-primary);
  --ui-metrics-card-title: var(--ui-tok-text-primary);
  --ui-metrics-card-desc: var(--ui-tok-text-secondary);

  /* List item text (Figma: List-item-text) */
  --ui-list-item-text-gap: 0.25rem; /* 4 */
  --ui-list-item-text-meta-gap: 0.75rem; /* 12 */
  --ui-list-item-text-sm-gap: 0.125rem; /* 2 */
  --ui-list-item-text-sm-meta-gap: 0.5rem; /* 8 */

  /* Document list item (Figma: Document-list-item) */
  --ui-document-list-item-height: 4.5rem; /* 72 */
  --ui-document-list-item-pad: 0.75rem 1.25rem 0.75rem 0.75rem; /* 12 20 12 12 */
  --ui-document-list-item-gap: 1.25rem; /* 20 */
  --ui-document-list-item-radius: 1rem; /* 16 */
  --ui-document-list-item-start-gap: 1rem; /* 16 */
  --ui-document-list-item-ava: 3rem; /* 48 */
  --ui-document-list-item-ava-radius: 0.625rem; /* 10 */
  --ui-document-list-item-ava-bg: var(--ui-tok-ava-doc-bg);
  --ui-document-list-item-ava-fg: var(--ui-tok-ava-doc-icon);
  --ui-document-list-item-trailing-w: 2.25rem; /* 36 */
  --ui-document-list-item-trailing-h: 1.75rem; /* 28 */
  --ui-document-list-item-aside-w: 7.5rem; /* 120 */

  /* Attach file (Figma: Attach-file) */
  --ui-attach-file-max: 22.5rem; /* 360 */
  --ui-attach-file-pad: 0.375rem 2.5rem 0.375rem 0.375rem; /* 6 40 6 6 */
  --ui-attach-file-gap: 0.625rem; /* 10 */
  --ui-attach-file-radius: 1rem; /* 16 */
  --ui-attach-file-ava: 3rem; /* 48 */
  --ui-attach-file-ava-radius: 0.625rem; /* 10 */
  --ui-attach-file-close: 1.25rem; /* 20 */
  --ui-attach-file-close-offset: -0.4375rem; /* -7 */
  --ui-attach-file-close-radius: 1.5rem; /* 24 */
  --ui-attach-file-close-blur: 1.25rem; /* 20 */
  --ui-attach-file-row-gap: 0.75rem; /* 12 */
  --ui-attach-file-row-pad: 0.5rem 1.5rem 0 0.75rem; /* 8 24 0 12 */
  --ui-attach-file-bg: var(--ui-tok-attach-file-input-bg);
  --ui-attach-file-border: var(--ui-tok-attach-file-input-border);
  --ui-attach-file-ava-bg: var(--ui-tok-attach-file-input-ava-bg);
  --ui-attach-file-ava-fg: var(--ui-tok-attach-file-input-ava-icon);
  --ui-attach-file-title: var(--ui-tok-attach-file-input-text);
  --ui-attach-file-meta: var(--ui-tok-attach-file-input-meta-text);
  --ui-attach-file-close-bg: var(--ui-tok-attach-file-input-btn-close-bg);
  --ui-attach-file-close-fg: var(--ui-tok-attach-file-input-btn-close-icon);

  /* Chats list item (Figma: Chats-list-item) */
  --ui-chats-list-item-height: 3.6875rem; /* 59 */
  --ui-chats-list-item-pad: 0.75rem 1.25rem 0.75rem 1.5rem; /* 12 20 12 24 */
  --ui-chats-list-item-gap: 1.25rem; /* 20 */
  --ui-chats-list-item-radius: 1rem; /* 16 */
  --ui-chats-list-item-trailing-w: 2.25rem; /* 36 */
  --ui-chats-list-item-trailing-h: 1.75rem; /* 28 */

  /* Integration list item (Figma: Integration-list) */
  --ui-integration-list-item-height: 4.5rem; /* 72 */
  --ui-integration-list-item-pad: 0.75rem 1.25rem 0.75rem 0.75rem; /* 12 20 12 12 */
  --ui-integration-list-item-gap: 1.25rem; /* 20 */
  --ui-integration-list-item-radius: 1rem; /* 16 */
  --ui-integration-list-item-start-gap: 1rem; /* 16 */
  --ui-integration-list-item-ava: 3rem; /* 48 */
  --ui-integration-list-item-ava-radius: 0.625rem; /* 10 */
  --ui-integration-list-item-ava-bg: var(--ui-tok-ava-doc-bg);
  --ui-integration-list-item-end-gap: 0.75rem; /* 12 */
  --ui-integration-list-item-status-w: 6rem; /* 96 */
  --ui-integration-list-item-trailing-w: 2.25rem; /* 36 */
  --ui-integration-list-item-trailing-h: 1.75rem; /* 28 */
  --ui-integration-list-item-blocked-title: var(--ui-tok-text-secondary);

  /* Step (Figma: Step item big) */
  --ui-step-height: 2.5rem; /* 40 */
  --ui-step-gap: 1.25rem; /* 20 */
  --ui-step-ava: 2.5rem; /* 40 */
  --ui-step-status: 1.5rem; /* 24 */
  --ui-step-ava-bg: var(--ui-tok-background-subtle);
  --ui-step-ava-bg-current: var(--ui-tok-background-hover);
  --ui-step-ava-fg: var(--ui-tok-text-muted);
  --ui-step-ava-fg-current: var(--ui-tok-text-primary);
  --ui-step-status-bg: var(--ui-tok-background-component);
  --ui-step-status-bg-prev: var(--ui-tok-accent-blue-01);
  --ui-step-check: var(--ui-palette-neutral-light-08);
  --ui-step-dot: var(--ui-palette-neutral-light-045);

  /* HorizontalSteps (Figma: Steps / Step item) */
  --ui-horizontal-steps-height: 1.25rem; /* 20 */
  --ui-horizontal-steps-gap: 0.75rem; /* 12 */
  --ui-horizontal-steps-item-gap: 0.5rem; /* 8 */
  --ui-horizontal-steps-radius: 1.25rem; /* 20 */
  --ui-horizontal-steps-ava: 1.25rem; /* 20 */
  --ui-horizontal-steps-current-bg: var(--ui-tok-step-item-current-bg);
  --ui-horizontal-steps-current-icon: var(--ui-tok-step-item-current-icon);
  --ui-horizontal-steps-current-text: var(--ui-tok-step-item-current-text);
  --ui-horizontal-steps-next-bg: var(--ui-tok-step-item-next-bg);
  --ui-horizontal-steps-next-icon: var(--ui-tok-step-item-next-icon);
  --ui-horizontal-steps-next-text: var(--ui-tok-text-secondary);
  --ui-horizontal-steps-prev-bg: var(--ui-tok-step-item-prev-bg);
  --ui-horizontal-steps-prev-icon: var(--ui-tok-step-item-prev-icon);
  --ui-horizontal-steps-prev-text: var(--ui-tok-text-primary);

  /* Skill (Figma: Skill) */
  --ui-skill-gap: 0.75rem; /* 12 */
  --ui-skill-pad: 0.75rem 0.75rem 1.5rem; /* 12 12 24 */
  --ui-skill-radius-hover: 1.25rem; /* 20 */
  --ui-skill-featured-pad: 1.5rem 1.5rem 2rem; /* 24 24 32 */
  --ui-skill-featured-radius: 2rem; /* 32 */
  --ui-skill-featured-shadow: 0 1px 3px rgb(0 0 0 / 6%);
  --ui-skill-head-gap: 1rem; /* 16 */
  --ui-skill-title-gap: 0.75rem; /* 12 */
  --ui-skill-copy-gap: 0.75rem; /* 12 */
  --ui-skill-copy-pad-left: 4rem; /* 64 */
  --ui-skill-copy-pad-right: 1rem; /* 16 */
  --ui-skill-ava: 3rem; /* 48 */
  --ui-skill-ava-radius: 1.5rem; /* 24 */
  --ui-skill-icon: 1.25rem; /* 20 */
  --ui-skill-ava-shadow: 0 0.25rem 0.625rem rgb(0 0 0 / 12%);
  --ui-skill-ava-bg: var(--ui-tok-skill-ava-bg-normal);
  --ui-skill-ava-fg: var(--ui-tok-skill-ava-icon-normal);
  --ui-skill-ava-bg-hover: var(--ui-tok-skill-ava-bg-hover);
  --ui-skill-ava-bg-featured: var(--ui-tok-skill-ava-bg-featured);
  --ui-skill-ava-fg-featured: var(--ui-tok-skill-ava-icon-featured);

  /* Spacing, radii, sizing, and motion. */
  --ui-space-1: 0.25rem;
  --ui-space-2: 0.5rem;
  --ui-space-3: 0.75rem;
  --ui-space-4: 1rem;
  --ui-space-5: 1.25rem;
  --ui-space-6: 1.5rem;
  --ui-radius-sm: 0.5rem;
  --ui-radius-md: 0.75rem;
  --ui-radius-lg: 1.25rem;
  --ui-radius-pill: 999px;
  --ui-control-xs: 1.75rem; /* 28 — button XS */
  --ui-control-sm: 2.25rem; /* 36 — button S / chip S */
  --ui-control-md: 3rem; /* 48 — layout rows; not Button/Chip/chat-submit M */
  --ui-control-lg: 3rem;
  --ui-control-icon-md: 4rem; /* leftover 64; chat submit is --ui-button-icon-md */
  --ui-control-icon-sm: 3rem; /* 48 — icon-only S width */
  --ui-control-icon-xs: 2.25rem; /* 36 — icon-only XS width */
  --ui-avatar-lg: 3rem; /* 48 */
  --ui-avatar-36: 2.25rem; /* 36 */
  --ui-avatar-md: 2rem; /* 32 */
  --ui-avatar-28: 1.75rem; /* 28 */
  --ui-avatar-sm: 1.5rem; /* 24 */
  --ui-avatar-xs: 1.25rem; /* 20 */
  --ui-avatar-empty-bg: var(--ui-tok-ava-user-bg);
  --ui-avatar-empty-fg: var(--ui-tok-ava-user-icon);
  --ui-chat-control-height: 3rem; /* 48 — Input chat Small */
  --ui-chat-control-height-big: 6.625rem; /* 106 */
  --ui-chat-input-radius: 1.5rem; /* 24 */
  --ui-chat-input-pad: 0.25rem 0.25rem 0.25rem 0.375rem; /* Small: outer 4 0 + inner 0 4 0 6 */
  --ui-chat-input-pad-big: 0.25rem 0; /* 4 0 */
  --ui-chat-input-bar-pad-left: 0.375rem; /* 6 */
  --ui-chat-input-bar-pad-right: 0.25rem; /* 4 */
  --ui-chat-input-gap: 0.5rem; /* 8 */
  --ui-chat-input-big-gap: 0.25rem; /* 4 */
  --ui-chat-input-field-sm: 2.5rem; /* 40 */
  --ui-chat-input-field-lg: 3.375rem; /* 54 */
  --ui-chat-input-field-max: 12.5rem; /* 200 — Big grows with content up to this, then scrolls */
  --ui-chat-input-field-pad: 0.625rem 0; /* 10 0 */
  --ui-chat-input-field-pad-big: 1rem 1.75rem 0; /* 16 28 0 */
  --ui-chat-input-bar: 2.5rem; /* 40 */
  --ui-chat-input-bg: var(--ui-tok-chat-input-bg);
  --ui-chat-input-placeholder: var(--ui-tok-chat-input-text-default);
  --ui-chat-input-placeholder-hover: var(--ui-tok-chat-input-text-hover);
  --ui-chat-input-fg: var(--ui-tok-chat-input-text-active);
  --ui-chat-input-leading-fg: var(--ui-tok-chat-input-button-nofill-icon);
  --ui-chat-input-leading-bg-hover: var(--ui-tok-chat-input-button-nofill-bg-hover);
  --ui-chat-input-leading-bg-pressed: var(--ui-tok-chat-input-button-nofill-bg-pressed);
  --ui-chat-input-submit-bg: var(--ui-tok-chat-input-button-fill-bg-default);
  --ui-chat-input-submit-fg: var(--ui-tok-chat-input-button-fill-icon);
  --ui-chat-input-voice-fg: var(--ui-tok-chat-input-button-fill-icon);
  --ui-chat-frame-fade: linear-gradient(
    180deg,
    var(--ui-tok-fade-bg-0) 0%,
    var(--ui-tok-fade-bg-100) 24%
  );
  --ui-duration-fast: 120ms;
  --ui-duration-normal: 180ms;
  --ui-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ui-focus-width: 2px;
  --ui-focus-offset: 3px;

  /* Chat answer widgets (Figma: Action widget / Table / Text) */
  --ui-chat-widget-radius: 1.25rem; /* 20 */
  --ui-chat-widget-pad: 2rem 2rem 2.25rem; /* 32 32 36 */
  --ui-chat-widget-pad-inline: 2rem; /* 32 */
  --ui-chat-widget-gap: 1.5rem; /* 24 */
  --ui-chat-widget-shadow: 0 1rem 2.5rem rgb(0 0 0 / 12%); /* Popup 1: 0 16 40 */
  --ui-chat-widget-shadow-compact: 0 0.25rem 0.625rem rgb(0 0 0 / 12%); /* Context Medium: 0 4 10 */
  --ui-chat-widget-bg: var(--ui-tok-background-app);
  --ui-chat-widget-border: var(--ui-tok-border-default);
  --ui-chat-widget-title: var(--ui-tok-text-primary);
  --ui-chat-widget-meta: var(--ui-tok-text-secondary);
  --ui-chat-widget-panel: var(--ui-tok-background-subtle);
  --ui-chat-widget-tile-border: var(--ui-tok-border-subtle);
  --ui-chat-widget-tile-hover: var(--ui-tok-background-hover);
  --ui-chat-table-radius: 0.75rem; /* 12 */
  --ui-chat-table-row: 2.5rem; /* 40 */
  --ui-chat-table-pad: 0 1rem; /* 0 16 */
  --ui-chat-table-pad-wrap: 0.75rem 1rem; /* 12 16 */
  --ui-chat-table-bg: var(--ui-tok-background-subtle);
  --ui-chat-table-cell: var(--ui-tok-background-app);
  --ui-chat-table-border: var(--ui-tok-border-default);
  --ui-style-report-radius: 2.5rem; /* 40 */
  --ui-style-report-pad-top: 4.5rem; /* 72 */
  --ui-style-report-pad-inline: 3.5rem; /* 56 */
  --ui-style-report-pad-bottom: 7.5rem; /* 120 */
  --ui-style-report-section-gap: 3.5rem; /* 56 */
  --ui-style-report-block-gap: 1.5rem; /* 24 */
  --ui-style-report-tile-gap: 1rem; /* 16 */
  --ui-style-report-tile-caption-gap: 0.75rem; /* 12 */
  --ui-style-report-tile-radius: 1rem; /* 16 */
  --ui-style-report-tile-pad: 1.5rem; /* 24 */
  --ui-style-report-logo-columns: 5;
  --ui-style-report-color-columns: 8;
  --ui-style-report-visual-columns: 4;
  --ui-style-report-title-pad-end: 2.5rem; /* 40 */
  --ui-style-report-caption-gap: 0.125rem; /* 2 */
  --ui-style-report-caption-pad: 0.25rem; /* 4 */
  --ui-style-report-meta-gap: 0.75rem; /* 12 */
  --ui-style-report-fill: var(--ui-tok-background-app);
  --ui-style-report-tile-fill: var(--ui-tok-background-subtle);
  --ui-style-report-logo-preview-light: var(--ui-tok-style-report-logo-preview-light);
  --ui-style-report-logo-preview-dark: var(--ui-tok-style-report-logo-preview-dark);
  --ui-style-report-stroke: var(--ui-tok-border-default);
  --ui-style-report-title: var(--ui-tok-text-primary);
  --ui-style-report-meta: var(--ui-tok-text-secondary);
  --ui-style-report-shadow: var(--ui-chat-widget-shadow);
  --ui-chat-answer-gap: 1rem; /* 16 */
  --ui-chat-answer-list-gap: 0.5rem; /* 8 */
  --ui-chat-answer-marker: 1.5rem; /* 24 */
  /* Typography and layout roles shared by all screens. Figma: Head/Subhead/Body/Par. */
  --ui-layout-max: 90rem;
  --ui-content-max: 72rem;
  --ui-reading-max: 48rem;
  --ui-type-display: 4.5rem; /* Head/H1 72 */
  --ui-type-page: 3rem; /* Head/H2 48 */
  --ui-type-large: 1.75rem; /* XL 28 — Body XL / Sh XL */
  --ui-type-l: 1.375rem; /* L 22 — Body L / Sh L / Par L */
  --ui-type-medium: 1rem; /* M 16 */
  --ui-type-small: 0.875rem; /* S 14 */
  --ui-type-xsmall: 0.75rem; /* XS 12 */
  --ui-type-xxsmall: 0.625rem; /* XXS 10 — Body XXS / Tag XS */
  /* Legacy aliases used by page CSS during migration. */
  --ui-type-title: var(--ui-type-large);
  --ui-type-caption: var(--ui-type-xsmall);

  /* Compatibility aliases for legacy screens during the CSS migration. */
  --ui-accent: var(--ui-color-inverse-surface);
  --ui-accent-strong: var(--ui-color-inverse-hover);
  --ui-background: var(--ui-color-canvas);
  --ui-surface: var(--ui-color-surface);
  --ui-surface-raised: var(--ui-color-surface);
  --ui-surface-solid: var(--ui-color-surface);
  --ui-border: var(--ui-color-border);
  --ui-border-strong: var(--ui-color-border-strong);
  --ui-text: var(--ui-color-text);
  --ui-text-secondary: var(--ui-color-text-muted);
  --ui-danger: var(--ui-color-danger-text);
  --ui-warning: var(--ui-color-warning-text);
  --ui-focus: var(--ui-color-focus-shadow);
  --ui-radius-control: var(--ui-radius-pill);
  --ui-radius-surface: var(--ui-radius-lg);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ui-duration-fast: 0ms;
    --ui-duration-normal: 0ms;
  }
}