From 8f6be542fadcd2f6810790f60675a930b1c5fea0 Mon Sep 17 00:00:00 2001
From: Isaque dos Santos <isaque.santos@azion.com>
Date: Mon, 3 Aug 2026 20:33:22 -0300
Subject: [PATCH 1/6] fix(webkit): [ENG-47001] catch the v4 paren spelling in
 the six token-check guardrails

typography-raw-length, leading-raw, tracking-raw, font-family-raw,
animate-arbitrary and motion-hardcoded keyed on a literal '[', so the
canonical v4 paren syntax (duration-(--x), animate-(--x), text-(length:--x),
font-(family-name:--x), leading-(--x), tracking-(--x)) walked straight through
the typography / motion / animation gates. Each now matches both spellings.
Regression tests pin both forms and assert the widened guards stay silent on a
plain canonical token (bg-(--primary)).
---
 .../webkit/src/eslint-plugin/token-checks.js  | 24 ++++++---
 .../test/eslint-plugin/token-checks.test.mjs  | 50 +++++++++++++++++++
 2 files changed, 67 insertions(+), 7 deletions(-)

diff --git a/packages/webkit/src/eslint-plugin/token-checks.js b/packages/webkit/src/eslint-plugin/token-checks.js
index 936de89a4..7570e375b 100644
--- a/packages/webkit/src/eslint-plugin/token-checks.js
+++ b/packages/webkit/src/eslint-plugin/token-checks.js
@@ -30,7 +30,11 @@ export const TOKEN_CHECKS = [
   },
   {
     id: 'typography-raw-length',
-    regex: /text-\[length:var\(--text-/g,
+    // Both v4 spellings of the arbitrary typography token: the bracket form
+    // `text-[length:var(--text-…)]` and the canonical paren form
+    // `text-(length:--text-…)`. Keying on `[` alone let the paren spelling walk
+    // straight through the gate (ENG-47001).
+    regex: /text-(?:\[length:var\(|\(length:)--text-/g,
     message:
       'Raw typography token. Use generated class from DESIGN.md (text-heading-md, text-body-sm, text-button-lg, ...).'
   },
@@ -39,7 +43,8 @@ export const TOKEN_CHECKS = [
     // Any numeric step, not just 3-12: in Tailwind v4 `leading-<n>` resolves to
     // calc(var(--spacing) * n), so `leading-1` is 0.25rem — not the line-height
     // of 1 it reads as. `none` stays out of the alternation (allowed on icons).
-    regex: /\bleading-(?:\d+|tight|snug|relaxed|loose|\[)/g,
+    // `[` and `(` both open an arbitrary value (`leading-[…]` / `leading-(--…)`).
+    regex: /\bleading-(?:\d+|tight|snug|relaxed|loose|[[(])/g,
     message:
       'Raw leading-* class. Line-height is part of the generated typography class (DESIGN.md); do not override.'
   },
@@ -47,14 +52,17 @@ export const TOKEN_CHECKS = [
     id: 'tracking-raw',
     // `tightest` is not a step on the tracking scale, so Tailwind emits nothing
     // for it and the class silently does nothing. It belongs here so the dead
-    // override is reported rather than read as working code.
-    regex: /\btracking-(?:tightest|tighter|tight|wide|wider|widest|\[)/g,
+    // override is reported rather than read as working code. `[`/`(` both open an
+    // arbitrary value (`tracking-[…]` / `tracking-(--…)`).
+    regex: /\btracking-(?:tightest|tighter|tight|wide|wider|widest|[[(])/g,
     message:
       'Raw tracking-* class. Letter-spacing is part of the generated typography class (DESIGN.md); do not override.'
   },
   {
     id: 'font-family-raw',
-    regex: /\b(?:font-(?:sans|serif|mono|sora|proto-mono)\b|font-\[family-name:)/g,
+    // Both spellings of the arbitrary family: `font-[family-name:…]` and
+    // `font-(family-name:--…)`.
+    regex: /\b(?:font-(?:sans|serif|mono|sora|proto-mono)\b|font-[[(]family-name:)/g,
     message:
       'Raw font-family. Font family is part of the generated typography class (DESIGN.md); do not override.'
   },
@@ -126,13 +134,15 @@ export const TOKEN_CHECKS = [
   },
   {
     id: 'animate-arbitrary',
-    regex: /\banimate-\[/g,
+    // `animate-[…]` and the paren shorthand `animate-(--…)` are both arbitrary.
+    regex: /\banimate-[[(]/g,
     message:
       'Arbitrary animate-[…] value. Use a catalogued animate-* utility, or add one via /add-animation (semantic/animations.js).'
   },
   {
     id: 'motion-hardcoded',
-    regex: /\b(?:duration|delay|ease)-\[/g,
+    // `[` and `(` both open an arbitrary value (`duration-[…]` / `duration-(--…)`).
+    regex: /\b(?:duration|delay|ease)-[[(]/g,
     message:
       'Hardcoded duration/ease/delay. Use the duration/curve/ease tokens from primitives/animations (DESIGN.md § Animations).'
   }
diff --git a/packages/webkit/test/eslint-plugin/token-checks.test.mjs b/packages/webkit/test/eslint-plugin/token-checks.test.mjs
index 59220b017..25ffc00db 100644
--- a/packages/webkit/test/eslint-plugin/token-checks.test.mjs
+++ b/packages/webkit/test/eslint-plugin/token-checks.test.mjs
@@ -76,6 +76,56 @@ test('the one-level nesting limit is pinned', () => {
   assert.ok(!found.includes('zero-unit-in-calc'), 'zero-unit-in-calc cannot see this deep')
 })
 
+// ENG-47001: the six `[`-keyed guardrails must catch the canonical v4 paren spelling
+// (`prop-(…)`) too — accepting the IntelliSense suggestion must not walk through the
+// typography / motion / animation gates. Each case is checked in both spellings.
+test('the arbitrary-value guardrails catch the paren spelling as well as the bracket spelling', () => {
+  const cases = [
+    ['typography-raw-length', 'text-[length:var(--text-body-md)]', 'text-(length:--text-body-md)'],
+    ['leading-raw', 'leading-[1.5]', 'leading-(--leading-body)'],
+    ['tracking-raw', 'tracking-[0.5px]', 'tracking-(--tracking-tight)'],
+    ['font-family-raw', 'font-[family-name:var(--font-sora)]', 'font-(family-name:--font-sora)'],
+    ['animate-arbitrary', 'animate-[spin_1s]', 'animate-(--animation-spin)'],
+    ['motion-hardcoded', 'duration-[200ms]', 'duration-(--duration-fast)']
+  ]
+  for (const [id, bracket, paren] of cases) {
+    assert.ok(ids(bracket).includes(id), `expected ${id} for bracket form: ${bracket}`)
+    assert.ok(ids(paren).includes(id), `expected ${id} for paren form: ${paren}`)
+  }
+})
+
+test('the paren spellings named in ENG-47001 acceptance are all caught', () => {
+  for (const [content, id] of [
+    ['duration-(--duration-fast)', 'motion-hardcoded'],
+    ['animate-(--x)', 'animate-arbitrary'],
+    ['leading-(--y)', 'leading-raw'],
+    ['tracking-(--z)', 'tracking-raw'],
+    ['text-(length:--text-body-md)', 'typography-raw-length'],
+    ['font-(family-name:--font-sora)', 'font-family-raw']
+  ]) {
+    assert.ok(ids(content).includes(id), `expected ${id} for: ${content}`)
+  }
+})
+
+test('the widened guardrails do not fire on the canonical whole-value paren token', () => {
+  // `bg-(--primary)` and friends (family A) are the sanctioned canonical form — the
+  // motion/typography guards key on their own prefixes, so a plain color/spacing token
+  // in paren form must stay silent.
+  for (const content of ['bg-(--primary)', 'max-w-(--container-2xl)', 'ring-offset-(--bg-canvas)']) {
+    const found = ids(content)
+    for (const id of [
+      'typography-raw-length',
+      'leading-raw',
+      'tracking-raw',
+      'font-family-raw',
+      'animate-arbitrary',
+      'motion-hardcoded'
+    ]) {
+      assert.ok(!found.includes(id), `expected ${id} silent for canonical token: ${content}`)
+    }
+  }
+})
+
 test('tokenChecksApply scopes enforcement to component sources', () => {
   assert.ok(tokenChecksApply('packages/webkit/src/components/actions/button/button.vue'))
   assert.ok(tokenChecksApply('packages/webkit/src/components/data/table/injection-key.ts'))

From 5903b311392ab09bc5f8aa4c1ee7fe1300848f7a Mon Sep 17 00:00:00 2001
From: Isaque dos Santos <isaque.santos@azion.com>
Date: Mon, 3 Aug 2026 20:33:37 -0300
Subject: [PATCH 2/6] refactor: [ENG-47001] adopt the canonical Tailwind v4
 paren token syntax repo-wide

Decision A: standardize on Tailwind v4's paren shorthand for design-token values
(bg-(--primary), text-(length:--text-body-md), z-1), so IntelliSense stops
flagging every styled line with suggestCanonicalClasses. The two spellings
compile to byte-identical CSS.

A codemod (scripts/codemods/canonicalize-tw-v4.mjs) rewrites the three safe
families across packages/webkit/src, apps/storybook, .specs, packages/webkit/docs,
.claude/**, cli-templates and packages/theme:
  A  prop-[var(--x)]      -> prop-(--x)        (2470)
  B  prop-[type:var(--x)] -> prop-(type:--x)   (29)
  E  z-[<int>]            -> z-<int>           (51)

It provably leaves two families bracketed, because the paren form emits no CSS
for them (silent style loss, no build or lint error):
  C  custom-property declarations  [--x:var(--y)]
  D  expression values / var-with-fallback  w-[calc(var(--a)*2)], bg-[var(--x,var(--y))]

canonicalize-tw-v4.test.mjs pins the A/B/E conversions and the C/D skips.
The decision is recorded in .claude/rules/styling.md and mirrored into the shipped
cli-templates styling rule; DESIGN.md and the scaffolder examples teach the paren
form. apps/icons-gallery (Tailwind v3) is untouched.
---
 .claude/AGENTS.md                             |   4 +-
 .claude/docs/COMPONENT_REQUIREMENTS.md        |  26 ++--
 .claude/docs/DESIGN.md                        |  70 ++++-----
 .claude/hooks/README.md                       |   2 +-
 .claude/rules/accessibility.md                |   2 +-
 .claude/rules/dependencies.md                 |   2 +-
 .claude/rules/root-element.md                 |   2 +-
 .claude/rules/styling.md                      |  65 ++++++---
 .claude/skills/component-scaffold/SKILL.md    |  18 +--
 .specs/_examples/tooltip.md                   |   4 +-
 .specs/_template.md                           |   2 +-
 .specs/accordion.md                           |   4 +-
 .specs/avatar.md                              |   2 +-
 .specs/box-grid-selection.md                  |   2 +-
 .specs/breadcrumb-item.md                     |   2 +-
 .specs/button-highlight.md                    |   2 +-
 .specs/button.md                              |   2 +-
 .specs/calendar.md                            |   2 +-
 .specs/card-box.md                            |   2 +-
 .specs/card-pricing.md                        |   2 +-
 .specs/checkbox.md                            |   2 +-
 .specs/chip.md                                |   2 +-
 .specs/code-block.md                          |   2 +-
 .specs/command-menu.md                        |  12 +-
 .specs/copy-button.md                         |   2 +-
 .specs/currency.md                            |   2 +-
 .specs/dialog.md                              |   2 +-
 .specs/drawer.md                              |   2 +-
 .specs/dropdown.md                            |  10 +-
 .specs/empty-state.md                         |   4 +-
 .specs/flow.md                                |   8 +-
 .specs/icon-button.md                         |   2 +-
 .specs/input-group.md                         |  20 +--
 .specs/input-number.md                        |   2 +-
 .specs/input-password.md                      |   2 +-
 .specs/input-text.md                          |   2 +-
 .specs/item.md                                |   2 +-
 .specs/link.md                                |   2 +-
 .specs/menu-item.md                           |   2 +-
 .specs/message.md                             |   2 +-
 .specs/mini-button.md                         |   2 +-
 .specs/multi-select.md                        |   2 +-
 .specs/navigation-menu.md                     |   2 +-
 .specs/paginator.md                           |   2 +-
 .specs/panel.md                               |   2 +-
 .specs/pick-list.md                           |   2 +-
 .specs/popover.md                             |   6 +-
 .specs/radio-button.md                        |   2 +-
 .specs/scroll-area.md                         |   2 +-
 .specs/select.md                              |   2 +-
 .specs/sidebar.md                             |   2 +-
 .specs/sign-up-card.md                        |   2 +-
 .specs/spinner.md                             |   2 +-
 .specs/split-button.md                        |   2 +-
 .specs/status-indicator.md                    |   2 +-
 .specs/switch.md                              |  10 +-
 .specs/tab-view.md                            |   4 +-
 .specs/table.md                               |   2 +-
 .specs/tag.md                                 |   2 +-
 .specs/theme-switcher.md                      |   4 +-
 .specs/toast.md                               |   2 +-
 .specs/tooltip.md                             |   6 +-
 .../components/ColorPaletteSection.vue        |  16 +-
 .../src/foundations/components/IconGrid.vue   |   8 +-
 .../components/SemanticSwatchGroup.vue        |  26 ++--
 .../foundations/components/SpacingPreview.vue |   2 +-
 .../components/TypographyPreview.vue          |  22 +--
 .../components/layout/PageContainer.vue       |   2 +-
 .../code/log-view/LogView.stories.js          |   6 +-
 .../content/avatar/Avatar.stories.js          |  18 +--
 .../content/card-box/CardBox.stories.js       |  20 +--
 .../card-pricing/CardPricing.stories.js       |  10 +-
 .../components/content/item/Item.stories.js   |  32 ++--
 .../components/data/flow/Flow.stories.js      |  12 +-
 .../data/paginator/Paginator.stories.js       |   6 +-
 .../data/pick-list/PickList.stories.js        |   2 +-
 .../components/data/table/Table.stories.js    |   4 +-
 .../empty-state/EmptyState.stories.js         |   4 +-
 .../feedback/skeleton/Skeleton.stories.js     |  18 +--
 .../StatusIndicator.stories.js                |   2 +-
 .../inputs/checkbox/Checkbox.stories.js       |   2 +-
 .../field-switch/FieldSwitch.stories.js       |   2 +-
 .../inputs/input-group/InputGroup.stories.js  |   2 +-
 .../input-number/InputNumber.stories.js       |   4 +-
 .../radio-button/RadioButton.stories.js       |   2 +-
 .../inputs/switch/Switch.stories.js           |   2 +-
 .../inputs/textarea/Textarea.stories.js       |   2 +-
 .../layout/scroll-area/ScrollArea.stories.js  |  12 +-
 .../layout/sidebar/Sidebar.stories.js         |   8 +-
 .../navigation/dropdown/Dropdown.stories.js   |  24 +--
 .../navigation-menu/NavigationMenu.stories.js |  20 +--
 .../navigation/tab-view/TabView.stories.js    |  40 ++---
 .../overlay/drawer/Drawer.stories.js          |  10 +-
 .../overlay/popover/Popover.stories.js        |  54 +++----
 .../overlay/tooltip/Tooltip.stories.js        |  14 +-
 .../src/stories/foundations/Colors.stories.js |   8 +-
 .../src/stories/foundations/GetStarted.mdx    |   2 +-
 .../src/stories/foundations/Motion.stories.js |  66 ++++-----
 .../templates/ChangePlanDrawer.stories.js     |  20 +--
 .../templates/DeleteDomainDialog.stories.js   |  12 +-
 .../templates/PlatformShell.stories.js        |  28 ++--
 .../stories/utils/spinner/Spinner.stories.js  |   4 +-
 packages/theme/src/scripts/build-tokens.mjs   |   2 +-
 .../src/tokens/semantic/z-indices.data.js     |   2 +-
 .../claude/rules/webkit-accessibility.md      |   6 +-
 .../claude/rules/webkit-component-states.md   |   2 +-
 .../claude/rules/webkit-root-element.md       |   2 +-
 .../claude/rules/webkit-slots.md              |   2 +-
 .../claude/rules/webkit-style-override.md     |   4 +-
 .../claude/rules/webkit-styling.md            |  33 +++--
 .../claude/rules/webkit-testid.md             |   2 +-
 .../claude/rules/webkit-tokens.md             |   2 +-
 .../claude/skills/webkit-baseline-ui/SKILL.md |  46 +++---
 .../claude/skills/webkit-data-viz/SKILL.md    |  10 +-
 .../claude/skills/webkit-form/SKILL.md        |  68 ++++-----
 .../claude/skills/webkit-navigation/SKILL.md  |  16 +-
 .../claude/skills/webkit-tables/SKILL.md      |  22 +--
 .../skills/webkit-theming-dark-mode/SKILL.md  |  32 ++--
 .../claude/skills/webkit-ui-craft/SKILL.md    |   2 +-
 .../claude/skills/webkit-ui-states/SKILL.md   |   4 +-
 .../claude/skills/webkit-usage/SKILL.md       |   2 +-
 packages/webkit/docs/DOC_LINTS.md             |   2 +-
 packages/webkit/docs/GUIDELINES.md            |  10 +-
 packages/webkit/docs/STYLEGUIDE.md            |  18 +--
 packages/webkit/src/cli/plan.js               |   2 +-
 .../button-highlight/button-highlight.vue     |  26 ++--
 .../src/components/actions/button/button.vue  |  30 ++--
 .../actions/icon-button/icon-button.vue       |  24 +--
 .../icon-button/presets/icon-transition.js    |   2 +-
 .../actions/mini-button/mini-button.vue       |  16 +-
 .../segmented-button/segmented-button.vue     |  22 +--
 .../actions/split-button/split-button.vue     |   4 +-
 .../webkit/src/components/avatar/avatar.vue   |   6 +-
 .../code/log-view/log-view-content.vue        |  36 ++---
 .../code/log-view/log-view-footer.vue         |   2 +-
 .../code/log-view/log-view-header.vue         |  10 +-
 .../src/components/code/log-view/log-view.vue |   2 +-
 .../accordion-content/accordion-content.vue   |   2 +-
 .../accordion-item/accordion-item.vue         |   2 +-
 .../accordion-trigger/accordion-trigger.vue   |   4 +-
 .../src/components/content/badge/badge.vue    |   2 +-
 .../components/content/card-box/card-box.vue  |  14 +-
 .../content/card-pricing/card-pricing.vue     |  30 ++--
 .../components/content/currency/currency.vue  |  16 +-
 .../components/content/item/item-actions.vue  |   2 +-
 .../components/content/item/item-content.vue  |   2 +-
 .../content/item/item-description.vue         |   2 +-
 .../components/content/item/item-footer.vue   |   2 +-
 .../components/content/item/item-group.vue    |   2 +-
 .../components/content/item/item-header.vue   |   2 +-
 .../src/components/content/item/item-list.vue |   2 +-
 .../components/content/item/item-media.vue    |   2 +-
 .../content/item/item-separator.vue           |   2 +-
 .../components/content/item/item-title.vue    |   2 +-
 .../webkit/src/components/content/kbd/kbd.vue |   2 +-
 .../components/data/code-block/code-block.vue |  44 +++---
 .../data/code-block/presets/transitions.ts    |   4 +-
 .../data/code-block/utils/highlight-code.ts   |  14 +-
 .../data/flow/flow-node/flow-node.vue         |   2 +-
 .../data/flow/flow-parallel/flow-parallel.vue |   2 +-
 .../webkit/src/components/data/flow/flow.vue  |   8 +-
 .../pagination-button/pagination-button.vue   |   4 +-
 .../paginator-info/paginator-info.vue         |   2 +-
 .../paginator-page-size.vue                   |   6 +-
 .../components/data/paginator/paginator.vue   |   6 +-
 .../pick-list-controls/pick-list-controls.vue |  10 +-
 .../pick-list-source/pick-list-source.vue     |  12 +-
 .../pick-list-target/pick-list-target.vue     |  12 +-
 .../components/data/pick-list/pick-list.vue   |   2 +-
 .../table-applied-filters.vue                 |   2 +-
 .../table/table-caption/table-caption.vue     |   2 +-
 .../data/table/table-cell/table-cell.vue      |   2 +-
 .../table-column-selector.vue                 |   8 +-
 .../data/table/table-filter/table-filter.vue  |  12 +-
 .../data/table/table-footer/table-footer.vue  |   2 +-
 .../table/table-head-cell/table-head-cell.vue |   4 +-
 .../data/table/table-header/table-header.vue  |   2 +-
 .../data/table/table-row/table-row.vue        |   2 +-
 .../table/table-toolbar/table-toolbar.vue     |   2 +-
 .../src/components/data/table/table.vue       |  16 +-
 .../feedback/empty-state/empty-state.vue      |  18 +--
 .../components/feedback/message/message.vue   |   6 +-
 .../feedback/progress-bar/progress-bar.vue    |   4 +-
 .../components/feedback/skeleton/skeleton.vue |   2 +-
 .../status-indicator/status-indicator.vue     |   8 +-
 .../toast-description/toast-description.vue   |   2 +-
 .../feedback/toast/toast-item/toast-item.vue  |  10 +-
 .../toast/toast-title/toast-title.vue         |   2 +-
 .../box-grid-selection/box-grid-selection.vue |  18 +--
 .../calendar-clear/calendar-clear.vue         |   2 +-
 .../calendar-fields/calendar-fields.vue       |  14 +-
 .../calendar/calendar-grid/calendar-grid.vue  |  18 +--
 .../calendar-period/calendar-period.vue       |  28 ++--
 .../calendar-preset/calendar-preset.vue       |   2 +-
 .../calendar-timezone/calendar-timezone.vue   |   8 +-
 .../components/inputs/calendar/calendar.vue   |  52 +++----
 .../components/inputs/checkbox/checkbox.vue   |   6 +-
 .../src/components/inputs/chip/chip.vue       |   6 +-
 .../field-checkbox-block.vue                  |  14 +-
 .../inputs/field-checkbox/field-checkbox.vue  |   8 +-
 .../field-input-group/field-input-group.vue   |   4 +-
 .../inputs/field-password/field-password.vue  |   2 +-
 .../field-phone-number/field-phone-number.vue |   4 +-
 .../field-radio-block/field-radio-block.vue   |  12 +-
 .../inputs/field-radio/field-radio.vue        |   8 +-
 .../inputs/field-select/field-select.vue      |   2 +-
 .../field-switch-block/field-switch-block.vue |  14 +-
 .../inputs/field-switch/field-switch.vue      |  10 +-
 .../field-text-switch/field-text-switch.vue   |   4 +-
 .../inputs/field-text/field-text.vue          |   2 +-
 .../inputs/field-textarea/field-textarea.vue  |   4 +-
 .../inputs/helper-text/helper-text.vue        |   2 +-
 .../input-group-addon/input-group-addon.vue   |   2 +-
 .../inputs/input-group/input-group.vue        |   2 +-
 .../inputs/input-number/input-number.vue      |  28 ++--
 .../inputs/input-password/input-password.vue  |  22 +--
 .../inputs/input-text/input-text.vue          |  22 +--
 .../src/components/inputs/label/label.vue     |   6 +-
 .../multi-select-content.vue                  |   8 +-
 .../multi-select-group/multi-select-group.vue |   2 +-
 .../multi-select-option.vue                   |   4 +-
 .../multi-select-trigger.vue                  |   6 +-
 .../inputs/presets/interactive-states.js      |  36 ++---
 .../inputs/radio-button/radio-button.vue      |  10 +-
 .../select/select-content/select-content.vue  |   8 +-
 .../select/select-group/select-group.vue      |   2 +-
 .../select/select-option/select-option.vue    |   6 +-
 .../select/select-trigger/select-trigger.vue  |   6 +-
 .../components/inputs/select/select.test.ts   |   2 +-
 .../src/components/inputs/switch/switch.vue   |   8 +-
 .../components/inputs/textarea/textarea.vue   |  18 +--
 .../inputs/theme-switcher/theme-switcher.vue  |   6 +-
 .../src/components/layout/divider/divider.vue |   2 +-
 .../global-header/global-header-container.vue |   2 +-
 .../global-header/global-header-left.vue      |   2 +-
 .../global-header/global-header-right.vue     |   2 +-
 .../layout/global-header/global-header.vue    |   2 +-
 .../layout/scroll-area/scroll-area.vue        |   2 +-
 .../layout/sidebar/sidebar-footer.vue         |   2 +-
 .../src/components/layout/sidebar/sidebar.vue |   8 +-
 .../breadcrumb-item/breadcrumb-item.vue       |  16 +-
 .../navigation/breadcrumb/breadcrumb-list.vue |   2 +-
 .../breadcrumb/breadcrumb-separator.vue       |   2 +-
 .../navigation/breadcrumb/breadcrumb.vue      |   8 +-
 .../dropdown-group/dropdown-group.vue         |   8 +-
 .../dropdown-option/dropdown-option.vue       |   4 +-
 .../dropdown-trigger/dropdown-trigger.vue     |   2 +-
 .../navigation/dropdown/dropdown.test.ts      |   2 +-
 .../navigation/dropdown/dropdown.vue          |   6 +-
 .../src/components/navigation/link/link.vue   |  14 +-
 .../navigation/menu-item/menu-item.vue        |  22 +--
 .../navigation-menu/presets/styles.js         |  56 +++----
 .../tab-view/presets/transitions.ts           |   4 +-
 .../navigation/tab-view/tab-view-item.vue     |  22 +--
 .../navigation/tab-view/tab-view-list.vue     |   8 +-
 .../command-menu-empty/command-menu-empty.vue |   2 +-
 .../command-menu-group/command-menu-group.vue |   2 +-
 .../command-menu-input/command-menu-input.vue |   2 +-
 .../command-menu-item/command-menu-item.vue   |   2 +-
 .../command-menu-list/command-menu-list.vue   |   2 +-
 .../command-menu-separator.vue                |   2 +-
 .../overlay/dialog/dialog-content.vue         |   2 +-
 .../overlay/dialog/dialog-description.vue     |   2 +-
 .../overlay/dialog/dialog-overlay.vue         |   2 +-
 .../overlay/dialog/dialog-title.vue           |   2 +-
 .../overlay/drawer/drawer-content.vue         |   6 +-
 .../overlay/drawer/drawer-description.vue     |   2 +-
 .../overlay/drawer/drawer-overlay.vue         |   2 +-
 .../overlay/drawer/drawer-title.vue           |   2 +-
 .../overlay/panel/panel-content.vue           |   2 +-
 .../components/overlay/panel/panel-footer.vue |   6 +-
 .../components/overlay/panel/panel-header.vue |   6 +-
 .../src/components/overlay/panel/panel.vue    |   6 +-
 .../components/overlay/panel/presets/sizes.js |  12 +-
 .../popover-content/popover-content.vue       |   2 +-
 .../popover-description.vue                   |   2 +-
 .../popover/popover-footer/popover-footer.vue |   2 +-
 .../popover/popover-header/popover-header.vue |   4 +-
 .../popover/popover-title/popover-title.vue   |   2 +-
 .../overlay/presets/mobile-position.js        |   6 +-
 .../components/overlay/tooltip/tooltip.vue    |   4 +-
 packages/webkit/src/components/tag/tag.vue    |   2 +-
 .../deploy-success/deploy-success.vue         |  34 ++---
 .../onboarding-form/onboarding-form.vue       |  28 ++--
 .../templates/plan-success/plan-success.vue   |  30 ++--
 .../platform-shell/platform-shell.vue         |   6 +-
 .../templates/sign-up-card/sign-up-card.vue   |  38 ++---
 packages/webkit/src/styles.css                |   2 +-
 packages/webkit/src/utils/cn.js               |   6 +-
 .../test/codemods/canonicalize-tw-v4.test.mjs |  82 +++++++++++
 scripts/codemods/canonicalize-tw-v4.mjs       | 137 ++++++++++++++++++
 291 files changed, 1533 insertions(+), 1274 deletions(-)
 create mode 100644 packages/webkit/test/codemods/canonicalize-tw-v4.test.mjs
 create mode 100644 scripts/codemods/canonicalize-tw-v4.mjs

diff --git a/.claude/AGENTS.md b/.claude/AGENTS.md
index 77b965531..cb179848d 100644
--- a/.claude/AGENTS.md
+++ b/.claude/AGENTS.md
@@ -190,7 +190,7 @@ The trigger logic now lives in the orchestrator command [`.claude/commands/compo
   - If a needed module does **not** exist yet, do not import it speculatively. Either (1) install it first (`pnpm --filter <ws> add ...`), (2) create the file and its `package.json` entry first, or (3) annotate the gap explicitly in the report as `TODO: create <path>` or `TODO: install <pkg>` and skip the dependent code. The `validate-references.mjs` hook physically blocks imports that resolve to nothing — see § 12.
 - New components use `<script setup lang="ts">` with `defineProps<...>()`, `defineEmits<...>()`, `defineSlots<...>()` and `defineModel<...>()` where applicable. JSDoc on every public prop. Zero `any`. Zero `// @ts-ignore`.
 - Variants are always exposed as `kind`. Sizes as `size` (`'small' | 'medium' | 'large'`). Boolean state props have no `is`/`has` prefix.
-- Typography is **always** applied via the generated class from DESIGN.md (`text-heading-md`, `text-body-sm`, etc.). Never `text-[length:var(--text-*)]`, `leading-*`, `tracking-*`, or `font-family` directly.
+- Typography is **always** applied via the generated class from DESIGN.md (`text-heading-md`, `text-body-sm`, etc.). Never `text-(length:--text-*)`, `leading-*`, `tracking-*`, or `font-family` directly.
 - Colors, spacing, max-width, and shape come from semantic `var(--*)` tokens. No hex, no Tailwind palette names (`bg-gray-*`), no external/legacy color utilities (`text-color`, `surface-*`).
 - `defineOptions({ name, inheritAttrs: false })` + `useAttrs()` + `rootClasses` that merges `attrs.class`. Never declare `class` in `defineProps`.
 - `data-testid` hierarchical, BEM-style: root with fallback `'<category>-<name>'`, children with `${testId}__<part>` (two underscores).
@@ -231,7 +231,7 @@ Five hooks in [`.claude/hooks/`](.claude/hooks/) act as physical guard rails on
 
 ### 12.1) Pre-existing (unchanged)
 
-- **[`.claude/hooks/validate-tokens.mjs`](.claude/hooks/validate-tokens.mjs)** (PreToolUse `Write|Edit|MultiEdit`) — blocks new content introducing hex/rgb/hsl colors, Tailwind palette names, raw typography (`text-xs|sm|...`, `text-[length:var(--text-*)]`, `leading-*`, `tracking-*`, `font-family`), PrimeVue color utilities, `class` in `defineProps`, `any`, or `@ts-ignore`. Pre-existing violations are not retroactively flagged.
+- **[`.claude/hooks/validate-tokens.mjs`](.claude/hooks/validate-tokens.mjs)** (PreToolUse `Write|Edit|MultiEdit`) — blocks new content introducing hex/rgb/hsl colors, Tailwind palette names, raw typography (`text-xs|sm|...`, `text-(length:--text-*)`, `leading-*`, `tracking-*`, `font-family`), PrimeVue color utilities, `class` in `defineProps`, `any`, or `@ts-ignore`. Pre-existing violations are not retroactively flagged.
 - **[`.claude/hooks/validate-references.mjs`](.claude/hooks/validate-references.mjs)** (PreToolUse `Write|Edit|MultiEdit`) — blocks imports that don't resolve: `@aziontech/webkit/<subpath>` without a matching `package.json#exports`, relative paths to no file, uninstalled npm packages, missing workspaces.
 - **[`.claude/hooks/enforce-component-create.mjs`](.claude/hooks/enforce-component-create.mjs)** (PreToolUse `Write`) — blocks the first `Write` of a new `.vue` under `packages/webkit/src/components/webkit/<category>/<name>/` when the session transcript shows no reference to the `component-create` skill/command. Forces the agent to invoke the orchestrator first.
 
diff --git a/.claude/docs/COMPONENT_REQUIREMENTS.md b/.claude/docs/COMPONENT_REQUIREMENTS.md
index e8987b30f..ea4df7e75 100644
--- a/.claude/docs/COMPONENT_REQUIREMENTS.md
+++ b/.claude/docs/COMPONENT_REQUIREMENTS.md
@@ -800,7 +800,7 @@ This section describes the canonical pattern enforced for components living unde
 
 All visual rules (typography classes, spacing, max-width, shape, semantic colors) come from [DESIGN.md](./DESIGN.md). In any conflict, **DESIGN.md wins**.
 
-- **Typography** is always applied via the generated class from `texts.data.js` — `text-heading-md`, `text-body-sm`, `text-label-md`, `text-button-lg`, `text-overline-md`, `text-big-number-lg`, etc. Never use `text-[length:var(--text-*)]` raw, never `leading-*`/`tracking-*`/`font-family` directly. Full catalog in [DESIGN.md "Available text styles"](./DESIGN.md).
+- **Typography** is always applied via the generated class from `texts.data.js` — `text-heading-md`, `text-body-sm`, `text-label-md`, `text-button-lg`, `text-overline-md`, `text-big-number-lg`, etc. Never use `text-(length:--text-*)` raw, never `leading-*`/`tracking-*`/`font-family` directly. Full catalog in [DESIGN.md "Available text styles"](./DESIGN.md).
 - **Semantic colors:** `var(--primary)`, `var(--primary-contrast)`, `var(--secondary)`, `var(--secondary-contrast)`, `var(--bg-hover)`, `var(--bg-active)`, `var(--bg-disabled)`, `var(--bg-surface)`, `var(--bg-canvas)`, `var(--bg-mask)`, `var(--border-default)`, `var(--border-muted)`, `var(--border-strong)`, `var(--text-default)`, `var(--text-muted)`, `var(--text-disabled)`, `var(--ring-color)`, and feedback variants (`--success`/`--warning`/`--danger`/`--info` + `-contrast`/`-border`).
 - **Shape:** `var(--shape-button)`, `var(--shape-elements)`, `var(--shape-card)`, `var(--shape-flat)`. For pseudo-element inheritance use `rounded-[inherit]`.
 - **Spacing:** `var(--spacing-1)..(--spacing-N)` applied via `px-[...]` / `py-[...]` / `gap-[...]` / `m-[...]`. For section-level responsive spacing use the semantic utilities (`gap-spacing-elements-md`, `p-spacing-elements-lg`).
@@ -1027,7 +1027,7 @@ before:opacity-0 before:transition-opacity before:content-['']
 hover:before:opacity-100 active:before:opacity-100
 ```
 
-And `kindClasses` sets `before:bg-[var(--bg-hover)]` / `active:before:bg-[var(--bg-active)]`. See [button.vue:65-69](../src/components/webkit/actions/button/button.vue#L65-L69).
+And `kindClasses` sets `before:bg-(--bg-hover)` / `active:before:bg-(--bg-active)`. See [button.vue:65-69](../src/components/webkit/actions/button/button.vue#L65-L69).
 
 ### 6. Polimorfismo `<a>` / `<button>`
 
@@ -1050,7 +1050,7 @@ Sweep these locations before implementing. Create a new utility only when nothin
 ### 9. Acessibilidade (WCAG 2.1 AA)
 
 - **Semantics first:** prefer native `<button>` / `<a>` / `<input>` / `<dialog>` over `role=...`.
-- **Visible focus mandatory:** `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`. Never strip outline without a substitute.
+- **Visible focus mandatory:** `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`. Never strip outline without a substitute.
 - **Keyboard navigation:** Tab/Shift+Tab; Enter/Space on buttons; Esc closes overlays; arrows on menus/lists/radio groups; focus trap in modals; focus returns to the trigger when closing.
 - **ARIA minimum:** `aria-label`, `aria-labelledby`/`aria-describedby`, `aria-busy`, `aria-disabled`, `aria-hidden="true"` on decorative icons, `aria-current`/`aria-selected`/`aria-expanded` as appropriate, `aria-live="polite"` for dynamic feedback.
 - **Contrast:** >=4.5:1 (text) / >=3:1 (large/icons). Verify disabled, which often fails.
@@ -1283,7 +1283,7 @@ The webkit layer applies styles **inline on the template root element's `class`
 - When the consumer must override an internal token choice, wrap the static class string with `cn` from `@aziontech/webkit/utils/cn`:
 
   ```vue
-  :class="cn('rounded-[var(--shape-card)] bg-[var(--bg-surface)]', attrs.class)"
+  :class="cn('rounded-(--shape-card) bg-(--bg-surface)', attrs.class)"
   ```
 
 #### Canonical example
@@ -1327,16 +1327,16 @@ const testId = computed(() => (attrs['data-testid'] as string) ?? 'actions-butto
     class="
       relative inline-flex items-center justify-center whitespace-nowrap
       transition-colors duration-150 ease-out motion-reduce:transition-none
-      rounded-[var(--shape-button)]
-      focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]
-      data-[kind=primary]:bg-[var(--primary)] data-[kind=primary]:text-[var(--primary-contrast)]
-      data-[kind=secondary]:bg-[var(--secondary)] data-[kind=secondary]:text-[var(--secondary-contrast)]
-      data-[kind=outlined]:border data-[kind=outlined]:border-[var(--border-default)] data-[kind=outlined]:bg-transparent
+      rounded-(--shape-button)
+      focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)
+      data-[kind=primary]:bg-(--primary) data-[kind=primary]:text-(--primary-contrast)
+      data-[kind=secondary]:bg-(--secondary) data-[kind=secondary]:text-(--secondary-contrast)
+      data-[kind=outlined]:border data-[kind=outlined]:border-(--border-default) data-[kind=outlined]:bg-transparent
       data-[kind=text]:bg-transparent
-      data-[size=small]:h-7 data-[size=small]:px-[var(--spacing-2)] data-[size=small]:text-button-md
-      data-[size=medium]:h-8 data-[size=medium]:px-[var(--spacing-3)] data-[size=medium]:text-button-md
-      data-[size=large]:h-10 data-[size=large]:px-[var(--spacing-4)] data-[size=large]:text-button-lg
-      data-[disabled]:bg-[var(--bg-disabled)] data-[disabled]:text-[var(--text-disabled)] data-[disabled]:cursor-not-allowed
+      data-[size=small]:h-7 data-[size=small]:px-(--spacing-2) data-[size=small]:text-button-md
+      data-[size=medium]:h-8 data-[size=medium]:px-(--spacing-3) data-[size=medium]:text-button-md
+      data-[size=large]:h-10 data-[size=large]:px-(--spacing-4) data-[size=large]:text-button-lg
+      data-[disabled]:bg-(--bg-disabled) data-[disabled]:text-(--text-disabled) data-[disabled]:cursor-not-allowed
     "
   >
     <slot />
diff --git a/.claude/docs/DESIGN.md b/.claude/docs/DESIGN.md
index f1297f9bc..68ed66dc7 100644
--- a/.claude/docs/DESIGN.md
+++ b/.claude/docs/DESIGN.md
@@ -19,7 +19,7 @@ How to style components under `packages/webkit/src/components/webkit/` using tok
 @import '@aziontech/theme/globals.css';
 ```
 
-That file already contains `@import "tailwindcss"` plus `@theme { --color-*, --breakpoint-*, --animate-* }`; there is **no** `tailwind-preset`, `tailwind.config.js`, or `content: []` array anywhere in the pipeline. Utility detection is done by the `@source "../../../webkit/src"` directive inside the emitted globals — that is what makes arbitrary utilities like `bg-[var(--primary)]` or `p-[var(--spacing-md)]` work in webkit components without any extra config on the consumer side.
+That file already contains `@import "tailwindcss"` plus `@theme { --color-*, --breakpoint-*, --animate-* }`; there is **no** `tailwind-preset`, `tailwind.config.js`, or `content: []` array anywhere in the pipeline. Utility detection is done by the `@source "../../../webkit/src"` directive inside the emitted globals — that is what makes arbitrary utilities like `bg-(--primary)` or `p-(--spacing-md)` work in webkit components without any extra config on the consumer side.
 
 Integration points:
 
@@ -50,9 +50,9 @@ Add the class name as a Tailwind utility on the element or size variant:
 
 ```js
 const sizeClasses = {
-  large: 'min-w-20 h-10 px-[var(--spacing-md)] text-button-lg',
-  medium: 'min-w-16 h-8 px-[var(--spacing-sm)] text-button-md',
-  small: 'min-w-14 h-7 px-[var(--spacing-xs)] text-button-md'
+  large: 'min-w-20 h-10 px-(--spacing-md) text-button-lg',
+  medium: 'min-w-16 h-8 px-(--spacing-sm) text-button-md',
+  small: 'min-w-14 h-7 px-(--spacing-xs) text-button-md'
 }
 ```
 
@@ -81,11 +81,11 @@ Inside `packages/webkit/src/components/webkit/`, **never** set:
 - `line-height` / `leading-*` (except `leading-none` on icons aligned to `text-[length:inherit]`)
 - `letter-spacing` / `tracking-*`
 - Raw `text-xs`, `text-sm`, `text-base`, `text-lg`, etc.
-- `text-[length:var(--text-*-font-size)]` when a `text-*` class already exists for that role
+- `text-(length:--text-*-font-size)` when a `text-*` class already exists for that role
 
 Font family, line height, letter spacing, and responsive font size live in `texts.data.js` and the generated `.text-*` classes. Pick the semantic class that matches the design; if none fits, add a new entry in `texts.data.js` and rebuild the theme — do not hardcode typography in the component.
 
-**Allowed:** weight or color when not part of the text bundle and required for state (prefer semantic text colors like `text-[var(--text-muted)]`).
+**Allowed:** weight or color when not part of the text bundle and required for state (prefer semantic text colors like `text-(--text-muted)`).
 
 **Icons next to text:** inherit size from the parent text style:
 
@@ -124,8 +124,8 @@ Do not use the primitive scale in `packages/theme/src/tokens/primitives/shape/sp
 Always reference the variable for **padding**, **gap**, and **margin** (including axis-specific utilities). Do not use generated `.p-spacing-*` / `.gap-spacing-*` classes in `components/webkit/`:
 
 ```html
-p-[var(--spacing-md)] px-[var(--spacing-sm)] py-[var(--spacing-xs)] gap-[var(--spacing-sm)]
-gap-x-[var(--spacing-md)] m-[var(--spacing-lg)] mt-[var(--spacing-xs)] mb-[var(--spacing-md)]
+p-(--spacing-md) px-(--spacing-sm) py-(--spacing-xs) gap-(--spacing-sm)
+gap-x-(--spacing-md) m-(--spacing-lg) mt-(--spacing-xs) mb-(--spacing-md)
 ```
 
 Breakpoint growth is baked into the CSS variables; you do not duplicate responsive spacing in components.
@@ -153,8 +153,8 @@ If none of these fit the design, add a new entry in `spacings.data.js` and rebui
 Example from Button — horizontal padding and inner gap:
 
 ```js
-'px-[var(--spacing-md)]' // size large
-'gap-[var(--spacing-xs)]' // label + icon
+'px-(--spacing-md)' // size large
+'gap-(--spacing-xs)' // label + icon
 ```
 
 ---
@@ -166,7 +166,7 @@ Example from Button — horizontal padding and inner gap:
 Use primitive container width tokens with Tailwind max-width utilities:
 
 ```html
-max-w-[var(--container-md)] max-w-[var(--container-5xl)]
+max-w-(--container-md) max-w-(--container-5xl)
 ```
 
 ### Fixed content widths
@@ -174,7 +174,7 @@ max-w-[var(--container-md)] max-w-[var(--container-5xl)]
 Use **primitive container** sizes for cards, modals, columns, etc.:
 
 ```html
-max-w-[var(--container-md)] max-w-[var(--container-5xl)]
+max-w-(--container-md) max-w-(--container-5xl)
 ```
 
 Defined in `packages/theme/src/tokens/primitives/shape/container.js` (`3xs` … `7xl`). Always reference via `var(--container-*)`, not raw `px`/`rem`.
@@ -186,13 +186,13 @@ Defined in `packages/theme/src/tokens/primitives/shape/container.js` (`3xs` …
 Use **semantic shape** tokens only:
 
 ```html
-rounded-[var(--shape-button)]
+rounded-(--shape-button)
 <!-- buttons -->
-rounded-[var(--shape-elements)]
+rounded-(--shape-elements)
 <!-- inputs, chips, small surfaces -->
-rounded-[var(--shape-card)]
+rounded-(--shape-card)
 <!-- cards -->
-rounded-[var(--shape-flat)]
+rounded-(--shape-flat)
 <!-- no radius -->
 ```
 
@@ -211,10 +211,10 @@ Use **primitive shadow** variables from `packages/theme/src/tokens/primitives/ef
 ### Pattern
 
 ```html
-shadow-[var(--shadow-sm)] shadow-[var(--shadow-md)] shadow-[var(--shadow-lg)]
+shadow-(--shadow-sm) shadow-(--shadow-md) shadow-(--shadow-lg)
 ```
 
-Apply on the element that should cast elevation (panel shell, floating surface, popover). Pair with semantic surface tokens (`bg-[var(--bg-surface)]`, borders) — shadows do not replace surface color.
+Apply on the element that should cast elevation (panel shell, floating surface, popover). Pair with semantic surface tokens (`bg-(--bg-surface)`, borders) — shadows do not replace surface color.
 
 ### Scale
 
@@ -228,7 +228,7 @@ Apply on the element that should cast elevation (panel shell, floating surface,
 | `--shadow-xl`  | High emphasis overlays (use sparingly)                 |
 | `--shadow-2xl` | Maximum elevation (marketing hero cards, not forms)    |
 
-Reference: `packages/webkit/src/components/webkit/overlay/panel/panel.vue` (`shadow-[var(--shadow-md)]`).
+Reference: `packages/webkit/src/components/webkit/overlay/panel/panel.vue` (`shadow-(--shadow-md)`).
 
 ### Related effect primitives
 
@@ -249,8 +249,8 @@ Use **theme semantic** CSS variables so light/dark and brand stay consistent.
 ### Pattern
 
 ```html
-bg-[var(--primary)] text-[var(--primary-contrast)] border-[var(--border-default)]
-bg-[var(--bg-surface)] text-[var(--text-default)] text-[var(--text-muted)] ring-[var(--ring-color)]
+bg-(--primary) text-(--primary-contrast) border-(--border-default)
+bg-(--bg-surface) text-(--text-default) text-(--text-muted) ring-(--ring-color)
 ```
 
 ### Common semantic groups
@@ -287,10 +287,10 @@ as `background-color` and put the sweep in a `background-image` gradient whose o
 the animated and static states share the same base tone:
 
 ```html
-class="bg-[var(--bg-placeholder)]
+class="bg-(--bg-placeholder)
        data-[animated]:motion-safe:bg-[linear-gradient(90deg,transparent_0%,transparent_35%,var(--bg-placeholder-highlight)_50%,transparent_65%,transparent_100%)]
        data-[animated]:motion-safe:bg-[length:200%_100%]
-       data-[animated]:motion-safe:animate-[var(--animate-shimmer)]
+       data-[animated]:motion-safe:animate-(--animate-shimmer)
        motion-reduce:animate-none"
 ```
 
@@ -304,19 +304,19 @@ Reference: `skeleton.vue`. The sweep pairs with `--animate-shimmer` (see § Moti
 - Use external/legacy color utilities (`text-color`, `surface-*`) in new webkit components — map to `var(--*)` tokens instead.
 - Build a loading placeholder from an opaque surface token (`--bg-surface-overlay`, `--bg-surface-raised`) — it only reads on the one surface it was picked against. Use `--bg-placeholder` / `--bg-placeholder-highlight`.
 
-Reference: `button.vue` kind variants (`bg-[var(--secondary)]`, `text-[var(--secondary-contrast)]`, etc.).
+Reference: `button.vue` kind variants (`bg-(--secondary)`, `text-(--secondary-contrast)`, etc.).
 
 ---
 
 ## Checklist for new or updated components
 
 1. **Typography** — Pick a class from `texts.data.js`; no local font/line-height/letter-spacing.
-2. **Spacing** — `padding` / `margin` / `gap` via `p-[var(--spacing-*)]`, `gap-[var(--spacing-*)]`, `m-[var(--spacing-*)]`, etc. from `spacings.data.js`.
+2. **Spacing** — `padding` / `margin` / `gap` via `p-(--spacing-*)`, `gap-(--spacing-*)`, `m-(--spacing-*)`, etc. from `spacings.data.js`.
 3. **Sizing** — `size-*` for equal width+height; `h-*` for height (theme scale from `size.js` / `height.js`).
-4. **Container** — Use `max-w-[var(--container-<size>)]` for page sections and fixed content (cards, modals, columns), with sizes `3xs` … `7xl` from `primitives/shape/container.js`.
-5. **Radius** — `rounded-[var(--shape-*)]`.
-6. **Shadow** — `shadow-[var(--shadow-*)]` from `primitives/effects/shadow.js` when the surface elevates.
-7. **Color** — `bg-[var(--…)]`, `text-[var(--…)]`, `border-[var(--…)]`.
+4. **Container** — Use `max-w-(--container-<size>)` for page sections and fixed content (cards, modals, columns), with sizes `3xs` … `7xl` from `primitives/shape/container.js`.
+5. **Radius** — `rounded-(--shape-*)`.
+6. **Shadow** — `shadow-(--shadow-*)` from `primitives/effects/shadow.js` when the surface elevates.
+7. **Color** — `bg-(--…)`, `text-(--…)`, `border-(--…)`.
 8. **Interactive states** — `::before` / `::after` ghost layers for `--bg-hover` / `--bg-active`; `focus-visible:ring-2 focus-visible:ring-offset-1`; `duration-fast-02` + `ease-productive-*` (see § Interactive states).
 9. **Motion** — `duration` / `curve` from `animate.js` only; `data-state` overlays use a `presets/transitions.ts` module (see § Motion — reference: Drawer).
 10. **Storybook** — Add or update stories under `apps/storybook/src/stories/webkit/` for new states and sizes.
@@ -449,11 +449,11 @@ Use semantic surface tokens from `theme/background.js` — never swap the root `
 
 ```html
 relative before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit]
-before:bg-[var(--bg-hover)] before:opacity-0 before:content-[''] after:pointer-events-none
-after:absolute after:inset-0 after:rounded-[inherit] after:bg-[var(--bg-active)] after:opacity-0
+before:bg-(--bg-hover) before:opacity-0 before:content-[''] after:pointer-events-none
+after:absolute after:inset-0 after:rounded-[inherit] after:bg-(--bg-active) after:opacity-0
 after:content-[''] hover:before:opacity-100 active:after:opacity-100 focus-visible:outline-none
-focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-1
-focus-visible:ring-offset-[var(--bg-canvas)] disabled:before:hidden disabled:after:hidden
+focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-1
+focus-visible:ring-offset-(--bg-canvas) disabled:before:hidden disabled:after:hidden
 ```
 
 Set `before:transition-opacity` / `after:transition-opacity` on the pseudo-elements (not a blanket `transition-colors` on the root).
@@ -506,9 +506,9 @@ For `animate-popup-scale-in/out`, set `--popup-origin` per instance to match the
 The `validate-tokens.mjs` PreToolUse hook enforces these at write time. If a hook blocks: **fix the value, do not work around it.**
 
 - **Colors:** HEX (`#fff`), RGB (`rgb(0,102,255)`), HSL, Tailwind palette names (`bg-blue-500`, `text-gray-700`), external/legacy color utilities (`text-color`, `surface-50`).
-- **Typography:** `font-family`, `font-proto-mono`, `font-sora`, `leading-*` (except `leading-none` on icons), `tracking-*`, `text-xs|sm|base|lg`, `text-[length:var(--text-*-font-size)]` when a generated class exists.
+- **Typography:** `font-family`, `font-proto-mono`, `font-sora`, `leading-*` (except `leading-none` on icons), `tracking-*`, `text-xs|sm|base|lg`, `text-(length:--text-*-font-size)` when a generated class exists.
 - **Spacing:** primitive `--spacing-1` … `--spacing-96`, legacy `spacing-elements-*`, arbitrary `p-4` / `gap-3` when a `spacings.data.js` token applies.
-- **Container:** Tailwind scale (`max-w-md`, `max-w-5xl`), arbitrary lengths (`max-w-[768px]`), legacy helpers (`.px-container`, `.py-container`, `.max-container-width`), and semantic layout tokens (`--container-px`, `--container-py`, `--container-max-width`). Use `max-w-[var(--container-<size>)]` only (`3xs` … `7xl` from `primitives/shape/container.js`).
+- **Container:** Tailwind scale (`max-w-md`, `max-w-5xl`), arbitrary lengths (`max-w-[768px]`), legacy helpers (`.px-container`, `.py-container`, `.max-container-width`), and semantic layout tokens (`--container-px`, `--container-py`, `--container-max-width`). Use `max-w-(--container-<size>)` only (`3xs` … `7xl` from `primitives/shape/container.js`).
 - **Shape:** `rounded-md`, `rounded-lg`, any numeric radius.
 - **Shadow:** legacy `--card-shadow` (SCSS alias), bare Tailwind `shadow-md` without `var(--shadow-*)`, HEX/RGB in elevation.
 - **Animations:** see § Animations § Forbidden in animations.
diff --git a/.claude/hooks/README.md b/.claude/hooks/README.md
index d7685a270..c9b755bc1 100644
--- a/.claude/hooks/README.md
+++ b/.claude/hooks/README.md
@@ -15,7 +15,7 @@ Blocks `Write`/`Edit`/`MultiEdit` on `.vue` / `.css` / `.scss` / `.ts` files und
 - Hex/RGB/HSL colors
 - Tailwind palette names (`bg-gray-500`, `text-violet-600`, ...)
 - Raw Tailwind text sizes (`text-xs|sm|base|lg|...`)
-- Raw typography tokens (`text-[length:var(--text-*)]`, `leading-*`, `tracking-*`, `font-family`, `font-sora`, ...)
+- Raw typography tokens (`text-(length:--text-*)`, `leading-*`, `tracking-*`, `font-family`, `font-sora`, ...)
 - External/legacy color utilities (`text-color`, `surface-*`)
 - `class` declared in `defineProps`
 - `any` type
diff --git a/.claude/rules/accessibility.md b/.claude/rules/accessibility.md
index ebab212a1..f6a8c026d 100644
--- a/.claude/rules/accessibility.md
+++ b/.claude/rules/accessibility.md
@@ -20,7 +20,7 @@ A component in this package is accessible **by construction**, not by the consum
 ### Focus
 
 - **`useId()`** for every id used in a `for`/`aria-labelledby`/`aria-describedby` association — stable across SSR, never a hand-rolled counter (see [`composables.md`](./composables.md)).
-- **`focus-visible`** ring using the ring token (`focus-visible:ring-[var(--ring-color)]`), never a raw color (see [`styling.md`](./styling.md)).
+- **`focus-visible`** ring using the ring token (`focus-visible:ring-(--ring-color)`), never a raw color (see [`styling.md`](./styling.md)).
 - **Overlays trap focus and restore it**: focus moves into the overlay on open, is trapped while open, and returns to the trigger on close — via the focus-trap composable (VueUse primitive, per [`dependencies.md`](./dependencies.md)), not a hand-written trap.
 
 ### Motion
diff --git a/.claude/rules/dependencies.md b/.claude/rules/dependencies.md
index 5dc27c636..71fc9c230 100644
--- a/.claude/rules/dependencies.md
+++ b/.claude/rules/dependencies.md
@@ -31,7 +31,7 @@ For overlays (tooltip, popover, dropdown, menu):
 ```html
 <!-- Anchored via CSS — works in all evergreen browsers -->
 <button class="anchor"><!-- trigger --></button>
-<div class="absolute left-0 top-full mt-[var(--spacing-xxs)]"><!-- popover --></div>
+<div class="absolute left-0 top-full mt-(--spacing-xxs)"><!-- popover --></div>
 
 <!-- Or via the native Popover API + CSS anchor positioning -->
 <button popovertarget="menu">Open</button>
diff --git a/.claude/rules/root-element.md b/.claude/rules/root-element.md
index f8f9bab5c..ee98c3769 100644
--- a/.claude/rules/root-element.md
+++ b/.claude/rules/root-element.md
@@ -41,7 +41,7 @@ The consumer's attributes (including `class`) reach the **real** root element, e
   <div
     v-bind="$attrs"
     :data-testid="testId"
-    :class="cn('rounded-[var(--shape-card)] bg-[var(--bg-surface)]', attrs.class as string)"
+    :class="cn('rounded-(--shape-card) bg-(--bg-surface)', attrs.class as string)"
   >
     <slot />
   </div>
diff --git a/.claude/rules/styling.md b/.claude/rules/styling.md
index 68af4ab03..1f4946fd3 100644
--- a/.claude/rules/styling.md
+++ b/.claude/rules/styling.md
@@ -15,15 +15,15 @@ Styles live on the **template root element's `class` attribute**, not in JavaScr
 <script setup lang="ts">
   const sharedClasses = ['flex', 'items-center', 'transition-colors' /* ... */]
   const kindClasses: Record<Kind, string> = {
-    primary: 'bg-[var(--primary)] text-[var(--primary-contrast)]',
-    secondary: 'bg-[var(--secondary)] text-[var(--secondary-contrast)]',
-    outlined: 'border border-[var(--border-default)]',
+    primary: 'bg-(--primary) text-(--primary-contrast)',
+    secondary: 'bg-(--secondary) text-(--secondary-contrast)',
+    outlined: 'border border-(--border-default)',
     text: 'bg-transparent'
   }
   const sizeClasses: Record<Size, string> = {
-    small: 'h-7 px-[var(--spacing-xs)] text-button-md',
-    medium: 'h-8 px-[var(--spacing-sm)] text-button-md',
-    large: 'h-10 px-[var(--spacing-md)] text-button-lg'
+    small: 'h-7 px-(--spacing-xs) text-button-md',
+    medium: 'h-8 px-(--spacing-sm) text-button-md',
+    large: 'h-10 px-(--spacing-md) text-button-lg'
   }
   const rootClasses = computed(() => [
     sharedClasses,
@@ -96,19 +96,19 @@ Styles live on the **template root element's `class` attribute**, not in JavaScr
     class="
       relative inline-flex items-center justify-center whitespace-nowrap
       transition-colors duration-150 ease-out motion-reduce:transition-none
-      rounded-[var(--shape-button)]
-      focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]
+      rounded-(--shape-button)
+      focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)
 
-      data-[kind=primary]:bg-[var(--primary)] data-[kind=primary]:text-[var(--primary-contrast)]
-      data-[kind=secondary]:bg-[var(--secondary)] data-[kind=secondary]:text-[var(--secondary-contrast)]
-      data-[kind=outlined]:border data-[kind=outlined]:border-[var(--border-default)] data-[kind=outlined]:bg-transparent
+      data-[kind=primary]:bg-(--primary) data-[kind=primary]:text-(--primary-contrast)
+      data-[kind=secondary]:bg-(--secondary) data-[kind=secondary]:text-(--secondary-contrast)
+      data-[kind=outlined]:border data-[kind=outlined]:border-(--border-default) data-[kind=outlined]:bg-transparent
       data-[kind=text]:bg-transparent
 
-      data-[size=small]:h-7 data-[size=small]:px-[var(--spacing-xs)] data-[size=small]:text-button-md
-      data-[size=medium]:h-8 data-[size=medium]:px-[var(--spacing-sm)] data-[size=medium]:text-button-md
-      data-[size=large]:h-10 data-[size=large]:px-[var(--spacing-md)] data-[size=large]:text-button-lg
+      data-[size=small]:h-7 data-[size=small]:px-(--spacing-xs) data-[size=small]:text-button-md
+      data-[size=medium]:h-8 data-[size=medium]:px-(--spacing-sm) data-[size=medium]:text-button-md
+      data-[size=large]:h-10 data-[size=large]:px-(--spacing-md) data-[size=large]:text-button-lg
 
-      data-[disabled]:bg-[var(--bg-disabled)] data-[disabled]:text-[var(--text-disabled)] data-[disabled]:cursor-not-allowed
+      data-[disabled]:bg-(--bg-disabled) data-[disabled]:text-(--text-disabled) data-[disabled]:cursor-not-allowed
     "
   >
     <slot />
@@ -120,13 +120,13 @@ Key choices:
 
 - **One `class` attribute on the root.** All utilities live there.
 - **`data-*` attributes mirror props** — `data-kind`, `data-size`, `data-disabled`, `data-state`, `data-orientation`.
-- **Tailwind variants do the switching.** `data-[kind=primary]:bg-[var(--primary)]` is one utility, not a JS branch.
+- **Tailwind variants do the switching.** `data-[kind=primary]:bg-(--primary)` is one utility, not a JS branch.
 - **`v-bind="$attrs"`** flows consumer-passed `class` (and other attrs) onto the root; Vue merges class strings automatically. No `cn()` needed for the basic case.
 - **No `computed` returning class arrays.** Computed values are reserved for derived state (e.g. `isAnchor`, `testId`), not for styles.
 
 ### When consumer classes must take precedence
 
-Some components let the consumer override internal token choices (e.g. `<Card class="bg-[var(--bg-canvas)]" />`). Tailwind class merging via `cn` solves this:
+Some components let the consumer override internal token choices (e.g. `<Card class="bg-(--bg-canvas)" />`). Tailwind class merging via `cn` solves this:
 
 ```vue
 <script setup lang="ts">
@@ -139,7 +139,7 @@ Some components let the consumer override internal token choices (e.g. `<Card cl
     :data-testid="testId"
     :class="
       cn(
-        'rounded-[var(--shape-card)] bg-[var(--bg-surface)] p-[var(--spacing-md)]',
+        'rounded-(--shape-card) bg-(--bg-surface) p-(--spacing-md)',
         attrs.class as string
       )
     "
@@ -153,6 +153,33 @@ Some components let the consumer override internal token choices (e.g. `<Card cl
 
 The same rule applies to each sub-component. Each renders its own root with its own inline `class`. No shared `*Classes` import between siblings.
 
+## Token values: the canonical `prop-(--token)` syntax
+
+A design-token value on a utility is written with Tailwind v4's **paren shorthand** — `bg-(--primary)`, not `bg-[var(--primary)]`. This is the **single canonical form** (ENG-47001, decision A): it is what upstream v4 canonicalizes to, so Tailwind IntelliSense no longer flags every styled line with `suggestCanonicalClasses`, and it is what every rule, spec, story, scaffolder output and `cli-templates` copy now teaches. The two spellings compile to byte-identical CSS; we standardize on one so the codebase reads one way.
+
+```html
+<!-- ✅ canonical — paren shorthand -->
+<div class="bg-(--bg-surface) text-(--text-default) rounded-(--shape-card) focus-visible:ring-(--ring-color)">
+
+<!-- ❌ legacy bracket form — do not author -->
+<div class="bg-[var(--bg-surface)] text-[var(--text-default)] rounded-[var(--shape-card)]">
+```
+
+Three shapes:
+
+| Concern | Canonical | Notes |
+| --- | --- | --- |
+| **Whole-value var** | `prop-(--token)` | `bg-(--primary)`, `max-w-(--container-2xl)`, `focus-visible:ring-offset-(--bg-canvas)`. Variants compose (`data-[disabled]:bg-(--bg-disabled)`). |
+| **Typed value** | `prop-(type:--token)` | `text-(length:--text-body-md)`, `border-(color:--border-default)`, `font-(family-name:--font-sora)`. |
+| **Numeric arbitrary** | `z-1` | The bare-number utility, not `z-[1]`. |
+
+**Two cases stay bracketed — the paren form emits _no CSS_ for them, silently:**
+
+- **Custom-property declarations** — `[--table-row-bg:var(--bg-surface)]`, `data-[state=selected]:[--table-row-bg:var(--bg-selected)]`. There is no paren shorthand for _declaring_ a custom property; `(--x:--y)` compiles to nothing.
+- **Expression values** — anything whose arbitrary value is more than a lone `var(--x)`: `w-[calc(var(--a)*2)]`, gradients (`bg-[linear-gradient(...var(--x)...)]`), box-shadows, and a **var with a fallback** (`bg-[var(--x,var(--y))]`, `text-[length:var(--w,1px)]`). These must remain in brackets — converting them drops the style with **no build or lint error**.
+
+The guardrail token-checks (`typography-raw-length`, `leading-raw`, `tracking-raw`, `font-family-raw`, `animate-arbitrary`, `motion-hardcoded`) match **both** spellings, so accepting the IntelliSense suggestion cannot walk a raw value through the typography / motion / animation gates.
+
 ## A zero length carries no unit
 
 A zero is the one value that is identical in every unit, so the unit is pure noise — and it makes the same zero read three different ways across the codebase (`0px` here, `0rem` there, `0em` in a token). **Write `0`.**
@@ -209,7 +236,7 @@ The Vue HTML parser runs **before** JavaScript. **Do not** pass multiline templa
   :class="
     cn(
       `
-      data-[kind=primary]:bg-[var(--primary)]
+      data-[kind=primary]:bg-(--primary)
       `,
       attrs.class
     )
diff --git a/.claude/skills/component-scaffold/SKILL.md b/.claude/skills/component-scaffold/SKILL.md
index 381b5f05d..af84796d3 100644
--- a/.claude/skills/component-scaffold/SKILL.md
+++ b/.claude/skills/component-scaffold/SKILL.md
@@ -122,14 +122,14 @@ packages/webkit/src/components/actions/button/
        class="
          relative inline-flex items-center justify-center whitespace-nowrap
          transition-colors duration-150 ease-out motion-reduce:transition-none
-         rounded-[var(--shape-button)]
-         focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]
-         data-[kind=primary]:bg-[var(--primary)] data-[kind=primary]:text-[var(--primary-contrast)]
-         data-[kind=secondary]:bg-[var(--secondary)] data-[kind=secondary]:text-[var(--secondary-contrast)]
-         data-[size=small]:h-7 data-[size=small]:px-[var(--spacing-2)] data-[size=small]:text-button-md
-         data-[size=medium]:h-8 data-[size=medium]:px-[var(--spacing-3)] data-[size=medium]:text-button-md
-         data-[size=large]:h-10 data-[size=large]:px-[var(--spacing-4)] data-[size=large]:text-button-lg
-         data-[disabled]:bg-[var(--bg-disabled)] data-[disabled]:text-[var(--text-disabled)] data-[disabled]:cursor-not-allowed
+         rounded-(--shape-button)
+         focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)
+         data-[kind=primary]:bg-(--primary) data-[kind=primary]:text-(--primary-contrast)
+         data-[kind=secondary]:bg-(--secondary) data-[kind=secondary]:text-(--secondary-contrast)
+         data-[size=small]:h-7 data-[size=small]:px-(--spacing-2) data-[size=small]:text-button-md
+         data-[size=medium]:h-8 data-[size=medium]:px-(--spacing-3) data-[size=medium]:text-button-md
+         data-[size=large]:h-10 data-[size=large]:px-(--spacing-4) data-[size=large]:text-button-lg
+         data-[disabled]:bg-(--bg-disabled) data-[disabled]:text-(--text-disabled) data-[disabled]:cursor-not-allowed
        "
      >
        <slot />
@@ -144,7 +144,7 @@ packages/webkit/src/components/actions/button/
      <div
        :data-testid="testId"
        :class="
-         cn('rounded-[var(--shape-card)] bg-[var(--bg-surface)] p-[var(--spacing-4)]', attrs.class)
+         cn('rounded-(--shape-card) bg-(--bg-surface) p-(--spacing-4)', attrs.class)
        "
      />
    </template>
diff --git a/.specs/_examples/tooltip.md b/.specs/_examples/tooltip.md
index 80ffdf234..a411a0949 100644
--- a/.specs/_examples/tooltip.md
+++ b/.specs/_examples/tooltip.md
@@ -92,11 +92,11 @@ import IconButton from '@aziontech/webkit/icon-button'
 
 | Figma variable | Temporary primitive | Follow-up |
 |---|---|---|
-| `tooltip/arrow-fill` | inherits `bg-[var(--bg-canvas-inverted)]` | `TODO: tokenizar` (add `--tooltip-arrow` if it ever diverges from surface) |
+| `tooltip/arrow-fill` | inherits `bg-(--bg-canvas-inverted)` | `TODO: tokenizar` (add `--tooltip-arrow` if it ever diverges from surface) |
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]` on the trigger.
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)` on the trigger.
 - Keyboard map: `Tab` focuses the trigger → tooltip opens; `Escape` closes; tooltip never traps focus.
 - ARIA: `role="tooltip"` on the panel; the trigger references the panel via `aria-describedby`. `aria-hidden="true"` when `data-state="closed"`.
 - Contrast ≥4.5:1 — text against inverted canvas verified in both light and dark modes.
diff --git a/.specs/_template.md b/.specs/_template.md
index bd13d5908..b6dac04ea 100644
--- a/.specs/_template.md
+++ b/.specs/_template.md
@@ -247,7 +247,7 @@ export default Object.assign(Root, { Part: RootPart })
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `<Tab focuses; Enter/Space activates; Esc closes; arrows navigate; ...>`
 - ARIA: `<aria-label / aria-busy / aria-disabled / aria-hidden / aria-current / aria-expanded as applicable>`
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including the disabled state
diff --git a/.specs/accordion.md b/.specs/accordion.md
index f0b0519af..e88e665bf 100644
--- a/.specs/accordion.md
+++ b/.specs/accordion.md
@@ -164,12 +164,12 @@ Events below are emitted by the root `Accordion`.
 | Figma variable                                                                         | Temporary primitive                                                                              | Follow-up                                                                                                 |
 | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------- |
 | `Heading/xss` · `Heading/xs` (Sora Regular, line-height 1.4) used for the header title | `.text-body-sm` · `.text-body-md` (line-height 1.5, same 14px / 16px sizes, same Regular weight) | `TODO: decide whether to surface text-heading-xs/xxs in DESIGN.md, or keep the body family for the title` |
-| `Hover=True` variant (delta not resolvable via the Figma MCP bound-variable API)       | `hover:bg-[var(--bg-hover)]` on the trigger                                                      | `TODO: confirm the header hover treatment with design`                                                    |
+| `Hover=True` variant (delta not resolvable via the Figma MCP bound-variable API)       | `hover:bg-(--bg-hover)` on the trigger                                                      | `TODO: confirm the header hover treatment with design`                                                    |
 | `--border-width-default` (0.8px header / item divider)                                 | `border-b` (1px)                                                                                 | `TODO: tokenize the sub-pixel border width if it must match exactly`                                      |
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus (Figma has no focus variant; we own it): `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]` on each `Accordion.Trigger`.
+- Visible focus (Figma has no focus variant; we own it): `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)` on each `Accordion.Trigger`.
 - Keyboard map: `Tab` / `Shift+Tab` move between triggers and into open content; `Enter` / `Space` toggle the focused item; `Arrow Down` / `Arrow Up` move focus to the next / previous trigger; `Home` / `End` move focus to the first / last trigger.
 - ARIA: each trigger is a `<button>` with `aria-expanded` reflecting open state and `aria-controls` referencing its content; the trigger button is wrapped in a heading element (`<h{level}>`, default `h3`); the content panel has `role="region"` and `aria-labelledby` referencing its trigger. A `disabled` item sets `disabled` + `aria-disabled` on its trigger.
 - Contrast ≥4.5:1 for text (title `--text-default`, body `--text-muted` on the surface) / ≥3:1 for the chevron glyph, including the disabled state (`--text-disabled`).
diff --git a/.specs/avatar.md b/.specs/avatar.md
index aa75afdf8..ca4709f26 100644
--- a/.specs/avatar.md
+++ b/.specs/avatar.md
@@ -63,7 +63,7 @@ _none_
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses; `Enter`/`Space` activates; `Escape` closes overlays where applicable.
 - ARIA: root uses appropriate roles (`button`, `dialog`, `status`, etc.) per sub-component.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
diff --git a/.specs/box-grid-selection.md b/.specs/box-grid-selection.md
index a92d72b64..7d4c213bb 100644
--- a/.specs/box-grid-selection.md
+++ b/.specs/box-grid-selection.md
@@ -73,7 +73,7 @@ Horizontal grid of selectable cards for mutually exclusive choices (plans, roles
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]` on each option.
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)` on each option.
 - Keyboard map: `Tab` / arrow keys move focus between options; `Enter` / `Space` selects the focused option.
 - ARIA: root `role="radiogroup"`; each option `role="radio"` with `aria-checked` and `aria-label` from `item.ariaLabel` or `item.label`.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
diff --git a/.specs/breadcrumb-item.md b/.specs/breadcrumb-item.md
index 7242880f7..77e0bccb5 100644
--- a/.specs/breadcrumb-item.md
+++ b/.specs/breadcrumb-item.md
@@ -74,7 +74,7 @@ Single segment in a breadcrumb trail. Ancestor segments use muted label text and
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses link segments; `Enter` activates.
 - ARIA: current segment uses `aria-current="page"`; disabled segments use `aria-disabled="true"`.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
diff --git a/.specs/button-highlight.md b/.specs/button-highlight.md
index 902180f09..de744ca45 100644
--- a/.specs/button-highlight.md
+++ b/.specs/button-highlight.md
@@ -100,7 +100,7 @@ import ButtonHighlight from '@aziontech/webkit/button-highlight'
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses; `Enter` / `Space` activates.
 - ARIA: `<button>` role by default; renders `<a>` when `href` is set with `aria-disabled` / `aria-busy` mirroring `disabled` / `loading`.
 - Contrast: gradient passes ≥4.5:1 for the `--color-base-white` foreground due to the `--bg-backdrop` overlay; disabled state pairs `--bg-disabled` with `--text-disabled`.
diff --git a/.specs/button.md b/.specs/button.md
index d901b4f50..3e14c7af6 100644
--- a/.specs/button.md
+++ b/.specs/button.md
@@ -67,7 +67,7 @@ Interactive control for user actions. Migrated from the existing implementation
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses; `Enter`/`Space` activates; `Escape` closes overlays where applicable.
 - ARIA: root uses appropriate roles (`button`, `dialog`, `status`, etc.) per sub-component.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
diff --git a/.specs/calendar.md b/.specs/calendar.md
index 7e22f2426..791ccb5f2 100644
--- a/.specs/calendar.md
+++ b/.specs/calendar.md
@@ -179,7 +179,7 @@ import CalendarClear from '@aziontech/webkit/calendar-clear'
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]` on the trigger and `focus-visible:ring-offset-[var(--bg-surface-raised)]` inside the popover.
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)` on the trigger and `focus-visible:ring-offset-(--bg-surface-raised)` inside the popover.
 - Keyboard map: the trigger toggles the popover with `Enter`/`Space` and exposes `aria-haspopup`/`aria-expanded`; `Escape` and click-outside close it and return focus to the trigger; focus is trapped in the open popover. In the grid, `Tab` enters at the focused day, `Arrow` keys move focus (paging the visible window when crossing its first/last month), `Enter`/`Space` selects, `PageUp`/`PageDown` change month. Apply, Clear, presets, fields, and the timezone control are all reachable by `Tab`.
 - ARIA: each month grid uses `role="grid"` with `role="row"` and `role="gridcell"` descendants; selected cells set `aria-selected="true"`; the current date sets `aria-current="date"`; navigation buttons carry `aria-label`; the popover is labelled by the trigger; decorative icons are `aria-hidden="true"`.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including the disabled state.
diff --git a/.specs/card-box.md b/.specs/card-box.md
index 266cf6934..a37360e70 100644
--- a/.specs/card-box.md
+++ b/.specs/card-box.md
@@ -67,7 +67,7 @@ Displays content or metadata in the UI. Migrated from the existing implementatio
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses; `Enter`/`Space` activates; `Escape` closes overlays where applicable.
 - ARIA: root uses appropriate roles (`button`, `dialog`, `status`, etc.) per sub-component.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
diff --git a/.specs/card-pricing.md b/.specs/card-pricing.md
index 33942a0c4..c78520b3e 100644
--- a/.specs/card-pricing.md
+++ b/.specs/card-pricing.md
@@ -71,7 +71,7 @@ _none_
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses; `Enter`/`Space` activates; `Escape` closes overlays where applicable.
 - ARIA: root uses appropriate roles (`button`, `dialog`, `status`, etc.) per sub-component.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
diff --git a/.specs/checkbox.md b/.specs/checkbox.md
index 9fc7bf241..cc272f435 100644
--- a/.specs/checkbox.md
+++ b/.specs/checkbox.md
@@ -94,7 +94,7 @@ The checkbox is a leaf primitive — no slots. Label/description live in `FieldC
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses; `Space` toggles. (The native `<input type="checkbox">` carries the semantics.)
 - ARIA: native `<input type="checkbox">` is the source of truth. `aria-checked` is set to `'mixed'` when `indeterminate` is true (with `indeterminate` DOM property also set on the input). The wrapping `<span>` is decorative.
 - Contrast ≥4.5:1 (text) / ≥3:1 (icons + borders), including disabled state.
diff --git a/.specs/chip.md b/.specs/chip.md
index 726dfe6f2..2734ade35 100644
--- a/.specs/chip.md
+++ b/.specs/chip.md
@@ -117,7 +117,7 @@ import Chip from '@aziontech/webkit/chip'
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: both the clickable root (when `clickable`) and the remove button use `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`.
+- Visible focus: both the clickable root (when `clickable`) and the remove button use `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`.
 - Keyboard map: when `clickable`, the root is focusable (`tabindex="0"`) and `Enter` / `Space` emit `click` (`Space` is `preventDefault`ed to avoid scrolling). When `removable`, `Tab` reaches the remove button and `Enter` / `Space` activate it and emit `remove`. Keystrokes that originate on the remove button do not bubble to the root activation (the handler ignores events whose `target` is not the root itself).
 - ARIA: when not `clickable`, the root is a non-interactive `<span>` container; when `clickable`, it is `role="button"` with `tabindex="0"`. The remove control is a real `<button type="button">` with `aria-label="Remove"`; the `pi pi-times` glyph is `aria-hidden="true"`.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including the remove icon.
diff --git a/.specs/code-block.md b/.specs/code-block.md
index 146802f50..4406a18cf 100644
--- a/.specs/code-block.md
+++ b/.specs/code-block.md
@@ -170,7 +170,7 @@ Code content scrolls inside `@aziontech/webkit/layout/scroll-area` (`orientation
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses tabs and copy; `ArrowLeft`/`ArrowRight`/`Home`/`End` move between tabs; `Enter`/`Space` activates tab; copy uses `Enter`/`Space` on the CopyButton (native `<button>`); when focus is in the code scroll region, `ArrowUp`/`ArrowDown`/`PageUp`/`PageDown`/`Home`/`End` scroll vertically and `ArrowLeft`/`ArrowRight` scroll horizontally via ScrollArea.
 - ARIA: tab list uses `role="tablist"` when visible; tabs use `role="tab"` with `aria-selected`; panel uses `role="tabpanel"` with `aria-labelledby`; copy uses CopyButton `ariaLabel` (forwarded to its inner IconButton); diff `+`/`-` markers are `aria-hidden="true"` (change semantics conveyed by row `data-state` and visible background).
 - Contrast ≥4.5:1 for code text on surface, including syntax token colors and diff/highlight row backgrounds in light and dark.
diff --git a/.specs/command-menu.md b/.specs/command-menu.md
index 28618b974..5a1f4c6d3 100644
--- a/.specs/command-menu.md
+++ b/.specs/command-menu.md
@@ -172,11 +172,11 @@ The palette panel's open/close scale animation is owned by the wrapped `Dialog`
 | Region | Token (DESIGN.md) |
 |---|---|
 | panel surface / border / shape / shadow | inherited from `Dialog` (`var(--bg-surface)`, `var(--border-default)`, `var(--shape-card)`, `var(--shadow-sm)`) |
-| input header divider | `border-b border-[var(--border-default)]` |
+| input header divider | `border-b border-(--border-default)` |
 | input field chrome (border / surface / text / focus ring) | inherited from `InputText` (`var(--border-default)`, `var(--bg-surface)`, `var(--text-default)`, `var(--ring-color)`) |
 | input placeholder / search icon | `var(--text-muted)` |
-| group heading typography | `.text-overline-sm` + `text-[var(--text-muted)]` |
-| item label typography | `.text-label-sm` + `text-[var(--text-default)]` |
+| group heading typography | `.text-overline-sm` + `text-(--text-muted)` |
+| item label typography | `.text-label-sm` + `text-(--text-default)` |
 | item shape | `var(--shape-button)` |
 | item min-height | `min-h-8` (32px) |
 | item spacing.x | `var(--spacing-sm)` |
@@ -185,8 +185,8 @@ The palette panel's open/close scale animation is owned by the wrapped `Dialog`
 | item active surface | `var(--bg-selected)` |
 | item hover surface | `var(--bg-hover)` |
 | item disabled text | `var(--text-disabled)` |
-| separator | `border-t border-[var(--border-default)]` |
-| empty-state text | `.text-label-sm` + `text-[var(--text-muted)]` |
+| separator | `border-t border-(--border-default)` |
+| empty-state text | `.text-label-sm` + `text-(--text-muted)` |
 | focus ring | `var(--ring-color)` |
 
 ## Theme gaps
@@ -195,7 +195,7 @@ _none_
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]` on the input; items use the roving `data-active` highlight (the input keeps DOM focus).
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)` on the input; items use the roving `data-active` highlight (the input keeps DOM focus).
 - Keyboard map:
   - Global: the `shortcut` combo (⌘K / Ctrl+K) toggles the palette open from anywhere.
   - Inside the palette: `ArrowDown` / `ArrowUp` move the active item (skipping disabled, wrap-around); `Home` / `End` jump to first/last enabled item; `Enter` activates the active item; `Esc` closes (via `Dialog`); `Tab` is trapped within the panel (via `Dialog`).
diff --git a/.specs/copy-button.md b/.specs/copy-button.md
index 7d8599c80..04ff90d05 100644
--- a/.specs/copy-button.md
+++ b/.specs/copy-button.md
@@ -66,7 +66,7 @@ Icon-only control that copies a string to the clipboard and briefly confirms suc
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: inherited from `IconButton` (`focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`)
+- Visible focus: inherited from `IconButton` (`focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`)
 - Keyboard map: `Tab` focuses; `Enter`/`Space` activates copy.
 - ARIA: `aria-label` toggles between `ariaLabel` and `copiedLabel` when copied.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
diff --git a/.specs/currency.md b/.specs/currency.md
index 140dd0ee4..4e4e25c70 100644
--- a/.specs/currency.md
+++ b/.specs/currency.md
@@ -58,7 +58,7 @@ _none_
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses; `Enter`/`Space` activates; `Escape` closes overlays where applicable.
 - ARIA: root uses appropriate roles (`button`, `dialog`, `status`, etc.) per sub-component.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
diff --git a/.specs/dialog.md b/.specs/dialog.md
index d4a9e0c79..1e23ac0fd 100644
--- a/.specs/dialog.md
+++ b/.specs/dialog.md
@@ -102,7 +102,7 @@ Layered surface above the page (modal, drawer, menu). Migrated from the existing
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses; `Enter`/`Space` activates; `Escape` closes overlays where applicable.
 - ARIA: root uses appropriate roles (`button`, `dialog`, `status`, etc.) per sub-component.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
diff --git a/.specs/drawer.md b/.specs/drawer.md
index 3738cdb99..345a38cca 100644
--- a/.specs/drawer.md
+++ b/.specs/drawer.md
@@ -95,7 +95,7 @@ _none_
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses; `Enter`/`Space` activates; `Escape` closes overlays where applicable.
 - ARIA: root uses appropriate roles (`button`, `dialog`, `status`, etc.) per sub-component.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
diff --git a/.specs/dropdown.md b/.specs/dropdown.md
index a54892e72..f2513d089 100644
--- a/.specs/dropdown.md
+++ b/.specs/dropdown.md
@@ -126,8 +126,8 @@ import DropdownOption from '@aziontech/webkit/dropdown-option'
 | panel border | `var(--border-default)` |
 | panel shape | `var(--shape-card)` |
 | panel shadow | `var(--shadow-sm)` |
-| panel typography (group label) | `.text-overline-sm` + `text-[var(--text-muted)]` |
-| panel typography (option label) | `.text-label-sm` + `text-[var(--text-default)]` |
+| panel typography (group label) | `.text-overline-sm` + `text-(--text-muted)` |
+| panel typography (option label) | `.text-label-sm` + `text-(--text-default)` |
 | option shape | `var(--shape-button)` |
 | option spacing.x | `var(--spacing-sm)` |
 | option spacing.y | `var(--spacing-xxs)` |
@@ -135,8 +135,8 @@ import DropdownOption from '@aziontech/webkit/dropdown-option'
 | option hover surface | `var(--bg-hover)` |
 | option selected surface | `var(--bg-selected)` |
 | option disabled text | `var(--text-disabled)` |
-| option command text | `text-[var(--text-muted)]` |
-| group divider | `border-t border-[var(--border-default)]` |
+| option command text | `text-(--text-muted)` |
+| group divider | `border-t border-(--border-default)` |
 | focus ring | `var(--ring-color)` |
 | popup origin | `var(--popup-origin)` |
 
@@ -149,7 +149,7 @@ import DropdownOption from '@aziontech/webkit/dropdown-option'
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]` on trigger and option.
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)` on trigger and option.
 - Keyboard map:
   - On the trigger: `Enter` / `Space` opens the panel and focuses the first enabled option; `Down` opens and focuses the first option; `Up` opens and focuses the last option.
   - Inside the panel: `Down` / `Up` move between enabled options (wrap-around); `Home` / `End` jump to first/last enabled option; `Enter` / `Space` activate the focused option; `Esc` closes the panel and returns focus to the trigger; `Tab` closes the panel and lets focus proceed to the next focusable element.
diff --git a/.specs/empty-state.md b/.specs/empty-state.md
index 165f4bc60..29102dab1 100644
--- a/.specs/empty-state.md
+++ b/.specs/empty-state.md
@@ -34,7 +34,7 @@ import MiniButton from '@aziontech/webkit/mini-button'
     bordered
   >
     <template #actions>
-      <div class="flex gap-[var(--spacing-3)]">
+      <div class="flex gap-(--spacing-3)">
         <Button kind="secondary" label="Secondary Item" />
         <Button kind="outlined" label="Create Item" />
       </div>
@@ -112,7 +112,7 @@ _none_ — the title now uses `heading` tokens at every size (`.text-heading-xxs
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses the consumer-supplied controls in the `actions` slot in DOM order; the region itself is non-interactive.
 - ARIA: root uses `role="status"` so assistive tech announces the empty-data message; the `icon` slot container is `aria-hidden="true"`.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including the disabled state.
diff --git a/.specs/flow.md b/.specs/flow.md
index 960e8571a..5e261ce77 100644
--- a/.specs/flow.md
+++ b/.specs/flow.md
@@ -31,14 +31,14 @@ import Flow from '@aziontech/webkit/flow'
   <Flow align="center">
     <Flow.Node>Load balancer</Flow.Node>
     <Flow.Node unstyled>
-      <div class="rounded-[var(--shape-card)] border border-[var(--border-default)] bg-[var(--bg-surface-overlay)]">
+      <div class="rounded-(--shape-card) border border-(--border-default) bg-(--bg-surface-overlay)">
         <Flow.Anchor type="end">
-          <div class="flex h-10 items-center px-[var(--spacing-sm)] text-label-md text-[var(--text-muted)]">
+          <div class="flex h-10 items-center px-(--spacing-sm) text-label-md text-(--text-muted)">
             my-worker
           </div>
         </Flow.Anchor>
         <Flow.Anchor type="start">
-          <div class="m-[var(--spacing-xxs)] mt-0 rounded-[var(--shape-button)] border border-[var(--border-default)] bg-[var(--bg-surface)] px-[var(--spacing-sm)] py-[var(--spacing-xxs)] text-label-md text-[var(--text-default)]">
+          <div class="m-(--spacing-xxs) mt-0 rounded-(--shape-button) border border-(--border-default) bg-(--bg-surface) px-(--spacing-sm) py-(--spacing-xxs) text-label-md text-(--text-default)">
             Bindings
           </div>
         </Flow.Anchor>
@@ -132,7 +132,7 @@ _none_
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` moves focus through focusable nodes in document order; no arrow-key roving (the diagram is a static list/group).
 - ARIA: root `flow` is `role="list"`; each `flow-node` is `role="listitem"` with accessible text content; `flow-parallel` is `role="group"`; the connector SVG is decorative and carries `aria-hidden="true"`. A `flow-anchor` wraps meaningful node content and is therefore not hidden.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including the disabled state.
diff --git a/.specs/icon-button.md b/.specs/icon-button.md
index 9fb419bb1..1108c495b 100644
--- a/.specs/icon-button.md
+++ b/.specs/icon-button.md
@@ -69,7 +69,7 @@ Interactive control for user actions. Migrated from the existing implementation
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses; `Enter`/`Space` activates; `Escape` closes overlays where applicable.
 - ARIA: root uses appropriate roles (`button`, `dialog`, `status`, etc.) per sub-component.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
diff --git a/.specs/input-group.md b/.specs/input-group.md
index 9da72112a..9c8e54d85 100644
--- a/.specs/input-group.md
+++ b/.specs/input-group.md
@@ -40,7 +40,7 @@ Composition container that joins an input primitive with any number of adjacent
     <input
       v-model="url"
       placeholder="domain"
-      class="w-full h-full bg-[var(--bg-surface)] border-0 outline-none focus:ring-0 px-[var(--spacing-md)] text-label-sm text-[var(--text-default)] placeholder:text-[var(--text-muted)]"
+      class="w-full h-full bg-(--bg-surface) border-0 outline-none focus:ring-0 px-(--spacing-md) text-label-sm text-(--text-default) placeholder:text-(--text-muted)"
     />
     <InputGroup.Addon>.com</InputGroup.Addon>
   </InputGroup>
@@ -54,7 +54,7 @@ Composition container that joins an input primitive with any number of adjacent
     <input
       v-model="amount"
       placeholder="0.00"
-      class="w-full h-full bg-[var(--bg-surface)] border-0 outline-none focus:ring-0 px-[var(--spacing-md)] text-label-sm text-[var(--text-default)] placeholder:text-[var(--text-muted)]"
+      class="w-full h-full bg-(--bg-surface) border-0 outline-none focus:ring-0 px-(--spacing-md) text-label-sm text-(--text-default) placeholder:text-(--text-muted)"
     />
   </InputGroup>
 
@@ -63,7 +63,7 @@ Composition container that joins an input primitive with any number of adjacent
     <input
       v-model="url"
       placeholder="search"
-      class="w-full h-full bg-[var(--bg-surface)] border-0 outline-none focus:ring-0 px-[var(--spacing-md)] text-label-sm text-[var(--text-default)] placeholder:text-[var(--text-muted)]"
+      class="w-full h-full bg-(--bg-surface) border-0 outline-none focus:ring-0 px-(--spacing-md) text-label-sm text-(--text-default) placeholder:text-(--text-muted)"
     />
     <Button
       label="Search"
@@ -135,13 +135,13 @@ Root props:
 - Border semantics mirror `input-text` (independent, not compound):
   - `data-invalid` → `var(--danger-border)`
   - `data-required` → `var(--warning-border)`
-- Hover (only when not focus-within, not invalid, not required, not disabled): `border-[var(--border-strong)]`
+- Hover (only when not focus-within, not invalid, not required, not disabled): `border-(--border-strong)`
 - Focus-within: 2-ring at `var(--ring-color)` with `var(--bg-canvas)` offset (suppressed when `data-disabled`)
-- Disabled: `bg-[var(--bg-disabled)]`, `text-[var(--text-disabled)]`, `cursor-not-allowed`, hover ignored, focus-within ring suppressed
+- Disabled: `bg-(--bg-disabled)`, `text-(--text-disabled)`, `cursor-not-allowed`, hover ignored, focus-within ring suppressed
 - Child seams (applied by the root via Tailwind child selectors):
-  - `[&>*:first-child]:rounded-l-[var(--shape-elements)]` and `[&>*:not(:first-child)]:rounded-l-none`
-  - `[&>*:last-child]:rounded-r-[var(--shape-elements)]` and `[&>*:not(:last-child)]:rounded-r-none`
-  - `[&>*:not(:last-child)]:border-r-[color:var(--border-default)] [&>*:not(:last-child)]:border-r` — a single vertical seam between adjacent children, drawn on the left child so child components keep their own left border intact
+  - `[&>*:first-child]:rounded-l-(--shape-elements)` and `[&>*:not(:first-child)]:rounded-l-none`
+  - `[&>*:last-child]:rounded-r-(--shape-elements)` and `[&>*:not(:last-child)]:rounded-r-none`
+  - `[&>*:not(:last-child)]:border-r-(color:--border-default) [&>*:not(:last-child)]:border-r` — a single vertical seam between adjacent children, drawn on the left child so child components keep their own left border intact
   - Child components' own outer borders remain — the root's outer border sits on top, so double lines are avoided by the child selector removing the *inner-facing* border only
 
 ## Motion & Animations
@@ -168,7 +168,7 @@ Root props:
 | root height (large) | `h-10` (Tailwind utility) |
 | focus ring | `var(--ring-color)` |
 | focus ring offset | `var(--bg-canvas)` |
-| child seam | `border-r border-[color:var(--border-default)]` (applied via `[&>*:not(:last-child)]:border-r`) |
+| child seam | `border-r border-(color:--border-default)` (applied via `[&>*:not(:last-child)]:border-r`) |
 | addon surface | `var(--bg-canvas)` |
 | addon text | `var(--text-muted)` |
 | addon padding.x | `var(--spacing-md)` |
@@ -182,7 +182,7 @@ Root props:
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: the root shows a `focus-within` ring (`ring-2 ring-[var(--ring-color)] ring-offset-2 ring-offset-[var(--bg-canvas)]`) whenever any descendant (any child control or the middle input) has focus. The middle input renders `focus:ring-0 outline-none` so the group's ring is the only visible focus indicator. Suppressed when `data-disabled` is present. Child components (`Button`, `Select`) retain their own focus behavior internally but the group's ring is visually authoritative.
+- Visible focus: the root shows a `focus-within` ring (`ring-2 ring-(--ring-color) ring-offset-2 ring-offset-(--bg-canvas)`) whenever any descendant (any child control or the middle input) has focus. The middle input renders `focus:ring-0 outline-none` so the group's ring is the only visible focus indicator. Suppressed when `data-disabled` is present. Child components (`Button`, `Select`) retain their own focus behavior internally but the group's ring is visually authoritative.
 - Keyboard map: `Tab` moves through the children in DOM order. No custom keybindings on the group.
 - ARIA: root uses `role="group"`; `aria-invalid` and `aria-required` reflect the props. Each child keeps its own `aria-*` — the group does not duplicate.
 - `<InputGroup.Addon>` is decorative-by-default; when its content is not conveyed elsewhere the consumer should annotate it (`aria-hidden="true"` for pure decoration, or a visible-only label the middle input references via `aria-describedby`).
diff --git a/.specs/input-number.md b/.specs/input-number.md
index 01128e9a5..f6b6a8a06 100644
--- a/.specs/input-number.md
+++ b/.specs/input-number.md
@@ -121,7 +121,7 @@ const value = ref(1)
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses the input; `ArrowUp`/`ArrowDown` increment/decrement by `step`; `Home`/`End` jump to `min`/`max` when defined; `Enter` commits and emits `change`.
 - ARIA: `role="spinbutton"` on the input (native `<input type="number">` provides this); `aria-valuenow`, `aria-valuemin`, `aria-valuemax` mirror the props; `aria-invalid` mirrors `invalid`; `aria-required` mirrors `required`; spinner buttons have `aria-label` ("Increment" / "Decrement") and `tabindex="-1"` so keyboard users use arrow keys.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including the disabled state.
diff --git a/.specs/input-password.md b/.specs/input-password.md
index b26d698a3..49e415655 100644
--- a/.specs/input-password.md
+++ b/.specs/input-password.md
@@ -114,7 +114,7 @@ const password = ref('')
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]` — applied via `focus-within` on the field wrapper so the ring covers the whole control including icon slots and the visibility toggle.
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)` — applied via `focus-within` on the field wrapper so the ring covers the whole control including icon slots and the visibility toggle.
 - Keyboard map: `Tab` focuses the input, then the visibility toggle button (when `toggleable=true`); `Enter` / `Space` on the toggle flips visibility; standard text-editing keys apply to the input.
 - ARIA: the visibility toggle is a `<button type="button">` with `aria-pressed` reflecting the current visible state and an `aria-label` that switches between "Show password" and "Hide password"; `aria-invalid` is bound to the `invalid` prop; `aria-required` to the `required` prop; decorative icon slots and the eye glyph are `aria-hidden="true"`.
 - Contrast ≥4.5:1 (text) / ≥3:1 (icons), including disabled state.
diff --git a/.specs/input-text.md b/.specs/input-text.md
index b040cfc82..53de75856 100644
--- a/.specs/input-text.md
+++ b/.specs/input-text.md
@@ -107,7 +107,7 @@ Aligned with Figma frame `562:6774` (Webkit / InputText).
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]` — applied via `focus-within` on the field wrapper so the ring covers the whole control including icon slots.
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)` — applied via `focus-within` on the field wrapper so the ring covers the whole control including icon slots.
 - Keyboard map: `Tab` focuses the input; standard text-editing keys apply.
 - ARIA: `aria-invalid` is bound to the `invalid` prop; `aria-required` to the `required` prop; icon slots are `aria-hidden="true"` (decorative).
 - Contrast ≥4.5:1 (text) / ≥3:1 (icons), including disabled state.
diff --git a/.specs/item.md b/.specs/item.md
index c692d993e..97f9e87b6 100644
--- a/.specs/item.md
+++ b/.specs/item.md
@@ -89,7 +89,7 @@ Versatile flex row for title, description, media, and actions. Mirrors the shadc
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: on slotted links and buttons. The Item shell draws no focus ring on its own, except with `asChild`, where the merged focusable child (e.g. an anchor) receives the `focus-visible` ring (`focus-visible:ring-2 focus-visible:ring-[var(--ring-color)]`) and hover/active feedback.
+- Visible focus: on slotted links and buttons. The Item shell draws no focus ring on its own, except with `asChild`, where the merged focusable child (e.g. an anchor) receives the `focus-visible` ring (`focus-visible:ring-2 focus-visible:ring-(--ring-color)`) and hover/active feedback.
 - Keyboard map: slotted links and buttons supply Tab order; use `asChild` to merge layout onto a single focusable child when the whole row is a link.
 - ARIA: `ItemGroup` uses `role="list"`; consumers may set `role="listitem"` on Item when inside a list; `ItemSeparator` uses `role="separator"`.
 - Contrast ≥4.5:1 for title and description text.
diff --git a/.specs/link.md b/.specs/link.md
index 7857e3e2c..c42d283f1 100644
--- a/.specs/link.md
+++ b/.specs/link.md
@@ -69,7 +69,7 @@ Helps users move between views or sections. Migrated from the existing implement
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses; `Enter` activates.
 - ARIA: `aria-disabled` and `tabindex="-1"` when disabled.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
diff --git a/.specs/menu-item.md b/.specs/menu-item.md
index ab1aabc1e..4fb6fe1d3 100644
--- a/.specs/menu-item.md
+++ b/.specs/menu-item.md
@@ -63,7 +63,7 @@ Helps users move between views or sections. Migrated from the existing implement
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses; `Enter`/`Space` activates; `Escape` closes overlays where applicable.
 - ARIA: root uses appropriate roles (`button`, `dialog`, `status`, etc.) per sub-component.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
diff --git a/.specs/message.md b/.specs/message.md
index 2cb7a5cd2..1111757e2 100644
--- a/.specs/message.md
+++ b/.specs/message.md
@@ -126,7 +126,7 @@ import Message from '@aziontech/webkit/message'
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses inline links in the message copy, then the action and close controls when present; `Enter` follows a link, `Enter`/`Space` activates the controls; `Escape` dismisses when `closable` is true.
 - ARIA: root uses `role="alert"` for danger/warning severities and `role="status"` for info/success.
 - Inline links are underlined, not colour-only, so they stay distinguishable against every severity surface (WCAG 1.4.1); the `.text-link` token supplies the focus outline.
diff --git a/.specs/mini-button.md b/.specs/mini-button.md
index a908144fb..ed4fa99b8 100644
--- a/.specs/mini-button.md
+++ b/.specs/mini-button.md
@@ -96,7 +96,7 @@ Compact text action with an optional trailing external-link icon and a ghost hov
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses; `Enter` activates.
 - ARIA: `aria-disabled` and `tabindex="-1"` when disabled.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
diff --git a/.specs/multi-select.md b/.specs/multi-select.md
index e804c6311..660664043 100644
--- a/.specs/multi-select.md
+++ b/.specs/multi-select.md
@@ -134,7 +134,7 @@ const value = defineModel({ default: () => [] })
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]` on trigger and on every option row.
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)` on trigger and on every option row.
 - Keyboard map (trigger): `Tab` focuses; `Space`/`Enter`/`ArrowDown` opens the panel; `Escape` closes it.
 - Keyboard map (open panel): `ArrowDown`/`ArrowUp` move active option; `Home`/`End` jump to first/last; `Enter`/`Space` toggles the active option's selection without closing the panel; `Escape` closes; `Tab` closes and moves focus to the next form control.
 - ARIA: trigger uses `role="combobox"` with `aria-haspopup="listbox"`, `aria-expanded` bound to open state, `aria-controls` pointing to the content element. Content uses `role="listbox"` with `aria-multiselectable="true"`. Each option uses `role="option"` with `aria-selected` mirroring its selection. Decorative icons (`pi pi-chevron-down`, `pi-heart`, etc.) are `aria-hidden="true"`. The checkbox indicator is decorative for screen readers (the `role="option"` + `aria-selected` carries the semantic); the inner `Checkbox` is `aria-hidden="true"`.
diff --git a/.specs/navigation-menu.md b/.specs/navigation-menu.md
index e8963f0cc..d856a55fc 100644
--- a/.specs/navigation-menu.md
+++ b/.specs/navigation-menu.md
@@ -79,7 +79,7 @@ Helps users move between views or sections. Migrated from the existing implement
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses; `Enter`/`Space` activates; `Escape` closes overlays where applicable.
 - ARIA: root uses appropriate roles (`button`, `dialog`, `status`, etc.) per sub-component.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
diff --git a/.specs/paginator.md b/.specs/paginator.md
index 0b11e709f..5b6ffb77d 100644
--- a/.specs/paginator.md
+++ b/.specs/paginator.md
@@ -170,7 +170,7 @@ const pageSize = ref(10)
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]` on every pagination button.
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)` on every pagination button.
 - Keyboard map: `Tab` moves across buttons and the rows-per-page selector; `Enter`/`Space` activates a button; disabled buttons are skipped.
 - ARIA: root `<nav>` with `aria-label` (the `ariaLabel` prop); current-page button sets `aria-current="page"`; disabled buttons set the `disabled` attribute and `aria-disabled`; icon glyphs are `aria-hidden`.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including the disabled state.
diff --git a/.specs/panel.md b/.specs/panel.md
index fd9ea814d..72bed5274 100644
--- a/.specs/panel.md
+++ b/.specs/panel.md
@@ -64,7 +64,7 @@ _none_
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses; `Enter`/`Space` activates; `Escape` closes overlays where applicable.
 - ARIA: root uses appropriate roles (`button`, `dialog`, `status`, etc.) per sub-component.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
diff --git a/.specs/pick-list.md b/.specs/pick-list.md
index 4dfa37041..f8ffc3230 100644
--- a/.specs/pick-list.md
+++ b/.specs/pick-list.md
@@ -151,7 +151,7 @@ The root also **exposes** `move`, `moveAll`, `hasSelection`, and `count` on its
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]` on each option and on every move control.
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)` on each option and on every move control.
 - Keyboard map: `Tab` moves between the two listboxes and the control column; within a listbox `Space`/`Enter` toggle the focused option's selection; the move controls are activated with `Enter`/`Space`. Double-click on an option is a pointer affordance for moving it to the opposite list; the same move is reachable via select + the move controls (no keyboard-only feature is double-click-only).
 - ARIA: each list is `role="listbox"` with `aria-label` from its title text; options are `role="option"` with `aria-selected`; the source/target listboxes set `aria-multiselectable="true"`; every move control is an icon-only button with an explicit `aria-label`; `aria-disabled` mirrors `disabled`.
 - Contrast ≥4.5:1 (text) / ≥3:1 (borders + icons), including the disabled state.
diff --git a/.specs/popover.md b/.specs/popover.md
index e929b1e40..a16874d7e 100644
--- a/.specs/popover.md
+++ b/.specs/popover.md
@@ -38,7 +38,7 @@ import Button from '@aziontech/webkit/button'
         <Popover.Close />
       </Popover.Header>
 
-      <div class="p-[var(--spacing-md)] text-body-sm text-[var(--text-default)]">
+      <div class="p-(--spacing-md) text-body-sm text-(--text-default)">
         Compose any content here — the body is a free-form slot.
       </div>
     </Popover.Content>
@@ -183,7 +183,7 @@ export default Object.assign(Popover, {
 | panel border | `var(--border-default)` |
 | panel shape | `var(--shape-elements)` |
 | panel shadow | `var(--shadow-sm)` |
-| header / footer divider | `border-[var(--border-default)]` |
+| header / footer divider | `border-(--border-default)` |
 | header / footer spacing.y | `var(--spacing-sm)` |
 | header / footer spacing.x | `var(--spacing-md)` |
 | title typography | `.text-body-sm` |
@@ -203,7 +203,7 @@ export default Object.assign(Popover, {
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]` on the trigger and the close button.
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)` on the trigger and the close button.
 - Keyboard map:
   - On the trigger: `Enter` / `Space` toggles the panel. When it opens, focus **stays on the trigger** — it is not moved into the panel.
   - `Esc` closes the panel and returns focus to the trigger, from anywhere (trigger or panel). `Tab` / `Shift+Tab` are **contained** within the trigger and the panel's focusable children: Tab from the trigger moves into the panel, Tab past the last panel child wraps back to the trigger, and Shift+Tab reverses. Tabbing **never** closes the panel — only `Esc` or an outside-click dismiss it.
diff --git a/.specs/radio-button.md b/.specs/radio-button.md
index eb3055984..018ae4b5d 100644
--- a/.specs/radio-button.md
+++ b/.specs/radio-button.md
@@ -70,7 +70,7 @@ Atomic exclusive-choice control only — the circular radio input from Figma (no
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses native input; `Space` selects within group.
 - ARIA: native `type="radio"` input with `aria-checked`.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
diff --git a/.specs/scroll-area.md b/.specs/scroll-area.md
index e0e5f89af..15733201e 100644
--- a/.specs/scroll-area.md
+++ b/.specs/scroll-area.md
@@ -57,7 +57,7 @@ _none_
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses; `Enter`/`Space` activates; `Escape` closes overlays where applicable.
 - ARIA: root uses appropriate roles (`button`, `dialog`, `status`, etc.) per sub-component.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
diff --git a/.specs/select.md b/.specs/select.md
index 172162442..a0308d010 100644
--- a/.specs/select.md
+++ b/.specs/select.md
@@ -131,7 +131,7 @@ const value = defineModel({ default: '' })
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]` on trigger and on every option row.
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)` on trigger and on every option row.
 - Keyboard map (trigger): `Tab` focuses; `Space`/`Enter`/`ArrowDown` opens the panel; `Escape` closes it.
 - Keyboard map (open panel): `ArrowDown`/`ArrowUp` move active option; `Home`/`End` jump to first/last; `Enter`/`Space` select (single) or toggle (multi); `Escape` closes; `Tab` closes and moves focus to the next form control.
 - ARIA: trigger uses `role="combobox"` with `aria-haspopup="listbox"`, `aria-expanded` bound to open state, `aria-controls` pointing to the content element. Content uses `role="listbox"` with `aria-multiselectable` mirroring `multiple`. Each option uses `role="option"` with `aria-selected` mirroring its selection. Decorative icons (`pi pi-chevron-down`, `pi-heart`, etc.) are `aria-hidden="true"`.
diff --git a/.specs/sidebar.md b/.specs/sidebar.md
index 7c3d9f33c..d991518e2 100644
--- a/.specs/sidebar.md
+++ b/.specs/sidebar.md
@@ -102,7 +102,7 @@ _none_
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses; `Enter`/`Space` activates; `Escape` closes overlays where applicable.
 - ARIA: root uses appropriate roles (`button`, `dialog`, `status`, etc.) per sub-component.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
diff --git a/.specs/sign-up-card.md b/.specs/sign-up-card.md
index 3745f4b85..4347b2489 100644
--- a/.specs/sign-up-card.md
+++ b/.specs/sign-up-card.md
@@ -75,7 +75,7 @@ Composed template block for a product flow. Migrated from the existing implement
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses; `Enter`/`Space` activates; `Escape` closes overlays where applicable.
 - ARIA: root uses appropriate roles (`button`, `dialog`, `status`, etc.) per sub-component.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
diff --git a/.specs/spinner.md b/.specs/spinner.md
index 4c550d40f..33a9cbb31 100644
--- a/.specs/spinner.md
+++ b/.specs/spinner.md
@@ -53,7 +53,7 @@ _none_
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses; `Enter`/`Space` activates; `Escape` closes overlays where applicable.
 - ARIA: root uses appropriate roles (`button`, `dialog`, `status`, etc.) per sub-component.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
diff --git a/.specs/split-button.md b/.specs/split-button.md
index f82af5eac..e1693cd69 100644
--- a/.specs/split-button.md
+++ b/.specs/split-button.md
@@ -116,7 +116,7 @@ const items = [
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]` on both segments; the focused segment raises its z-index so the ring is not clipped by its neighbor.
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)` on both segments; the focused segment raises its z-index so the ring is not clipped by its neighbor.
 - Keyboard map: `Tab` focuses each segment; `Enter`/`Space` activates the primary button; on the toggle `Enter`/`Space`/`Down` open the menu, arrows navigate items, `Esc` closes and returns focus to the toggle (behavior owned by `Dropdown`).
 - ARIA: the primary button is a native `button`; the toggle exposes `aria-haspopup="menu"`, `aria-expanded`, and `aria-controls` via `Dropdown.Trigger` and carries an `aria-label`; the chevron icon is `aria-hidden`; `aria-busy` reflects the loading state. While `loading`, the toggle is a natively disabled button, so the menu cannot be opened by pointer or keyboard and assistive tech perceives the whole control as non-interactive.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including the disabled state.
diff --git a/.specs/status-indicator.md b/.specs/status-indicator.md
index 83eda79a4..cb292e18d 100644
--- a/.specs/status-indicator.md
+++ b/.specs/status-indicator.md
@@ -68,7 +68,7 @@ _none_
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses; `Enter`/`Space` activates; `Escape` closes overlays where applicable.
 - ARIA: root uses appropriate roles (`button`, `dialog`, `status`, etc.) per sub-component.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
diff --git a/.specs/switch.md b/.specs/switch.md
index 33c97d1ee..c0530c2ac 100644
--- a/.specs/switch.md
+++ b/.specs/switch.md
@@ -79,19 +79,19 @@ const enabled = ref(false)
 | lock icon (on) | `var(--color-base-black)` (theme-independent black on the white knob; both stay fixed across themes) |
 | track (hover) — overlay | `var(--bg-hover)` (applies to both off and on tracks) |
 | focus-visible / `data-focused` ring | `var(--ring-color)` |
-| shape — track | `rounded-[var(--shape-elements)]` (6px) |
-| shape — handle | `rounded-[var(--radius)]` (4px — concentric with the track: track 6px − `px-0.5` inset 2px) |
+| shape — track | `rounded-(--shape-elements)` (6px) |
+| shape — handle | `rounded-(--radius)` (4px — concentric with the track: track 6px − `px-0.5` inset 2px) |
 
 ## Theme gaps
 
 | Figma variable | Temporary primitive | Follow-up |
 |---|---|---|
-| handle fill (off) — Figma `--surface-300` (#b2b2b2) | inline `bg-[var(--text-muted)]` (closest semantic) | `TODO: introduce semantic --fg-handle (or equivalent) in DESIGN.md` |
-| handle fill (on) — fixed white knob over `--accent` (must not flip with theme) | inline `bg-[var(--color-base-white)]` + lock icon `text-[var(--color-base-black)]` (base primitives, intentionally theme-independent) | `TODO: introduce semantic --fg-handle-on / --fg-handle-on-contrast in DESIGN.md` |
+| handle fill (off) — Figma `--surface-300` (#b2b2b2) | inline `bg-(--text-muted)` (closest semantic) | `TODO: introduce semantic --fg-handle (or equivalent) in DESIGN.md` |
+| handle fill (on) — fixed white knob over `--accent` (must not flip with theme) | inline `bg-(--color-base-white)` + lock icon `text-(--color-base-black)` (base primitives, intentionally theme-independent) | `TODO: introduce semantic --fg-handle-on / --fg-handle-on-contrast in DESIGN.md` |
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`. The same ring is applied when `focused` is `true` (`data-[focused]` mirror).
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`. The same ring is applied when `focused` is `true` (`data-[focused]` mirror).
 - Keyboard map: `Tab` focuses; `Space` / `Enter` toggles.
 - ARIA: `role="switch"` on the root; `aria-checked` mirrors `data-checked`. The lock icon in `type="privacy"` is decorative — `aria-hidden="true"`.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons).
diff --git a/.specs/tab-view.md b/.specs/tab-view.md
index 72ae2338f..df1e698cd 100644
--- a/.specs/tab-view.md
+++ b/.specs/tab-view.md
@@ -53,7 +53,7 @@ Helps users move between views or sections. Migrated from the existing implement
 | open/close | `animate-none` | semantic | `motion-reduce:animate-none` |
 | scroll edge fade appears / leaves | `animate-fade-in` / `animate-fade-out` | semantic | `motion-reduce:animate-none` |
 | state change | `transition-colors duration-150 ease-out` | inline | `motion-reduce:transition-none` |
-| panel change | the incoming panel slides in from the side being navigated toward (`translate-x-[var(--spacing-md)]` / negative) while fading | `duration['moderate-02']` + `curve['productive-entrance']` from the theme animation catalog | `motion-reduce:transition-none` |
+| panel change | the incoming panel slides in from the side being navigated toward (`translate-x-(--spacing-md)` / negative) while fading | `duration['moderate-02']` + `curve['productive-entrance']` from the theme animation catalog | `motion-reduce:transition-none` |
 
 ## Tokens
 
@@ -74,7 +74,7 @@ Helps users move between views or sections. Migrated from the existing implement
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses; `Enter`/`Space` activates; `Escape` closes overlays where applicable.
 - ARIA: root uses appropriate roles (`button`, `dialog`, `status`, etc.) per sub-component.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
diff --git a/.specs/table.md b/.specs/table.md
index 6eb5dd29b..a04f43fe1 100644
--- a/.specs/table.md
+++ b/.specs/table.md
@@ -345,7 +345,7 @@ Per-column slots (data-driven mode) are name-computed at runtime, one per column
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]` on the sort button and any interactive cell content.
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)` on the sort button and any interactive cell content.
 - Keyboard map: `Tab` focuses sortable headers and interactive cell content; `Enter`/`Space` toggles a sortable header; row click is mouse/touch (no keyboard trap).
 - ARIA: root `role="table"`; `table-header`/`table-body`/`table-footer` `role="rowgroup"`; `table-row` `role="row"`; `table-head-cell` `role="columnheader"` with `aria-sort` when sortable; `table-cell` `role="cell"`; selected rows set `aria-selected`.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including muted header text.
diff --git a/.specs/tag.md b/.specs/tag.md
index 8e1d247ff..6353f1e3a 100644
--- a/.specs/tag.md
+++ b/.specs/tag.md
@@ -96,7 +96,7 @@ _none_
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`
 - Keyboard map: `Tab` focuses; `Enter`/`Space` activates; `Escape` closes overlays where applicable.
 - ARIA: root uses appropriate roles (`button`, `dialog`, `status`, etc.) per sub-component.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
diff --git a/.specs/theme-switcher.md b/.specs/theme-switcher.md
index 59b565a5b..5434cb0d6 100644
--- a/.specs/theme-switcher.md
+++ b/.specs/theme-switcher.md
@@ -83,11 +83,11 @@ const theme = ref('system')
 
 | Figma variable | Temporary primitive | Follow-up |
 |---|---|---|
-| `--border-width-default` (0.8px) | `border-[length:var(--border-width-default)]` (real compiled theme token) | `TODO: document --border-width-default in DESIGN.md` |
+| `--border-width-default` (0.8px) | `border-(length:--border-width-default)` (real compiled theme token) | `TODO: document --border-width-default in DESIGN.md` |
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]` on the focused segment.
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)` on the focused segment.
 - Keyboard map: `Tab` moves focus into the group (roving tabindex lands on the selected segment); `ArrowLeft`/`ArrowRight` (and `ArrowUp`/`ArrowDown`) move selection between segments; `Space`/`Enter` selects the focused segment.
 - ARIA: root is `role="radiogroup"` with `aria-label` from `ariaLabel`; each segment is `role="radio"` with `aria-checked` and its own `aria-label` (`System` / `Dark` / `Light`); the glyph is `aria-hidden`. `aria-disabled` mirrors `disabled`.
 - Each segment is wrapped in `@aziontech/webkit/tooltip` (`placement="bottom"`) surfacing its mode label (`System` / `Dark` / `Light`) on hover and keyboard focus; the tooltip owns its own `aria-describedby` wiring.
diff --git a/.specs/toast.md b/.specs/toast.md
index 5b3489db8..40002e122 100644
--- a/.specs/toast.md
+++ b/.specs/toast.md
@@ -224,7 +224,7 @@ Toast motion reads its **speeds and curves only from the foundation** (`duration
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-1` on the action and close controls (inherited from `Button` / `IconButton`).
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-1` on the action and close controls (inherited from `Button` / `IconButton`).
 - Keyboard map: `Tab` reaches the action then the close control of each visible toast; `Enter`/`Space` activates them. The region itself is not a focus trap and is not focused on mount, so toasts never steal focus from the current task.
 - ARIA: the region carries `aria-live` (`polite`, or `assertive` while an `error` toast is present) and `aria-atomic="false"`; each item is `role="status"` (or `role="alert"` for `error`/`warning`); the close control has an `aria-label`; the severity icon is `aria-hidden="true"`.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including the muted description text and severity icons.
diff --git a/.specs/tooltip.md b/.specs/tooltip.md
index b71a60c63..62db946b8 100644
--- a/.specs/tooltip.md
+++ b/.specs/tooltip.md
@@ -91,12 +91,12 @@ import IconButton from '@aziontech/webkit/icon-button'
 
 | Figma variable | Temporary primitive | Follow-up |
 |---|---|---|
-| `bg-contrast` | `bg-[var(--bg-surface)]` | `TODO: tokenizar` (add `--bg-contrast` to DESIGN.md when contrast surface diverges) |
-| `text-contrast` | `text-[var(--text-default)]` | `TODO: tokenizar` (add `--text-contrast` to DESIGN.md when contrast text diverges) |
+| `bg-contrast` | `bg-(--bg-surface)` | `TODO: tokenizar` (add `--bg-contrast` to DESIGN.md when contrast surface diverges) |
+| `text-contrast` | `text-(--text-default)` | `TODO: tokenizar` (add `--text-contrast` to DESIGN.md when contrast text diverges) |
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]` on the trigger wrapper.
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)` on the trigger wrapper.
 - Keyboard map: `Tab` focuses the trigger → tooltip opens; `Escape` closes; tooltip never traps focus.
 - ARIA: `role="tooltip"` on the panel; the trigger references the panel via `aria-describedby`. `aria-hidden="true"` when `data-state="closed"`.
 - Contrast ≥4.5:1 — text against surface verified in both light and dark modes.
diff --git a/apps/storybook/src/foundations/components/ColorPaletteSection.vue b/apps/storybook/src/foundations/components/ColorPaletteSection.vue
index 2715a0429..de10f20a2 100644
--- a/apps/storybook/src/foundations/components/ColorPaletteSection.vue
+++ b/apps/storybook/src/foundations/components/ColorPaletteSection.vue
@@ -34,20 +34,20 @@
 </script>
 
 <template>
-  <section class="mb-[var(--spacing-xxl)]">
-    <div class="mb-[var(--spacing-md)]">
+  <section class="mb-(--spacing-xxl)">
+    <div class="mb-(--spacing-md)">
       <h2
-        class="m-0 mb-[var(--spacing-xs)] border-b border-[var(--border-default)] pb-[var(--spacing-xs)] text-overline-md! text-[var(--text-muted)]"
+        class="m-0 mb-(--spacing-xs) border-b border-(--border-default) pb-(--spacing-xs) text-overline-md! text-(--text-muted)"
       >
         {{ title }}
       </h2>
     </div>
 
-    <div class="flex w-full flex-row flex-wrap gap-[var(--spacing-sm)]">
+    <div class="flex w-full flex-row flex-wrap gap-(--spacing-sm)">
       <article
         v-for="item in items"
         :key="item.id"
-        class="w-full min-w-[var(--container-3xs)] flex-1 cursor-pointer overflow-hidden rounded-[var(--shape-card)] border border-[var(--border-default)] bg-[var(--bg-surface)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-canvas)]"
+        class="w-full min-w-(--container-3xs) flex-1 cursor-pointer overflow-hidden rounded-(--shape-card) border border-(--border-default) bg-(--bg-surface) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-1 focus-visible:ring-offset-(--bg-canvas)"
         role="button"
         tabindex="0"
         :title="isCopied(`${item.id}-value`) ? 'Copied!' : 'Copy variable name'"
@@ -56,7 +56,7 @@
         @keydown.space.prevent="copyToClipboard(item.meta ?? item.value, `${item.id}-value`)"
       >
         <div
-          class="flex h-24 flex-col px-[var(--spacing-sm)] py-[var(--spacing-xs)] font-code"
+          class="flex h-24 flex-col px-(--spacing-sm) py-(--spacing-xs) font-code"
           :style="{ background: item.preview ?? item.value ?? 'transparent' }"
         >
           <span
@@ -74,9 +74,9 @@
         </div>
 
         <div
-          class="flex items-center justify-between gap-[var(--spacing-xs)] bg-[var(--bg-mask)] px-[var(--spacing-sm)] py-[var(--spacing-xs)] font-code"
+          class="flex items-center justify-between gap-(--spacing-xs) bg-(--bg-mask) px-(--spacing-sm) py-(--spacing-xs) font-code"
         >
-          <span class="truncate text-body-xs text-[var(--text-muted)]">{{ item.meta }}</span>
+          <span class="truncate text-body-xs text-(--text-muted)">{{ item.meta }}</span>
         </div>
       </article>
     </div>
diff --git a/apps/storybook/src/foundations/components/IconGrid.vue b/apps/storybook/src/foundations/components/IconGrid.vue
index d975c4a21..8293be8f4 100644
--- a/apps/storybook/src/foundations/components/IconGrid.vue
+++ b/apps/storybook/src/foundations/components/IconGrid.vue
@@ -89,7 +89,7 @@ function isCopied(name) {
             <i class="pi pi-search text-sm" />
           </template>
           <template v-if="searchQuery" #iconRight>
-            <span class="text-[11px] font-code text-[var(--text-muted)]">
+            <span class="text-[11px] font-code text-(--text-muted)">
               {{ filteredCount }} / {{ totalCount }}
             </span>
           </template>
@@ -124,7 +124,7 @@ function isCopied(name) {
         <button
           v-for="icon in azionIcons"
           :key="icon.name"
-          class="relative flex flex-col items-center justify-center gap-2 px-4 py-4 rounded-md border border-[var(--border-default)] bg-surface cursor-pointer transition-all duration-100 font-inherit text-inherit hover:border-primary hover:bg-primary/5"
+          class="relative flex flex-col items-center justify-center gap-2 px-4 py-4 rounded-md border border-(--border-default) bg-surface cursor-pointer transition-all duration-100 font-inherit text-inherit hover:border-primary hover:bg-primary/5"
           :title="'Click to copy: ' + icon.icon"
           @click="copyIconCode(icon)"
         >
@@ -152,7 +152,7 @@ function isCopied(name) {
         <button
           v-for="icon in filteredColorIcons"
           :key="icon.name"
-          class="relative flex flex-col items-center justify-center gap-2 px-4 py-4 rounded-md border border-[var(--border-default)] bg-surface cursor-pointer transition-all duration-100 font-inherit text-inherit hover:border-primary hover:bg-primary/5"
+          class="relative flex flex-col items-center justify-center gap-2 px-4 py-4 rounded-md border border-(--border-default) bg-surface cursor-pointer transition-all duration-100 font-inherit text-inherit hover:border-primary hover:bg-primary/5"
           :title="'Click to copy: ' + icon.icon"
           @click="copyIconCode(icon)"
         >
@@ -180,7 +180,7 @@ function isCopied(name) {
         <button
           v-for="icon in primeIcons"
           :key="icon.name"
-          class="relative flex flex-col items-center justify-center gap-2 px-4 py-4 rounded-md border border-[var(--border-default)] bg-surface cursor-pointer transition-all duration-100 font-inherit text-inherit hover:border-primary hover:bg-primary/5"
+          class="relative flex flex-col items-center justify-center gap-2 px-4 py-4 rounded-md border border-(--border-default) bg-surface cursor-pointer transition-all duration-100 font-inherit text-inherit hover:border-primary hover:bg-primary/5"
           :title="'Click to copy: ' + icon.icon"
           @click="copyIconCode(icon)"
         >
diff --git a/apps/storybook/src/foundations/components/SemanticSwatchGroup.vue b/apps/storybook/src/foundations/components/SemanticSwatchGroup.vue
index 7becb610f..431feca3f 100644
--- a/apps/storybook/src/foundations/components/SemanticSwatchGroup.vue
+++ b/apps/storybook/src/foundations/components/SemanticSwatchGroup.vue
@@ -23,7 +23,7 @@
 
   // The live token is passed as a CSS custom property, then consumed by the
   // token utilities below. Storybook's Tailwind runs with `important: true`, so
-  // the color has to be a utility (bg-/text-/border-[var(--…)]) — inline styles
+  // the color has to be a utility (bg-/text-/border-(--…)) — inline styles
   // would lose to the !important utilities on the same element.
   function swatchVars(item) {
     return {
@@ -35,52 +35,52 @@
   // Swatch renders the live token, so it follows the Storybook theme toggle.
   function swatchKindClass(item) {
     if (item.kind === 'text') {
-      return 'bg-[var(--swatch-on)] text-[var(--swatch-color)] border-2 border-solid border-[var(--border-muted)]'
+      return 'bg-(--swatch-on) text-(--swatch-color) border-2 border-solid border-(--border-muted)'
     }
     if (item.kind === 'border') {
-      return 'bg-[var(--bg-canvas)] border-4 border-solid border-[var(--swatch-color)]'
+      return 'bg-(--bg-canvas) border-4 border-solid border-(--swatch-color)'
     }
-    return 'bg-[var(--swatch-color)] border-2 border-solid border-[var(--border-muted)]'
+    return 'bg-(--swatch-color) border-2 border-solid border-(--border-muted)'
   }
 </script>
 
 <template>
-  <section class="mb-[var(--spacing-xxl)]">
-    <div class="mb-[var(--spacing-md)]">
+  <section class="mb-(--spacing-xxl)">
+    <div class="mb-(--spacing-md)">
       <h2
-        class="m-0 mb-[var(--spacing-xs)] border-b border-solid border-[var(--border-default)] pb-[var(--spacing-xs)] text-overline-md! text-[var(--text-muted)]"
+        class="m-0 mb-(--spacing-xs) border-b border-solid border-(--border-default) pb-(--spacing-xs) text-overline-md! text-(--text-muted)"
       >
         {{ title }}
       </h2>
-      <p v-if="description" class="m-0 max-w-[var(--container-3xl)] text-body-sm text-[var(--text-muted)]">
+      <p v-if="description" class="m-0 max-w-(--container-3xl) text-body-sm text-(--text-muted)">
         {{ description }}
       </p>
     </div>
 
-    <div class="overflow-hidden rounded-[var(--shape-card)] border border-solid border-[var(--border-default)] bg-[var(--bg-surface)]">
+    <div class="overflow-hidden rounded-(--shape-card) border border-solid border-(--border-default) bg-(--bg-surface)">
       <button
         v-for="item in items"
         :key="item.name"
         type="button"
-        class="flex w-full items-center gap-[var(--spacing-md)] border-b border-solid border-[var(--border-muted)] px-[var(--spacing-md)] py-[var(--spacing-sm)] text-left last:border-b-0 hover:bg-[var(--bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-inset"
+        class="flex w-full items-center gap-(--spacing-md) border-b border-solid border-(--border-muted) px-(--spacing-md) py-(--spacing-sm) text-left last:border-b-0 hover:bg-(--bg-hover) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-inset"
         :title="copiedKey === item.name ? 'Copied!' : 'Copy CSS variable'"
         @click="copyToClipboard(item.name)"
       >
         <span
           :style="swatchVars(item)"
           :class="[
-            'flex h-9 w-14 shrink-0 items-center justify-center rounded-[var(--shape-elements)] font-code text-body-xs',
+            'flex h-9 w-14 shrink-0 items-center justify-center rounded-(--shape-elements) font-code text-body-xs',
             swatchKindClass(item)
           ]"
         >
           <span v-if="item.kind === 'text'">Aa</span>
         </span>
 
-        <code class="w-[var(--container-3xs)] shrink-0 truncate font-code text-body-sm text-[var(--text-default)]">
+        <code class="w-(--container-3xs) shrink-0 truncate font-code text-body-sm text-(--text-default)">
           {{ copiedKey === item.name ? 'Copied!' : item.name }}
         </code>
 
-        <span class="text-body-sm text-[var(--text-muted)]">{{ item.description }}</span>
+        <span class="text-body-sm text-(--text-muted)">{{ item.description }}</span>
       </button>
     </div>
   </section>
diff --git a/apps/storybook/src/foundations/components/SpacingPreview.vue b/apps/storybook/src/foundations/components/SpacingPreview.vue
index 28a62275c..e6a001de0 100644
--- a/apps/storybook/src/foundations/components/SpacingPreview.vue
+++ b/apps/storybook/src/foundations/components/SpacingPreview.vue
@@ -113,7 +113,7 @@
           :style="{ padding: activeValue }"
         >
           <div
-            class="bg-[var(--primary)]/20 rounded border-2 border-dashed border-[var(--border-selected)] bg-surface px-3 py-2 text-center"
+            class="bg-(--primary)/20 rounded border-2 border-dashed border-(--border-selected) bg-surface px-3 py-2 text-center"
           >
             <span class="font-code text-[11px] text-default">{{ activeValue }}</span>
           </div>
diff --git a/apps/storybook/src/foundations/components/TypographyPreview.vue b/apps/storybook/src/foundations/components/TypographyPreview.vue
index a4ec42ebe..cdee63cae 100644
--- a/apps/storybook/src/foundations/components/TypographyPreview.vue
+++ b/apps/storybook/src/foundations/components/TypographyPreview.vue
@@ -23,12 +23,12 @@
 
 <template>
   <div
-    class="flex w-full flex-col gap-[var(--spacing-sm)] rounded-[var(--shape-elements)] bg-[var(--bg-canvas)] p-[var(--spacing-xs)]"
+    class="flex w-full flex-col gap-(--spacing-sm) rounded-(--shape-elements) bg-(--bg-canvas) p-(--spacing-xs)"
   >
     <article
       v-for="item in typographyCatalog"
       :key="item.className"
-      class="w-full min-w-0 cursor-pointer overflow-hidden rounded-[var(--shape-card)] border border-[var(--border-default)] bg-[var(--bg-surface)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-canvas)]"
+      class="w-full min-w-0 cursor-pointer overflow-hidden rounded-(--shape-card) border border-(--border-default) bg-(--bg-surface) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-1 focus-visible:ring-offset-(--bg-canvas)"
       role="button"
       tabindex="0"
       :title="isCopied(item.className) ? 'Copied!' : 'Copy class name'"
@@ -36,23 +36,23 @@
       @keydown.enter.prevent="copyToClipboard(item.className, item.className)"
       @keydown.space.prevent="copyToClipboard(item.className, item.className)"
     >
-      <div class="flex min-h-24 w-full items-center px-[var(--spacing-lg)] py-[var(--spacing-md)]">
-        <p :class="[item.className, 'm-0 w-full break-words text-[var(--text-default)]']">
+      <div class="flex min-h-24 w-full items-center px-(--spacing-lg) py-(--spacing-md)">
+        <p :class="[item.className, 'm-0 w-full break-words text-(--text-default)']">
           {{ item.sample }}
         </p>
       </div>
 
       <div
-        class="flex items-center justify-between gap-[var(--spacing-xs)] bg-[var(--bg-mask)] px-[var(--spacing-sm)] py-[var(--spacing-xs)] font-code"
+        class="flex items-center justify-between gap-(--spacing-xs) bg-(--bg-mask) px-(--spacing-sm) py-(--spacing-xs) font-code"
       >
-        <span class="truncate text-body-xs text-[var(--text-muted)]">{{
+        <span class="truncate text-body-xs text-(--text-muted)">{{
           isCopied(item.className) ? 'Copied' : item.className
         }}</span>
       </div>
     </article>
 
     <article
-      class="w-full min-w-0 cursor-pointer overflow-hidden rounded-[var(--shape-card)] border border-[var(--border-default)] bg-[var(--bg-surface)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-canvas)]"
+      class="w-full min-w-0 cursor-pointer overflow-hidden rounded-(--shape-card) border border-(--border-default) bg-(--bg-surface) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-1 focus-visible:ring-offset-(--bg-canvas)"
       role="button"
       tabindex="0"
       :title="isCopied('text-link') ? 'Copied!' : 'Copy class name'"
@@ -60,11 +60,11 @@
       @keydown.enter.prevent="copyToClipboard(typographyLinkDemo.linkClass, 'text-link')"
       @keydown.space.prevent="copyToClipboard(typographyLinkDemo.linkClass, 'text-link')"
     >
-      <div class="flex min-h-24 w-full items-center px-[var(--spacing-lg)] py-[var(--spacing-md)]">
+      <div class="flex min-h-24 w-full items-center px-(--spacing-lg) py-(--spacing-md)">
         <p
           :class="[
             typographyLinkDemo.parentClass,
-            'm-0 w-full break-words text-[var(--text-default)]'
+            'm-0 w-full break-words text-(--text-default)'
           ]"
         >
           {{ typographyLinkDemo.beforeLink }}
@@ -74,9 +74,9 @@
       </div>
 
       <div
-        class="flex items-center justify-between gap-[var(--spacing-xs)] bg-[var(--bg-mask)] px-[var(--spacing-sm)] py-[var(--spacing-xs)] font-code"
+        class="flex items-center justify-between gap-(--spacing-xs) bg-(--bg-mask) px-(--spacing-sm) py-(--spacing-xs) font-code"
       >
-        <span class="truncate text-body-xs text-[var(--text-muted)]">{{
+        <span class="truncate text-body-xs text-(--text-muted)">{{
           isCopied('text-link') ? 'Copied' : typographyLinkDemo.linkClass
         }}</span>
       </div>
diff --git a/apps/storybook/src/foundations/components/layout/PageContainer.vue b/apps/storybook/src/foundations/components/layout/PageContainer.vue
index 95c6c73bf..784dc0522 100644
--- a/apps/storybook/src/foundations/components/layout/PageContainer.vue
+++ b/apps/storybook/src/foundations/components/layout/PageContainer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="font-sans w-full mx-auto max-w-[var(--container-7xl)]">
+  <div class="font-sans w-full mx-auto max-w-(--container-7xl)">
     <slot />
   </div>
 </template>
diff --git a/apps/storybook/src/stories/components/code/log-view/LogView.stories.js b/apps/storybook/src/stories/components/code/log-view/LogView.stories.js
index a86e766fa..f40c11619 100644
--- a/apps/storybook/src/stories/components/code/log-view/LogView.stories.js
+++ b/apps/storybook/src/stories/components/code/log-view/LogView.stories.js
@@ -213,9 +213,9 @@ export const Default = {
   }
 }
 
-const FLUSH_TEMPLATE = `<div class="rounded-[var(--shape-card)] border border-[var(--border-default)] bg-[var(--bg-surface)] p-[var(--spacing-md)]">
-  <span class="text-label-sm text-[var(--text-muted)]">Deploy output</span>
-  <LogView :lines="lines" :border="false" v-model:search="search" v-model:warnings-only="warningsOnly" class="mt-[var(--spacing-sm)] h-[420px]">
+const FLUSH_TEMPLATE = `<div class="rounded-(--shape-card) border border-(--border-default) bg-(--bg-surface) p-(--spacing-md)">
+  <span class="text-label-sm text-(--text-muted)">Deploy output</span>
+  <LogView :lines="lines" :border="false" v-model:search="search" v-model:warnings-only="warningsOnly" class="mt-(--spacing-sm) h-[420px]">
     <LogViewHeader />
     <LogViewContent />
   </LogView>
diff --git a/apps/storybook/src/stories/components/content/avatar/Avatar.stories.js b/apps/storybook/src/stories/components/content/avatar/Avatar.stories.js
index e89616e47..040ed854e 100644
--- a/apps/storybook/src/stories/components/content/avatar/Avatar.stories.js
+++ b/apps/storybook/src/stories/components/content/avatar/Avatar.stories.js
@@ -128,11 +128,11 @@ export const Default = {
 const TYPES_TEMPLATE = `<div class="flex flex-wrap items-end gap-6">
   <div class="flex flex-col items-center gap-2">
     <Avatar kind="circle" label="AB" size="medium" />
-    <span class="text-body-xs text-[var(--text-muted)]">Circle</span>
+    <span class="text-body-xs text-(--text-muted)">Circle</span>
   </div>
   <div class="flex flex-col items-center gap-2">
     <Avatar kind="square" label="AB" size="medium" />
-    <span class="text-body-xs text-[var(--text-muted)]">Square</span>
+    <span class="text-body-xs text-(--text-muted)">Square</span>
   </div>
 </div>`
 
@@ -169,15 +169,15 @@ export const Sizes = {
 const FALLBACKS_TEMPLATE = `<div class="flex flex-wrap items-end gap-6">
   <div class="flex flex-col items-center gap-2">
     <Avatar src="${sampleImage}" alt="Portrait of a user" size="large" />
-    <span class="text-body-xs text-[var(--text-muted)]">Image</span>
+    <span class="text-body-xs text-(--text-muted)">Image</span>
   </div>
   <div class="flex flex-col items-center gap-2">
     <Avatar label="JD" size="large" />
-    <span class="text-body-xs text-[var(--text-muted)]">Initials</span>
+    <span class="text-body-xs text-(--text-muted)">Initials</span>
   </div>
   <div class="flex flex-col items-center gap-2">
     <Avatar icon="pi pi-user" size="large" />
-    <span class="text-body-xs text-[var(--text-muted)]">Icon</span>
+    <span class="text-body-xs text-(--text-muted)">Icon</span>
   </div>
 </div>`
 
@@ -198,18 +198,18 @@ export const Fallbacks = {
 
 const VARIANT_GRID_TEMPLATE = `<div class="flex flex-col gap-8">
   <section v-for="kind in kinds" :key="kind" class="flex flex-col gap-4">
-    <h3 class="text-heading-sm text-[var(--text-default)] capitalize">{{ kind }}</h3>
+    <h3 class="text-heading-sm text-(--text-default) capitalize">{{ kind }}</h3>
     <div class="flex flex-col gap-6">
       <div class="flex flex-wrap items-end gap-4">
-        <span class="w-16 text-body-xs text-[var(--text-muted)]">Text</span>
+        <span class="w-16 text-body-xs text-(--text-muted)">Text</span>
         <Avatar v-for="size in sizes" :key="'l-' + kind + size" :kind="kind" :size="size" label="AB" />
       </div>
       <div class="flex flex-wrap items-end gap-4">
-        <span class="w-16 text-body-xs text-[var(--text-muted)]">Icon</span>
+        <span class="w-16 text-body-xs text-(--text-muted)">Icon</span>
         <Avatar v-for="size in sizes" :key="'i-' + kind + size" :kind="kind" :size="size" />
       </div>
       <div class="flex flex-wrap items-end gap-4">
-        <span class="w-16 text-body-xs text-[var(--text-muted)]">Image</span>
+        <span class="w-16 text-body-xs text-(--text-muted)">Image</span>
         <Avatar
           v-for="size in sizes"
           :key="'img-' + kind + size"
diff --git a/apps/storybook/src/stories/components/content/card-box/CardBox.stories.js b/apps/storybook/src/stories/components/content/card-box/CardBox.stories.js
index 258edb3b5..a18c27a33 100644
--- a/apps/storybook/src/stories/components/content/card-box/CardBox.stories.js
+++ b/apps/storybook/src/stories/components/content/card-box/CardBox.stories.js
@@ -91,7 +91,7 @@ const Template = (args) => ({
   template: `
     <CardBox v-bind="args" class="w-full max-w-[512px]">
       <template #content>
-        <p class="text-body-sm text-[var(--text-muted)]">
+        <p class="text-body-sm text-(--text-muted)">
           Card body content. Place forms, tables, or any markup in the content slot.
         </p>
       </template>
@@ -101,7 +101,7 @@ const Template = (args) => ({
 
 const DEFAULT_MARKUP = `<CardBox title="Card Title" class="w-full max-w-[512px]">
   <template #content>
-    <p class="text-body-sm text-[var(--text-muted)]">
+    <p class="text-body-sm text-(--text-muted)">
       Card body content. Place forms, tables, or any markup in the content slot.
     </p>
   </template>
@@ -123,12 +123,12 @@ export const Default = {
 const HEADER_ACTION_TEMPLATE = `<CardBox class="w-full max-w-[512px]">
   <template #header>
     <div class="flex items-center justify-between w-full">
-      <h2 class="text-label-md text-[var(--text-default)]">Card Title</h2>
+      <h2 class="text-label-md text-(--text-default)">Card Title</h2>
       <IconButton icon="pi pi-chevron-right" aria-label="Expand" kind="outlined" size="small" />
     </div>
   </template>
   <template #content>
-    <p class="text-body-sm text-[var(--text-muted)]">
+    <p class="text-body-sm text-(--text-muted)">
       An action rendered in the header slot stays visible, aligned to the end of the header.
     </p>
   </template>
@@ -156,16 +156,16 @@ export const Header = {
 
 const FOOTER_TEMPLATE = `<CardBox title="Card Title" class="w-full max-w-[512px]">
   <template #content>
-    <p class="text-body-sm text-[var(--text-muted)]">
+    <p class="text-body-sm text-(--text-muted)">
       The footer bar renders only when the footer slot is filled.
     </p>
   </template>
   <template #footer>
-    <div class="flex w-full items-center justify-between gap-[var(--spacing-sm)]">
-      <span class="text-body-xs text-[var(--text-muted)]">
+    <div class="flex w-full items-center justify-between gap-(--spacing-sm)">
+      <span class="text-body-xs text-(--text-muted)">
         <a href="/docs" class="text-link">Check documentation:</a>
       </span>
-      <div class="flex gap-[var(--spacing-sm)]">
+      <div class="flex gap-(--spacing-sm)">
         <Button label="Cancel" kind="outlined" size="small" />
         <Button label="Save" kind="outlined" size="small" />
       </div>
@@ -195,7 +195,7 @@ export const Footer = {
 
 const FLUSH_MARKUP = `<CardBox title="Card Title" :padded="false" class="w-full max-w-[512px]">
   <template #content>
-    <p class="text-body-sm text-[var(--text-muted)] p-[var(--spacing-md)]">
+    <p class="text-body-sm text-(--text-muted) p-(--spacing-md)">
       With padded=false the content sits flush to the card edges; the content owns its own padding (or renders an ItemList with full-width dividers).
     </p>
   </template>
@@ -211,7 +211,7 @@ export const Flush = {
     template: `
       <CardBox v-bind="args" :padded="false" title="Card Title" class="w-full max-w-[512px]">
         <template #content>
-          <p class="text-body-sm text-[var(--text-muted)] p-[var(--spacing-md)]">
+          <p class="text-body-sm text-(--text-muted) p-(--spacing-md)">
             With padded=false the content sits flush to the card edges; the content owns its own padding (or renders an ItemList with full-width dividers).
           </p>
         </template>
diff --git a/apps/storybook/src/stories/components/content/card-pricing/CardPricing.stories.js b/apps/storybook/src/stories/components/content/card-pricing/CardPricing.stories.js
index 8e10c6e9d..88121279b 100644
--- a/apps/storybook/src/stories/components/content/card-pricing/CardPricing.stories.js
+++ b/apps/storybook/src/stories/components/content/card-pricing/CardPricing.stories.js
@@ -328,21 +328,21 @@ const SLOTS_TEMPLATE = `<CardPricing
   prefix="$"
   suffix="per month"
 >
-  <ul class="m-0 flex list-none flex-col gap-2 p-0 text-body-sm text-[var(--text-default)]">
+  <ul class="m-0 flex list-none flex-col gap-2 p-0 text-body-sm text-(--text-default)">
     <li class="flex items-center gap-2">
-      <i class="pi pi-check text-[var(--primary)]" aria-hidden="true" />
+      <i class="pi pi-check text-(--primary)" aria-hidden="true" />
       Unlimited rules engine
     </li>
     <li class="flex items-center gap-2">
-      <i class="pi pi-check text-[var(--primary)]" aria-hidden="true" />
+      <i class="pi pi-check text-(--primary)" aria-hidden="true" />
       Global edge deployment
     </li>
     <li class="flex items-center gap-2">
-      <i class="pi pi-check text-[var(--primary)]" aria-hidden="true" />
+      <i class="pi pi-check text-(--primary)" aria-hidden="true" />
       Advanced observability
     </li>
     <li class="flex items-center gap-2">
-      <i class="pi pi-check text-[var(--primary)]" aria-hidden="true" />
+      <i class="pi pi-check text-(--primary)" aria-hidden="true" />
       24/7 support
     </li>
   </ul>
diff --git a/apps/storybook/src/stories/components/content/item/Item.stories.js b/apps/storybook/src/stories/components/content/item/Item.stories.js
index 87497447e..b3dca7176 100644
--- a/apps/storybook/src/stories/components/content/item/Item.stories.js
+++ b/apps/storybook/src/stories/components/content/item/Item.stories.js
@@ -159,7 +159,7 @@ const Template = (args) => ({
     return { args }
   },
   template: `
-    <div class="flex w-full flex-col gap-[var(--spacing-4)]">
+    <div class="flex w-full flex-col gap-(--spacing-4)">
       <Item v-bind="args">
         <ItemContent>
           <ItemTitle>Basic Item</ItemTitle>
@@ -251,7 +251,7 @@ export const WithIconMedia = {
       return { args }
     },
     template: `
-      <div class="flex w-full flex-col gap-[var(--spacing-4)]">
+      <div class="flex w-full flex-col gap-(--spacing-4)">
         <Item kind="outline" v-bind="args">
           <ItemMedia kind="icon">
             <i class="ai ai-edge-firewall text-[length:inherit] leading-none" aria-hidden="true" />
@@ -306,7 +306,7 @@ export const WithAvatar = {
       return { args, sampleAvatarSrc }
     },
     template: `
-      <div class="flex w-full flex-col gap-[var(--spacing-4)]">
+      <div class="flex w-full flex-col gap-(--spacing-4)">
         <Item kind="outline" v-bind="args">
           <ItemMedia>
             <Avatar
@@ -344,7 +344,7 @@ const IMAGE_MARKUP = `<Item kind="outline">
     <img
       src="${sampleThumbnailSrc}"
       alt="Midnight City Lights"
-      class="object-cover size-10 grayscale rounded-[var(--shape-card)]"
+      class="object-cover size-10 grayscale rounded-(--shape-card)"
     />
   </Item.Media>
   <Item.Content>
@@ -364,13 +364,13 @@ export const WithImageMedia = {
       return { args, sampleThumbnailSrc }
     },
     template: `
-      <div class="flex w-full flex-col gap-[var(--spacing-4)]">
+      <div class="flex w-full flex-col gap-(--spacing-4)">
         <Item kind="outline" v-bind="args">
           <ItemMedia kind="image">
             <img
               :src="sampleThumbnailSrc"
               alt="Midnight City Lights"
-              class="object-cover size-10 grayscale rounded-[var(--shape-card)]"
+              class="object-cover size-10 grayscale rounded-(--shape-card)"
             />
           </ItemMedia>
           <ItemContent>
@@ -397,7 +397,7 @@ export const WithImageMedia = {
 
 const AS_CHILD_IMPORTS = ["import Item from '@aziontech/webkit/item'"]
 
-const AS_CHILD_MARKUP = `<div class="flex w-full flex-col gap-[var(--spacing-4)]">
+const AS_CHILD_MARKUP = `<div class="flex w-full flex-col gap-(--spacing-4)">
   <Item kind="outline" as-child>
     <a href="#" class="no-underline text-inherit">
       <Item.Content>
@@ -429,7 +429,7 @@ export const WithAsChild = {
   render: () => ({
     components: itemSubcomponents,
     template: `
-      <div class="flex w-full flex-col gap-[var(--spacing-4)]">
+      <div class="flex w-full flex-col gap-(--spacing-4)">
         <Item kind="outline" as-child>
           <a href="#" class="no-underline text-inherit">
             <ItemContent>
@@ -482,7 +482,7 @@ const groupRow = (person) => `  <Item>
         .charAt(0)
         .toUpperCase()}" size="medium" />
     </Item.Media>
-    <Item.Content class="gap-[var(--spacing-1)]">
+    <Item.Content class="gap-(--spacing-1)">
       <Item.Title>${person.username}</Item.Title>
       <Item.Description>${person.email}</Item.Description>
     </Item.Content>
@@ -518,7 +518,7 @@ export const WithGroup = {
                 size="medium"
               />
             </ItemMedia>
-            <ItemContent class="gap-[var(--spacing-1)]">
+            <ItemContent class="gap-(--spacing-1)">
               <ItemTitle>{{ person.username }}</ItemTitle>
               <ItemDescription>{{ person.email }}</ItemDescription>
             </ItemContent>
@@ -623,7 +623,7 @@ const AS_CHILD_LIST_ROW = `      <Item as-child>
             <Item.Title>Basic Item</Item.Title>
             <Item.Description>A simple item with title and description.</Item.Description>
           </Item.Content>
-          <i class="pi pi-arrow-right text-[var(--text-muted)]" aria-hidden="true" />
+          <i class="pi pi-arrow-right text-(--text-muted)" aria-hidden="true" />
         </a>
       </Item>`
 
@@ -654,7 +654,7 @@ export const WithListAsChild = {
                   <ItemTitle>Basic Item</ItemTitle>
                   <ItemDescription>A simple item with title and description.</ItemDescription>
                 </ItemContent>
-                <i class="pi pi-arrow-right text-[var(--text-muted)]" aria-hidden="true" />
+                <i class="pi pi-arrow-right text-(--text-muted)" aria-hidden="true" />
               </a>
             </Item>
           </ItemList>
@@ -683,7 +683,7 @@ const inlineRow = (icon, title, description) => `  <Item kind="inline" size="sma
       <Item.Title>${title}</Item.Title>
       <Item.Description>${description}</Item.Description>
     </Item.Content>
-    <i class="pi pi-arrow-right text-[var(--text-muted)]" aria-hidden="true" />
+    <i class="pi pi-arrow-right text-(--text-muted)" aria-hidden="true" />
   </Item>`
 
 const INLINE_MARKUP = `<Item.Group>
@@ -710,7 +710,7 @@ export const Inline = {
               <ItemTitle>Customize Domain</ItemTitle>
               <ItemDescription>Link custom domains and subdomains to Azion.</ItemDescription>
             </ItemContent>
-            <i class="pi pi-arrow-right text-[var(--text-muted)]" aria-hidden="true" />
+            <i class="pi pi-arrow-right text-(--text-muted)" aria-hidden="true" />
           </Item>
           <Item kind="inline" size="small" v-bind="args">
             <ItemMedia kind="icon">
@@ -720,7 +720,7 @@ export const Inline = {
               <ItemTitle>Point Traffic</ItemTitle>
               <ItemDescription>Redirect domain traffic to Azion.</ItemDescription>
             </ItemContent>
-            <i class="pi pi-arrow-right text-[var(--text-muted)]" aria-hidden="true" />
+            <i class="pi pi-arrow-right text-(--text-muted)" aria-hidden="true" />
           </Item>
           <Item kind="inline" size="small" v-bind="args">
             <ItemMedia kind="icon">
@@ -730,7 +730,7 @@ export const Inline = {
               <ItemTitle>View Analytics</ItemTitle>
               <ItemDescription>Monitor performance, availability, and security.</ItemDescription>
             </ItemContent>
-            <i class="pi pi-arrow-right text-[var(--text-muted)]" aria-hidden="true" />
+            <i class="pi pi-arrow-right text-(--text-muted)" aria-hidden="true" />
           </Item>
         </ItemGroup>
       </div>
diff --git a/apps/storybook/src/stories/components/data/flow/Flow.stories.js b/apps/storybook/src/stories/components/data/flow/Flow.stories.js
index 9d69d0e45..5843c5dc5 100644
--- a/apps/storybook/src/stories/components/data/flow/Flow.stories.js
+++ b/apps/storybook/src/stories/components/data/flow/Flow.stories.js
@@ -207,11 +207,11 @@ export const Branches = {
 }
 
 const CUSTOM_NODES_TEMPLATE = `<Flow align="center">
-  <Flow.Node unstyled class="size-4 rounded-full bg-[var(--border-default)]" />
+  <Flow.Node unstyled class="size-4 rounded-full bg-(--border-default)" />
   <Flow.Node>my-worker</Flow.Node>
   <Flow.Node
     unstyled
-    class="rounded-[var(--shape-card)] border border-[var(--border-default)] bg-[var(--bg-surface-raised)] px-[var(--spacing-sm)] py-[var(--spacing-xl)] text-label-md text-[var(--text-default)]"
+    class="rounded-(--shape-card) border border-(--border-default) bg-(--bg-surface-raised) px-(--spacing-sm) py-(--spacing-xl) text-label-md text-(--text-default)"
   >
     Taller node
   </Flow.Node>
@@ -235,15 +235,15 @@ export const CustomNodes = {
 const ANCHORED_TEMPLATE = `<Flow align="center">
   <Flow.Node>Load balancer</Flow.Node>
   <Flow.Node unstyled>
-    <div class="rounded-[var(--shape-card)] border border-[var(--border-default)] bg-[var(--bg-surface-overlay)]">
+    <div class="rounded-(--shape-card) border border-(--border-default) bg-(--bg-surface-overlay)">
       <Flow.Anchor type="end">
-        <div class="flex h-10 items-center px-[var(--spacing-sm)] text-label-md text-[var(--text-muted)]">
+        <div class="flex h-10 items-center px-(--spacing-sm) text-label-md text-(--text-muted)">
           my-worker
         </div>
       </Flow.Anchor>
       <Flow.Anchor type="start">
-        <div class="m-[var(--spacing-xxs)] mt-0 flex items-center gap-[var(--spacing-sm)] rounded-[var(--shape-button)] border border-[var(--border-default)] bg-[var(--bg-surface)] px-[var(--spacing-sm)] py-[var(--spacing-xxs)] text-label-md text-[var(--text-default)]">
-          Bindings <span class="text-[var(--text-muted)]">2</span>
+        <div class="m-(--spacing-xxs) mt-0 flex items-center gap-(--spacing-sm) rounded-(--shape-button) border border-(--border-default) bg-(--bg-surface) px-(--spacing-sm) py-(--spacing-xxs) text-label-md text-(--text-default)">
+          Bindings <span class="text-(--text-muted)">2</span>
         </div>
       </Flow.Anchor>
     </div>
diff --git a/apps/storybook/src/stories/components/data/paginator/Paginator.stories.js b/apps/storybook/src/stories/components/data/paginator/Paginator.stories.js
index 95db2184c..9c8f774d5 100644
--- a/apps/storybook/src/stories/components/data/paginator/Paginator.stories.js
+++ b/apps/storybook/src/stories/components/data/paginator/Paginator.stories.js
@@ -172,15 +172,15 @@ export const Default = {
   }
 }
 
-const BUTTONS_TEMPLATE = `<div class="flex flex-col gap-[var(--spacing-md)]">
-  <div class="flex flex-wrap items-center gap-[var(--spacing-xs)]">
+const BUTTONS_TEMPLATE = `<div class="flex flex-col gap-(--spacing-md)">
+  <div class="flex flex-wrap items-center gap-(--spacing-xs)">
     <Paginator.Button kind="previous">Previous</Paginator.Button>
     <Paginator.Button kind="number">1</Paginator.Button>
     <Paginator.Button kind="number" selected>2</Paginator.Button>
     <Paginator.Button kind="more" />
     <Paginator.Button kind="next">Next</Paginator.Button>
   </div>
-  <div class="flex flex-wrap items-center gap-[var(--spacing-xs)]">
+  <div class="flex flex-wrap items-center gap-(--spacing-xs)">
     <Paginator.Button kind="previous" disabled>Previous</Paginator.Button>
     <Paginator.Button kind="number" disabled>1</Paginator.Button>
     <Paginator.Button kind="next" disabled>Next</Paginator.Button>
diff --git a/apps/storybook/src/stories/components/data/pick-list/PickList.stories.js b/apps/storybook/src/stories/components/data/pick-list/PickList.stories.js
index 94ee15afa..368e0e0ae 100644
--- a/apps/storybook/src/stories/components/data/pick-list/PickList.stories.js
+++ b/apps/storybook/src/stories/components/data/pick-list/PickList.stories.js
@@ -219,7 +219,7 @@ const Template = (args) => ({
     return { args, value, onUpdate }
   },
   template: `
-    <div class="max-w-[var(--container-xl)]">
+    <div class="max-w-(--container-xl)">
       <PickList
         :model-value="value"
         :data-key="args.dataKey"
diff --git a/apps/storybook/src/stories/components/data/table/Table.stories.js b/apps/storybook/src/stories/components/data/table/Table.stories.js
index b7fe73328..de1b3c8df 100644
--- a/apps/storybook/src/stories/components/data/table/Table.stories.js
+++ b/apps/storybook/src/stories/components/data/table/Table.stories.js
@@ -138,7 +138,7 @@ const CELL_SLOTS = `
         <template #cell-name="{ row, value }">
           <a
             :href="'/workloads/' + row.id"
-            class="cursor-pointer truncate text-[var(--text-default)] no-underline hover:underline active:underline"
+            class="cursor-pointer truncate text-(--text-default) no-underline hover:underline active:underline"
             @click="(event) => onLink(event, row)"
           >{{ value }}</a>
         </template>
@@ -205,7 +205,7 @@ const baseArgs = {
 const SOURCE_CELL_SLOTS = `  <template #cell-name="{ row, value }">
     <a
       :href="'/workloads/' + row.id"
-      class="cursor-pointer truncate text-[var(--text-default)] no-underline hover:underline active:underline"
+      class="cursor-pointer truncate text-(--text-default) no-underline hover:underline active:underline"
     >{{ value }}</a>
   </template>
   <template #cell-status="{ value }">
diff --git a/apps/storybook/src/stories/components/feedback/empty-state/EmptyState.stories.js b/apps/storybook/src/stories/components/feedback/empty-state/EmptyState.stories.js
index b8c1340be..71a9fceb5 100644
--- a/apps/storybook/src/stories/components/feedback/empty-state/EmptyState.stories.js
+++ b/apps/storybook/src/stories/components/feedback/empty-state/EmptyState.stories.js
@@ -11,7 +11,7 @@ const IMPORTS = [
 ]
 
 const ACTIONS_MARKUP = `  <template #actions>
-    <div class="flex gap-[var(--spacing-3)]">
+    <div class="flex gap-(--spacing-3)">
       <Button kind="secondary" label="Secondary Item" />
       <Button kind="outlined" label="Create Item" />
     </div>
@@ -127,7 +127,7 @@ export const Default = {
   }
 }
 
-const SIZES_TEMPLATE = `<div class="flex w-full flex-col gap-[var(--spacing-xl)]">
+const SIZES_TEMPLATE = `<div class="flex w-full flex-col gap-(--spacing-xl)">
   <EmptyState
     v-for="size in ['small', 'medium']"
     :key="size"
diff --git a/apps/storybook/src/stories/components/feedback/skeleton/Skeleton.stories.js b/apps/storybook/src/stories/components/feedback/skeleton/Skeleton.stories.js
index 86a730dcd..12d9c404a 100644
--- a/apps/storybook/src/stories/components/feedback/skeleton/Skeleton.stories.js
+++ b/apps/storybook/src/stories/components/feedback/skeleton/Skeleton.stories.js
@@ -120,24 +120,24 @@ export const Types = {
   }
 }
 
-const SURFACES_TEMPLATE = `<div class="grid grid-cols-2 gap-[var(--spacing-md)]">
-  <div class="flex flex-col gap-[var(--spacing-sm)] rounded-[var(--shape-card)] bg-[var(--bg-canvas)] p-[var(--spacing-md)]">
-    <span class="text-label-sm text-[var(--text-muted)]">--bg-canvas</span>
+const SURFACES_TEMPLATE = `<div class="grid grid-cols-2 gap-(--spacing-md)">
+  <div class="flex flex-col gap-(--spacing-sm) rounded-(--shape-card) bg-(--bg-canvas) p-(--spacing-md)">
+    <span class="text-label-sm text-(--text-muted)">--bg-canvas</span>
     <Skeleton kind="shape" width="100%" height="16px" />
     <Skeleton kind="shape" width="60%" height="16px" />
   </div>
-  <div class="flex flex-col gap-[var(--spacing-sm)] rounded-[var(--shape-card)] bg-[var(--bg-surface)] p-[var(--spacing-md)]">
-    <span class="text-label-sm text-[var(--text-muted)]">--bg-surface</span>
+  <div class="flex flex-col gap-(--spacing-sm) rounded-(--shape-card) bg-(--bg-surface) p-(--spacing-md)">
+    <span class="text-label-sm text-(--text-muted)">--bg-surface</span>
     <Skeleton kind="shape" width="100%" height="16px" />
     <Skeleton kind="shape" width="60%" height="16px" />
   </div>
-  <div class="flex flex-col gap-[var(--spacing-sm)] rounded-[var(--shape-card)] bg-[var(--bg-surface-raised)] p-[var(--spacing-md)]">
-    <span class="text-label-sm text-[var(--text-muted)]">--bg-surface-raised</span>
+  <div class="flex flex-col gap-(--spacing-sm) rounded-(--shape-card) bg-(--bg-surface-raised) p-(--spacing-md)">
+    <span class="text-label-sm text-(--text-muted)">--bg-surface-raised</span>
     <Skeleton kind="shape" width="100%" height="16px" />
     <Skeleton kind="shape" width="60%" height="16px" />
   </div>
-  <div class="flex flex-col gap-[var(--spacing-sm)] rounded-[var(--shape-card)] bg-[var(--bg-surface-overlay)] p-[var(--spacing-md)]">
-    <span class="text-label-sm text-[var(--text-muted)]">--bg-surface-overlay</span>
+  <div class="flex flex-col gap-(--spacing-sm) rounded-(--shape-card) bg-(--bg-surface-overlay) p-(--spacing-md)">
+    <span class="text-label-sm text-(--text-muted)">--bg-surface-overlay</span>
     <Skeleton kind="shape" width="100%" height="16px" />
     <Skeleton kind="shape" width="60%" height="16px" />
   </div>
diff --git a/apps/storybook/src/stories/components/feedback/status-indicator/StatusIndicator.stories.js b/apps/storybook/src/stories/components/feedback/status-indicator/StatusIndicator.stories.js
index 6f1fc01a7..bfbe0e90e 100644
--- a/apps/storybook/src/stories/components/feedback/status-indicator/StatusIndicator.stories.js
+++ b/apps/storybook/src/stories/components/feedback/status-indicator/StatusIndicator.stories.js
@@ -90,7 +90,7 @@ export const Default = {
   }
 }
 
-const STATUS_TEMPLATE = `<div class="flex flex-wrap items-center gap-[var(--spacing-3)]">
+const STATUS_TEMPLATE = `<div class="flex flex-wrap items-center gap-(--spacing-3)">
   <StatusIndicator severity="success" label="Status" />
   <StatusIndicator severity="info" label="Status" />
   <StatusIndicator severity="neutral" label="Status" />
diff --git a/apps/storybook/src/stories/components/inputs/checkbox/Checkbox.stories.js b/apps/storybook/src/stories/components/inputs/checkbox/Checkbox.stories.js
index c8f1ff8ce..bc7197686 100644
--- a/apps/storybook/src/stories/components/inputs/checkbox/Checkbox.stories.js
+++ b/apps/storybook/src/stories/components/inputs/checkbox/Checkbox.stories.js
@@ -172,7 +172,7 @@ const DISABLED_SCRIPT = [
   'const checked = ref(true)',
   'const unchecked = ref(false)'
 ]
-const DISABLED_TEMPLATE = `<div class="flex items-center gap-[var(--spacing-4)]">
+const DISABLED_TEMPLATE = `<div class="flex items-center gap-(--spacing-4)">
   <Checkbox v-model="checked" binary disabled input-id="webkit-checkbox-disabled-on" aria-label="Disabled checked" />
   <Checkbox v-model="unchecked" binary disabled input-id="webkit-checkbox-disabled-off" aria-label="Disabled unchecked" />
 </div>`
diff --git a/apps/storybook/src/stories/components/inputs/field-switch/FieldSwitch.stories.js b/apps/storybook/src/stories/components/inputs/field-switch/FieldSwitch.stories.js
index 64eaee18b..ffdce62a6 100644
--- a/apps/storybook/src/stories/components/inputs/field-switch/FieldSwitch.stories.js
+++ b/apps/storybook/src/stories/components/inputs/field-switch/FieldSwitch.stories.js
@@ -115,7 +115,7 @@ export const Default = {
   }
 }
 
-const STATES_TEMPLATE = `<div class="flex max-w-xs flex-col gap-[var(--spacing-3)]">
+const STATES_TEMPLATE = `<div class="flex max-w-xs flex-col gap-(--spacing-3)">
   <FieldSwitch v-model="off" label="Switch label" description="Switch description" />
   <FieldSwitch v-model="on" label="Switch label" description="Switch description" />
 </div>`
diff --git a/apps/storybook/src/stories/components/inputs/input-group/InputGroup.stories.js b/apps/storybook/src/stories/components/inputs/input-group/InputGroup.stories.js
index ec3f3c224..85516d64b 100644
--- a/apps/storybook/src/stories/components/inputs/input-group/InputGroup.stories.js
+++ b/apps/storybook/src/stories/components/inputs/input-group/InputGroup.stories.js
@@ -12,7 +12,7 @@ const IMPORTS = [
 ]
 
 const MIDDLE_INPUT =
-  '<input placeholder="domain" class="flex-1 min-w-0 h-full bg-[var(--bg-surface)] border-0 outline-none focus:ring-0 px-[var(--spacing-md)] text-label-sm text-[var(--text-default)] placeholder:text-[var(--text-muted)]" />'
+  '<input placeholder="domain" class="flex-1 min-w-0 h-full bg-(--bg-surface) border-0 outline-none focus:ring-0 px-(--spacing-md) text-label-sm text-(--text-default) placeholder:text-(--text-muted)" />'
 
 // Runtime templates must use the FLAT sub-component name (<InputGroupAddon>) because
 // Vue's runtime template compiler can't reliably resolve dot-notation. The "Show code"
diff --git a/apps/storybook/src/stories/components/inputs/input-number/InputNumber.stories.js b/apps/storybook/src/stories/components/inputs/input-number/InputNumber.stories.js
index 6da2848c5..6b2066673 100644
--- a/apps/storybook/src/stories/components/inputs/input-number/InputNumber.stories.js
+++ b/apps/storybook/src/stories/components/inputs/input-number/InputNumber.stories.js
@@ -180,7 +180,7 @@ const SIZES_SCRIPT = [
   'const medium = ref(10)',
   'const large = ref(100)'
 ]
-const SIZES_MARKUP = `<div class="flex w-[20rem] flex-col gap-[var(--spacing-md)]">
+const SIZES_MARKUP = `<div class="flex w-[20rem] flex-col gap-(--spacing-md)">
   <InputNumber v-model="small" size="small" :min="0" :max="9" :step="1" />
   <InputNumber v-model="medium" size="medium" :min="0" :max="99" :step="5" />
   <InputNumber v-model="large" size="large" :min="0" :max="1000" :step="50" />
@@ -198,7 +198,7 @@ export const Sizes = {
       return { small, medium, large, log }
     },
     template: `
-      <div class="flex w-[20rem] flex-col gap-[var(--spacing-md)]">
+      <div class="flex w-[20rem] flex-col gap-(--spacing-md)">
         <InputNumber v-model="small" size="small" :min="0" :max="9" :step="1" @update:model-value="log" />
         <InputNumber v-model="medium" size="medium" :min="0" :max="99" :step="5" @update:model-value="log" />
         <InputNumber v-model="large" size="large" :min="0" :max="1000" :step="50" @update:model-value="log" />
diff --git a/apps/storybook/src/stories/components/inputs/radio-button/RadioButton.stories.js b/apps/storybook/src/stories/components/inputs/radio-button/RadioButton.stories.js
index 4c63d7368..d74d3e05e 100644
--- a/apps/storybook/src/stories/components/inputs/radio-button/RadioButton.stories.js
+++ b/apps/storybook/src/stories/components/inputs/radio-button/RadioButton.stories.js
@@ -134,7 +134,7 @@ export const Default = {
 }
 
 const DISABLED_SCRIPT = [IMPORT, "import { ref } from 'vue'", '', "const selected = ref('a')"]
-const DISABLED_TEMPLATE = `<fieldset class="flex items-center gap-[var(--spacing-4)] border-0 p-0 m-0">
+const DISABLED_TEMPLATE = `<fieldset class="flex items-center gap-(--spacing-4) border-0 p-0 m-0">
   <RadioButton
     v-model="selected"
     name="webkit-radio-disabled"
diff --git a/apps/storybook/src/stories/components/inputs/switch/Switch.stories.js b/apps/storybook/src/stories/components/inputs/switch/Switch.stories.js
index ded5f9992..8ec0ea3da 100644
--- a/apps/storybook/src/stories/components/inputs/switch/Switch.stories.js
+++ b/apps/storybook/src/stories/components/inputs/switch/Switch.stories.js
@@ -114,7 +114,7 @@ const TYPES_SCRIPT = [
   'const privacyOn = ref(true)'
 ]
 
-const TYPES_TEMPLATE = `<div class="flex flex-wrap items-center gap-[var(--spacing-4)]">
+const TYPES_TEMPLATE = `<div class="flex flex-wrap items-center gap-(--spacing-4)">
   <Switch v-model="defaultOff" kind="default" aria-label="Default off" />
   <Switch v-model="defaultOn" kind="default" aria-label="Default on" />
   <Switch v-model="privacyOff" kind="privacy" aria-label="Privacy off" />
diff --git a/apps/storybook/src/stories/components/inputs/textarea/Textarea.stories.js b/apps/storybook/src/stories/components/inputs/textarea/Textarea.stories.js
index 8113c5c09..1adb15380 100644
--- a/apps/storybook/src/stories/components/inputs/textarea/Textarea.stories.js
+++ b/apps/storybook/src/stories/components/inputs/textarea/Textarea.stories.js
@@ -184,7 +184,7 @@ export const Required = {
   }
 }
 
-const RESIZABLE_MARKUP = `<div class="flex flex-col gap-[var(--spacing-md)]">
+const RESIZABLE_MARKUP = `<div class="flex flex-col gap-(--spacing-md)">
   <Textarea v-model="value" placeholder="resizable=vertical (default)" resizable="vertical" />
   <Textarea v-model="value" placeholder="resizable=horizontal" resizable="horizontal" />
   <Textarea v-model="value" placeholder="resizable=both" resizable="both" />
diff --git a/apps/storybook/src/stories/components/layout/scroll-area/ScrollArea.stories.js b/apps/storybook/src/stories/components/layout/scroll-area/ScrollArea.stories.js
index b35be5696..335f7da1e 100644
--- a/apps/storybook/src/stories/components/layout/scroll-area/ScrollArea.stories.js
+++ b/apps/storybook/src/stories/components/layout/scroll-area/ScrollArea.stories.js
@@ -73,7 +73,7 @@ const Template = (args) => ({
   template: `
     <ScrollArea
       v-bind="args"
-      class="h-[200px] max-w-[var(--container-md)] rounded-[var(--shape-elements)] border border-[var(--border-default)] p-[var(--spacing-4)] text-body-sm text-[var(--text-default)]"
+      class="h-[200px] max-w-(--container-md) rounded-(--shape-elements) border border-(--border-default) p-(--spacing-4) text-body-sm text-(--text-default)"
     >
       {{ longCopy }}
     </ScrollArea>
@@ -83,7 +83,7 @@ const Template = (args) => ({
 const DEFAULT_MARKUP = `<ScrollArea
   orientation="vertical"
   aria-label="Scrollable content"
-  class="h-[200px] max-w-[var(--container-md)] rounded-[var(--shape-elements)] border border-[var(--border-default)] p-[var(--spacing-4)] text-body-sm text-[var(--text-default)]"
+  class="h-[200px] max-w-(--container-md) rounded-(--shape-elements) border border-(--border-default) p-(--spacing-4) text-body-sm text-(--text-default)"
 >
   ${longCopy}
 </ScrollArea>`
@@ -101,25 +101,25 @@ export const Default = {
   }
 }
 
-const ORIENTATIONS_TEMPLATE = `<div class="flex flex-wrap items-start gap-[var(--spacing-6)]">
+const ORIENTATIONS_TEMPLATE = `<div class="flex flex-wrap items-start gap-(--spacing-6)">
   <ScrollArea
     orientation="vertical"
     aria-label="Vertical scroll"
-    class="h-[160px] w-[240px] rounded-[var(--shape-elements)] border border-[var(--border-default)] p-[var(--spacing-3)] text-body-sm text-[var(--text-default)]"
+    class="h-[160px] w-[240px] rounded-(--shape-elements) border border-(--border-default) p-(--spacing-3) text-body-sm text-(--text-default)"
   >
     <div class="h-[320px]">Tall content that scrolls along the vertical axis.</div>
   </ScrollArea>
   <ScrollArea
     orientation="horizontal"
     aria-label="Horizontal scroll"
-    class="w-[240px] rounded-[var(--shape-elements)] border border-[var(--border-default)] p-[var(--spacing-3)] text-body-sm text-[var(--text-default)]"
+    class="w-[240px] rounded-(--shape-elements) border border-(--border-default) p-(--spacing-3) text-body-sm text-(--text-default)"
   >
     <p class="m-0 w-max whitespace-nowrap">This line is intentionally wider than the container so horizontal scrolling is required.</p>
   </ScrollArea>
   <ScrollArea
     orientation="both"
     aria-label="Two-axis scroll"
-    class="h-[160px] w-[240px] rounded-[var(--shape-elements)] border border-[var(--border-default)] p-[var(--spacing-3)] text-body-sm text-[var(--text-default)]"
+    class="h-[160px] w-[240px] rounded-(--shape-elements) border border-(--border-default) p-(--spacing-3) text-body-sm text-(--text-default)"
   >
     <div class="h-[320px] w-[480px]">Tall and wide content for two-axis scrolling.</div>
   </ScrollArea>
diff --git a/apps/storybook/src/stories/components/layout/sidebar/Sidebar.stories.js b/apps/storybook/src/stories/components/layout/sidebar/Sidebar.stories.js
index c2a1af567..e08e3a556 100644
--- a/apps/storybook/src/stories/components/layout/sidebar/Sidebar.stories.js
+++ b/apps/storybook/src/stories/components/layout/sidebar/Sidebar.stories.js
@@ -61,15 +61,15 @@ const FOOTER_SLOT = `<template #footer>
         <Dropdown.Trigger class="block w-full">
           <button
             type="button"
-            class="flex w-full items-center gap-[var(--spacing-sm)] rounded-[var(--shape-elements)] border border-[var(--border-muted)] bg-[var(--bg-canvas)] px-[var(--spacing-sm)] py-[var(--spacing-xs)] text-left transition-colors hover:bg-[var(--bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)]"
+            class="flex w-full items-center gap-(--spacing-sm) rounded-(--shape-elements) border border-(--border-muted) bg-(--bg-canvas) px-(--spacing-sm) py-(--spacing-xs) text-left transition-colors hover:bg-(--bg-hover) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-surface)"
             aria-label="Open profile menu"
           >
             <Avatar kind="square" size="medium" src="${sampleImage}" alt="Rafael Umman" />
             <span class="flex min-w-0 flex-1 flex-col justify-center">
-              <span class="truncate text-label-sm text-[var(--text-default)]">Rafael Umman</span>
-              <span class="truncate text-label-sm text-[var(--text-muted)]">rafael.umman@example.com</span>
+              <span class="truncate text-label-sm text-(--text-default)">Rafael Umman</span>
+              <span class="truncate text-label-sm text-(--text-muted)">rafael.umman@example.com</span>
             </span>
-            <i class="pi pi-sort-alt text-[var(--text-muted)]" aria-hidden="true" />
+            <i class="pi pi-sort-alt text-(--text-muted)" aria-hidden="true" />
           </button>
         </Dropdown.Trigger>
         <Dropdown.Group>
diff --git a/apps/storybook/src/stories/components/navigation/dropdown/Dropdown.stories.js b/apps/storybook/src/stories/components/navigation/dropdown/Dropdown.stories.js
index 9c2450c6c..06ef7ca26 100644
--- a/apps/storybook/src/stories/components/navigation/dropdown/Dropdown.stories.js
+++ b/apps/storybook/src/stories/components/navigation/dropdown/Dropdown.stories.js
@@ -242,7 +242,7 @@ export const States = {
   }
 }
 
-const PLACEMENTS_TEMPLATE = `<div class="grid grid-cols-2 gap-[var(--spacing-xl)] place-items-center min-h-[24rem]">
+const PLACEMENTS_TEMPLATE = `<div class="grid grid-cols-2 gap-(--spacing-xl) place-items-center min-h-[24rem]">
   <Dropdown placement="bottom-start">
     <DropdownTrigger>
       <Button kind="outlined" label="bottom-start" />
@@ -299,13 +299,13 @@ export const Placements = {
   }
 }
 
-const AUTO_PLACEMENT_TEMPLATE = `<div class="relative h-[28rem] w-full border border-dashed border-[var(--border-muted)]">
-  <p class="absolute top-[var(--spacing-md)] left-1/2 -translate-x-1/2 text-body-sm text-[var(--text-muted)] text-center max-w-md">
+const AUTO_PLACEMENT_TEMPLATE = `<div class="relative h-[28rem] w-full border border-dashed border-(--border-muted)">
+  <p class="absolute top-(--spacing-md) left-1/2 -translate-x-1/2 text-body-sm text-(--text-muted) text-center max-w-md">
     All four triggers use <code>placement="auto"</code>.<br />
     Each panel resolves to the best-fitting corner based on its position in the viewport.
   </p>
 
-  <div class="absolute top-[var(--spacing-md)] left-[var(--spacing-md)]">
+  <div class="absolute top-(--spacing-md) left-(--spacing-md)">
     <Dropdown placement="auto">
       <DropdownTrigger>
         <Button kind="outlined" label="top-left trigger" />
@@ -317,7 +317,7 @@ const AUTO_PLACEMENT_TEMPLATE = `<div class="relative h-[28rem] w-full border bo
     </Dropdown>
   </div>
 
-  <div class="absolute top-[var(--spacing-md)] right-[var(--spacing-md)]">
+  <div class="absolute top-(--spacing-md) right-(--spacing-md)">
     <Dropdown placement="auto">
       <DropdownTrigger>
         <Button kind="outlined" label="top-right trigger" />
@@ -329,7 +329,7 @@ const AUTO_PLACEMENT_TEMPLATE = `<div class="relative h-[28rem] w-full border bo
     </Dropdown>
   </div>
 
-  <div class="absolute bottom-[var(--spacing-md)] left-[var(--spacing-md)]">
+  <div class="absolute bottom-(--spacing-md) left-(--spacing-md)">
     <Dropdown placement="auto">
       <DropdownTrigger>
         <Button kind="outlined" label="bottom-left trigger" />
@@ -341,7 +341,7 @@ const AUTO_PLACEMENT_TEMPLATE = `<div class="relative h-[28rem] w-full border bo
     </Dropdown>
   </div>
 
-  <div class="absolute bottom-[var(--spacing-md)] right-[var(--spacing-md)]">
+  <div class="absolute bottom-(--spacing-md) right-(--spacing-md)">
     <Dropdown placement="auto">
       <DropdownTrigger>
         <Button kind="outlined" label="bottom-right trigger" />
@@ -417,7 +417,7 @@ const WITH_TOP_AND_BOTTOM_SLOTS_TEMPLATE = `<Dropdown :open="true">
   </DropdownTrigger>
 
   <template #top>
-    <div class="p-[var(--spacing-xxs)]">
+    <div class="p-(--spacing-xxs)">
       <InputText placeholder="Search options…" size="small" />
     </div>
   </template>
@@ -429,7 +429,7 @@ const WITH_TOP_AND_BOTTOM_SLOTS_TEMPLATE = `<Dropdown :open="true">
   </DropdownGroup>
 
   <template #bottom>
-    <div class="flex justify-end p-[var(--spacing-xxs)]">
+    <div class="flex justify-end p-(--spacing-xxs)">
       <Button kind="text" size="small" label="View all" />
     </div>
   </template>
@@ -463,7 +463,7 @@ const GROUPS_WITH_TOP_AND_BOTTOM_SLOTS_TEMPLATE = `<Dropdown :open="true">
 
   <DropdownGroup label="Account">
     <template #top>
-      <span class="text-label-sm text-[var(--text-muted)]">Signed in as ib@azion.com</span>
+      <span class="text-label-sm text-(--text-muted)">Signed in as ib@azion.com</span>
     </template>
 
     <DropdownOption value="profile" label="Profile" command="⌘P" />
@@ -476,7 +476,7 @@ const GROUPS_WITH_TOP_AND_BOTTOM_SLOTS_TEMPLATE = `<Dropdown :open="true">
 
   <DropdownGroup label="Workspace">
     <template #top>
-      <span class="text-label-sm text-[var(--text-muted)]">Azion · 12 members</span>
+      <span class="text-label-sm text-(--text-muted)">Azion · 12 members</span>
     </template>
 
     <DropdownOption value="invite" label="Invite members" />
@@ -509,7 +509,7 @@ export const GroupsWithTopAndBottomSlots = {
   }
 }
 
-const CUSTOM_TRIGGERS_TEMPLATE = `<div class="flex flex-wrap gap-[var(--spacing-lg)] items-center">
+const CUSTOM_TRIGGERS_TEMPLATE = `<div class="flex flex-wrap gap-(--spacing-lg) items-center">
   <Dropdown>
     <DropdownTrigger>
       <IconButton icon="pi pi-ellipsis-h" aria-label="More actions" />
diff --git a/apps/storybook/src/stories/components/navigation/navigation-menu/NavigationMenu.stories.js b/apps/storybook/src/stories/components/navigation/navigation-menu/NavigationMenu.stories.js
index c578262e0..dea2f3c6d 100644
--- a/apps/storybook/src/stories/components/navigation/navigation-menu/NavigationMenu.stories.js
+++ b/apps/storybook/src/stories/components/navigation/navigation-menu/NavigationMenu.stories.js
@@ -153,11 +153,11 @@ const DEMO_COMPONENTS = { NavigationMenu, Button, ...subcomponents }
 // lookup, so the canvas registers each sub-component under a flat binding and
 // uses flat tags (`<NavigationMenuList>`); `v-bind="args"` lets Controls drive
 // the root and auto-wires the declared events into the Actions panel.
-const DEMO_TEMPLATE = `<div class="min-h-screen bg-[var(--bg-canvas)] text-[var(--text-default)]">
-  <header class="border-b border-solid border-[var(--border-default)]">
+const DEMO_TEMPLATE = `<div class="min-h-screen bg-(--bg-canvas) text-(--text-default)">
+  <header class="border-b border-solid border-(--border-default)">
     <NavigationMenu
       v-bind="args"
-      class="mx-auto flex w-full max-w-[var(--container-xl)] items-center gap-[var(--spacing-6)] px-[var(--spacing-6)] py-[var(--spacing-4)]"
+      class="mx-auto flex w-full max-w-(--container-xl) items-center gap-(--spacing-6) px-(--spacing-6) py-(--spacing-4)"
       data-testid="navigation-menu-demo"
     >
       <NavigationMenuList>
@@ -171,7 +171,7 @@ const DEMO_TEMPLATE = `<div class="min-h-screen bg-[var(--bg-canvas)] text-[var(
             </NavigationMenuIcon>
           </NavigationMenuTrigger>
           <NavigationMenuContent class="w-full p-0">
-            <div class="grid grid-cols-2 gap-[var(--spacing-6)] p-[var(--spacing-2)]">
+            <div class="grid grid-cols-2 gap-(--spacing-6) p-(--spacing-2)">
               <NavigationMenuList label="Por Caso de Uso">
                 <NavigationMenuItem
                   layout="entry"
@@ -212,7 +212,7 @@ const DEMO_TEMPLATE = `<div class="min-h-screen bg-[var(--bg-canvas)] text-[var(
             </NavigationMenuIcon>
           </NavigationMenuTrigger>
           <NavigationMenuContent class="w-full p-0">
-            <div class="grid grid-cols-2 gap-[var(--spacing-6)] p-[var(--spacing-2)]">
+            <div class="grid grid-cols-2 gap-(--spacing-6) p-(--spacing-2)">
               <NavigationMenuList label="Construir">
                 <NavigationMenuItem
                   layout="entry"
@@ -248,7 +248,7 @@ const DEMO_TEMPLATE = `<div class="min-h-screen bg-[var(--bg-canvas)] text-[var(
         </NavigationMenuItem>
       </NavigationMenuList>
 
-      <div class="ml-auto flex items-center gap-[var(--spacing-2)]">
+      <div class="ml-auto flex items-center gap-(--spacing-2)">
         <NavigationMenuTrigger href="https://www.azion.com/pt-br/contato-vendas/">
           Contato
         </NavigationMenuTrigger>
@@ -266,16 +266,16 @@ const DEMO_TEMPLATE = `<div class="min-h-screen bg-[var(--bg-canvas)] text-[var(
   </header>
 
   <div
-    class="mx-auto flex max-w-2xl flex-col items-center px-[var(--spacing-6)] py-[var(--spacing-24)] text-center"
+    class="mx-auto flex max-w-2xl flex-col items-center px-(--spacing-6) py-(--spacing-24) text-center"
     aria-hidden="true"
   >
-    <h1 class="text-heading-lg text-[var(--text-default)]">
+    <h1 class="text-heading-lg text-(--text-default)">
       Navigation menu demo
     </h1>
-    <p class="mt-[var(--spacing-6)] text-body-sm text-[var(--text-muted)]">
+    <p class="mt-(--spacing-6) text-body-sm text-(--text-muted)">
       Hover top-level items to open panels. Keyboard: arrows, Enter, Escape.
     </p>
-    <div class="mt-[var(--spacing-10)] flex flex-wrap justify-center gap-[var(--spacing-3)]">
+    <div class="mt-(--spacing-10) flex flex-wrap justify-center gap-(--spacing-3)">
       <Button label="Primary action" />
       <Button label="Secondary" kind="secondary" />
     </div>
diff --git a/apps/storybook/src/stories/components/navigation/tab-view/TabView.stories.js b/apps/storybook/src/stories/components/navigation/tab-view/TabView.stories.js
index 7c0b865ee..7407c9cc1 100644
--- a/apps/storybook/src/stories/components/navigation/tab-view/TabView.stories.js
+++ b/apps/storybook/src/stories/components/navigation/tab-view/TabView.stories.js
@@ -99,24 +99,24 @@ const DEFAULT_TEMPLATE = `
       <TabView.Item value="tab-2" label="Tab Item" />
       <TabView.Item value="tab-3" label="Tab Item" />
     </TabView.List>
-    <TabView.Content class="mt-[var(--spacing-4)]">
+    <TabView.Content class="mt-(--spacing-4)">
       <TabView.Panel
         value="tab-1"
-        class="rounded-[var(--shape-card)] border border-[var(--border-default)] p-[var(--spacing-4)]"
+        class="rounded-(--shape-card) border border-(--border-default) p-(--spacing-4)"
       >
-        <p class="text-body-sm text-[var(--text-default)]">Content for tab 1</p>
+        <p class="text-body-sm text-(--text-default)">Content for tab 1</p>
       </TabView.Panel>
       <TabView.Panel
         value="tab-2"
-        class="rounded-[var(--shape-card)] border border-[var(--border-default)] p-[var(--spacing-4)]"
+        class="rounded-(--shape-card) border border-(--border-default) p-(--spacing-4)"
       >
-        <p class="text-body-sm text-[var(--text-default)]">Content for tab 2</p>
+        <p class="text-body-sm text-(--text-default)">Content for tab 2</p>
       </TabView.Panel>
       <TabView.Panel
         value="tab-3"
-        class="rounded-[var(--shape-card)] border border-[var(--border-default)] p-[var(--spacing-4)]"
+        class="rounded-(--shape-card) border border-(--border-default) p-(--spacing-4)"
       >
-        <p class="text-body-sm text-[var(--text-default)]">Content for tab 3</p>
+        <p class="text-body-sm text-(--text-default)">Content for tab 3</p>
       </TabView.Panel>
     </TabView.Content>
   </TabView.Root>
@@ -149,24 +149,24 @@ const DEFAULT_SOURCE = `<TabView.Root v-model:value="active" class="w-full max-w
     <TabView.Item value="tab-2" label="Tab Item" />
     <TabView.Item value="tab-3" label="Tab Item" />
   </TabView.List>
-  <TabView.Content class="mt-[var(--spacing-4)]">
+  <TabView.Content class="mt-(--spacing-4)">
     <TabView.Panel
       value="tab-1"
-      class="rounded-[var(--shape-card)] border border-[var(--border-default)] p-[var(--spacing-4)]"
+      class="rounded-(--shape-card) border border-(--border-default) p-(--spacing-4)"
     >
-      <p class="text-body-sm text-[var(--text-default)]">Content for tab 1</p>
+      <p class="text-body-sm text-(--text-default)">Content for tab 1</p>
     </TabView.Panel>
     <TabView.Panel
       value="tab-2"
-      class="rounded-[var(--shape-card)] border border-[var(--border-default)] p-[var(--spacing-4)]"
+      class="rounded-(--shape-card) border border-(--border-default) p-(--spacing-4)"
     >
-      <p class="text-body-sm text-[var(--text-default)]">Content for tab 2</p>
+      <p class="text-body-sm text-(--text-default)">Content for tab 2</p>
     </TabView.Panel>
     <TabView.Panel
       value="tab-3"
-      class="rounded-[var(--shape-card)] border border-[var(--border-default)] p-[var(--spacing-4)]"
+      class="rounded-(--shape-card) border border-(--border-default) p-(--spacing-4)"
     >
-      <p class="text-body-sm text-[var(--text-default)]">Content for tab 3</p>
+      <p class="text-body-sm text-(--text-default)">Content for tab 3</p>
     </TabView.Panel>
   </TabView.Content>
 </TabView.Root>`
@@ -211,14 +211,14 @@ const SCROLLABLE_TEMPLATE = `
         :label="tab.label"
       />
     </TabView.List>
-    <TabView.Content class="mt-[var(--spacing-4)]">
+    <TabView.Content class="mt-(--spacing-4)">
       <TabView.Panel
         v-for="tab in tabs"
         :key="tab.value"
         :value="tab.value"
-        class="rounded-[var(--shape-card)] border border-[var(--border-default)] p-[var(--spacing-4)]"
+        class="rounded-(--shape-card) border border-(--border-default) p-(--spacing-4)"
       >
-        <p class="text-body-sm text-[var(--text-default)]">Content for {{ tab.label }}</p>
+        <p class="text-body-sm text-(--text-default)">Content for {{ tab.label }}</p>
       </TabView.Panel>
     </TabView.Content>
   </TabView.Root>
@@ -233,14 +233,14 @@ const SCROLLABLE_SOURCE = `<TabView.Root v-model:value="active" class="w-full ma
       :label="tab.label"
     />
   </TabView.List>
-  <TabView.Content class="mt-[var(--spacing-4)]">
+  <TabView.Content class="mt-(--spacing-4)">
     <TabView.Panel
       v-for="tab in tabs"
       :key="tab.value"
       :value="tab.value"
-      class="rounded-[var(--shape-card)] border border-[var(--border-default)] p-[var(--spacing-4)]"
+      class="rounded-(--shape-card) border border-(--border-default) p-(--spacing-4)"
     >
-      <p class="text-body-sm text-[var(--text-default)]">Content for {{ tab.label }}</p>
+      <p class="text-body-sm text-(--text-default)">Content for {{ tab.label }}</p>
     </TabView.Panel>
   </TabView.Content>
 </TabView.Root>`
diff --git a/apps/storybook/src/stories/components/overlay/drawer/Drawer.stories.js b/apps/storybook/src/stories/components/overlay/drawer/Drawer.stories.js
index 5d7a3f96a..fcbee431b 100644
--- a/apps/storybook/src/stories/components/overlay/drawer/Drawer.stories.js
+++ b/apps/storybook/src/stories/components/overlay/drawer/Drawer.stories.js
@@ -248,7 +248,7 @@ export const Default = {
   }
 }
 
-const SIZES_TEMPLATE = `<div class="flex flex-wrap items-center justify-center gap-[var(--spacing-4)]">
+const SIZES_TEMPLATE = `<div class="flex flex-wrap items-center justify-center gap-(--spacing-4)">
   <Drawer
     v-for="size in sizes"
     :key="size"
@@ -358,7 +358,7 @@ const SCROLL_TEMPLATE = `<Drawer v-model:open="open" dismissible side="right" si
         <DrawerTitle>Scrollable drawer</DrawerTitle>
         <DrawerClose />
       </PanelHeader>
-      <PanelContent class="flex flex-col gap-[var(--spacing-4)]">
+      <PanelContent class="flex flex-col gap-(--spacing-4)">
         <DrawerDescription>
           Place long forms, lists, or settings inside PanelContent. Only the body scrolls inside
           ScrollArea while header and footer stay in the panel layout.
@@ -366,10 +366,10 @@ const SCROLL_TEMPLATE = `<Drawer v-model:open="open" dismissible side="right" si
         <section
           v-for="section in scrollSections"
           :key="section.title"
-          class="flex flex-col gap-[var(--spacing-2)] rounded-[var(--shape-elements)] border border-[length:var(--border-width-default)] border-[var(--border-muted)] p-[var(--spacing-4)]"
+          class="flex flex-col gap-(--spacing-2) rounded-(--shape-elements) border border-(length:--border-width-default) border-(--border-muted) p-(--spacing-4)"
         >
-          <h3 class="m-0 text-body-md text-[var(--text-default)]">{{ section.title }}</h3>
-          <p class="m-0 text-body-sm text-[var(--text-muted)]">{{ section.body }}</p>
+          <h3 class="m-0 text-body-md text-(--text-default)">{{ section.title }}</h3>
+          <p class="m-0 text-body-sm text-(--text-muted)">{{ section.body }}</p>
         </section>
       </PanelContent>
       <PanelFooter class="flex-col md:flex-row md:justify-end">
diff --git a/apps/storybook/src/stories/components/overlay/popover/Popover.stories.js b/apps/storybook/src/stories/components/overlay/popover/Popover.stories.js
index 9f08e54c1..558a77b6d 100644
--- a/apps/storybook/src/stories/components/overlay/popover/Popover.stories.js
+++ b/apps/storybook/src/stories/components/overlay/popover/Popover.stories.js
@@ -152,7 +152,7 @@ const Template = (args) => ({
           <PopoverClose />
         </PopoverHeader>
 
-        <div class="p-[var(--spacing-md)] text-body-sm text-[var(--text-default)]">
+        <div class="p-(--spacing-md) text-body-sm text-(--text-default)">
           This content is rendered inside the popover panel.
         </div>
       </PopoverContent>
@@ -171,7 +171,7 @@ const DEFAULT_MARKUP = `<Popover>
       <PopoverClose />
     </PopoverHeader>
 
-    <div class="p-[var(--spacing-md)] text-body-sm text-[var(--text-default)]">
+    <div class="p-(--spacing-md) text-body-sm text-(--text-default)">
       This content is rendered inside the popover panel.
     </div>
   </PopoverContent>
@@ -191,7 +191,7 @@ export const Default = {
   }
 }
 
-const PLACEMENTS_TEMPLATE = `<div class="grid grid-cols-2 gap-[var(--spacing-xxl)] place-items-center min-h-[24rem] p-[var(--spacing-xxl)]">
+const PLACEMENTS_TEMPLATE = `<div class="grid grid-cols-2 gap-(--spacing-xxl) place-items-center min-h-[24rem] p-(--spacing-xxl)">
   <Popover placement="bottom-start">
     <PopoverTrigger>
       <Button kind="secondary" label="bottom-start" />
@@ -201,7 +201,7 @@ const PLACEMENTS_TEMPLATE = `<div class="grid grid-cols-2 gap-[var(--spacing-xxl
         <PopoverTitle>bottom-start</PopoverTitle>
         <PopoverClose />
       </PopoverHeader>
-      <div class="p-[var(--spacing-md)] text-body-sm text-[var(--text-default)]">Popover content.</div>
+      <div class="p-(--spacing-md) text-body-sm text-(--text-default)">Popover content.</div>
     </PopoverContent>
   </Popover>
 
@@ -214,7 +214,7 @@ const PLACEMENTS_TEMPLATE = `<div class="grid grid-cols-2 gap-[var(--spacing-xxl
         <PopoverTitle>bottom-end</PopoverTitle>
         <PopoverClose />
       </PopoverHeader>
-      <div class="p-[var(--spacing-md)] text-body-sm text-[var(--text-default)]">Popover content.</div>
+      <div class="p-(--spacing-md) text-body-sm text-(--text-default)">Popover content.</div>
     </PopoverContent>
   </Popover>
 
@@ -227,7 +227,7 @@ const PLACEMENTS_TEMPLATE = `<div class="grid grid-cols-2 gap-[var(--spacing-xxl
         <PopoverTitle>top-start</PopoverTitle>
         <PopoverClose />
       </PopoverHeader>
-      <div class="p-[var(--spacing-md)] text-body-sm text-[var(--text-default)]">Popover content.</div>
+      <div class="p-(--spacing-md) text-body-sm text-(--text-default)">Popover content.</div>
     </PopoverContent>
   </Popover>
 
@@ -240,7 +240,7 @@ const PLACEMENTS_TEMPLATE = `<div class="grid grid-cols-2 gap-[var(--spacing-xxl
         <PopoverTitle>top-end</PopoverTitle>
         <PopoverClose />
       </PopoverHeader>
-      <div class="p-[var(--spacing-md)] text-body-sm text-[var(--text-default)]">Popover content.</div>
+      <div class="p-(--spacing-md) text-body-sm text-(--text-default)">Popover content.</div>
     </PopoverContent>
   </Popover>
 </div>`
@@ -260,12 +260,12 @@ export const Placements = {
   }
 }
 
-const AUTO_PLACEMENT_TEMPLATE = `<div class="relative h-[30rem] w-full border border-dashed border-[var(--border-muted)]">
-  <p class="absolute top-[var(--spacing-md)] left-1/2 -translate-x-1/2 text-body-sm text-[var(--text-muted)] text-center max-w-md">
+const AUTO_PLACEMENT_TEMPLATE = `<div class="relative h-[30rem] w-full border border-dashed border-(--border-muted)">
+  <p class="absolute top-(--spacing-md) left-1/2 -translate-x-1/2 text-body-sm text-(--text-muted) text-center max-w-md">
     All triggers use placement="auto". Each panel resolves to the best-fitting corner based on its position in the viewport.
   </p>
 
-  <div class="absolute top-[var(--spacing-md)] left-[var(--spacing-md)]">
+  <div class="absolute top-(--spacing-md) left-(--spacing-md)">
     <Popover :open="true" placement="auto">
       <PopoverTrigger>
         <Button kind="secondary" label="top-left" />
@@ -275,12 +275,12 @@ const AUTO_PLACEMENT_TEMPLATE = `<div class="relative h-[30rem] w-full border bo
           <PopoverTitle>Popover</PopoverTitle>
           <PopoverClose />
         </PopoverHeader>
-        <div class="p-[var(--spacing-md)] text-body-sm text-[var(--text-default)]">Popover content.</div>
+        <div class="p-(--spacing-md) text-body-sm text-(--text-default)">Popover content.</div>
       </PopoverContent>
     </Popover>
   </div>
 
-  <div class="absolute top-[var(--spacing-md)] right-[var(--spacing-md)]">
+  <div class="absolute top-(--spacing-md) right-(--spacing-md)">
     <Popover :open="true" placement="auto">
       <PopoverTrigger>
         <Button kind="secondary" label="top-right" />
@@ -290,12 +290,12 @@ const AUTO_PLACEMENT_TEMPLATE = `<div class="relative h-[30rem] w-full border bo
           <PopoverTitle>Popover</PopoverTitle>
           <PopoverClose />
         </PopoverHeader>
-        <div class="p-[var(--spacing-md)] text-body-sm text-[var(--text-default)]">Popover content.</div>
+        <div class="p-(--spacing-md) text-body-sm text-(--text-default)">Popover content.</div>
       </PopoverContent>
     </Popover>
   </div>
 
-  <div class="absolute bottom-[var(--spacing-md)] left-[var(--spacing-md)]">
+  <div class="absolute bottom-(--spacing-md) left-(--spacing-md)">
     <Popover :open="true" placement="auto">
       <PopoverTrigger>
         <Button kind="secondary" label="bottom-left" />
@@ -305,12 +305,12 @@ const AUTO_PLACEMENT_TEMPLATE = `<div class="relative h-[30rem] w-full border bo
           <PopoverTitle>Popover</PopoverTitle>
           <PopoverClose />
         </PopoverHeader>
-        <div class="p-[var(--spacing-md)] text-body-sm text-[var(--text-default)]">Popover content.</div>
+        <div class="p-(--spacing-md) text-body-sm text-(--text-default)">Popover content.</div>
       </PopoverContent>
     </Popover>
   </div>
 
-  <div class="absolute bottom-[var(--spacing-md)] right-[var(--spacing-md)]">
+  <div class="absolute bottom-(--spacing-md) right-(--spacing-md)">
     <Popover :open="true" placement="auto">
       <PopoverTrigger>
         <Button kind="secondary" label="bottom-right" />
@@ -320,7 +320,7 @@ const AUTO_PLACEMENT_TEMPLATE = `<div class="relative h-[30rem] w-full border bo
           <PopoverTitle>Popover</PopoverTitle>
           <PopoverClose />
         </PopoverHeader>
-        <div class="p-[var(--spacing-md)] text-body-sm text-[var(--text-default)]">Popover content.</div>
+        <div class="p-(--spacing-md) text-body-sm text-(--text-default)">Popover content.</div>
       </PopoverContent>
     </Popover>
   </div>
@@ -342,7 +342,7 @@ export const AutoPlacement = {
   }
 }
 
-const ANATOMY_TEMPLATE = `<div class="flex flex-wrap items-start gap-[var(--spacing-xxl)] p-[var(--spacing-xxl)] min-h-[22rem]">
+const ANATOMY_TEMPLATE = `<div class="flex flex-wrap items-start gap-(--spacing-xxl) p-(--spacing-xxl) min-h-[22rem]">
   <Popover placement="bottom-start">
     <PopoverTrigger>
       <Button kind="secondary" label="Full" />
@@ -353,7 +353,7 @@ const ANATOMY_TEMPLATE = `<div class="flex flex-wrap items-start gap-[var(--spac
         <PopoverDescription>A short description of the popover.</PopoverDescription>
         <PopoverClose />
       </PopoverHeader>
-      <div class="p-[var(--spacing-md)] text-body-sm text-[var(--text-default)]">Body content composed by the consumer.</div>
+      <div class="p-(--spacing-md) text-body-sm text-(--text-default)">Body content composed by the consumer.</div>
       <PopoverFooter>
         <Button kind="secondary" size="medium" label="Confirm" />
       </PopoverFooter>
@@ -369,7 +369,7 @@ const ANATOMY_TEMPLATE = `<div class="flex flex-wrap items-start gap-[var(--spac
         <PopoverTitle>Popover title</PopoverTitle>
         <PopoverClose />
       </PopoverHeader>
-      <div class="p-[var(--spacing-md)] text-body-sm text-[var(--text-default)]">Body content.</div>
+      <div class="p-(--spacing-md) text-body-sm text-(--text-default)">Body content.</div>
     </PopoverContent>
   </Popover>
 
@@ -378,7 +378,7 @@ const ANATOMY_TEMPLATE = `<div class="flex flex-wrap items-start gap-[var(--spac
       <Button kind="secondary" label="Body only" />
     </PopoverTrigger>
     <PopoverContent>
-      <div class="p-[var(--spacing-md)] text-body-sm text-[var(--text-default)]">Just body content — no header or footer.</div>
+      <div class="p-(--spacing-md) text-body-sm text-(--text-default)">Just body content — no header or footer.</div>
     </PopoverContent>
   </Popover>
 </div>`
@@ -399,7 +399,7 @@ export const Anatomy = {
   }
 }
 
-const WIDTHS_TEMPLATE = `<div class="flex items-center gap-[var(--spacing-xxl)] p-[var(--spacing-xxl)]">
+const WIDTHS_TEMPLATE = `<div class="flex items-center gap-(--spacing-xxl) p-(--spacing-xxl)">
   <Popover placement="bottom-start" width="small">
     <PopoverTrigger>
       <Button kind="secondary" label="small" />
@@ -409,7 +409,7 @@ const WIDTHS_TEMPLATE = `<div class="flex items-center gap-[var(--spacing-xxl)]
         <PopoverTitle>small</PopoverTitle>
         <PopoverClose />
       </PopoverHeader>
-      <div class="p-[var(--spacing-md)] text-body-sm text-[var(--text-default)]">Panel width is var(--container-xs) (348px).</div>
+      <div class="p-(--spacing-md) text-body-sm text-(--text-default)">Panel width is var(--container-xs) (348px).</div>
     </PopoverContent>
   </Popover>
 
@@ -422,7 +422,7 @@ const WIDTHS_TEMPLATE = `<div class="flex items-center gap-[var(--spacing-xxl)]
         <PopoverTitle>medium</PopoverTitle>
         <PopoverClose />
       </PopoverHeader>
-      <div class="p-[var(--spacing-md)] text-body-sm text-[var(--text-default)]">Panel width is var(--container-sm) (408px).</div>
+      <div class="p-(--spacing-md) text-body-sm text-(--text-default)">Panel width is var(--container-sm) (408px).</div>
     </PopoverContent>
   </Popover>
 
@@ -435,7 +435,7 @@ const WIDTHS_TEMPLATE = `<div class="flex items-center gap-[var(--spacing-xxl)]
         <PopoverTitle>large</PopoverTitle>
         <PopoverClose />
       </PopoverHeader>
-      <div class="p-[var(--spacing-md)] text-body-sm text-[var(--text-default)]">Panel width is var(--container-md) (472px).</div>
+      <div class="p-(--spacing-md) text-body-sm text-(--text-default)">Panel width is var(--container-md) (472px).</div>
     </PopoverContent>
   </Popover>
 </div>`
@@ -499,9 +499,9 @@ const FILTER_TEMPLATE = `<Popover v-model:open="open" :dismissible="false" width
       <PopoverClose />
     </PopoverHeader>
 
-    <div class="flex flex-col gap-[var(--spacing-xs)] p-[var(--spacing-md)]">
+    <div class="flex flex-col gap-(--spacing-xs) p-(--spacing-md)">
       <Label>New Filter</Label>
-      <div class="flex items-start gap-[var(--spacing-sm)]">
+      <div class="flex items-start gap-(--spacing-sm)">
         <div class="min-w-0 flex-1">
           <Select v-model="field" size="small" placeholder="Field">
             <SelectTrigger />
diff --git a/apps/storybook/src/stories/components/overlay/tooltip/Tooltip.stories.js b/apps/storybook/src/stories/components/overlay/tooltip/Tooltip.stories.js
index 8f33fc012..6e1cad7a0 100644
--- a/apps/storybook/src/stories/components/overlay/tooltip/Tooltip.stories.js
+++ b/apps/storybook/src/stories/components/overlay/tooltip/Tooltip.stories.js
@@ -148,7 +148,7 @@ export const Default = {
   }
 }
 
-const PLACEMENTS_TEMPLATE = `<div class="flex flex-wrap items-center justify-center gap-[var(--spacing-8)] p-[var(--spacing-8)]">
+const PLACEMENTS_TEMPLATE = `<div class="flex flex-wrap items-center justify-center gap-(--spacing-8) p-(--spacing-8)">
   <Tooltip text="top placement" placement="top">
     <IconButton icon="pi pi-arrow-up" aria-label="top placement" kind="outlined" size="medium" />
   </Tooltip>
@@ -178,31 +178,31 @@ export const Placements = {
   }
 }
 
-const AUTO_PLACEMENT_TEMPLATE = `<div class="relative h-[28rem] w-full border border-dashed border-[var(--border-muted)]">
-  <p class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-body-sm text-[var(--text-muted)] text-center max-w-md">
+const AUTO_PLACEMENT_TEMPLATE = `<div class="relative h-[28rem] w-full border border-dashed border-(--border-muted)">
+  <p class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-body-sm text-(--text-muted) text-center max-w-md">
     All four triggers use <code>placement="auto"</code>.<br />
     Each tooltip resolves to the side with the most available space.
   </p>
 
-  <div class="absolute top-[var(--spacing-md)] left-1/2 -translate-x-1/2">
+  <div class="absolute top-(--spacing-md) left-1/2 -translate-x-1/2">
     <Tooltip text="auto placement" placement="auto" :default-open="true">
       <IconButton icon="pi pi-arrow-up" aria-label="top-edge trigger" kind="outlined" size="medium" />
     </Tooltip>
   </div>
 
-  <div class="absolute bottom-[var(--spacing-md)] left-1/2 -translate-x-1/2">
+  <div class="absolute bottom-(--spacing-md) left-1/2 -translate-x-1/2">
     <Tooltip text="auto placement" placement="auto" :default-open="true">
       <IconButton icon="pi pi-arrow-down" aria-label="bottom-edge trigger" kind="outlined" size="medium" />
     </Tooltip>
   </div>
 
-  <div class="absolute left-[var(--spacing-md)] top-1/2 -translate-y-1/2">
+  <div class="absolute left-(--spacing-md) top-1/2 -translate-y-1/2">
     <Tooltip text="auto placement" placement="auto" :default-open="true">
       <IconButton icon="pi pi-arrow-left" aria-label="left-edge trigger" kind="outlined" size="medium" />
     </Tooltip>
   </div>
 
-  <div class="absolute right-[var(--spacing-md)] top-1/2 -translate-y-1/2">
+  <div class="absolute right-(--spacing-md) top-1/2 -translate-y-1/2">
     <Tooltip text="auto placement" placement="auto" :default-open="true">
       <IconButton icon="pi pi-arrow-right" aria-label="right-edge trigger" kind="outlined" size="medium" />
     </Tooltip>
diff --git a/apps/storybook/src/stories/foundations/Colors.stories.js b/apps/storybook/src/stories/foundations/Colors.stories.js
index ca78324bc..b35b79bb8 100644
--- a/apps/storybook/src/stories/foundations/Colors.stories.js
+++ b/apps/storybook/src/stories/foundations/Colors.stories.js
@@ -100,8 +100,8 @@ export const Overview = {
           Click a swatch value to copy it. Use semantic tokens in components and keep primitive shades for reference.
         </PageHeader>
 
-        <section class="mb-[var(--spacing-xxl)]">
-          <h2 class="m-0 mb-[var(--spacing-md)] text-heading-lg text-[var(--text-default)]">Primitives</h2>
+        <section class="mb-(--spacing-xxl)">
+          <h2 class="m-0 mb-(--spacing-md) text-heading-lg text-(--text-default)">Primitives</h2>
           <ColorPaletteSection
             v-for="section in shadePaletteSections"
             :key="section.id"
@@ -111,8 +111,8 @@ export const Overview = {
           />
         </section>
 
-        <section class="mb-[var(--spacing-xxl)]">
-          <h2 class="m-0 mb-[var(--spacing-md)] text-heading-lg text-[var(--text-default)]">Brand</h2>
+        <section class="mb-(--spacing-xxl)">
+          <h2 class="m-0 mb-(--spacing-md) text-heading-lg text-(--text-default)">Brand</h2>
           <ColorPaletteSection
             v-for="section in brandPaletteSections"
             :key="section.id"
diff --git a/apps/storybook/src/stories/foundations/GetStarted.mdx b/apps/storybook/src/stories/foundations/GetStarted.mdx
index 9be3d0111..1d6e74d18 100644
--- a/apps/storybook/src/stories/foundations/GetStarted.mdx
+++ b/apps/storybook/src/stories/foundations/GetStarted.mdx
@@ -58,7 +58,7 @@ import '@aziontech/icons' // the icon font
 ```
 
 Using Tailwind? The theme also ships a preset — `@aziontech/theme/tailwind-preset` — so
-the semantic utilities (`text-body-sm`, `bg-[var(--primary)]`, …) resolve in your build.
+the semantic utilities (`text-body-sm`, `bg-(--primary)`, …) resolve in your build.
 
 ## 3. Add your first component
 
diff --git a/apps/storybook/src/stories/foundations/Motion.stories.js b/apps/storybook/src/stories/foundations/Motion.stories.js
index d60da610c..4093ac8c3 100644
--- a/apps/storybook/src/stories/foundations/Motion.stories.js
+++ b/apps/storybook/src/stories/foundations/Motion.stories.js
@@ -16,11 +16,11 @@ const curveRows = Object.entries(curve).map(([name, value]) => ({ name: `ease-${
 // inset-inline-* (needs a positioned bar inside the track), slide-down reveals height
 // (needs inner content to measure), and highlight-fade paints a background tint meant
 // for text rows. Each gets a preview shape that actually shows the motion.
-const DEFAULT_PREVIEW_CLASS = 'h-8 w-8 rounded-[var(--shape-elements)] bg-[var(--primary)]'
+const DEFAULT_PREVIEW_CLASS = 'h-8 w-8 rounded-(--shape-elements) bg-(--primary)'
 
 const PREVIEW_OVERRIDES = {
   shimmer: {
-    class: 'h-8 w-20 rounded-[var(--shape-elements)]',
+    class: 'h-8 w-20 rounded-(--shape-elements)',
     style: {
       background:
         'linear-gradient(90deg, var(--bg-surface) 25%, var(--surface-hover) 50%, var(--bg-surface) 75%)',
@@ -28,20 +28,20 @@ const PREVIEW_OVERRIDES = {
     }
   },
   'slide-down': {
-    class: 'w-8 overflow-hidden rounded-[var(--shape-elements)] bg-[var(--primary)]',
+    class: 'w-8 overflow-hidden rounded-(--shape-elements) bg-(--primary)',
     style: { interpolateSize: 'allow-keywords' },
     inner: true
   },
   'highlight-fade': {
     class:
-      'rounded-[var(--shape-elements)] px-[var(--spacing-xs)] py-[var(--spacing-xxs)] text-body-sm text-[var(--text-default)]',
+      'rounded-(--shape-elements) px-(--spacing-xs) py-(--spacing-xxs) text-body-sm text-(--text-default)',
     text: 'Updated row'
   },
   'progress-indeterminate': {
-    class: 'absolute top-1/2 h-2 -translate-y-1/2 rounded-full bg-[var(--primary)]'
+    class: 'absolute top-1/2 h-2 -translate-y-1/2 rounded-full bg-(--primary)'
   },
   'progress-indeterminate-short': {
-    class: 'absolute top-1/2 h-2 -translate-y-1/2 rounded-full bg-[var(--primary)]'
+    class: 'absolute top-1/2 h-2 -translate-y-1/2 rounded-full bg-(--primary)'
   }
 }
 
@@ -113,15 +113,15 @@ export const Overview = {
           <code>motion-reduce:*</code> escape on the same class string.
         </PageHeader>
 
-        <section class="mb-[var(--spacing-xxl)]">
-          <h2 class="m-0 mb-[var(--spacing-md)] text-heading-lg text-[var(--text-default)]">Animations</h2>
-          <div class="flex flex-col gap-[var(--spacing-sm)]">
+        <section class="mb-(--spacing-xxl)">
+          <h2 class="m-0 mb-(--spacing-md) text-heading-lg text-(--text-default)">Animations</h2>
+          <div class="flex flex-col gap-(--spacing-sm)">
             <div
               v-for="row in animationRows"
               :key="row.id"
-              class="flex items-center gap-[var(--spacing-md)] rounded-[var(--shape-card)] border border-[var(--border-default)] bg-[var(--bg-surface)] p-[var(--spacing-sm)]"
+              class="flex items-center gap-(--spacing-md) rounded-(--shape-card) border border-(--border-default) bg-(--bg-surface) p-(--spacing-sm)"
             >
-              <div class="relative flex h-16 w-24 shrink-0 items-center justify-center overflow-hidden rounded-[var(--shape-elements)] bg-[var(--bg-canvas)]">
+              <div class="relative flex h-16 w-24 shrink-0 items-center justify-center overflow-hidden rounded-(--shape-elements) bg-(--bg-canvas)">
                 <div
                   :key="replayKeys[row.id] || 0"
                   class="motion-reduce:animate-none"
@@ -133,16 +133,16 @@ export const Overview = {
                 </div>
               </div>
               <div class="min-w-0 flex-1">
-                <div class="flex flex-wrap items-baseline gap-x-[var(--spacing-sm)]">
-                  <code class="text-body-md font-medium text-[var(--text-default)]">{{ row.className }}</code>
-                  <code class="text-body-sm text-[var(--text-secondary)]">{{ row.value }}</code>
+                <div class="flex flex-wrap items-baseline gap-x-(--spacing-sm)">
+                  <code class="text-body-md font-medium text-(--text-default)">{{ row.className }}</code>
+                  <code class="text-body-sm text-(--text-secondary)">{{ row.value }}</code>
                 </div>
-                <p class="m-0 mt-[var(--spacing-xxs)] text-body-sm text-[var(--text-secondary)]">{{ row.useWhen }}</p>
+                <p class="m-0 mt-(--spacing-xxs) text-body-sm text-(--text-secondary)">{{ row.useWhen }}</p>
               </div>
               <button
                 v-if="!row.loops"
                 type="button"
-                class="shrink-0 cursor-pointer rounded-[var(--shape-elements)] border border-[var(--border-default)] bg-transparent px-[var(--spacing-sm)] py-[var(--spacing-xxs)] text-body-sm text-[var(--text-default)] hover:bg-[var(--bg-hover)]"
+                class="shrink-0 cursor-pointer rounded-(--shape-elements) border border-(--border-default) bg-transparent px-(--spacing-sm) py-(--spacing-xxs) text-body-sm text-(--text-default) hover:bg-(--bg-hover)"
                 @click="replay(row.id)"
               >
                 Replay
@@ -151,9 +151,9 @@ export const Overview = {
           </div>
         </section>
 
-        <section class="mb-[var(--spacing-xxl)]">
-          <h2 class="m-0 mb-[var(--spacing-md)] text-heading-lg text-[var(--text-default)]">The panel recipe</h2>
-          <p class="m-0 mb-[var(--spacing-sm)] max-w-prose text-body-md text-[var(--text-secondary)]">
+        <section class="mb-(--spacing-xxl)">
+          <h2 class="m-0 mb-(--spacing-md) text-heading-lg text-(--text-default)">The panel recipe</h2>
+          <p class="m-0 mb-(--spacing-sm) max-w-prose text-body-md text-(--text-secondary)">
             A <code>v-if</code> region never animates by itself. Wrap it in a Vue Transition and hand the
             enter/leave phases to a catalogued pair — <code>animate-slide-in-left</code> /
             <code>animate-slide-out-left</code> for a sidebar, the <code>-right</code> pair for drawers,
@@ -162,30 +162,30 @@ export const Overview = {
           <CodeBlock :code="PANEL_RECIPE" language="html" />
         </section>
 
-        <section class="mb-[var(--spacing-xxl)]">
-          <h2 class="m-0 mb-[var(--spacing-md)] text-heading-lg text-[var(--text-default)]">Duration tokens</h2>
-          <div class="flex flex-col gap-[var(--spacing-xs)]">
+        <section class="mb-(--spacing-xxl)">
+          <h2 class="m-0 mb-(--spacing-md) text-heading-lg text-(--text-default)">Duration tokens</h2>
+          <div class="flex flex-col gap-(--spacing-xs)">
             <div
               v-for="row in durationRows"
               :key="row.name"
-              class="flex items-center gap-[var(--spacing-md)]"
+              class="flex items-center gap-(--spacing-md)"
             >
-              <code class="w-56 shrink-0 text-body-sm text-[var(--text-default)]">{{ row.name }}</code>
-              <code class="w-20 shrink-0 text-body-sm text-[var(--text-secondary)]">{{ row.value }}</code>
-              <div class="h-2 rounded-full bg-[var(--primary)]" :style="{ width: Math.min(row.ms / 8, 420) + 'px' }"></div>
+              <code class="w-56 shrink-0 text-body-sm text-(--text-default)">{{ row.name }}</code>
+              <code class="w-20 shrink-0 text-body-sm text-(--text-secondary)">{{ row.value }}</code>
+              <div class="h-2 rounded-full bg-(--primary)" :style="{ width: Math.min(row.ms / 8, 420) + 'px' }"></div>
             </div>
           </div>
         </section>
 
-        <section class="mb-[var(--spacing-xxl)]">
-          <h2 class="m-0 mb-[var(--spacing-md)] text-heading-lg text-[var(--text-default)]">Easing curves</h2>
-          <div class="flex flex-col gap-[var(--spacing-xs)]">
-            <div v-for="row in curveRows" :key="row.name" class="flex items-center gap-[var(--spacing-md)]">
-              <code class="w-56 shrink-0 text-body-sm text-[var(--text-default)]">{{ row.name }}</code>
-              <code class="text-body-sm text-[var(--text-secondary)]">{{ row.value }}</code>
+        <section class="mb-(--spacing-xxl)">
+          <h2 class="m-0 mb-(--spacing-md) text-heading-lg text-(--text-default)">Easing curves</h2>
+          <div class="flex flex-col gap-(--spacing-xs)">
+            <div v-for="row in curveRows" :key="row.name" class="flex items-center gap-(--spacing-md)">
+              <code class="w-56 shrink-0 text-body-sm text-(--text-default)">{{ row.name }}</code>
+              <code class="text-body-sm text-(--text-secondary)">{{ row.value }}</code>
             </div>
           </div>
-          <p class="m-0 mt-[var(--spacing-sm)] max-w-prose text-body-sm text-[var(--text-secondary)]">
+          <p class="m-0 mt-(--spacing-sm) max-w-prose text-body-sm text-(--text-secondary)">
             Entrances decelerate (productive/expressive entrance), exits accelerate (productive/expressive exit).
             Interaction feedback stays at or under duration-moderate-01 (150ms).
           </p>
diff --git a/apps/storybook/src/stories/templates/ChangePlanDrawer.stories.js b/apps/storybook/src/stories/templates/ChangePlanDrawer.stories.js
index 271fa435e..8a9da8811 100644
--- a/apps/storybook/src/stories/templates/ChangePlanDrawer.stories.js
+++ b/apps/storybook/src/stories/templates/ChangePlanDrawer.stories.js
@@ -33,7 +33,7 @@ const planFeatureItems = [
 // Shared markup fragments — used by BOTH the render template and the "Show code"
 // snippet so the canvas and the snippet can never drift.
 const planFeaturesSlot = `<ul class="m-0 flex w-full list-none flex-col gap-2 p-0">
-  <li class="text-label-sm text-[var(--text-muted)] leading-none">
+  <li class="text-label-sm text-(--text-muted) leading-none">
     Todas as funcionalidades disponíveis
   </li>
   <li
@@ -42,16 +42,16 @@ const planFeaturesSlot = `<ul class="m-0 flex w-full list-none flex-col gap-2 p-
     class="flex items-center gap-[10px]"
   >
     <span class="flex size-5 shrink-0 items-center justify-center" aria-hidden="true">
-      <i :class="feature.icon" class="text-[var(--text-default)]" />
+      <i :class="feature.icon" class="text-(--text-default)" />
     </span>
-    <span class="text-label-sm text-[var(--text-default)] leading-none">
+    <span class="text-label-sm text-(--text-default) leading-none">
       {{ feature.label }}
     </span>
   </li>
 </ul>`
 
 const plansMarkup = `<div
-  class="flex w-full min-w-0 flex-col items-stretch justify-center gap-[var(--spacing-6)] lg:flex-row"
+  class="flex w-full min-w-0 flex-col items-stretch justify-center gap-(--spacing-6) lg:flex-row"
   data-testid="template-change-plan-drawer__plans"
 >
   <CardPricing
@@ -122,7 +122,7 @@ const drawerInner = `  <DrawerTrigger>
         <DrawerTitle>Change Plan</DrawerTitle>
         <DrawerClose />
       </PanelHeader>
-      <PanelContent class="flex flex-col items-center gap-[var(--spacing-6)]">
+      <PanelContent class="flex flex-col items-center gap-(--spacing-6)">
         <SegmentedButton
           v-model="billingPeriod"
           :options="billingOptions"
@@ -173,7 +173,7 @@ const billingOptions = [
 
 const planFeaturesSlot = \`
   <ul class="m-0 flex w-full list-none flex-col gap-2 p-0">
-    <li class="text-label-sm text-[var(--text-muted)] leading-none">
+    <li class="text-label-sm text-(--text-muted) leading-none">
       Todas as funcionalidades disponíveis
     </li>
     <li
@@ -185,9 +185,9 @@ const planFeaturesSlot = \`
         class="flex size-5 shrink-0 items-center justify-center"
         aria-hidden="true"
       >
-        <i :class="feature.icon" class="text-[var(--text-default)]" />
+        <i :class="feature.icon" class="text-(--text-default)" />
       </span>
-      <span class="text-label-sm text-[var(--text-default)] leading-none">
+      <span class="text-label-sm text-(--text-default) leading-none">
         {{ feature.label }}
       </span>
     </li>
@@ -210,14 +210,14 @@ const changePlanTemplate = \`
           <DrawerTitle>Change Plan</DrawerTitle>
           <DrawerClose />
         </PanelHeader>
-        <PanelContent class="flex flex-col items-center gap-[var(--spacing-6)]">
+        <PanelContent class="flex flex-col items-center gap-(--spacing-6)">
           <SegmentedButton
             v-model="billingPeriod"
             :options="billingOptions"
             ariaLabel="Billing period"
           />
           <div
-            class="flex w-full min-w-0 flex-col items-stretch justify-center gap-[var(--spacing-6)] lg:flex-row"
+            class="flex w-full min-w-0 flex-col items-stretch justify-center gap-(--spacing-6) lg:flex-row"
             data-testid="template-change-plan-drawer__plans"
           >
             <CardPricing
diff --git a/apps/storybook/src/stories/templates/DeleteDomainDialog.stories.js b/apps/storybook/src/stories/templates/DeleteDomainDialog.stories.js
index ecb5e3f71..7cc21087b 100644
--- a/apps/storybook/src/stories/templates/DeleteDomainDialog.stories.js
+++ b/apps/storybook/src/stories/templates/DeleteDomainDialog.stories.js
@@ -84,9 +84,9 @@ const SNIPPET_MARKUP = `<Dialog size="medium" v-model:open="open">
         <DialogTitle>Delete Domain</DialogTitle>
         <DialogClose />
       </PanelHeader>
-      <PanelContent class="flex flex-col gap-[var(--spacing-md)]">
+      <PanelContent class="flex flex-col gap-(--spacing-md)">
         <Message severity="warning" label="Once confirmed, this action can't be reversed." />
-        <p class="m-0 text-body-sm text-[var(--text-muted)]">
+        <p class="m-0 text-body-sm text-(--text-muted)">
           The selected Domain will be deleted, along with all associated settings or instances. Check the
           <Link
             class="!inline-flex !h-auto !min-h-0 align-baseline"
@@ -97,7 +97,7 @@ const SNIPPET_MARKUP = `<Dialog size="medium" v-model:open="open">
           />
           for more details.
         </p>
-        <p :id="confirmLabelId" class="m-0 text-body-sm text-[var(--text-default)]">
+        <p :id="confirmLabelId" class="m-0 text-body-sm text-(--text-default)">
           To confirm, type "{{ confirmationPhrase }}" in the box below:
         </p>
         <InputText
@@ -133,13 +133,13 @@ const deleteDomainTemplate = `
           <DialogTitle>{{ args.title }}</DialogTitle>
           <DialogClose />
         </PanelHeader>
-        <PanelContent class="flex flex-col gap-[var(--spacing-md)]">
+        <PanelContent class="flex flex-col gap-(--spacing-md)">
           <Message
             severity="warning"
             :label="args.warningLabel"
             data-testid="template-delete-domain-dialog__warning"
           />
-          <p class="m-0 text-body-sm text-[var(--text-muted)]">
+          <p class="m-0 text-body-sm text-(--text-muted)">
             {{ args.descriptionBeforeLink }}
             <Link
               class="inline-flex! h-auto! min-h-0! align-baseline"
@@ -153,7 +153,7 @@ const deleteDomainTemplate = `
           </p>
           <p
             :id="confirmLabelId"
-            class="m-0 text-body-sm text-[var(--text-default)]"
+            class="m-0 text-body-sm text-(--text-default)"
             data-testid="template-delete-domain-dialog__confirm-label"
           >
             To confirm, type &quot;{{ args.confirmationPhrase }}&quot; in the box below:
diff --git a/apps/storybook/src/stories/templates/PlatformShell.stories.js b/apps/storybook/src/stories/templates/PlatformShell.stories.js
index db2e1edb4..fe74c77cc 100644
--- a/apps/storybook/src/stories/templates/PlatformShell.stories.js
+++ b/apps/storybook/src/stories/templates/PlatformShell.stories.js
@@ -194,14 +194,14 @@ const SHELL_BODY = `  <template #header-left>
     </Sidebar>
   </template>
   <template #page-header>
-    <header class="flex w-full flex-wrap items-end justify-between gap-[var(--spacing-4)]">
-      <div class="flex min-w-0 flex-col gap-[var(--spacing-2)]">
-        <h1 class="text-heading-md text-[var(--text-default)]">Page Heading</h1>
-        <p class="text-body-xs text-[var(--text-muted)]">
+    <header class="flex w-full flex-wrap items-end justify-between gap-(--spacing-4)">
+      <div class="flex min-w-0 flex-col gap-(--spacing-2)">
+        <h1 class="text-heading-md text-(--text-default)">Page Heading</h1>
+        <p class="text-body-xs text-(--text-muted)">
           A brief description about this page
         </p>
       </div>
-      <div class="flex shrink-0 items-center gap-[var(--spacing-3)]">
+      <div class="flex shrink-0 items-center gap-(--spacing-3)">
         <Button label="Get Help" kind="text" size="medium" />
         <Button label="Add new Resource" kind="outlined" size="medium" />
       </div>
@@ -217,36 +217,36 @@ const SHELL_BODY = `  <template #header-left>
       <TabView.Item value="tab-6" label="Tab Item" />
       <TabView.Item value="tab-7" label="Tab Item" />
     </TabView.List>
-    <TabView.Content class="mt-[var(--spacing-4)] min-h-0 flex-1">
+    <TabView.Content class="mt-(--spacing-4) min-h-0 flex-1">
       <TabView.Panel value="tab-1">
         <div
-          class="grid min-h-[12rem] w-full grid-cols-3 gap-[var(--spacing-6)]"
+          class="grid min-h-[12rem] w-full grid-cols-3 gap-(--spacing-6)"
           data-testid="template-platform-shell-story__tab-grid"
         >
           <div
             v-for="index in 6"
             :key="index"
-            class="min-h-[8rem] rounded-[var(--shape-card)] border border-[var(--border-muted)] bg-[var(--bg-surface)]"
+            class="min-h-[8rem] rounded-(--shape-card) border border-(--border-muted) bg-(--bg-surface)"
           />
         </div>
       </TabView.Panel>
       <TabView.Panel value="tab-2">
-        <p class="text-body-sm text-[var(--text-muted)]">Content for tab 2</p>
+        <p class="text-body-sm text-(--text-muted)">Content for tab 2</p>
       </TabView.Panel>
       <TabView.Panel value="tab-3">
-        <p class="text-body-sm text-[var(--text-muted)]">Content for tab 3</p>
+        <p class="text-body-sm text-(--text-muted)">Content for tab 3</p>
       </TabView.Panel>
       <TabView.Panel value="tab-4">
-        <p class="text-body-sm text-[var(--text-muted)]">Content for tab 4</p>
+        <p class="text-body-sm text-(--text-muted)">Content for tab 4</p>
       </TabView.Panel>
       <TabView.Panel value="tab-5">
-        <p class="text-body-sm text-[var(--text-muted)]">Content for tab 5</p>
+        <p class="text-body-sm text-(--text-muted)">Content for tab 5</p>
       </TabView.Panel>
       <TabView.Panel value="tab-6">
-        <p class="text-body-sm text-[var(--text-muted)]">Content for tab 6</p>
+        <p class="text-body-sm text-(--text-muted)">Content for tab 6</p>
       </TabView.Panel>
       <TabView.Panel value="tab-7">
-        <p class="text-body-sm text-[var(--text-muted)]">Content for tab 7</p>
+        <p class="text-body-sm text-(--text-muted)">Content for tab 7</p>
       </TabView.Panel>
     </TabView.Content>
   </template>`
diff --git a/apps/storybook/src/stories/utils/spinner/Spinner.stories.js b/apps/storybook/src/stories/utils/spinner/Spinner.stories.js
index 9a568f259..8543c99e6 100644
--- a/apps/storybook/src/stories/utils/spinner/Spinner.stories.js
+++ b/apps/storybook/src/stories/utils/spinner/Spinner.stories.js
@@ -34,7 +34,7 @@ const meta = {
 
 export default meta
 
-const DEFAULT_MARKUP = '<Spinner class="size-4 text-[var(--text-default)]" />'
+const DEFAULT_MARKUP = '<Spinner class="size-4 text-(--text-default)" />'
 
 /** @type {import('@storybook/vue3').StoryObj<typeof Spinner>} */
 export const Default = {
@@ -49,7 +49,7 @@ export const Default = {
   }
 }
 
-const SIZES_TEMPLATE = `<div class="flex items-center gap-4 text-[var(--text-default)]">
+const SIZES_TEMPLATE = `<div class="flex items-center gap-4 text-(--text-default)">
   <Spinner class="size-3" />
   <Spinner class="size-4" />
   <Spinner class="size-6" />
diff --git a/packages/theme/src/scripts/build-tokens.mjs b/packages/theme/src/scripts/build-tokens.mjs
index 90ac34ba4..e2318c228 100644
--- a/packages/theme/src/scripts/build-tokens.mjs
+++ b/packages/theme/src/scripts/build-tokens.mjs
@@ -323,7 +323,7 @@ const emitCssV4 = () => {
     '@import "tailwindcss";',
     '',
     '/*',
-    ' * `@aziontech/webkit` components use arbitrary values (`bg-[var(--x)]`) that',
+    ' * `@aziontech/webkit` components use arbitrary values (`bg-(--x)`) that',
     ' * Tailwind v4 only picks up when the source files are inside the scan.',
     ' * Auto-detect scans the CWD only, so we point `@source` at the webkit',
     ' * package via a monorepo-relative path (this file is under',
diff --git a/packages/theme/src/tokens/semantic/z-indices.data.js b/packages/theme/src/tokens/semantic/z-indices.data.js
index ee31fb136..c862ad8dc 100644
--- a/packages/theme/src/tokens/semantic/z-indices.data.js
+++ b/packages/theme/src/tokens/semantic/z-indices.data.js
@@ -17,7 +17,7 @@
  *                          such as drawers, modals, and fixed headers.
  *
  * Values are intentionally small and well-spaced to make future additions
- * obvious. Consume as `z-[var(--z-input-*)]` in components — do not
+ * obvious. Consume as `z-(--z-input-*)` in components — do not
  * introduce ad-hoc numeric z-index in input `.vue` files.
  */
 
diff --git a/packages/webkit/cli-templates/claude/rules/webkit-accessibility.md b/packages/webkit/cli-templates/claude/rules/webkit-accessibility.md
index b7f565591..dfb238da7 100644
--- a/packages/webkit/cli-templates/claude/rules/webkit-accessibility.md
+++ b/packages/webkit/cli-templates/claude/rules/webkit-accessibility.md
@@ -22,7 +22,7 @@ stylelint config and the `webkit/no-hardcoded-color` ESLint rule.
 - Generate ids with Vue's **`useId()`** for every `for` / `aria-labelledby` /
   `aria-describedby` association — stable across SSR.
 - Style focus with a **`focus-visible`** ring using the ring token
-  (`focus-visible:ring-[var(--ring-color)]`).
+  (`focus-visible:ring-(--ring-color)`).
 - Make overlays **trap focus and restore it**: focus moves into the overlay on open,
   stays trapped while open, and returns to the trigger on close — use a focus-trap
   composable (e.g. VueUse), not a hand-written trap.
@@ -52,9 +52,9 @@ const hintId = useId() // stable id for the ARIA association
 <template>
   <!-- native semantics, tokenized focus ring, reduced-motion fallback -->
   <button
-    class="inline-flex items-center gap-[var(--spacing-xs)]
+    class="inline-flex items-center gap-(--spacing-xs)
            transition-colors duration-150 motion-reduce:transition-none
-           focus-visible:ring-2 focus-visible:ring-[var(--ring-color)]"
+           focus-visible:ring-2 focus-visible:ring-(--ring-color)"
     :aria-expanded="open"
     :data-state="open ? 'open' : 'closed'"
     @click="toggle"
diff --git a/packages/webkit/cli-templates/claude/rules/webkit-component-states.md b/packages/webkit/cli-templates/claude/rules/webkit-component-states.md
index dced86359..0be39bce9 100644
--- a/packages/webkit/cli-templates/claude/rules/webkit-component-states.md
+++ b/packages/webkit/cli-templates/claude/rules/webkit-component-states.md
@@ -55,7 +55,7 @@ Not every component has every state — a button has `disabled` + `loading`; a d
 <div
   :data-loading="loading || null"
   :data-disabled="disabled || null"
-  class="flex flex-col gap-[var(--spacing-sm)]
+  class="flex flex-col gap-(--spacing-sm)
          data-[loading]:pointer-events-none
          data-[disabled]:cursor-not-allowed"
 >
diff --git a/packages/webkit/cli-templates/claude/rules/webkit-root-element.md b/packages/webkit/cli-templates/claude/rules/webkit-root-element.md
index 4586bac32..a0bb972be 100644
--- a/packages/webkit/cli-templates/claude/rules/webkit-root-element.md
+++ b/packages/webkit/cli-templates/claude/rules/webkit-root-element.md
@@ -53,7 +53,7 @@ discipline inside class strings is enforced separately by the stylelint config a
     :is="isLink ? 'a' : 'button'"
     v-bind="$attrs"
     :href="isLink ? href : undefined"
-    :class="cn('rounded-[var(--shape-card)] bg-[var(--bg-surface)] p-[var(--spacing-md)]', attrs.class as string)"
+    :class="cn('rounded-(--shape-card) bg-(--bg-surface) p-(--spacing-md)', attrs.class as string)"
   >
     <slot />
   </component>
diff --git a/packages/webkit/cli-templates/claude/rules/webkit-slots.md b/packages/webkit/cli-templates/claude/rules/webkit-slots.md
index c5951bd68..445125ccd 100644
--- a/packages/webkit/cli-templates/claude/rules/webkit-slots.md
+++ b/packages/webkit/cli-templates/claude/rules/webkit-slots.md
@@ -48,7 +48,7 @@ conventions below are enforced by review.
 </script>
 
 <template>
-  <ul class="flex flex-col gap-[var(--spacing-xs)]">
+  <ul class="flex flex-col gap-(--spacing-xs)">
     <li v-for="(entry, i) in items" :key="entry.id">
       <slot name="prefix" />
       <slot name="item" :item="entry" :index="i">
diff --git a/packages/webkit/cli-templates/claude/rules/webkit-style-override.md b/packages/webkit/cli-templates/claude/rules/webkit-style-override.md
index 0cfb5c789..eb4dd268a 100644
--- a/packages/webkit/cli-templates/claude/rules/webkit-style-override.md
+++ b/packages/webkit/cli-templates/claude/rules/webkit-style-override.md
@@ -30,11 +30,11 @@ makes upgrades unpredictable. The `webkit/no-style-override` ESLint rule blocks
 ```html
 <!-- compose in the slot: your markup, your classes -->
 <Button kind="primary" @click="submit">
-  <span class="inline-flex items-center gap-[var(--spacing-xs)]">Create account</span>
+  <span class="inline-flex items-center gap-(--spacing-xs)">Create account</span>
 </Button>
 
 <!-- a styleSeam component accepts consumer classes by design -->
-<CardBox class="bg-[var(--bg-canvas)]">…</CardBox>
+<CardBox class="bg-(--bg-canvas)">…</CardBox>
 ```
 
 ## Wrong
diff --git a/packages/webkit/cli-templates/claude/rules/webkit-styling.md b/packages/webkit/cli-templates/claude/rules/webkit-styling.md
index eff9cc2d7..f8a56cab4 100644
--- a/packages/webkit/cli-templates/claude/rules/webkit-styling.md
+++ b/packages/webkit/cli-templates/claude/rules/webkit-styling.md
@@ -13,7 +13,7 @@ enforced in code review.
 - Put **all** utilities inline on the root's single `class` attribute.
 - Mirror props as `data-*` attributes (`data-kind`, `data-size`, `data-disabled`,
   `data-state`) and let Tailwind variants do the switching:
-  `data-[kind=primary]:bg-[var(--primary)]` is one utility, not a JS branch.
+  `data-[kind=primary]:bg-(--primary)` is one utility, not a JS branch.
 - Use `v-bind="$attrs"` so a caller-passed `class` merges onto the root (Vue merges
   class strings automatically). When caller classes must **win** over internal ones, use
   `cn` from `@aziontech/webkit/utils/cn` (clsx + tailwind-merge) — the only acceptable
@@ -40,6 +40,19 @@ enforced in code review.
   `<script setup>` passed to `cn`.
 - No hardcoded colors (`#0a0a0a`, `bg-blue-600`) — lint blocks them; use tokens.
 
+## Token value syntax — the canonical `prop-(--token)` form
+
+Write a token value with Tailwind v4's **paren shorthand**, not the bracket form. This is the single canonical spelling the toolkit standardizes on — it matches what upstream v4 canonicalizes to, so your editor stops flagging every styled line.
+
+- **Whole-value var:** `bg-(--primary)`, `text-(--text-default)`, `rounded-(--shape-card)` — **not** `bg-[var(--primary)]`. Variants compose: `data-[disabled]:bg-(--bg-disabled)`.
+- **Typed value:** `text-(length:--text-body-md)`, `border-(color:--border-default)`, `font-(family-name:--font-sora)`.
+- **Numeric arbitrary:** `z-1`, not `z-[1]`.
+
+Two cases **stay in brackets** — the paren form silently emits no CSS for them:
+
+- **Custom-property declarations:** `[--row-bg:var(--bg-surface)]` (there is no paren shorthand for declaring a property).
+- **Expression values:** anything more than a lone var — `w-[calc(var(--a)*2)]`, gradients, box-shadows, or a **var with a fallback** (`bg-[var(--x,var(--y))]`). Leave these bracketed; converting them drops the style with no error.
+
 ## Correct
 
 <!-- prettier-ignore -->
@@ -52,13 +65,13 @@ enforced in code review.
     :data-disabled="disabled || null"
     :disabled="disabled"
     class="
-      inline-flex items-center justify-center rounded-[var(--shape-button)]
+      inline-flex items-center justify-center rounded-(--shape-button)
       transition-colors duration-150 ease-out motion-reduce:transition-none
-      data-[kind=primary]:bg-[var(--primary)] data-[kind=primary]:text-[var(--primary-contrast)]
-      data-[kind=outlined]:border data-[kind=outlined]:border-[var(--border-default)] data-[kind=outlined]:bg-transparent
-      data-[size=small]:h-7 data-[size=small]:px-[var(--spacing-xs)]
-      data-[size=large]:h-10 data-[size=large]:px-[var(--spacing-md)]
-      data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--bg-disabled)]
+      data-[kind=primary]:bg-(--primary) data-[kind=primary]:text-(--primary-contrast)
+      data-[kind=outlined]:border data-[kind=outlined]:border-(--border-default) data-[kind=outlined]:bg-transparent
+      data-[size=small]:h-7 data-[size=small]:px-(--spacing-xs)
+      data-[size=large]:h-10 data-[size=large]:px-(--spacing-md)
+      data-[disabled]:cursor-not-allowed data-[disabled]:bg-(--bg-disabled)
     "
   >
     <slot />
@@ -72,10 +85,10 @@ enforced in code review.
 ```vue
 <script setup>
   const kindClasses = {
-    primary: 'bg-[var(--primary)] text-[var(--primary-contrast)]',
-    outlined: 'border border-[var(--border-default)] bg-transparent'
+    primary: 'bg-(--primary) text-(--primary-contrast)',
+    outlined: 'border border-(--border-default) bg-transparent'
   }
-  const sizeClasses = { small: 'h-7 px-[var(--spacing-xs)]', large: 'h-10 px-[var(--spacing-md)]' }
+  const sizeClasses = { small: 'h-7 px-(--spacing-xs)', large: 'h-10 px-(--spacing-md)' }
   const rootClasses = computed(() => [kindClasses[props.kind], sizeClasses[props.size]])
 </script>
 
diff --git a/packages/webkit/cli-templates/claude/rules/webkit-testid.md b/packages/webkit/cli-templates/claude/rules/webkit-testid.md
index 50725c7ac..3845a7370 100644
--- a/packages/webkit/cli-templates/claude/rules/webkit-testid.md
+++ b/packages/webkit/cli-templates/claude/rules/webkit-testid.md
@@ -45,7 +45,7 @@ enforced by review — no lint rule checks it, so apply it deliberately.
 </script>
 
 <template>
-  <div v-bind="$attrs" :data-testid="testId" class="inline-flex gap-[var(--spacing-xs)]">
+  <div v-bind="$attrs" :data-testid="testId" class="inline-flex gap-(--spacing-xs)">
     <slot />
   </div>
 </template>
diff --git a/packages/webkit/cli-templates/claude/rules/webkit-tokens.md b/packages/webkit/cli-templates/claude/rules/webkit-tokens.md
index a7e146a95..b35a969c1 100644
--- a/packages/webkit/cli-templates/claude/rules/webkit-tokens.md
+++ b/packages/webkit/cli-templates/claude/rules/webkit-tokens.md
@@ -21,7 +21,7 @@ The design system ships tokens. Use them. Never hardcode a raw color or an off-s
 
 ```html
 <div
-  class="bg-[var(--bg-surface)] text-[var(--text-default)] p-[var(--spacing-md)] rounded-[var(--shape-card)]"
+  class="bg-(--bg-surface) text-(--text-default) p-(--spacing-md) rounded-(--shape-card)"
 >
   ...
 </div>
diff --git a/packages/webkit/cli-templates/claude/skills/webkit-baseline-ui/SKILL.md b/packages/webkit/cli-templates/claude/skills/webkit-baseline-ui/SKILL.md
index a6d2aa1be..e4c1addf5 100644
--- a/packages/webkit/cli-templates/claude/skills/webkit-baseline-ui/SKILL.md
+++ b/packages/webkit/cli-templates/claude/skills/webkit-baseline-ui/SKILL.md
@@ -52,9 +52,9 @@ hand-rolled, nothing hardcoded.
 
 ### Color — tokens only
 
-- **MUST** use `@aziontech/theme` semantic vars: `bg-[var(--bg-surface)]`, `text-[var(--text-default)]`,
-  `text-[var(--text-muted)]`, `bg-[var(--primary)]`, `text-[var(--primary-contrast)]`,
-  `border-[var(--border-default)]`, `ring-[var(--ring-color)]`, feedback `var(--success|--warning|--danger|--info)`.
+- **MUST** use `@aziontech/theme` semantic vars: `bg-(--bg-surface)`, `text-(--text-default)`,
+  `text-(--text-muted)`, `bg-(--primary)`, `text-(--primary-contrast)`,
+  `border-(--border-default)`, `ring-(--ring-color)`, feedback `var(--success|--warning|--danger|--info)`.
 - **NEVER** HEX (`#0af`), `rgb()/rgba()/hsl()`, or Tailwind palette names (`bg-blue-500`, `text-gray-700`).
 - **SHOULD** limit accent color to one per view; the rest carries on surface + text + border tokens.
 
@@ -76,33 +76,33 @@ hand-rolled, nothing hardcoded.
 A **content section** (a titled block sitting above a `CardBox`, an `Item.List`, or a table) is
 labelled with a **small heading**, not an overline:
 
-- **MUST** title the section with `text-heading-xxs text-[var(--text-default)]` — the smallest heading
+- **MUST** title the section with `text-heading-xxs text-(--text-default)` — the smallest heading
   token. `text-overline-*` is **reserved for compact menu / popover group labels** (e.g.
   `Dropdown.Group`, a Popover section), **not** page section titles.
-- **MUST** give the title an optical inset of `px-[var(--spacing-xs)]` so it lines up with the card's
+- **MUST** give the title an optical inset of `px-(--spacing-xs)` so it lines up with the card's
   inner content directly below it (the card body pads at `--spacing-md`; the smaller `--spacing-xs`
   title inset reads as aligned, not indented).
 - **MUST** separate the title from the card it labels by `--spacing-sm` — the section wrapper is
-  `flex flex-col gap-[var(--spacing-sm)]`.
+  `flex flex-col gap-(--spacing-sm)`.
 - **SHOULD**, when the title row also carries a control (a filter dropdown, an action button), wrap it in
-  a `flex min-h-[var(--size-8)] items-center` row so the title baseline matches sibling section titles in
+  a `flex min-h-(--size-8) items-center` row so the title baseline matches sibling section titles in
   other columns (e.g. a two-column page where one title stands alone and the other sits beside a control).
 
 This is the canonical section-title treatment. A section title written as
-`text-overline-sm text-[var(--text-muted)]` is **legacy** — bring it to this pattern when you touch it.
+`text-overline-sm text-(--text-muted)` is **legacy** — bring it to this pattern when you touch it.
 
 ### Shape & elevation — tokens only
 
-- **MUST** use `rounded-[var(--shape-button)]` (buttons), `rounded-[var(--shape-elements)]` (inputs,
-  chips), `rounded-[var(--shape-card)]` (cards), `rounded-[var(--shape-flat)]` (none).
+- **MUST** use `rounded-(--shape-button)` (buttons), `rounded-(--shape-elements)` (inputs,
+  chips), `rounded-(--shape-card)` (cards), `rounded-(--shape-flat)` (none).
 - **NEVER** `rounded-md/lg` or a numeric radius.
-- **MUST** use `shadow-[var(--shadow-*)]` for elevation (`--shadow-sm` cards, `--shadow-md` overlays);
+- **MUST** use `shadow-(--shadow-*)` for elevation (`--shadow-sm` cards, `--shadow-md` overlays);
   never a bare Tailwind `shadow-md` or a hardcoded `box-shadow`.
 
 ### Spacing rhythm — one scale
 
 - **MUST** use only `--spacing-xxs … --spacing-xxl` for padding, gap, and margin:
-  `p-[var(--spacing-md)]`, `gap-[var(--spacing-sm)]`, `mt-[var(--spacing-xs)]`.
+  `p-(--spacing-md)`, `gap-(--spacing-sm)`, `mt-(--spacing-xs)`.
 - **NEVER** arbitrary values (`p-[13px]`, `gap-[7px]`), Tailwind's default scale (`p-4`, `gap-3`), or
   the primitive `--spacing-1 … --spacing-96`.
 - **SHOULD** keep one consistent step between sibling elements; don't alternate `--spacing-xs` and
@@ -122,35 +122,35 @@ This section is the **canonical container / max-width doctrine** for webkit apps
 `/webkit-ui-craft` skill defers here, so treat this as the authoritative and complete source.
 
 The default is **fluid**: content fills the space the shell gives it. A container
-(`max-w-[var(--container-*)]`) is the exception, applied only where unbounded width hurts legibility or
+(`max-w-(--container-*)`) is the exception, applied only where unbounded width hurts legibility or
 balance. Reach for it in this order.
 
 - **MUST** keep the **app shell fluid-first** — never cap it with a container. The **sidebar**, the
   **global header**, the **page heading**, and the **main content spacing** (the content zone's
-  `p-[var(--spacing-*)]` inset) all stay full-width and stretch with the viewport. These are chrome; a
+  `p-(--spacing-*)` inset) all stay full-width and stretch with the viewport. These are chrome; a
   max-width on them only creates dead gutters.
-- **MUST** cap **reading / input width** with `max-w-[var(--container-2xs … xl)]`: form fields, text
+- **MUST** cap **reading / input width** with `max-w-(--container-2xs … xl)`: form fields, text
   columns, focused auth/save cards, fixed side rails. Pick the tight end (`2xs … sm`) for compact
   settings rows and the loose end (up to `xl`, 576px) for a control column that must fit a longer value.
   A form input that spans a 2560px screen is a legibility bug, not a feature.
 - **MUST** give **focused create/edit flows** a centered page container — `mx-auto
-max-w-[var(--container-7xl)]` on the flow's content wrapper — so the column sits centered instead of
+max-w-(--container-7xl)` on the flow's content wrapper — so the column sits centered instead of
   drifting to the left edge on wide screens. This is the one place the _page section_ (not just a field)
   is capped.
 - **SHOULD** center a **landing / browse / catalog page** — a page of stacked sections, card grids, and
-  tabs (e.g. a Home or Marketplace page) — in a `mx-auto w-full max-w-[var(--container-7xl)]` container on
+  tabs (e.g. a Home or Marketplace page) — in a `mx-auto w-full max-w-(--container-7xl)` container on
   its root `main`, so the content sits centered instead of drifting to the left edge on wide screens; add
-  the page's top breathing room with `pt-[var(--spacing-*)]`. Keep the width **identical across sibling
+  the page's top breathing room with `pt-(--spacing-*)`. Keep the width **identical across sibling
   pages of the same kind** so moving between them never reflows the column. The shell around it (sidebar,
   header, content-zone inset) stays fluid per the first bullet — the cap lives on the page's own `main`,
   not the app layout content zone.
 - **MUST** cap a **wizard / multi-step deployment flow** tighter than a general create/edit page —
-  `mx-auto max-w-[var(--container-2xl)]` (672px) on the flow's content wrapper. A wizard is a single
+  `mx-auto max-w-(--container-2xl)` (672px) on the flow's content wrapper. A wizard is a single
   guided task with one thing to look at per step, so the step column stays narrow and centered; the `7xl`
   cap above is for broader create/edit pages, not step-by-step wizards.
 - **SHOULD** keep **data-dense surfaces fluid** — tables, dashboards, log/grid views breathe to the full
   content width; don't box them into a narrow container.
-- **MUST** express every cap as `max-w-[var(--container-<size>)]` — the `@aziontech/theme` container
+- **MUST** express every cap as `max-w-(--container-<size>)` — the `@aziontech/theme` container
   tokens, `--container-3xs … --container-7xl`. **NEVER** a raw `max-w-5xl` / `max-w-[768px]`, and never a
   legacy helper (`.max-container-width`, `--container-max-width`).
 
@@ -180,7 +180,7 @@ For `/webkit-baseline-ui <file>`, group findings by constraint section. Each fin
 ```
 ✗ <file>:<line>  `bg-[#0a0a0a] text-blue-500`
   why: hardcoded HEX + palette color bypass the theme; break dark mode and brand.
-  fix: bg-[var(--bg-surface)] text-[var(--primary)]
+  fix: bg-(--bg-surface) text-(--primary)
 ```
 
 End with a one-line verdict: `clean` or `N violations across <sections>`.
@@ -201,8 +201,8 @@ End with a one-line verdict: `clean` or `N violations across <sections>`.
 - [ ] Every interactive primitive is a `@aziontech/webkit` component.
 - [ ] No HEX / rgb / Tailwind palette / arbitrary spacing / `rounded-md|lg` / raw `text-*` size remains.
 - [ ] Typography uses `text-*` tokens with correct hierarchy; spacing uses only `--spacing-*`.
-- [ ] Section titles use `text-heading-xxs text-[var(--text-default)]` with a `px-[var(--spacing-xs)]` optical inset (and `--spacing-sm` above the card) — not `text-overline-*`, which is reserved for menu/popover group labels.
+- [ ] Section titles use `text-heading-xxs text-(--text-default)` with a `px-(--spacing-xs)` optical inset (and `--spacing-sm` above the card) — not `text-overline-*`, which is reserved for menu/popover group labels.
 - [ ] `h-dvh` not `h-screen`; one accent per view; empty states have an action.
-- [ ] Shell (sidebar, global header, page heading, content-zone spacing) is fluid; only reading width, focused flows, and landing/browse pages are capped, always via `max-w-[var(--container-*)]` — wizards/deployment flows at `max-w-[var(--container-2xl)]`, broader create/edit and landing/browse pages centered at `7xl`.
+- [ ] Shell (sidebar, global header, page heading, content-zone spacing) is fluid; only reading width, focused flows, and landing/browse pages are capped, always via `max-w-(--container-*)` — wizards/deployment flows at `max-w-(--container-2xl)`, broader create/edit and landing/browse pages centered at `7xl`.
 - [ ] Buttons and fields on the same horizontal line share one `size` token and a common baseline.
 - [ ] (File mode) Every violation has a quoted line, a why, and a concrete fix.
diff --git a/packages/webkit/cli-templates/claude/skills/webkit-data-viz/SKILL.md b/packages/webkit/cli-templates/claude/skills/webkit-data-viz/SKILL.md
index 8c3b9fcc1..2bbee4fa0 100644
--- a/packages/webkit/cli-templates/claude/skills/webkit-data-viz/SKILL.md
+++ b/packages/webkit/cli-templates/claude/skills/webkit-data-viz/SKILL.md
@@ -103,17 +103,17 @@ error rate is `--text-danger` even though the arrow points up.
 </script>
 
 <template>
-  <div class="grid grid-cols-3 gap-[var(--spacing-md)]">
+  <div class="grid grid-cols-3 gap-(--spacing-md)">
     <CardBox
       v-for="s in stats"
       :key="s.label"
-      class="flex flex-col gap-[var(--spacing-xs)]"
+      class="flex flex-col gap-(--spacing-xs)"
     >
-      <span class="text-body-sm text-[var(--text-muted)]">{{ s.label }}</span>
-      <span class="text-big-number-lg text-[var(--text-default)] tabular-nums">{{ s.value }}</span>
+      <span class="text-body-sm text-(--text-muted)">{{ s.label }}</span>
+      <span class="text-big-number-lg text-(--text-default) tabular-nums">{{ s.value }}</span>
       <span
         class="text-body-sm tabular-nums"
-        :class="s.good ? 'text-[var(--text-success)]' : 'text-[var(--text-danger)]'"
+        :class="s.good ? 'text-(--text-success)' : 'text-(--text-danger)'"
         >{{ s.delta }}</span
       >
     </CardBox>
diff --git a/packages/webkit/cli-templates/claude/skills/webkit-form/SKILL.md b/packages/webkit/cli-templates/claude/skills/webkit-form/SKILL.md
index 720df57a9..ae6a33b87 100644
--- a/packages/webkit/cli-templates/claude/skills/webkit-form/SKILL.md
+++ b/packages/webkit/cli-templates/claude/skills/webkit-form/SKILL.md
@@ -136,7 +136,7 @@ if a form seems to need a different rhythm, it's in the wrong container.
 ### Hierarchy (top → down, never inverted)
 
 form title (`text-heading-*` — `PageHeading size="medium"` on a page, a `CardBox` title / `text-heading-sm`
-in a contained card, `DialogTitle` in a modal) → form description (`text-body-sm text-[var(--text-muted)]`)
+in a contained card, `DialogTitle` in a modal) → form description (`text-body-sm text-(--text-muted)`)
 → section overline (`text-overline-sm`) or sub-heading (`text-heading-xs`) → **field label** (`Label`,
 which carries the required tag) → control → **helper** (`HelperText` — guidance, or the required/invalid
 feedback). A label is never smaller than its helper; a section title is never smaller than a field label.
@@ -215,13 +215,13 @@ link on the left and Save on the right. Canonical pattern:
   >
     <template #content>
       <!-- body rhythm: fields are --spacing-lg apart; each field triad is --spacing-xs -->
-      <div class="flex flex-col gap-[var(--spacing-lg)]">
-        <p class="text-body-sm text-[var(--text-muted)]">
+      <div class="flex flex-col gap-(--spacing-lg)">
+        <p class="text-body-sm text-(--text-muted)">
           Enable the Azion Toolbar on your Deployments.
         </p>
 
-        <div class="grid grid-cols-1 gap-[var(--spacing-lg)] sm:grid-cols-2">
-          <div class="flex flex-col gap-[var(--spacing-xs)]">
+        <div class="grid grid-cols-1 gap-(--spacing-lg) sm:grid-cols-2">
+          <div class="flex flex-col gap-(--spacing-xs)">
             <Label for="tb-preprod">Pre-Production Deployments</Label>
             <Select
               v-model="form.preprod"
@@ -239,7 +239,7 @@ link on the left and Save on the right. Canonical pattern:
               </Select.Content>
             </Select>
           </div>
-          <div class="flex flex-col gap-[var(--spacing-xs)]">
+          <div class="flex flex-col gap-(--spacing-xs)">
             <Label for="tb-prod">Production Deployments</Label>
             <Select
               v-model="form.prod"
@@ -268,7 +268,7 @@ link on the left and Save on the right. Canonical pattern:
     </template>
 
     <template #footer>
-      <div class="flex w-full items-center justify-between gap-[var(--spacing-sm)]">
+      <div class="flex w-full items-center justify-between gap-(--spacing-sm)">
         <Link
           href="#"
           label="Learn more about the Azion Toolbar"
@@ -335,18 +335,18 @@ Canonical pattern:
         </PanelHeader>
 
         <!-- compact modal body: --spacing-md between blocks -->
-        <PanelContent class="flex flex-col gap-[var(--spacing-md)]">
+        <PanelContent class="flex flex-col gap-(--spacing-md)">
           <Message
             severity="warning"
             label="Once confirmed, this action can't be reversed."
           />
-          <p class="m-0 text-body-sm text-[var(--text-muted)]">
+          <p class="m-0 text-body-sm text-(--text-muted)">
             The selected Application will be deleted, along with all associated settings or
             instances.
           </p>
           <label
             for="confirm-delete"
-            class="text-body-sm text-[var(--text-default)]"
+            class="text-body-sm text-(--text-default)"
           >
             To confirm, type "{{ phrase }}" in the box below:
           </label>
@@ -397,10 +397,10 @@ Three decisions make it safe:
   `v-model`) so picking the quick-add never commits a real value. The quick-add is a normal
   `Select.Option` in the `#footer` slot carrying a sentinel value; `@update:model-value` intercepts it,
   closes the dropdown, and opens the child instead of assigning `form.*`.
-- **Explicit stacking.** A webkit `Drawer` panel sits at `z-[1001]` and a `Select.Content` teleports to
+- **Explicit stacking.** A webkit `Drawer` panel sits at `z-1001` and a `Select.Content` teleports to
   `<body>` at `z-50`, so each layer must opt its overlay / content / popups **above** the layer beneath
-  it: the child drawer's overlay `z-[1002]` / content `z-[1003]`, any `Select.Content` inside the child
-  `z-[1004]`; a `Select.Content` in the **parent** drawer needs `z-[1002]` to clear the parent panel.
+  it: the child drawer's overlay `z-1002` / content `z-1003`, any `Select.Content` inside the child
+  `z-1004`; a `Select.Content` in the **parent** drawer needs `z-1002` to clear the parent panel.
   (These `!z-[…]` overrides are the current stopgap for a webkit bug where overlay popups render behind a
   `Drawer` — remove them once webkit stacks overlay content above `Drawer`.)
 
@@ -469,8 +469,8 @@ Canonical pattern:
       id="fi-function"
       aria-label="Edge Function"
     />
-    <Select.Content class="!z-[1002]">
-      <!-- above the parent drawer panel (z-[1001]) -->
+    <Select.Content class="!z-1002">
+      <!-- above the parent drawer panel (z-1001) -->
       <Select.Option
         v-for="fn in functions"
         :key="fn.value"
@@ -494,8 +494,8 @@ Canonical pattern:
     side="right"
   >
     <DrawerPortal>
-      <DrawerOverlay class="z-[1002]" />
-      <DrawerContent class="z-[1003]">
+      <DrawerOverlay class="z-1002" />
+      <DrawerContent class="z-1003">
         <form
           class="flex min-h-0 flex-1 flex-col"
           aria-label="Create Function"
@@ -503,11 +503,11 @@ Canonical pattern:
           @submit.prevent="submitFunction"
         >
           <fieldset
-            class="m-0 flex min-w-0 flex-col gap-[var(--spacing-lg)] border-0 p-0"
+            class="m-0 flex min-w-0 flex-col gap-(--spacing-lg) border-0 p-0"
             :disabled="functionSubmitting"
           >
             <legend class="sr-only">Create function</legend>
-            <!-- Approach A ItemGroup sections here; a nested Select uses !z-[1004] -->
+            <!-- Approach A ItemGroup sections here; a nested Select uses !z-1004 -->
           </fieldset>
           <!-- PanelFooter: Cancel + Save :loading="functionSubmitting" + sr-only submit -->
         </form>
@@ -530,8 +530,8 @@ Rules:
 - **On the child's save, wire the resource back into the parent** — append it to the `Select`'s options,
   set the parent's model to the new value, clear the parent's error for that field, `toast.success`, close
   the child. The parent form keeps everything else the user had typed.
-- **Stack every layer explicitly** — child overlay `z-[1002]`, child content `z-[1003]`, a `Select.Content`
-  inside the child `z-[1004]`, a `Select.Content` in the parent `z-[1002]` (temporary overrides for the
+- **Stack every layer explicitly** — child overlay `z-1002`, child content `z-1003`, a `Select.Content`
+  inside the child `z-1004`, a `Select.Content` in the parent `z-1002` (temporary overrides for the
   webkit `Drawer`/overlay-popup stacking bug).
 - Everything else follows the **Drawer form** rules: Approach A ItemGroup sections inside each drawer,
   validation on submit only (`Item.Title` as the label, `HelperText` under the control), Enter submits via
@@ -564,8 +564,8 @@ Canonical pattern:
 </script>
 
 <template>
-  <section class="flex flex-col gap-[var(--spacing-sm)]">
-    <p class="px-[var(--spacing-xs)] text-overline-sm text-[var(--text-muted)]">General</p>
+  <section class="flex flex-col gap-(--spacing-sm)">
+    <p class="px-(--spacing-xs) text-overline-sm text-(--text-muted)">General</p>
     <CardBox :padded="false">
       <template #content>
         <Item.List>
@@ -584,7 +584,7 @@ Canonical pattern:
                    after a failed submit. An empty required field is amber
                    `required` (a prompt, NOT an error); a filled-but-malformed value
                    is red `invalid`. Emptiness picks the state — never both at once. -->
-              <div class="flex w-full max-w-[var(--container-xl)] flex-col gap-[var(--spacing-xs)]">
+              <div class="flex w-full max-w-(--container-xl) flex-col gap-(--spacing-xs)">
                 <InputText
                   v-model="form.name"
                   size="large"
@@ -620,7 +620,7 @@ Rules:
   inside an `Item` — validation feedback is the control's own `:required`/`:invalid` on submit.
 - **The validation message renders as a `HelperText` under the control.** Since there is no `Label` (so
   no `HelperText` triad) and no guidance region on the right, wrap the control in a field-width
-  `flex flex-col gap-[var(--spacing-xs)]` column — capped at `max-w-[var(--container-xl)]` (576px) so the
+  `flex flex-col gap-(--spacing-xs)` column — capped at `max-w-(--container-xl)` (576px) so the
   control column stays a legible field width on wide pages — and render a `<HelperText>` **below** it, shown only
   after a failed submit and linked to the control via `aria-describedby`. This is still the field saying
   what it needs, on the field — **not** a summary block or a `Message` callout. `Item.Description` stays
@@ -647,8 +647,8 @@ header. The `<section>` stacks the overline over the card with `--spacing-sm` (1
 card read as a single divided block of rows.
 
 ```vue
-<section class="flex flex-col gap-[var(--spacing-sm)]">
-  <p class="px-[var(--spacing-xs)] text-overline-sm text-[var(--text-muted)]">General</p>
+<section class="flex flex-col gap-(--spacing-sm)">
+  <p class="px-(--spacing-xs) text-overline-sm text-(--text-muted)">General</p>
   <CardBox :padded="false">
     <template #content>
       <Item.List>
@@ -661,12 +661,12 @@ card read as a single divided block of rows.
 
 Rules:
 
-- **The section title is `text-overline-sm text-[var(--text-muted)]`** with `px-[var(--spacing-xs)]`
+- **The section title is `text-overline-sm text-(--text-muted)`** with `px-(--spacing-xs)`
   inset so it aligns with the card's content; `--spacing-sm` gap to the card (per the spacing macro rule).
 - **The card is header-less** (`:padded="false"`, only `#content`). Don't also set a `CardBox` `title` —
   the overline is the section title; a card header would double it.
 - **A dangerous section** (Danger Zone) reuses the pattern with the danger tokens: overline in
-  `text-[var(--danger-contrast)]` above a `CardBox class="border-[var(--danger-border)] bg-[var(--danger)]"`.
+  `text-(--danger-contrast)` above a `CardBox class="border-(--danger-border) bg-(--danger)"`.
 - **Overline vs `CardBox` title — pick by role.** An **OVERLINE above** the card titles a _section of a
   larger page_ (multi-Card ItemGroup). A **`CardBox` `title`** (in the card header) names a _self-contained
   card that is the form_ — the "CardBox with its own save" / Contained form. Never use both on one card.
@@ -691,12 +691,12 @@ so only the field's amber (border + helper) is revealed on submit. Canonical pat
 </script>
 
 <template>
-  <div class="flex flex-col gap-[var(--spacing-md)]">
+  <div class="flex flex-col gap-(--spacing-md)">
     <!-- Label required ALWAYS (rendered here; the wrapper gets no `label`). Empty →
          :required (amber), the wrapper's helper flips to kind=required. A malformed
          value → :invalid (red). Never both at once. `errors.name` holds the message
          ("" = valid), so the helper falls back to guidance when clear. -->
-    <div class="flex w-full flex-col gap-[var(--spacing-xs)]">
+    <div class="flex w-full flex-col gap-(--spacing-xs)">
       <Label
         for="app-name"
         required
@@ -773,7 +773,7 @@ attribute, which is how you lock the scope on submit.
 
 ```vue
 <fieldset
-  class="m-0 flex min-w-0 flex-col gap-[var(--spacing-lg)] border-0 p-0"
+  class="m-0 flex min-w-0 flex-col gap-(--spacing-lg) border-0 p-0"
   :disabled="submitting"
 >
   <legend class="sr-only">Account settings</legend>
@@ -874,9 +874,9 @@ active mid-submit. Keep the `<fieldset :disabled="submitting">` as the native sa
 
 ```vue
 <footer
-  class="sticky bottom-0 border-t-[length:var(--border-width-default)] border-[var(--border-muted)] bg-[var(--bg-surface)]"
+  class="sticky bottom-0 border-t-(length:--border-width-default) border-(--border-muted) bg-(--bg-surface)"
 >
-  <div class="mx-auto flex max-w-[var(--container-5xl)] items-center justify-end gap-[var(--spacing-sm)] px-[var(--spacing-xl)] py-[var(--spacing-sm)]">
+  <div class="mx-auto flex max-w-(--container-5xl) items-center justify-end gap-(--spacing-sm) px-(--spacing-xl) py-(--spacing-sm)">
     <Button type="button" label="Cancel" kind="outlined" size="medium" :disabled="submitting" @click="cancel" />
     <Button label="Save" kind="primary" size="medium" :loading="submitting" @click="submit" />
   </div>
diff --git a/packages/webkit/cli-templates/claude/skills/webkit-navigation/SKILL.md b/packages/webkit/cli-templates/claude/skills/webkit-navigation/SKILL.md
index 1b989ad9b..e9d32e3d4 100644
--- a/packages/webkit/cli-templates/claude/skills/webkit-navigation/SKILL.md
+++ b/packages/webkit/cli-templates/claude/skills/webkit-navigation/SKILL.md
@@ -119,7 +119,7 @@ the webkit primitives and reuse it on every browse page:
       </GlobalHeader>
 
       <!-- The shell owns the --spacing-md inset ONCE; pages never re-pad -->
-      <main class="min-h-0 flex-1 overflow-auto p-[var(--spacing-md)]">
+      <main class="min-h-0 flex-1 overflow-auto p-(--spacing-md)">
         <slot />
       </main>
     </div>
@@ -208,7 +208,7 @@ Again, **you compose this shell** — there is no `@aziontech/webkit/creation-he
 </script>
 
 <template>
-  <div class="flex h-dvh flex-col bg-[var(--bg-canvas)]">
+  <div class="flex h-dvh flex-col bg-(--bg-canvas)">
     <!-- EXACTLY ONE GlobalHeader; it IS the whole chrome for a focused flow -->
     <GlobalHeader>
       <GlobalHeader.Brand><!-- Azion brand --></GlobalHeader.Brand>
@@ -287,8 +287,8 @@ never feels like a different app.
 The content zone's padding is `--spacing-md` — the same edge padding as `GlobalHeader` — so page
 content lines up with the breadcrumb and the header actions. Your persistent shell applies this inset
 **once** (e.g. on its `<main>`, as in `AppShell` above); **don't** re-pad the page with a bespoke
-inset (`p-[var(--spacing-lg)]`). A resource-detail page that opts out of the shell inset (to run a
-full-bleed tab bar) re-applies the same `p-[var(--spacing-md)]` on its own scrolling content region —
+inset (`p-(--spacing-lg)`). A resource-detail page that opts out of the shell inset (to run a
+full-bleed tab bar) re-applies the same `p-(--spacing-md)` on its own scrolling content region —
 never `lg`.
 
 ### List / module pages — heading out, table in a flush card
@@ -299,7 +299,7 @@ never `lg`.
     active="applications"
     :breadcrumb="[{ label: 'Applications' }]"
   >
-    <main class="flex h-full flex-col gap-[var(--spacing-lg)]">
+    <main class="flex h-full flex-col gap-(--spacing-lg)">
       <!-- PageHeading sits OUT of the card and carries the primary actions. -->
       <PageHeading
         title="Applications"
@@ -348,7 +348,7 @@ never `lg`.
 ### Resource-detail pages — a fluid tab bar over the same content
 
 A resource you navigate INTO, or a settings hub, opts out of the shell inset to run a **full-bleed tab
-bar** as the bottom of the header, then scrolls its content in a `p-[var(--spacing-md)]` region. Each
+bar** as the bottom of the header, then scrolls its content in a `p-(--spacing-md)` region. Each
 tab renders one of two bodies — and both lead with the heading OUT, `--spacing-lg` down to the content:
 
 - **A list tab** → the exact list pattern above (`PageHeading` out + flush borderless `Table`), with
@@ -381,8 +381,8 @@ The rhythm is invariant across both: the heading is always **out** of the card,
   when the primitives exist, and never import a nonexistent `@aziontech/webkit/app-layout` or
   `/creation-header`.
 - **The content inset is `--spacing-md`** — the header's edge padding. Take it from your shell (applied
-  once); a page that runs a full-bleed tab bar re-applies `p-[var(--spacing-md)]` on its own content
-  region. Never a bespoke `p-[var(--spacing-lg)]` page inset.
+  once); a page that runs a full-bleed tab bar re-applies `p-(--spacing-md)` on its own content
+  region. Never a bespoke `p-(--spacing-lg)` page inset.
 - **A list table lives in a flush, borderless `CardBox` with the `PageHeading` out of the card.**
   `CardBox :padded="false"` + `Table :border="false"`; the heading (and its actions) sits above the
   card, `--spacing-lg` away. Never bury the heading in the card `#header`, never ship a bare bordered
diff --git a/packages/webkit/cli-templates/claude/skills/webkit-tables/SKILL.md b/packages/webkit/cli-templates/claude/skills/webkit-tables/SKILL.md
index 3b3a610fe..038ae9d78 100644
--- a/packages/webkit/cli-templates/claude/skills/webkit-tables/SKILL.md
+++ b/packages/webkit/cli-templates/claude/skills/webkit-tables/SKILL.md
@@ -105,7 +105,7 @@ type, options? }`) drives the `Table.Filter` builder.
 
 ```vue
 <template #toolbar>
-  <div class="flex w-full items-center gap-[var(--spacing-xs)]">
+  <div class="flex w-full items-center gap-(--spacing-xs)">
     <Table.Filter :fields="filterFields" />
     <Table.Search
       size="large"
@@ -153,7 +153,7 @@ recipes verbatim so a cell type looks identical across every table.
 
 ```vue
 <template #cell-name="{ value, row }">
-  <div class="flex min-w-0 items-center gap-[var(--spacing-xs)]">
+  <div class="flex min-w-0 items-center gap-(--spacing-xs)">
     <i
       :class="presetIcon(row.preset)"
       class="shrink-0 text-[1.15em]"
@@ -203,17 +203,17 @@ column (`w-full`) — so every copy button lines up vertically no matter how lon
 ```vue
 <template #cell-domainName="{ value }">
   <!-- Domain link (truncates) + external-redirect arrow; copy button pinned right so it aligns across rows. -->
-  <div class="flex w-full min-w-0 items-center gap-[var(--spacing-xs)]">
+  <div class="flex w-full min-w-0 items-center gap-(--spacing-xs)">
     <a
       :href="`https://${value}`"
       target="_blank"
       rel="noopener noreferrer"
-      class="flex min-w-0 items-center gap-[var(--spacing-xxs)] hover:underline"
+      class="flex min-w-0 items-center gap-(--spacing-xxs) hover:underline"
       @click.stop
     >
       <span class="truncate">{{ value }}</span>
       <i
-        class="pi pi-arrow-up-right shrink-0 text-[var(--text-muted)]"
+        class="pi pi-arrow-up-right shrink-0 text-(--text-muted)"
         aria-hidden="true"
       />
     </a>
@@ -245,11 +245,11 @@ copy (if any) still pins right.
     <Tag :label="`+${row.domainCount}`" severity="secondary" size="small" class="shrink-0 cursor-pointer" />
   </Popover.Trigger>
   <Popover.Content @click.stop>
-    <div class="flex max-h-[var(--container-xs)] flex-col overflow-auto p-[var(--spacing-xxs)]">
-      <p class="px-[var(--spacing-xs)] py-[var(--spacing-xxs)] text-overline-sm text-[var(--text-muted)]">
+    <div class="flex max-h-(--container-xs) flex-col overflow-auto p-(--spacing-xxs)">
+      <p class="px-(--spacing-xs) py-(--spacing-xxs) text-overline-sm text-(--text-muted)">
         {{ row.domains.length }} domains
       </p>
-      <span v-for="d in row.domains" :key="d" class="truncate px-[var(--spacing-xs)] py-[var(--spacing-xxs)] text-body-sm">
+      <span v-for="d in row.domains" :key="d" class="truncate px-(--spacing-xs) py-(--spacing-xxs) text-body-sm">
         {{ d }}
       </span>
     </div>
@@ -264,7 +264,7 @@ copy pinned to the right edge:
 
 ```vue
 <template #cell-value="{ value }">
-  <div class="flex w-full min-w-0 items-center gap-[var(--spacing-xs)]">
+  <div class="flex w-full min-w-0 items-center gap-(--spacing-xs)">
     <span class="min-w-0 truncate">{{ value }}</span>
     <CopyButton
       kind="outlined"
@@ -287,7 +287,7 @@ identical:
 ```vue
 <!-- your own LastModifiedCell — Avatar (tooltip = name) + relative time -->
 <template #cell-lastModified="{ value, row }">
-  <div class="flex min-w-0 items-center gap-[var(--spacing-xs)]">
+  <div class="flex min-w-0 items-center gap-(--spacing-xs)">
     <Tooltip
       v-if="row.author"
       :text="row.author"
@@ -297,7 +297,7 @@ identical:
         size="small"
       />
     </Tooltip>
-    <span class="truncate text-body-sm text-[var(--text-muted)]">{{ relativeTime(value) }}</span>
+    <span class="truncate text-body-sm text-(--text-muted)">{{ relativeTime(value) }}</span>
   </div>
 </template>
 ```
diff --git a/packages/webkit/cli-templates/claude/skills/webkit-theming-dark-mode/SKILL.md b/packages/webkit/cli-templates/claude/skills/webkit-theming-dark-mode/SKILL.md
index dbea3c9b0..cc321fcf7 100644
--- a/packages/webkit/cli-templates/claude/skills/webkit-theming-dark-mode/SKILL.md
+++ b/packages/webkit/cli-templates/claude/skills/webkit-theming-dark-mode/SKILL.md
@@ -65,9 +65,9 @@ at once. Bind a raw color and you have pinned one theme.
 ```vue
 <!-- ✅ role-based: correct in both themes, no branches -->
 <div
-  class="bg-[var(--bg-surface)] text-[var(--text-default)] border border-[var(--border-default)]"
+  class="bg-(--bg-surface) text-(--text-default) border border-(--border-default)"
 >
-  <span class="text-[var(--primary)]">Active</span>
+  <span class="text-(--primary)">Active</span>
 </div>
 
 <!-- ❌ value-based: legible in one theme, broken in the other -->
@@ -89,9 +89,9 @@ names from the theme package; never invent a `surface-3`.
 
 ```vue
 <!-- page → card → menu: each layer is a role, depth reads in both themes -->
-<div class="bg-[var(--bg-canvas)]">
-  <div class="bg-[var(--bg-surface)]">...</div>
-  <div class="bg-[var(--bg-surface-raised)]">popover / menu</div>
+<div class="bg-(--bg-canvas)">
+  <div class="bg-(--bg-surface)">...</div>
+  <div class="bg-(--bg-surface-raised)">popover / menu</div>
 </div>
 ```
 
@@ -106,9 +106,9 @@ themes. Keep the fill as `background-color` and put the sweep in a gradient whos
 
 ```vue
 <!-- ❌ opaque surface as a placeholder: near-invisible on a card in light -->
-<div class="bg-[var(--bg-surface-overlay)]" />
+<div class="bg-(--bg-surface-overlay)" />
 <!-- ✅ translucent placeholder role, correct on any layer in both themes -->
-<div class="bg-[var(--bg-placeholder)]" />
+<div class="bg-(--bg-placeholder)" />
 ```
 
 Prefer the design system's `Skeleton` component over hand-rolling this — it already pairs the tokens
@@ -125,7 +125,7 @@ full of `dark:` overrides is a screen that stopped trusting the tokens.
 <!-- ❌ re-implements what --bg-surface already does per theme -->
 <div class="bg-white dark:bg-zinc-900 text-black dark:text-white">
 <!-- ✅ one role, no per-theme branch -->
-<div class="bg-[var(--bg-surface)] text-[var(--text-default)]">
+<div class="bg-(--bg-surface) text-(--text-default)">
 ```
 
 ## A card that needs zero changes across themes
@@ -143,15 +143,15 @@ and accent all move together.
 
 <template>
   <article
-    class="rounded-[var(--shape-card)] p-[var(--spacing-md)]
-           bg-[var(--bg-surface)] text-[var(--text-default)]
-           border border-[var(--border-default)]"
+    class="rounded-(--shape-card) p-(--spacing-md)
+           bg-(--bg-surface) text-(--text-default)
+           border border-(--border-default)"
   >
-    <h3 class="text-[var(--text-default)]">Workload health</h3>
-    <p class="text-[var(--text-secondary)]">Requests are within normal range.</p>
-    <span class="text-[var(--primary)]">View details</span>
+    <h3 class="text-(--text-default)">Workload health</h3>
+    <p class="text-(--text-secondary)">Requests are within normal range.</p>
+    <span class="text-(--primary)">View details</span>
     <button
-      class="mt-[var(--spacing-sm)] text-[var(--primary)]"
+      class="mt-(--spacing-sm) text-(--primary)"
       @click="toggleTheme"
     >
       Toggle theme
@@ -195,7 +195,7 @@ For `/webkit-theming-dark-mode <file>`, list gaps grouped by element. Each:
 ```
 ✗ WorkloadCard.vue:14  class="bg-white text-zinc-900 border-slate-200"
   theme: hard-coded light values — dark renders white-on-dark, unreadable.
-  fix: bg-[var(--bg-surface)] text-[var(--text-default)] border-[var(--border-default)]
+  fix: bg-(--bg-surface) text-(--text-default) border-(--border-default)
 ```
 
 End with: `theme-safe (both themes)` or `N gaps — fix before verifying`.
diff --git a/packages/webkit/cli-templates/claude/skills/webkit-ui-craft/SKILL.md b/packages/webkit/cli-templates/claude/skills/webkit-ui-craft/SKILL.md
index 803a59ea6..388bab8ec 100644
--- a/packages/webkit/cli-templates/claude/skills/webkit-ui-craft/SKILL.md
+++ b/packages/webkit/cli-templates/claude/skills/webkit-ui-craft/SKILL.md
@@ -46,7 +46,7 @@ webkit primitives.
 3. **Typography hierarchy** — only the `text-*` tokens, never inverted (`text-heading-* >
 text-body-* > text-label-* > text-overline-*`). See `/webkit-baseline-ui`.
 4. **Spacing rhythm** — one `--spacing-*` step, applied consistently. See `/webkit-baseline-ui`.
-5. **Contain the page** — cap reading/content width with `max-w-[var(--container-*)]`, keep
+5. **Contain the page** — cap reading/content width with `max-w-(--container-*)`, keep
    data-dense surfaces fluid; never a raw `px`/`rem` width. The full container doctrine (fluid-first
    shell, focused-flow centering) lives in `/webkit-baseline-ui`.
 6. **Token motion only** — `animate-*` utilities + `duration-*`/`ease-*` tokens, with a
diff --git a/packages/webkit/cli-templates/claude/skills/webkit-ui-states/SKILL.md b/packages/webkit/cli-templates/claude/skills/webkit-ui-states/SKILL.md
index d13112982..16228e82b 100644
--- a/packages/webkit/cli-templates/claude/skills/webkit-ui-states/SKILL.md
+++ b/packages/webkit/cli-templates/claude/skills/webkit-ui-states/SKILL.md
@@ -140,7 +140,7 @@ The state-matrix render — Skeleton (data in), then Message / EmptyState / data
   <!-- Loading: reserve the shape of the arriving content -->
   <div
     v-if="loading"
-    class="flex flex-col gap-[var(--spacing-sm)]"
+    class="flex flex-col gap-(--spacing-sm)"
   >
     <Skeleton
       kind="shape"
@@ -189,7 +189,7 @@ The state-matrix render — Skeleton (data in), then Message / EmptyState / data
   <!-- Success: the data -->
   <ul
     v-else
-    class="flex flex-col gap-[var(--spacing-xs)]"
+    class="flex flex-col gap-(--spacing-xs)"
   >
     <li
       v-for="r in rows"
diff --git a/packages/webkit/cli-templates/claude/skills/webkit-usage/SKILL.md b/packages/webkit/cli-templates/claude/skills/webkit-usage/SKILL.md
index e8f9978c6..0ffeefc4c 100644
--- a/packages/webkit/cli-templates/claude/skills/webkit-usage/SKILL.md
+++ b/packages/webkit/cli-templates/claude/skills/webkit-usage/SKILL.md
@@ -58,7 +58,7 @@ A few components need **one-time wiring in the app entry before first use** —
 </script>
 
 <template>
-  <Button class="bg-[var(--primary)] text-[var(--primary-contrast)]">Save</Button>
+  <Button class="bg-(--primary) text-(--primary-contrast)">Save</Button>
 </template>
 ```
 
diff --git a/packages/webkit/docs/DOC_LINTS.md b/packages/webkit/docs/DOC_LINTS.md
index 6328435d5..1da678eb4 100644
--- a/packages/webkit/docs/DOC_LINTS.md
+++ b/packages/webkit/docs/DOC_LINTS.md
@@ -1540,7 +1540,7 @@ Blocks hex/rgb/hsl colors, raw Tailwind palette, raw typography, `any`, `@ts-ign
 <button class="bg-[#f3652b] text-orange-500 text-sm font-['Inter']" />
 
 <!-- ✅ tokens + generated typography classes from DESIGN.md -->
-<button class="bg-[var(--primary)] text-[var(--primary-contrast)] text-button-lg" />
+<button class="bg-(--primary) text-(--primary-contrast) text-button-lg" />
 ```
 
 ### `validate-references.mjs` — imports must exist
diff --git a/packages/webkit/docs/GUIDELINES.md b/packages/webkit/docs/GUIDELINES.md
index 5eb929bce..66b21caa1 100644
--- a/packages/webkit/docs/GUIDELINES.md
+++ b/packages/webkit/docs/GUIDELINES.md
@@ -37,9 +37,9 @@ typography) are **blocked** by lint and hooks — the token is always the answer
 | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
 | **Color**      | `var(--primary)` · `var(--bg-surface)` · `var(--text-default)` · `var(--border-default)` · feedback `--success/--warning/--danger/--info`   | `#f3652b` · `text-blue-600` · `rgb(…)`                    |
 | **Typography** | the generated classes — `text-heading-md`, `text-body-sm`, `text-button-lg`, `text-label-md` (font + size + line-height + tracking bundled) | `text-sm` · `leading-*` · `tracking-*` · `font-family`    |
-| **Spacing**    | the semantic scale — `p-[var(--spacing-md)]` · `gap-[var(--spacing-sm)]` (`xxs…xxl`)                                                        | primitive `--spacing-1…-96` · `p-4` when a token applies  |
-| **Shape**      | `rounded-[var(--shape-button)]` · `--shape-card` · `--shape-elements`                                                                       | `rounded-lg` · numeric radii                              |
-| **Shadow**     | `shadow-[var(--shadow-md)]`                                                                                                                 | bare `shadow-md` · hex/rgb elevation                      |
+| **Spacing**    | the semantic scale — `p-(--spacing-md)` · `gap-(--spacing-sm)` (`xxs…xxl`)                                                        | primitive `--spacing-1…-96` · `p-4` when a token applies  |
+| **Shape**      | `rounded-(--shape-button)` · `--shape-card` · `--shape-elements`                                                                       | `rounded-lg` · numeric radii                              |
+| **Shadow**     | `shadow-(--shadow-md)`                                                                                                                 | bare `shadow-md` · hex/rgb elevation                      |
 | **Motion**     | catalogued `animate-*` utilities + `transition-*` with token durations; **every** motion class pairs with `motion-reduce:`                  | local `@keyframes` · `duration-[…]` · animation libraries |
 
 Tokens are light/dark aware — using them is what makes a component theme correctly for free.
@@ -61,7 +61,7 @@ Each is a `scope: general` standard. Follow ✅, avoid ❌.
 | **Event payloads**      | `emit('click', item)` · `{ value, event }` payload objects           | activation events emit `(event, item?)` — DOM event always first                        |
 | **Slots**               | `<slot/>` with no declaration                                        | `defineSlots<{ default():unknown }>()`                                                  |
 | **Composables**         | `return reactive({…})`                                               | `return { value: readonly(v), set }` · args via `toValue` · cleanup in `onScopeDispose` |
-| **Styling**             | `const kindClasses = {…}` · `#f3652b` · `text-blue-600`              | `data-[kind=primary]:bg-[var(--primary)]` inline · tokens only                          |
+| **Styling**             | `const kindClasses = {…}` · `#f3652b` · `text-blue-600`              | `data-[kind=primary]:bg-(--primary)` inline · tokens only                          |
 | **Component structure** | random `<script setup>` order                                        | fixed order: options → props → emits → models → slots → state                           |
 | **Root element**        | wrapper `<div>` that swallows attrs · `as` prop                      | own the root · `inheritAttrs:false` + `$attrs` + `cn` · polymorphism via `href`         |
 | **States**              | ad-hoc spinner / "no results" string                                 | `data-*` + `Skeleton` / `EmptyState`                                                    |
@@ -116,7 +116,7 @@ export default [...webkit.configs.recommended]
 | **Tree-shaking**          | `import Table` (compound) when you only render the root | `import TableRoot from '@aziontech/webkit/table-root'`   |
 | **Don't override styles** | `<Button class="p-8" />`                                | compose inside its slots, or use a `styleSeam` component |
 | **No deprecated**         | importing a deprecated component                        | the suggested replacement                                |
-| **Tokens, not colors**    | `class="text-[#fff]"`                                   | `class="text-[var(--text-default)]"`                     |
+| **Tokens, not colors**    | `class="text-[#fff]"`                                   | `class="text-(--text-default)"`                     |
 | **Icons**                 | `import Icons from '@aziontech/icons'`                  | `import '@aziontech/icons'` (side-effect)                |
 
 **Discover the API before you write it:** the webkit MCP server (`npx webkit-mcp`, wired
diff --git a/packages/webkit/docs/STYLEGUIDE.md b/packages/webkit/docs/STYLEGUIDE.md
index 52de9ec80..79f338da8 100644
--- a/packages/webkit/docs/STYLEGUIDE.md
+++ b/packages/webkit/docs/STYLEGUIDE.md
@@ -50,9 +50,9 @@ the answer, and using it is what makes light/dark theming work for free.
 | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
 | Color      | `var(--primary)` · `var(--bg-surface)` · `var(--text-default)` · `var(--border-default)` · feedback `--success/--warning/--danger/--info` (+ `-contrast`/`-border`) | `#f3652b` · `rgb(…)` · `hsl(…)` · Tailwind palette (`text-blue-600`, `bg-gray-500`)        |
 | Typography | generated classes — `text-heading-md`, `text-body-sm`, `text-button-lg`, `text-label-md`, `text-overline-md` (font + size + line-height + tracking bundled)         | `text-sm` · `leading-*` · `tracking-*` · `font-family` · `text-[length:…]`                 |
-| Spacing    | the semantic scale `var(--spacing-xxs…xxl)` — `p-[var(--spacing-md)]`, `gap-[var(--spacing-sm)]`                                                                    | the primitive numeric scale (`--spacing-1…-96`) · `p-4` when a token applies · `p-[13px]`  |
-| Shape      | `rounded-[var(--shape-button)]` · `--shape-card` · `--shape-elements` · `rounded-[inherit]` for pseudo-elements                                                     | `rounded-lg` · numeric radii                                                               |
-| Shadow     | `shadow-[var(--shadow-md)]`                                                                                                                                         | bare `shadow-md` · hex/rgb elevation · legacy `--card-shadow`                              |
+| Spacing    | the semantic scale `var(--spacing-xxs…xxl)` — `p-(--spacing-md)`, `gap-(--spacing-sm)`                                                                    | the primitive numeric scale (`--spacing-1…-96`) · `p-4` when a token applies · `p-[13px]`  |
+| Shape      | `rounded-(--shape-button)` · `--shape-card` · `--shape-elements` · `rounded-[inherit]` for pseudo-elements                                                     | `rounded-lg` · numeric radii                                                               |
+| Shadow     | `shadow-(--shadow-md)`                                                                                                                                         | bare `shadow-md` · hex/rgb elevation · legacy `--card-shadow`                              |
 | Motion     | catalogued `animate-*` utilities + `transition-*` with token durations; **every** motion class pairs with `motion-reduce:`                                          | local `@keyframes` · `animate-[…]` / `duration-[…]` arbitrary values · animation libraries |
 
 If a design needs a color/size that has no token, that is a **theme gap**: record it and
@@ -346,11 +346,11 @@ blocks, no component-local CSS.**
 <button
   :data-kind="kind"
   :data-disabled="disabled || null"
-  class="inline-flex items-center rounded-[var(--shape-button)]
+  class="inline-flex items-center rounded-(--shape-button)
     transition-colors duration-150 ease-out motion-reduce:transition-none
-    data-[kind=primary]:bg-[var(--primary)] data-[kind=primary]:text-[var(--primary-contrast)]
-    data-[kind=secondary]:bg-[var(--secondary)]
-    data-[disabled]:bg-[var(--bg-disabled)] data-[disabled]:cursor-not-allowed"
+    data-[kind=primary]:bg-(--primary) data-[kind=primary]:text-(--primary-contrast)
+    data-[kind=secondary]:bg-(--secondary)
+    data-[disabled]:bg-(--bg-disabled) data-[disabled]:cursor-not-allowed"
 >
   <slot />
 </button>
@@ -359,7 +359,7 @@ blocks, no component-local CSS.**
 <!-- prettier-ignore -->
 ```ts
 // ❌ the whole class-map pattern is banned
-const kindClasses = { primary: 'bg-[var(--primary)]' }
+const kindClasses = { primary: 'bg-(--primary)' }
 const rootClasses = computed(() => [shared, kindClasses[props.kind]])
 ```
 
@@ -400,7 +400,7 @@ const attrs = useAttrs()
 
 <template>
   <div v-bind="$attrs" :data-testid="testId"
-    :class="cn('rounded-[var(--shape-card)] bg-[var(--bg-surface)]', attrs.class as string)">
+    :class="cn('rounded-(--shape-card) bg-(--bg-surface)', attrs.class as string)">
     <slot />
   </div>
 </template>
diff --git a/packages/webkit/src/cli/plan.js b/packages/webkit/src/cli/plan.js
index e02845bf6..83a2d9f2c 100644
--- a/packages/webkit/src/cli/plan.js
+++ b/packages/webkit/src/cli/plan.js
@@ -197,7 +197,7 @@ function postcssConfig() {
 // pulls the design system's Tailwind v4 stylesheet (tokens + `@import "tailwindcss"` + web
 // fonts) in one line; `@import '@aziontech/webkit/styles'` then registers webkit's SOURCE
 // with Tailwind (its `@source` lives inside the package and resolves relative to it) so the
-// component utility classes (data-[kind=…]:bg-[var(--…)]) are generated in the consumer's
+// component utility classes (data-[kind=…]:bg-(--…)) are generated in the consumer's
 // build — node_modules is excluded from Tailwind's auto content-detection, so without it the
 // webkit components render UNSTYLED. Both imports resolve by package name: no relative
 // ../node_modules path, immune to hoisting / workspace layouts. The consumer's own src is
diff --git a/packages/webkit/src/components/actions/button-highlight/button-highlight.vue b/packages/webkit/src/components/actions/button-highlight/button-highlight.vue
index 52bad7646..dde55bc98 100644
--- a/packages/webkit/src/components/actions/button-highlight/button-highlight.vue
+++ b/packages/webkit/src/components/actions/button-highlight/button-highlight.vue
@@ -56,17 +56,17 @@
 
   const ROOT_CLASS =
     'group/highlight relative inline-flex items-center justify-center isolate overflow-hidden whitespace-nowrap p-px ' +
-    'rounded-[var(--shape-button)] ' +
-    'border border-[length:var(--border-width-default)] border-[var(--secondary-mask)] ' +
+    'rounded-(--shape-button) ' +
+    'border border-(length:--border-width-default) border-(--secondary-mask) ' +
     'transition-colors duration-fast-02 ease-productive-entrance motion-reduce:transition-none ' +
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] ' +
-    'focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] ' +
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) ' +
+    'focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) ' +
     'data-[size=large]:min-w-20 data-[size=large]:h-10 ' +
     'data-[size=medium]:min-w-16 data-[size=medium]:h-8 ' +
     'data-[size=small]:min-w-14 data-[size=small]:h-7 ' +
     'data-[loading]:cursor-wait ' +
     'data-[disabled]:cursor-not-allowed ' +
-    'data-[inactive]:border-transparent data-[inactive]:bg-[var(--bg-disabled)]'
+    'data-[inactive]:border-transparent data-[inactive]:bg-(--bg-disabled)'
 
   const GLOW_CLASS =
     'absolute inset-0 pointer-events-none ' +
@@ -82,23 +82,23 @@
     'transition-opacity duration-300 ease-out motion-reduce:transition-none ' +
     'group-hover/highlight:opacity-25 ' +
     'group-data-[inactive]/highlight:[background-image:none] ' +
-    'group-data-[inactive]/highlight:bg-[var(--bg-disabled)] ' +
+    'group-data-[inactive]/highlight:bg-(--bg-disabled) ' +
     'group-data-[inactive]/highlight:opacity-100'
 
   const SCRIM_CLASS =
     'absolute inset-px pointer-events-none rounded-[inherit] ' +
-    'bg-[var(--bg-backdrop)] ' +
+    'bg-(--bg-backdrop) ' +
     'transition-opacity duration-300 ease-out motion-reduce:transition-none ' +
     'group-hover/highlight:opacity-25 ' +
     'group-data-[inactive]/highlight:hidden'
 
   const CONTENT_CLASS =
-    'relative z-[1] inline-flex items-center justify-center gap-[var(--spacing-xs)] w-full h-full ' +
-    'text-[var(--color-base-white)] ' +
-    'data-[size=large]:px-[var(--spacing-md)] data-[size=large]:text-button-lg ' +
-    'data-[size=medium]:px-[var(--spacing-sm)] data-[size=medium]:text-button-md ' +
-    'data-[size=small]:px-[var(--spacing-xs)] data-[size=small]:text-button-md ' +
-    'group-data-[inactive]/highlight:text-[var(--text-disabled)]'
+    'relative z-1 inline-flex items-center justify-center gap-(--spacing-xs) w-full h-full ' +
+    'text-(--color-base-white) ' +
+    'data-[size=large]:px-(--spacing-md) data-[size=large]:text-button-lg ' +
+    'data-[size=medium]:px-(--spacing-sm) data-[size=medium]:text-button-md ' +
+    'data-[size=small]:px-(--spacing-xs) data-[size=small]:text-button-md ' +
+    'group-data-[inactive]/highlight:text-(--text-disabled)'
 
   const rootClasses = computed(() => cn(ROOT_CLASS, attrs.class as string | undefined))
 
diff --git a/packages/webkit/src/components/actions/button/button.vue b/packages/webkit/src/components/actions/button/button.vue
index 04c4c8dec..182f7d642 100644
--- a/packages/webkit/src/components/actions/button/button.vue
+++ b/packages/webkit/src/components/actions/button/button.vue
@@ -67,38 +67,38 @@
 
   const sharedClasses = [
     'relative inline-flex items-center justify-center whitespace-nowrap',
-    'rounded-[var(--shape-button)]',
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)]',
-    'focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]',
+    'rounded-(--shape-button)',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color)',
+    'focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)',
     ...ghostLayerClasses
   ]
 
   const kindClasses: Record<ButtonKind, string> = {
     primary:
-      'bg-[var(--primary)] text-[var(--primary-contrast)] before:bg-[var(--bg-hover)] after:bg-[var(--bg-active)]',
+      'bg-(--primary) text-(--primary-contrast) before:bg-(--bg-hover) after:bg-(--bg-active)',
     secondary:
-      'bg-[var(--secondary)] text-[var(--secondary-contrast)] before:bg-[var(--bg-hover)] after:bg-[var(--bg-active)]',
+      'bg-(--secondary) text-(--secondary-contrast) before:bg-(--bg-hover) after:bg-(--bg-active)',
     outlined:
-      'border border-[var(--border-default)] bg-[var(--bg-surface)] text-[var(--text-default)] before:bg-[var(--bg-mask)] after:bg-[var(--bg-active)]',
-    text: 'bg-transparent text-[var(--text-default)] before:bg-[var(--bg-mask)] after:bg-[var(--bg-active)]',
+      'border border-(--border-default) bg-(--bg-surface) text-(--text-default) before:bg-(--bg-mask) after:bg-(--bg-active)',
+    text: 'bg-transparent text-(--text-default) before:bg-(--bg-mask) after:bg-(--bg-active)',
     danger:
-      'border border-[var(--danger-border)] bg-[var(--danger)] text-[var(--danger-contrast)] before:bg-[var(--bg-hover)] after:bg-[var(--bg-active)]'
+      'border border-(--danger-border) bg-(--danger) text-(--danger-contrast) before:bg-(--bg-hover) after:bg-(--bg-active)'
   }
 
   // Disabled shows the not-allowed cursor. Interaction is blocked natively (`<button :disabled>`)
   // and via the handleClick guard (anchor), so pointer-events stay on for the cursor to render.
   const disabledClasses =
-    'cursor-not-allowed border-transparent bg-[var(--bg-disabled)] text-[var(--text-disabled)] before:hidden after:hidden'
+    'cursor-not-allowed border-transparent bg-(--bg-disabled) text-(--text-disabled) before:hidden after:hidden'
 
   // Loading reuses the disabled visual tokens (per design) but keeps the loading cursor
   // and the spinner. Interaction stays blocked via handleClick.
   const loadingClasses =
-    'cursor-wait border-transparent bg-[var(--bg-disabled)] text-[var(--text-disabled)] before:hidden after:hidden'
+    'cursor-wait border-transparent bg-(--bg-disabled) text-(--text-disabled) before:hidden after:hidden'
 
   const sizeClasses: Record<ButtonSize, string> = {
-    large: 'min-w-20 h-10 px-[var(--spacing-md)] text-button-lg',
-    medium: 'min-w-16 h-8 px-[var(--spacing-sm)] text-button-md',
-    small: 'min-w-14 h-7 px-[var(--spacing-xs)] text-button-md'
+    large: 'min-w-20 h-10 px-(--spacing-md) text-button-lg',
+    medium: 'min-w-16 h-8 px-(--spacing-sm) text-button-md',
+    small: 'min-w-14 h-7 px-(--spacing-xs) text-button-md'
   }
 
   const spinnerSizeClasses: Record<ButtonSize, string> = {
@@ -143,7 +143,7 @@
     :data-testid="testId"
     @click="handleClick"
   >
-    <span class="relative z-[1] inline-flex items-center gap-[var(--spacing-xs)]">
+    <span class="relative z-1 inline-flex items-center gap-(--spacing-xs)">
       <Spinner
         v-if="loading"
         :class="spinnerSizeClasses[size]"
@@ -170,7 +170,7 @@
     :data-testid="testId"
     @click="handleClick"
   >
-    <span class="relative z-[1] inline-flex items-center gap-[var(--spacing-xs)]">
+    <span class="relative z-1 inline-flex items-center gap-(--spacing-xs)">
       <Spinner
         v-if="loading"
         :class="spinnerSizeClasses[size]"
diff --git a/packages/webkit/src/components/actions/icon-button/icon-button.vue b/packages/webkit/src/components/actions/icon-button/icon-button.vue
index c95c4ba93..f9cb690d6 100644
--- a/packages/webkit/src/components/actions/icon-button/icon-button.vue
+++ b/packages/webkit/src/components/actions/icon-button/icon-button.vue
@@ -85,34 +85,34 @@
 
   const sharedClasses = [
     'relative inline-flex shrink-0 items-center justify-center',
-    'rounded-[var(--shape-button)]',
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)]',
-    'focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]',
+    'rounded-(--shape-button)',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color)',
+    'focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)',
     ...ghostLayerClasses
   ]
 
   const kindClasses: Record<IconButtonKind, string> = {
     primary:
-      'bg-[var(--primary)] text-[var(--primary-contrast)] before:bg-[var(--bg-hover)] after:bg-[var(--bg-active)]',
+      'bg-(--primary) text-(--primary-contrast) before:bg-(--bg-hover) after:bg-(--bg-active)',
     secondary:
-      'bg-[var(--secondary)] text-[var(--secondary-contrast)] before:bg-[var(--bg-hover)] after:bg-[var(--bg-active)]',
+      'bg-(--secondary) text-(--secondary-contrast) before:bg-(--bg-hover) after:bg-(--bg-active)',
     outlined:
-      'border border-[var(--border-default)] bg-[var(--bg-surface)] text-[var(--text-default)] before:bg-[var(--bg-mask)] after:bg-[var(--bg-active)]',
+      'border border-(--border-default) bg-(--bg-surface) text-(--text-default) before:bg-(--bg-mask) after:bg-(--bg-active)',
     transparent:
-      'bg-transparent text-[var(--text-default)] before:bg-[var(--bg-mask)] after:bg-[var(--bg-active)]',
+      'bg-transparent text-(--text-default) before:bg-(--bg-mask) after:bg-(--bg-active)',
     danger:
-      'border border-[var(--danger-border)] bg-[var(--danger)] text-[var(--danger-contrast)] before:bg-[var(--bg-hover)] after:bg-[var(--bg-active)]'
+      'border border-(--danger-border) bg-(--danger) text-(--danger-contrast) before:bg-(--bg-hover) after:bg-(--bg-active)'
   }
 
   // Disabled shows the not-allowed cursor. Interaction is blocked natively (`<button :disabled>`)
   // and via the handleClick guard (anchor), so pointer-events stay on for the cursor to render.
   const disabledClasses =
-    'cursor-not-allowed border-transparent bg-[var(--bg-disabled)] text-[var(--text-disabled)] before:hidden after:hidden'
+    'cursor-not-allowed border-transparent bg-(--bg-disabled) text-(--text-disabled) before:hidden after:hidden'
 
   // Loading reuses the disabled visual tokens (per design) but keeps the loading cursor
   // and the spinner. Interaction stays blocked via handleClick.
   const loadingClasses =
-    'cursor-wait border-transparent bg-[var(--bg-disabled)] text-[var(--text-disabled)] before:hidden after:hidden'
+    'cursor-wait border-transparent bg-(--bg-disabled) text-(--text-disabled) before:hidden after:hidden'
 
   const iconClasses =
     'inline-flex shrink-0 items-center justify-center text-[length:inherit] leading-none'
@@ -172,7 +172,7 @@
       :class="
         iconTransition
           ? [iconTransitionHostClasses, iconSlotSizeClasses[size]]
-          : 'relative z-[1] inline-flex items-center justify-center'
+          : 'relative z-1 inline-flex items-center justify-center'
       "
     >
       <Spinner
@@ -220,7 +220,7 @@
       :class="
         iconTransition
           ? [iconTransitionHostClasses, iconSlotSizeClasses[size]]
-          : 'relative z-[1] inline-flex items-center justify-center'
+          : 'relative z-1 inline-flex items-center justify-center'
       "
     >
       <Spinner
diff --git a/packages/webkit/src/components/actions/icon-button/presets/icon-transition.js b/packages/webkit/src/components/actions/icon-button/presets/icon-transition.js
index 98fe805a2..8e92a270e 100644
--- a/packages/webkit/src/components/actions/icon-button/presets/icon-transition.js
+++ b/packages/webkit/src/components/actions/icon-button/presets/icon-transition.js
@@ -29,7 +29,7 @@ export const iconTransitionLeaveToClasses = 'opacity-0'
 
 /** Fixed box for swap motion; width/height come from IconButton size tokens. */
 export const iconTransitionHostClasses =
-  'relative z-[1] inline-flex shrink-0 items-center justify-center overflow-hidden'
+  'relative z-1 inline-flex shrink-0 items-center justify-center overflow-hidden'
 
 /** Keeps glyphs out of flow so copy/check metrics cannot resize the button. */
 export const iconTransitionIconClasses = iconTransitionLayerClasses
diff --git a/packages/webkit/src/components/actions/mini-button/mini-button.vue b/packages/webkit/src/components/actions/mini-button/mini-button.vue
index b1b2d0c47..296f839e0 100644
--- a/packages/webkit/src/components/actions/mini-button/mini-button.vue
+++ b/packages/webkit/src/components/actions/mini-button/mini-button.vue
@@ -48,16 +48,16 @@
 
   const rootClasses = computed(() => [
     'group relative inline-flex shrink-0 items-center whitespace-nowrap',
-    'rounded-[var(--shape-button)] text-[var(--text-default)]',
+    'rounded-(--shape-button) text-(--text-default)',
     'transition-opacity duration-150 ease-out motion-reduce:transition-none',
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)]',
-    'focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color)',
+    'focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)',
     'data-[size=large]:h-10 data-[size=large]:min-h-10 data-[size=large]:text-button-lg',
     'data-[size=medium]:h-8 data-[size=medium]:min-h-8',
     'data-[size=medium]:text-button-md',
     'data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed',
-    'data-[disabled]:text-[var(--text-disabled)]! data-[disabled]:[&_.mini-button-ghost]:hidden',
-    'data-[disabled]:[&_.mini-button-icon]:text-[var(--text-disabled)]!',
+    'data-[disabled]:text-(--text-disabled)! data-[disabled]:[&_.mini-button-ghost]:hidden',
+    'data-[disabled]:[&_.mini-button-icon]:text-(--text-disabled)!',
     attrs['class']
   ])
 
@@ -85,12 +85,12 @@
     @click="handleClick"
   >
     <span
-      class="mini-button-ghost pointer-events-none absolute top-1/2 -translate-y-1/2 -left-[var(--spacing-xs)] -right-[var(--spacing-xs)] group-data-[size=large]:h-8 group-data-[size=medium]:h-6 rounded-[var(--shape-button)] bg-[var(--bg-hover)] opacity-0 transition-opacity duration-150 ease-out motion-reduce:transition-none group-hover:opacity-100 group-focus-visible:opacity-100 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-[var(--bg-mask)] before:opacity-0 before:transition-opacity before:duration-150 before:ease-out before:content-[''] motion-reduce:before:transition-none group-hover:before:opacity-100 group-focus-visible:before:opacity-100 group-active:before:bg-[var(--bg-active)]"
+      class="mini-button-ghost pointer-events-none absolute top-1/2 -translate-y-1/2 -left-(--spacing-xs) -right-(--spacing-xs) group-data-[size=large]:h-8 group-data-[size=medium]:h-6 rounded-(--shape-button) bg-(--bg-hover) opacity-0 transition-opacity duration-150 ease-out motion-reduce:transition-none group-hover:opacity-100 group-focus-visible:opacity-100 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-(--bg-mask) before:opacity-0 before:transition-opacity before:duration-150 before:ease-out before:content-[''] motion-reduce:before:transition-none group-hover:before:opacity-100 group-focus-visible:before:opacity-100 group-active:before:bg-(--bg-active)"
       aria-hidden="true"
       :data-testid="`${testId}__ghost`"
     />
     <span
-      class="relative z-[1] inline-flex flex-nowrap items-center gap-[var(--spacing-xs)] group-data-[size=medium]:gap-[var(--spacing-xxs)]"
+      class="relative z-1 inline-flex flex-nowrap items-center gap-(--spacing-xs) group-data-[size=medium]:gap-(--spacing-xxs)"
       :data-testid="`${testId}__content`"
     >
       <span
@@ -102,7 +102,7 @@
       <i
         v-if="showIcon"
         :class="icon"
-        class="mini-button-icon inline-flex size-[var(--spacing-sm)] shrink-0 items-center justify-center text-[var(--primary)] leading-none"
+        class="mini-button-icon inline-flex size-(--spacing-sm) shrink-0 items-center justify-center text-(--primary) leading-none"
         aria-hidden="true"
         :data-testid="`${testId}__icon`"
       />
diff --git a/packages/webkit/src/components/actions/segmented-button/segmented-button.vue b/packages/webkit/src/components/actions/segmented-button/segmented-button.vue
index f7de6a76a..9403f8f8b 100644
--- a/packages/webkit/src/components/actions/segmented-button/segmented-button.vue
+++ b/packages/webkit/src/components/actions/segmented-button/segmented-button.vue
@@ -95,34 +95,34 @@
 
   const rootClasses = computed(() =>
     cn(
-      'relative inline-flex w-fit items-center gap-[var(--spacing-xxs)]',
-      'rounded-[var(--shape-button)] border border-[var(--border-muted)] bg-[var(--bg-surface)] p-[var(--spacing-xxs)]',
+      'relative inline-flex w-fit items-center gap-(--spacing-xxs)',
+      'rounded-(--shape-button) border border-(--border-muted) bg-(--bg-surface) p-(--spacing-xxs)',
       attrs.class as string | undefined
     )
   )
 
   const indicatorClasses = [
     'pointer-events-none absolute left-0 top-0 z-0',
-    'rounded-[var(--shape-button)] bg-[var(--bg-selected)]',
+    'rounded-(--shape-button) bg-(--bg-selected)',
     'motion-reduce:transition-none'
   ]
 
   const sharedOptionClasses = [
-    'relative z-[1] inline-flex h-7 shrink-0 items-center justify-center gap-[var(--spacing-xs)] whitespace-nowrap',
-    'rounded-[var(--shape-button)] border border-transparent px-[var(--spacing-sm)]',
+    'relative z-1 inline-flex h-7 shrink-0 items-center justify-center gap-(--spacing-xs) whitespace-nowrap',
+    'rounded-(--shape-button) border border-transparent px-(--spacing-sm)',
     'text-label-sm',
     'transition-colors duration-fast-02 ease-productive-entrance motion-reduce:transition-none',
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)]',
-    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-[var(--bg-disabled)] disabled:text-[var(--text-disabled)]'
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color)',
+    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-(--bg-disabled) disabled:text-(--text-disabled)'
   ]
 
   const optionClasses = (value: string, disabled: boolean) =>
     cn(
       sharedOptionClasses,
       value === selectedValue.value
-        ? 'bg-transparent text-[var(--text-default)]'
-        : 'bg-transparent text-[var(--text-muted)]',
-      disabled && 'pr-[var(--spacing-xs)]'
+        ? 'bg-transparent text-(--text-default)'
+        : 'bg-transparent text-(--text-muted)',
+      disabled && 'pr-(--spacing-xs)'
     )
 
   const resolveOptionElement = (
@@ -312,7 +312,7 @@
       {{ option.label }}
       <i
         v-if="option.disabled"
-        class="pi pi-lock shrink-0 text-[var(--text-disabled)]"
+        class="pi pi-lock shrink-0 text-(--text-disabled)"
         aria-hidden="true"
         :data-testid="`${testId}__option-lock`"
       />
diff --git a/packages/webkit/src/components/actions/split-button/split-button.vue b/packages/webkit/src/components/actions/split-button/split-button.vue
index 4ad4fd3dc..ec500e347 100644
--- a/packages/webkit/src/components/actions/split-button/split-button.vue
+++ b/packages/webkit/src/components/actions/split-button/split-button.vue
@@ -134,7 +134,7 @@
           :disabled="disabled"
           :loading="loading"
           :data-testid="`${testId}__primary`"
-          class="rounded-r-none! focus-visible:z-[1]"
+          class="rounded-r-none! focus-visible:z-1"
           @click="onPrimaryClick"
         />
 
@@ -146,7 +146,7 @@
             :size="size"
             :disabled="disabled || loading"
             :data-testid="`${testId}__toggle-button`"
-            class="rounded-l-none! -ml-px border-l border-[var(--border-default)] focus-visible:z-[1]"
+            class="rounded-l-none! -ml-px border-l border-(--border-default) focus-visible:z-1"
           />
         </Dropdown.Trigger>
       </div>
diff --git a/packages/webkit/src/components/avatar/avatar.vue b/packages/webkit/src/components/avatar/avatar.vue
index 891104a61..c7aebc250 100644
--- a/packages/webkit/src/components/avatar/avatar.vue
+++ b/packages/webkit/src/components/avatar/avatar.vue
@@ -62,7 +62,7 @@
 
   const kindClasses: Record<AvatarKind, string> = {
     circle: 'rounded-full',
-    square: 'rounded-[var(--shape-button)]'
+    square: 'rounded-(--shape-button)'
   }
 
   const sizeClasses: Record<AvatarSize, string> = {
@@ -80,12 +80,12 @@
   const rootClasses = computed(() =>
     cn(
       'inline-flex shrink-0 items-center justify-center overflow-hidden',
-      'bg-[var(--bg-surface-raised)] text-[var(--text-default)]',
+      'bg-(--bg-surface-raised) text-(--text-default)',
       'uppercase select-none',
       kindClasses[props.kind],
       sizeClasses[props.size],
       !hasImage.value && typographyClasses[props.size],
-      showLabel.value && 'border border-[var(--border-default)]',
+      showLabel.value && 'border border-(--border-default)',
       attrs.class as string | undefined
     )
   )
diff --git a/packages/webkit/src/components/code/log-view/log-view-content.vue b/packages/webkit/src/components/code/log-view/log-view-content.vue
index 6b57304fd..308dff5c0 100644
--- a/packages/webkit/src/components/code/log-view/log-view-content.vue
+++ b/packages/webkit/src/components/code/log-view/log-view-content.vue
@@ -24,7 +24,7 @@
   const segmentsFor = (text: string) => splitTextByQuery(text, searchQuery.value)
 
   const highlightMarkClass =
-    'rounded-[var(--shape-elements)] bg-[var(--bg-selected)] text-inherit motion-reduce:transition-none'
+    'rounded-(--shape-elements) bg-(--bg-selected) text-inherit motion-reduce:transition-none'
 
   const testId = computed(
     () => (attrs['data-testid'] as string | undefined) ?? `${ctx.testId}__content`
@@ -106,7 +106,7 @@
   >
     <div
       v-if="ctx.showCopy.value && !ctx.loading.value"
-      class="absolute right-[var(--spacing-sm)] top-[var(--spacing-sm)] z-[3]"
+      class="absolute right-(--spacing-sm) top-(--spacing-sm) z-3"
       :data-testid="`${ctx.testId}__copy-anchor`"
     >
       <CopyButton
@@ -126,10 +126,10 @@
       role="status"
       aria-live="polite"
       :data-testid="`${testId}__loading`"
-      class="flex h-full min-h-0 flex-col items-center justify-center gap-[var(--spacing-md)] bg-[var(--bg-canvas)]"
+      class="flex h-full min-h-0 flex-col items-center justify-center gap-(--spacing-md) bg-(--bg-canvas)"
     >
-      <Spinner class="size-6 text-[var(--text-default)]" />
-      <span class="font-code text-label-sm text-[var(--text-muted)]">
+      <Spinner class="size-6 text-(--text-default)" />
+      <span class="font-code text-label-sm text-(--text-muted)">
         {{ ctx.loadingLabel.value }}
       </span>
     </div>
@@ -138,7 +138,7 @@
       v-else
       orientation="both"
       :data-testid="`${testId}__body`"
-      class="h-full min-h-0 bg-[var(--bg-canvas)] sm:overflow-x-hidden"
+      class="h-full min-h-0 bg-(--bg-canvas) sm:overflow-x-hidden"
       role="log"
       aria-live="polite"
     >
@@ -149,11 +149,11 @@
             :key="line.id"
             :data-testid="`${ctx.testId}__line`"
             :data-type="line.type"
-            class="font-code text-label-sm relative flex gap-[var(--spacing-md)] border-l-2 border-l-transparent px-[var(--spacing-md)] py-[var(--spacing-xxs)] transition-colors duration-150 ease-out before:pointer-events-none before:absolute before:inset-0 before:bg-[var(--bg-hover)] before:opacity-0 before:transition-opacity before:duration-150 before:ease-out before:content-[''] hover:border-l-[var(--ring-color)] hover:bg-[var(--bg-surface-raised)] hover:before:opacity-100 data-[type=warning]:bg-[var(--warning)] data-[type=warning]:hover:bg-[var(--warning)] motion-reduce:transition-none motion-reduce:before:transition-none"
+            class="font-code text-label-sm relative flex gap-(--spacing-md) border-l-2 border-l-transparent px-(--spacing-md) py-(--spacing-xxs) transition-colors duration-150 ease-out before:pointer-events-none before:absolute before:inset-0 before:bg-(--bg-hover) before:opacity-0 before:transition-opacity before:duration-150 before:ease-out before:content-[''] hover:border-l-(--ring-color) hover:bg-(--bg-surface-raised) hover:before:opacity-100 data-[type=warning]:bg-(--warning) data-[type=warning]:hover:bg-(--warning) motion-reduce:transition-none motion-reduce:before:transition-none"
           >
             <span
               :data-testid="`${ctx.testId}__line-time`"
-              class="relative z-[1] shrink-0 text-[var(--text-muted)]"
+              class="relative z-1 shrink-0 text-(--text-muted)"
             >
               {{ line.time }}
             </span>
@@ -161,7 +161,7 @@
             <span
               v-if="line.type !== 'folder'"
               :data-testid="`${ctx.testId}__line-message`"
-              class="relative z-[1] flex min-w-0 flex-1 items-center gap-[var(--spacing-xs)] text-[var(--text-default)] data-[type=success]:gap-[var(--spacing-xs)] data-[type=warning]:text-[var(--warning-contrast)] max-sm:whitespace-nowrap"
+              class="relative z-1 flex min-w-0 flex-1 items-center gap-(--spacing-xs) text-(--text-default) data-[type=success]:gap-(--spacing-xs) data-[type=warning]:text-(--warning-contrast) max-sm:whitespace-nowrap"
               :data-type="line.type"
             >
               <template v-if="line.type === 'framework-version'">
@@ -181,7 +181,7 @@
                 </span>
                 <span
                   v-if="line.suffix"
-                  class="shrink-0 whitespace-nowrap text-[var(--warning-contrast)]"
+                  class="shrink-0 whitespace-nowrap text-(--warning-contrast)"
                 >
                   <template
                     v-for="(segment, segmentIndex) in segmentsFor(line.suffix)"
@@ -207,7 +207,7 @@
                   ✓
                 </span>
                 <span
-                  class="min-w-0 max-sm:whitespace-nowrap break-words whitespace-pre-wrap text-[var(--success-contrast)]"
+                  class="min-w-0 max-sm:whitespace-nowrap break-words whitespace-pre-wrap text-(--success-contrast)"
                 >
                   <template
                     v-for="(segment, segmentIndex) in segmentsFor(line.message)"
@@ -245,7 +245,7 @@
             <template v-else>
               <span
                 :data-testid="`${ctx.testId}__line-message`"
-                class="relative z-[1] flex min-w-0 flex-1 items-center gap-[var(--spacing-xl)] text-[var(--text-default)] max-sm:whitespace-nowrap"
+                class="relative z-1 flex min-w-0 flex-1 items-center gap-(--spacing-xl) text-(--text-default) max-sm:whitespace-nowrap"
               >
                 <span class="w-16 shrink-0 whitespace-nowrap">
                   <template
@@ -263,7 +263,7 @@
                 </span>
                 <span
                   v-if="line.folderType"
-                  class="shrink-0 whitespace-nowrap text-[var(--warning-contrast)]"
+                  class="shrink-0 whitespace-nowrap text-(--warning-contrast)"
                 >
                   <template
                     v-for="(segment, segmentIndex) in segmentsFor(line.folderType)"
@@ -282,7 +282,7 @@
                 <span
                   v-if="line.size"
                   :data-testid="`${ctx.testId}__line-size`"
-                  class="flex shrink-0 items-center gap-[var(--spacing-sm)] whitespace-nowrap tabular-nums"
+                  class="flex shrink-0 items-center gap-(--spacing-sm) whitespace-nowrap tabular-nums"
                 >
                   <span>
                     <template
@@ -299,11 +299,11 @@
                     </template>
                   </span>
                   <span
-                    class="text-[var(--text-muted)]"
+                    class="text-(--text-muted)"
                     aria-hidden="true"
                     >|</span
                   >
-                  <span class="text-[var(--text-muted)]">gzip:</span>
+                  <span class="text-(--text-muted)">gzip:</span>
                   <span>
                     <template
                       v-for="(segment, segmentIndex) in segmentsFor(line.gzipSize ?? '')"
@@ -328,7 +328,7 @@
       <div
         v-else
         :data-testid="`${ctx.testId}__empty`"
-        class="font-code px-[var(--spacing-md)] py-[var(--spacing-sm)] text-label-sm text-[var(--text-muted)]"
+        class="font-code px-(--spacing-md) py-(--spacing-sm) text-label-sm text-(--text-muted)"
       >
         <slot name="empty">No log lines match the current filters.</slot>
       </div>
@@ -338,7 +338,7 @@
       v-show="showBottomFade && ctx.filteredLines.value.length > 0"
       aria-hidden="true"
       :data-testid="`${testId}__fade-bottom`"
-      class="pointer-events-none absolute bottom-0 left-0 right-0 z-[2] h-[var(--spacing-xl)] bg-gradient-to-b from-transparent to-[var(--bg-canvas)] opacity-100 transition-opacity duration-150 ease-out motion-reduce:transition-none"
+      class="pointer-events-none absolute bottom-0 left-0 right-0 z-2 h-(--spacing-xl) bg-gradient-to-b from-transparent to-(--bg-canvas) opacity-100 transition-opacity duration-150 ease-out motion-reduce:transition-none"
     />
   </div>
 </template>
diff --git a/packages/webkit/src/components/code/log-view/log-view-footer.vue b/packages/webkit/src/components/code/log-view/log-view-footer.vue
index 4c3383767..e97343b35 100644
--- a/packages/webkit/src/components/code/log-view/log-view-footer.vue
+++ b/packages/webkit/src/components/code/log-view/log-view-footer.vue
@@ -24,7 +24,7 @@
   <footer
     v-bind="attrs"
     :data-testid="testId"
-    class="text-label-sm flex shrink-0 flex-col items-stretch gap-[var(--spacing-md)] border-t border-[var(--border-muted)] bg-[var(--bg-surface)] p-[var(--spacing-md)] sm:flex-row sm:flex-wrap sm:items-center"
+    class="text-label-sm flex shrink-0 flex-col items-stretch gap-(--spacing-md) border-t border-(--border-muted) bg-(--bg-surface) p-(--spacing-md) sm:flex-row sm:flex-wrap sm:items-center"
   >
     <slot />
   </footer>
diff --git a/packages/webkit/src/components/code/log-view/log-view-header.vue b/packages/webkit/src/components/code/log-view/log-view-header.vue
index df3e65b32..49c92b9ed 100644
--- a/packages/webkit/src/components/code/log-view/log-view-header.vue
+++ b/packages/webkit/src/components/code/log-view/log-view-header.vue
@@ -37,16 +37,16 @@
   <header
     v-bind="attrs"
     :data-testid="testId"
-    class="flex shrink-0 flex-col gap-[var(--spacing-sm)] border-b border-[var(--border-muted)] bg-[var(--bg-surface)] px-[var(--spacing-sm)] py-[var(--spacing-sm)] sm:h-[48px] sm:flex-row sm:items-center sm:justify-between sm:py-0"
+    class="flex shrink-0 flex-col gap-(--spacing-sm) border-b border-(--border-muted) bg-(--bg-surface) px-(--spacing-sm) py-(--spacing-sm) sm:h-[48px] sm:flex-row sm:items-center sm:justify-between sm:py-0"
   >
     <div
       :data-testid="`${testId}__left`"
-      class="flex w-full min-w-0 items-center gap-[var(--spacing-sm)] sm:w-auto"
+      class="flex w-full min-w-0 items-center gap-(--spacing-sm) sm:w-auto"
     >
       <slot name="left">
         <span
           :data-testid="`${testId}__line-count`"
-          class="font-code text-label-sm text-[var(--text-muted)]"
+          class="font-code text-label-sm text-(--text-muted)"
         >
           {{ ctx.lineCountLabel.value }}
         </span>
@@ -57,7 +57,7 @@
           :data-testid="`${testId}__warnings-filter`"
           :aria-pressed="ctx.warningsOnly.value"
           :disabled="ctx.disabled.value"
-          class="inline-flex h-8 min-w-8 items-center justify-center rounded-[var(--shape-elements)] p-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] disabled:cursor-not-allowed disabled:opacity-60"
+          class="inline-flex h-8 min-w-8 items-center justify-center rounded-(--shape-elements) p-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) disabled:cursor-not-allowed disabled:opacity-60"
           @click="ctx.toggleWarningsOnly"
           @keydown="handleWarningsKeydown"
         >
@@ -72,7 +72,7 @@
 
     <div
       :data-testid="`${testId}__right`"
-      class="flex w-full min-w-0 flex-col gap-[var(--spacing-sm)] sm:flex-row sm:items-center sm:gap-[var(--spacing-sm)] sm:w-auto"
+      class="flex w-full min-w-0 flex-col gap-(--spacing-sm) sm:flex-row sm:items-center sm:gap-(--spacing-sm) sm:w-auto"
     >
       <slot name="right">
         <slot name="search">
diff --git a/packages/webkit/src/components/code/log-view/log-view.vue b/packages/webkit/src/components/code/log-view/log-view.vue
index fbb53a2a4..1e012fab9 100644
--- a/packages/webkit/src/components/code/log-view/log-view.vue
+++ b/packages/webkit/src/components/code/log-view/log-view.vue
@@ -162,7 +162,7 @@
     :data-warnings-only="warningsOnly || null"
     :class="
       cn(
-        'flex min-h-0 w-full min-w-0 max-w-full flex-col overflow-hidden data-[border]:rounded-[var(--shape-elements)] data-[border]:border data-[border]:border-[var(--border-muted)]',
+        'flex min-h-0 w-full min-w-0 max-w-full flex-col overflow-hidden data-[border]:rounded-(--shape-elements) data-[border]:border data-[border]:border-(--border-muted)',
         attrs.class
       )
     "
diff --git a/packages/webkit/src/components/content/accordion/accordion-content/accordion-content.vue b/packages/webkit/src/components/content/accordion/accordion-content/accordion-content.vue
index 483dc93f1..39e1c0795 100644
--- a/packages/webkit/src/components/content/accordion/accordion-content/accordion-content.vue
+++ b/packages/webkit/src/components/content/accordion/accordion-content/accordion-content.vue
@@ -85,7 +85,7 @@
       :data-state="itemCtx.open.value ? 'open' : 'closed'"
       :data-size="ctx.size.value"
       :class="attrs.class"
-      class="overflow-hidden text-[var(--text-muted)] data-[size=medium]:text-body-xs data-[size=large]:text-body-sm"
+      class="overflow-hidden text-(--text-muted) data-[size=medium]:text-body-xs data-[size=large]:text-body-sm"
     >
       <slot />
     </div>
diff --git a/packages/webkit/src/components/content/accordion/accordion-item/accordion-item.vue b/packages/webkit/src/components/content/accordion/accordion-item/accordion-item.vue
index c7a61ea37..078abe6c7 100644
--- a/packages/webkit/src/components/content/accordion/accordion-item/accordion-item.vue
+++ b/packages/webkit/src/components/content/accordion/accordion-item/accordion-item.vue
@@ -67,7 +67,7 @@
     :data-disabled="disabled || null"
     :class="
       cn(
-        'flex flex-col border-b border-[var(--border-muted)] data-[state=open]:border-b-0',
+        'flex flex-col border-b border-(--border-muted) data-[state=open]:border-b-0',
         attrs.class as string | undefined
       )
     "
diff --git a/packages/webkit/src/components/content/accordion/accordion-trigger/accordion-trigger.vue b/packages/webkit/src/components/content/accordion/accordion-trigger/accordion-trigger.vue
index 8a803cee4..5dd89cbdd 100644
--- a/packages/webkit/src/components/content/accordion/accordion-trigger/accordion-trigger.vue
+++ b/packages/webkit/src/components/content/accordion/accordion-trigger/accordion-trigger.vue
@@ -92,7 +92,7 @@
       :data-arrow="ctx.arrowPosition.value"
       :data-disabled="itemCtx.disabled.value || null"
       :class="attrs.class"
-      class="group flex w-full items-center justify-between border-b border-[var(--border-default)] bg-transparent px-[var(--spacing-md)] text-left text-[var(--text-default)] outline-none transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-[var(--bg-hover)] focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] data-[size=medium]:min-h-8 data-[size=medium]:gap-[var(--spacing-sm)] data-[size=medium]:text-body-sm data-[size=large]:min-h-10 data-[size=large]:gap-[var(--spacing-sm)] data-[size=large]:text-body-md data-[arrow=left]:flex-row-reverse data-[arrow=left]:justify-end data-[arrow=left]:gap-[var(--spacing-xs)] data-[disabled]:cursor-not-allowed data-[disabled]:text-[var(--text-disabled)]"
+      class="group flex w-full items-center justify-between border-b border-(--border-default) bg-transparent px-(--spacing-md) text-left text-(--text-default) outline-none transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-(--bg-hover) focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) data-[size=medium]:min-h-8 data-[size=medium]:gap-(--spacing-sm) data-[size=medium]:text-body-sm data-[size=large]:min-h-10 data-[size=large]:gap-(--spacing-sm) data-[size=large]:text-body-md data-[arrow=left]:flex-row-reverse data-[arrow=left]:justify-end data-[arrow=left]:gap-(--spacing-xs) data-[disabled]:cursor-not-allowed data-[disabled]:text-(--text-disabled)"
       @click="onClick"
       @keydown="onKeydown"
     >
@@ -100,7 +100,7 @@
         <slot />
       </span>
       <i
-        class="pi pi-chevron-down shrink-0 text-[var(--text-muted)] transition-transform duration-150 ease-out motion-reduce:transition-none group-data-[state=open]:rotate-180 group-data-[disabled]:text-[var(--text-disabled)]"
+        class="pi pi-chevron-down shrink-0 text-(--text-muted) transition-transform duration-150 ease-out motion-reduce:transition-none group-data-[state=open]:rotate-180 group-data-[disabled]:text-(--text-disabled)"
         aria-hidden="true"
         :data-testid="`${testId}__chevron`"
       />
diff --git a/packages/webkit/src/components/content/badge/badge.vue b/packages/webkit/src/components/content/badge/badge.vue
index 7b50799b4..8c304bb1a 100644
--- a/packages/webkit/src/components/content/badge/badge.vue
+++ b/packages/webkit/src/components/content/badge/badge.vue
@@ -55,7 +55,7 @@
     :data-severity="resolvedSeverity"
     :data-size="size"
     :class="attrs.class"
-    class="inline-flex items-center justify-center overflow-hidden leading-none text-label-md data-[size=small]:text-label-sm data-[size=small]:h-5 data-[size=small]:px-[var(--spacing-xxs)] data-[size=medium]:h-6 data-[size=medium]:px-[var(--spacing-xs)] data-[size=large]:h-[30px] data-[size=large]:px-[var(--spacing-xs)] rounded-[var(--shape-elements)] data-[severity=primary]:bg-[var(--primary)] data-[severity=primary]:text-[var(--primary-contrast)] data-[severity=secondary]:bg-[var(--secondary)] data-[severity=secondary]:text-[var(--secondary-contrast)] data-[severity=success]:bg-[var(--success)] data-[severity=success]:text-[var(--success-contrast)] data-[severity=warning]:bg-[var(--warning)] data-[severity=warning]:text-[var(--warning-contrast)] data-[severity=danger]:bg-[var(--danger)] data-[severity=danger]:text-[var(--danger-contrast)] data-[severity=default]:bg-[var(--bg-surface)] data-[severity=default]:text-[var(--text-default)]"
+    class="inline-flex items-center justify-center overflow-hidden leading-none text-label-md data-[size=small]:text-label-sm data-[size=small]:h-5 data-[size=small]:px-(--spacing-xxs) data-[size=medium]:h-6 data-[size=medium]:px-(--spacing-xs) data-[size=large]:h-[30px] data-[size=large]:px-(--spacing-xs) rounded-(--shape-elements) data-[severity=primary]:bg-(--primary) data-[severity=primary]:text-(--primary-contrast) data-[severity=secondary]:bg-(--secondary) data-[severity=secondary]:text-(--secondary-contrast) data-[severity=success]:bg-(--success) data-[severity=success]:text-(--success-contrast) data-[severity=warning]:bg-(--warning) data-[severity=warning]:text-(--warning-contrast) data-[severity=danger]:bg-(--danger) data-[severity=danger]:text-(--danger-contrast) data-[severity=default]:bg-(--bg-surface) data-[severity=default]:text-(--text-default)"
   >
     <slot v-if="$slots['default']" />
     <span
diff --git a/packages/webkit/src/components/content/card-box/card-box.vue b/packages/webkit/src/components/content/card-box/card-box.vue
index 7be48915e..352d4eeb5 100644
--- a/packages/webkit/src/components/content/card-box/card-box.vue
+++ b/packages/webkit/src/components/content/card-box/card-box.vue
@@ -51,22 +51,22 @@
   const rootClasses = computed(() =>
     cn(
       'flex flex-col overflow-clip',
-      'bg-[var(--bg-surface)]',
-      'border border-[length:var(--border-width-default)] border-[var(--border-default)]',
-      'rounded-[var(--shape-card)]',
+      'bg-(--bg-surface)',
+      'border border-(length:--border-width-default) border-(--border-default)',
+      'rounded-(--shape-card)',
       attrs.class as string | undefined
     )
   )
 
   const headerClasses =
-    'group flex min-h-14 shrink-0 items-center justify-between gap-[var(--spacing-xs)] border-b border-[var(--border-default)] px-[var(--spacing-md)] py-[var(--spacing-sm)]'
+    'group flex min-h-14 shrink-0 items-center justify-between gap-(--spacing-xs) border-b border-(--border-default) px-(--spacing-md) py-(--spacing-sm)'
 
-  const titleClasses = 'text-label-md text-[var(--text-default)]'
+  const titleClasses = 'text-label-md text-(--text-default)'
 
-  const contentClasses = 'flex min-h-0 flex-1 flex-col data-[padded]:p-[var(--spacing-md)]'
+  const contentClasses = 'flex min-h-0 flex-1 flex-col data-[padded]:p-(--spacing-md)'
 
   const footerClasses =
-    'flex min-h-14 shrink-0 items-center justify-center gap-[var(--spacing-sm)] border-t border-[var(--border-default)] px-[var(--spacing-md)] py-[var(--spacing-sm)]'
+    'flex min-h-14 shrink-0 items-center justify-center gap-(--spacing-sm) border-t border-(--border-default) px-(--spacing-md) py-(--spacing-sm)'
 </script>
 
 <template>
diff --git a/packages/webkit/src/components/content/card-pricing/card-pricing.vue b/packages/webkit/src/components/content/card-pricing/card-pricing.vue
index 839a5a2b4..dc3a29ee3 100644
--- a/packages/webkit/src/components/content/card-pricing/card-pricing.vue
+++ b/packages/webkit/src/components/content/card-pricing/card-pricing.vue
@@ -75,22 +75,22 @@
 
   const rootClasses = computed(() => [
     'flex w-full flex-col items-start',
-    isMiddle.value ? 'min-h-[483px] justify-between' : 'gap-[var(--spacing-lg)]',
+    isMiddle.value ? 'min-h-[483px] justify-between' : 'gap-(--spacing-lg)',
     isContained.value
-      ? 'bg-[var(--bg-surface)] border-[length:var(--border-width-default)] border-[var(--border-muted)] rounded-[var(--shape-card)] p-[var(--spacing-lg)]'
-      : 'p-[var(--spacing-lg)]',
+      ? 'bg-(--bg-surface) border-(length:--border-width-default) border-(--border-muted) rounded-(--shape-card) p-(--spacing-lg)'
+      : 'p-(--spacing-lg)',
     attrs.class
   ])
 
   const headerContainerClasses = computed(() =>
     isMiddle.value
-      ? 'flex w-full shrink-0 flex-col items-start gap-[var(--spacing-xs)] max-w-[256px]'
-      : 'flex w-full shrink-0 flex-col items-start max-w-[256px] gap-[var(--spacing-xs)]'
+      ? 'flex w-full shrink-0 flex-col items-start gap-(--spacing-xs) max-w-[256px]'
+      : 'flex w-full shrink-0 flex-col items-start max-w-[256px] gap-(--spacing-xs)'
   )
 
   const actionsClasses = computed(() => [
-    'flex w-full gap-[var(--spacing-md)] items-start shrink-0',
-    isMiddle.value ? 'pt-[var(--spacing-md)]' : ''
+    'flex w-full gap-(--spacing-md) items-start shrink-0',
+    isMiddle.value ? 'pt-(--spacing-md)' : ''
   ])
 </script>
 
@@ -102,7 +102,7 @@
     <div
       :class="[
         'flex w-full flex-col items-start shrink-0',
-        isMiddle ? 'gap-[var(--spacing-lg)]' : ''
+        isMiddle ? 'gap-(--spacing-lg)' : ''
       ]"
     >
       <div
@@ -112,11 +112,11 @@
         <div
           :class="[
             'h-6 flex shrink-0 items-center',
-            isMiddle ? 'w-full gap-[var(--spacing-sm)]' : 'gap-[var(--spacing-xs)]'
+            isMiddle ? 'w-full gap-(--spacing-sm)' : 'gap-(--spacing-xs)'
           ]"
         >
           <h3
-            class="text-heading-md text-[var(--text-default)] [word-break:break-word]"
+            class="text-heading-md text-(--text-default) [word-break:break-word]"
             :data-testid="`${testId}__title`"
           >
             {{ planTitle }}
@@ -130,7 +130,7 @@
         </div>
         <p
           v-if="description"
-          class="text-body-sm text-[var(--text-muted)] h-9 [word-break:break-word]"
+          class="text-body-sm text-(--text-muted) h-9 [word-break:break-word]"
           :data-testid="`${testId}__description`"
         >
           {{ description }}
@@ -139,7 +139,7 @@
 
       <template v-if="isMiddle">
         <div
-          class="flex w-full flex-col gap-[var(--spacing-xxs)] items-start h-16 shrink-0"
+          class="flex w-full flex-col gap-(--spacing-xxs) items-start h-16 shrink-0"
           :data-testid="`${testId}__pricing`"
         >
           <Currency
@@ -153,7 +153,7 @@
           />
           <p
             v-if="showPricingDetails && pricingDetails"
-            class="text-body-xs text-[var(--text-muted)] h-8 [word-break:break-word]"
+            class="text-body-xs text-(--text-muted) h-8 [word-break:break-word]"
             :data-testid="`${testId}__pricing-details`"
           >
             {{ pricingDetails }}
@@ -171,7 +171,7 @@
 
     <div
       v-if="!isMiddle"
-      class="flex w-full flex-col gap-[var(--spacing-xxs)] items-start h-16 shrink-0"
+      class="flex w-full flex-col gap-(--spacing-xxs) items-start h-16 shrink-0"
       :data-testid="`${testId}__pricing`"
     >
       <Currency
@@ -185,7 +185,7 @@
       />
       <p
         v-if="showPricingDetails && pricingDetails"
-        class="text-body-xs text-[var(--text-muted)] h-8 [word-break:break-word]"
+        class="text-body-xs text-(--text-muted) h-8 [word-break:break-word]"
         :data-testid="`${testId}__pricing-details`"
       >
         {{ pricingDetails }}
diff --git a/packages/webkit/src/components/content/currency/currency.vue b/packages/webkit/src/components/content/currency/currency.vue
index 263d39324..7e24c9d94 100644
--- a/packages/webkit/src/components/content/currency/currency.vue
+++ b/packages/webkit/src/components/content/currency/currency.vue
@@ -37,18 +37,18 @@
   <span
     :class="[
       'inline-flex items-center',
-      isLarge ? 'gap-[var(--spacing-xs)]' : 'gap-[var(--spacing-xxs)]',
+      isLarge ? 'gap-(--spacing-xs)' : 'gap-(--spacing-xxs)',
       attrs.class
     ]"
     :data-testid="testId"
   >
-    <span class="inline-flex items-center gap-[var(--spacing-xxs)]">
+    <span class="inline-flex items-center gap-(--spacing-xxs)">
       <span
         v-if="prefix"
         :class="[
           isLarge
-            ? 'text-heading-md text-[var(--text-default)]'
-            : 'text-label-lg text-[var(--text-default)]'
+            ? 'text-heading-md text-(--text-default)'
+            : 'text-label-lg text-(--text-default)'
         ]"
         :data-testid="`${testId}__prefix`"
       >
@@ -57,8 +57,8 @@
       <span
         :class="[
           isLarge
-            ? 'text-heading-md text-[var(--text-default)]'
-            : 'text-label-lg text-[var(--text-default)]'
+            ? 'text-heading-md text-(--text-default)'
+            : 'text-label-lg text-(--text-default)'
         ]"
         :data-testid="`${testId}__value`"
       >
@@ -69,8 +69,8 @@
       v-if="suffix"
       :class="[
         isLarge
-          ? 'text-label-md text-[var(--text-muted)]'
-          : 'text-label-sm text-[var(--text-muted)]'
+          ? 'text-label-md text-(--text-muted)'
+          : 'text-label-sm text-(--text-muted)'
       ]"
       :data-testid="`${testId}__suffix`"
     >
diff --git a/packages/webkit/src/components/content/item/item-actions.vue b/packages/webkit/src/components/content/item/item-actions.vue
index 05723cdf5..e996dc6b7 100644
--- a/packages/webkit/src/components/content/item/item-actions.vue
+++ b/packages/webkit/src/components/content/item/item-actions.vue
@@ -26,7 +26,7 @@
     v-bind="$attrs"
     data-slot="item-actions"
     :data-testid="testId"
-    class="flex items-center gap-[var(--spacing-xs)]"
+    class="flex items-center gap-(--spacing-xs)"
   >
     <slot />
   </div>
diff --git a/packages/webkit/src/components/content/item/item-content.vue b/packages/webkit/src/components/content/item/item-content.vue
index cb2c51645..dc6a051cd 100644
--- a/packages/webkit/src/components/content/item/item-content.vue
+++ b/packages/webkit/src/components/content/item/item-content.vue
@@ -26,7 +26,7 @@
     v-bind="$attrs"
     data-slot="item-content"
     :data-testid="testId"
-    class="flex flex-1 flex-col gap-[var(--spacing-xxs)] [&+[data-slot=item-content]]:flex-none"
+    class="flex flex-1 flex-col gap-(--spacing-xxs) [&+[data-slot=item-content]]:flex-none"
   >
     <slot />
   </div>
diff --git a/packages/webkit/src/components/content/item/item-description.vue b/packages/webkit/src/components/content/item/item-description.vue
index 8f707abc6..84fc82e9b 100644
--- a/packages/webkit/src/components/content/item/item-description.vue
+++ b/packages/webkit/src/components/content/item/item-description.vue
@@ -27,7 +27,7 @@
     v-bind="$attrs"
     data-slot="item-description"
     :data-testid="testId"
-    class="line-clamp-2 text-balance text-body-sm text-[var(--text-muted)]"
+    class="line-clamp-2 text-balance text-body-sm text-(--text-muted)"
   >
     <slot />
   </p>
diff --git a/packages/webkit/src/components/content/item/item-footer.vue b/packages/webkit/src/components/content/item/item-footer.vue
index 049d4d437..6b4f0100e 100644
--- a/packages/webkit/src/components/content/item/item-footer.vue
+++ b/packages/webkit/src/components/content/item/item-footer.vue
@@ -25,7 +25,7 @@
     v-bind="$attrs"
     data-slot="item-footer"
     :data-testid="testId"
-    class="flex basis-full items-center justify-between gap-[var(--spacing-xs)]"
+    class="flex basis-full items-center justify-between gap-(--spacing-xs)"
   >
     <slot />
   </div>
diff --git a/packages/webkit/src/components/content/item/item-group.vue b/packages/webkit/src/components/content/item/item-group.vue
index 5a5e43c0e..1f8d84b0a 100644
--- a/packages/webkit/src/components/content/item/item-group.vue
+++ b/packages/webkit/src/components/content/item/item-group.vue
@@ -29,7 +29,7 @@
     role="list"
     data-slot="item-group"
     :data-testid="testId"
-    class="group/item-group flex flex-col gap-[var(--spacing-lg)]"
+    class="group/item-group flex flex-col gap-(--spacing-lg)"
   >
     <slot />
   </div>
diff --git a/packages/webkit/src/components/content/item/item-header.vue b/packages/webkit/src/components/content/item/item-header.vue
index fd884f7f2..087d53300 100644
--- a/packages/webkit/src/components/content/item/item-header.vue
+++ b/packages/webkit/src/components/content/item/item-header.vue
@@ -25,7 +25,7 @@
     v-bind="$attrs"
     data-slot="item-header"
     :data-testid="testId"
-    class="flex basis-full items-center justify-between gap-[var(--spacing-xs)]"
+    class="flex basis-full items-center justify-between gap-(--spacing-xs)"
   >
     <slot />
   </div>
diff --git a/packages/webkit/src/components/content/item/item-list.vue b/packages/webkit/src/components/content/item/item-list.vue
index 0fb20dd9d..66351dc1c 100644
--- a/packages/webkit/src/components/content/item/item-list.vue
+++ b/packages/webkit/src/components/content/item/item-list.vue
@@ -27,7 +27,7 @@
     role="list"
     data-slot="item-list"
     :data-testid="testId"
-    class="flex w-full flex-col [&>[data-slot=item]]:rounded-none [&>[data-slot=item]]:border-b-[color:var(--border-muted)] [&>[data-slot=item]:last-child]:border-b-[color:transparent]"
+    class="flex w-full flex-col [&>[data-slot=item]]:rounded-none [&>[data-slot=item]]:border-b-(color:--border-muted) [&>[data-slot=item]:last-child]:border-b-[color:transparent]"
   >
     <slot />
   </div>
diff --git a/packages/webkit/src/components/content/item/item-media.vue b/packages/webkit/src/components/content/item/item-media.vue
index 9585e27dd..b2fce977c 100644
--- a/packages/webkit/src/components/content/item/item-media.vue
+++ b/packages/webkit/src/components/content/item/item-media.vue
@@ -37,7 +37,7 @@
     data-slot="item-media"
     :data-testid="testId"
     :data-kind="kind"
-    class="flex shrink-0 items-center justify-center gap-[var(--spacing-xs)] group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none data-[kind=icon]:size-8 data-[kind=icon]:rounded-[var(--shape-button)] data-[kind=icon]:border data-[kind=icon]:border-[var(--border-default)] data-[kind=icon]:bg-[var(--bg-hover)] data-[kind=icon]:[&_svg:not([class*='size-'])]:size-4 data-[kind=image]:size-10 data-[kind=image]:overflow-hidden data-[kind=image]:rounded-[var(--shape-button)] data-[kind=image]:[&_img]:size-full data-[kind=image]:[&_img]:object-cover"
+    class="flex shrink-0 items-center justify-center gap-(--spacing-xs) group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none data-[kind=icon]:size-8 data-[kind=icon]:rounded-(--shape-button) data-[kind=icon]:border data-[kind=icon]:border-(--border-default) data-[kind=icon]:bg-(--bg-hover) data-[kind=icon]:[&_svg:not([class*='size-'])]:size-4 data-[kind=image]:size-10 data-[kind=image]:overflow-hidden data-[kind=image]:rounded-(--shape-button) data-[kind=image]:[&_img]:size-full data-[kind=image]:[&_img]:object-cover"
   >
     <slot />
   </div>
diff --git a/packages/webkit/src/components/content/item/item-separator.vue b/packages/webkit/src/components/content/item/item-separator.vue
index 887a4e735..f23ffa47d 100644
--- a/packages/webkit/src/components/content/item/item-separator.vue
+++ b/packages/webkit/src/components/content/item/item-separator.vue
@@ -23,6 +23,6 @@
     role="separator"
     data-slot="item-separator"
     :data-testid="testId"
-    class="my-0 h-px w-full shrink-0 bg-[var(--border-muted)]"
+    class="my-0 h-px w-full shrink-0 bg-(--border-muted)"
   />
 </template>
diff --git a/packages/webkit/src/components/content/item/item-title.vue b/packages/webkit/src/components/content/item/item-title.vue
index 6262da68c..b11e068df 100644
--- a/packages/webkit/src/components/content/item/item-title.vue
+++ b/packages/webkit/src/components/content/item/item-title.vue
@@ -25,7 +25,7 @@
     v-bind="$attrs"
     data-slot="item-title"
     :data-testid="testId"
-    class="flex w-fit items-center gap-[var(--spacing-xs)] text-body-sm text-[var(--text-default)]"
+    class="flex w-fit items-center gap-(--spacing-xs) text-body-sm text-(--text-default)"
   >
     <slot />
   </div>
diff --git a/packages/webkit/src/components/content/kbd/kbd.vue b/packages/webkit/src/components/content/kbd/kbd.vue
index 63d9003cd..bc77db595 100644
--- a/packages/webkit/src/components/content/kbd/kbd.vue
+++ b/packages/webkit/src/components/content/kbd/kbd.vue
@@ -56,7 +56,7 @@
     :data-testid="testId"
     :data-size="size"
     :class="attrs.class"
-    class="inline-flex items-center justify-center gap-[var(--spacing-xxs)] tabular-nums leading-none bg-[var(--bg-surface)] text-[var(--text-default)] border border-b-2 border-[var(--border-default)] rounded-[var(--shape-elements)] shadow-[var(--shadow-sm)] px-[var(--spacing-xs)] data-[size=medium]:text-overline-md data-[size=medium]:h-6 data-[size=medium]:min-w-6 data-[size=small]:text-overline-sm data-[size=small]:h-5 data-[size=small]:min-w-5"
+    class="inline-flex items-center justify-center gap-(--spacing-xxs) tabular-nums leading-none bg-(--bg-surface) text-(--text-default) border border-b-2 border-(--border-default) rounded-(--shape-elements) shadow-(--shadow-sm) px-(--spacing-xs) data-[size=medium]:text-overline-md data-[size=medium]:h-6 data-[size=medium]:min-w-6 data-[size=small]:text-overline-sm data-[size=small]:h-5 data-[size=small]:min-w-5"
   >
     <span
       v-for="modifier in modifierGlyphs"
diff --git a/packages/webkit/src/components/data/code-block/code-block.vue b/packages/webkit/src/components/data/code-block/code-block.vue
index 105febc35..ef5c1dc02 100644
--- a/packages/webkit/src/components/data/code-block/code-block.vue
+++ b/packages/webkit/src/components/data/code-block/code-block.vue
@@ -449,7 +449,7 @@
   <div
     :class="
       cn(
-        'flex w-full flex-col overflow-hidden rounded-[var(--shape-elements)] bg-[var(--bg-surface)] data-[border]:border data-[border]:border-[var(--border-default)]',
+        'flex w-full flex-col overflow-hidden rounded-(--shape-elements) bg-(--bg-surface) data-[border]:border data-[border]:border-(--border-default)',
         attrs.class as string | undefined
       )
     "
@@ -458,18 +458,18 @@
   >
     <div
       v-if="showTabHeader"
-      class="relative shrink-0 border-b border-[var(--border-default)] px-[var(--spacing-sm)]"
+      class="relative shrink-0 border-b border-(--border-default) px-(--spacing-sm)"
       :data-testid="`${testId}__header`"
     >
       <div
         ref="tabListRef"
         role="tablist"
-        class="relative flex items-end gap-[var(--spacing-xs)]"
+        class="relative flex items-end gap-(--spacing-xs)"
         :data-testid="`${testId}__tabs`"
       >
         <span
           v-show="indicatorVisible"
-          class="pointer-events-none absolute bottom-0 left-0 z-[1] h-[2px] rounded-full bg-[var(--border-selected)] motion-reduce:transition-none"
+          class="pointer-events-none absolute bottom-0 left-0 z-1 h-[2px] rounded-full bg-(--border-selected) motion-reduce:transition-none"
           :style="[indicatorTransitionStyle, indicatorTransformStyle]"
           :data-testid="`${testId}__indicator`"
           aria-hidden="true"
@@ -483,12 +483,12 @@
           :id="`${testId}-tab-${tab.value}`"
           :class="
             cn(
-              'relative z-[2] inline-flex h-12 shrink-0 items-center justify-center px-[var(--spacing-xs)] py-[var(--spacing-xs)]',
+              'relative z-2 inline-flex h-12 shrink-0 items-center justify-center px-(--spacing-xs) py-(--spacing-xs)',
               'text-overline-sm uppercase transition-colors duration-fast-02 ease-productive-entrance motion-reduce:transition-none',
-              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)',
               tab.value === activeValue
-                ? 'text-[var(--text-default)]'
-                : 'text-[var(--text-muted)] hover:text-[var(--text-default)]'
+                ? 'text-(--text-default)'
+                : 'text-(--text-muted) hover:text-(--text-default)'
             )
           "
           :aria-selected="tab.value === activeValue"
@@ -506,7 +506,7 @@
 
     <div
       v-if="showFileNameBar && activeTab"
-      class="flex h-10 shrink-0 items-center gap-[var(--spacing-xs)] overflow-hidden border-b border-[var(--border-default)] bg-[var(--bg-surface-raised)] p-[var(--spacing-sm)]"
+      class="flex h-10 shrink-0 items-center gap-(--spacing-xs) overflow-hidden border-b border-(--border-default) bg-(--bg-surface-raised) p-(--spacing-sm)"
       :data-testid="`${testId}__filename`"
     >
       <span
@@ -514,12 +514,12 @@
         :data-testid="`${testId}__filename-icon`"
       >
         <i
-          :class="cn(activeFileIcon, 'text-label-code-sm text-[var(--text-default)]')"
+          :class="cn(activeFileIcon, 'text-label-code-sm text-(--text-default)')"
           aria-hidden="true"
         />
       </span>
       <span
-        class="text-label-code-sm min-w-0 flex-1 text-[var(--text-muted)]"
+        class="text-label-code-sm min-w-0 flex-1 text-(--text-muted)"
         :data-testid="`${testId}__filename-label`"
       >
         {{ activeTab.fileName }}
@@ -531,7 +531,7 @@
       :data-testid="`${testId}__content`"
     >
       <div
-        class="absolute right-[var(--spacing-sm)] top-[var(--spacing-sm)] z-[2]"
+        class="absolute right-(--spacing-sm) top-(--spacing-sm) z-2"
         :data-testid="`${testId}__copy-anchor`"
       >
         <CopyButton
@@ -548,8 +548,8 @@
         orientation="both"
         :class="
           cn(
-            'min-h-0 min-w-0 flex-1 py-[var(--spacing-sm)]',
-            'focus-visible:ring-offset-[var(--bg-surface)]'
+            'min-h-0 min-w-0 flex-1 py-(--spacing-sm)',
+            'focus-visible:ring-offset-(--bg-surface)'
           )
         "
         :data-testid="`${testId}__scroll`"
@@ -572,8 +572,8 @@
               :key="`${activeTab.value}-${lineIndex}`"
               :class="
                 cn(
-                  'group relative flex min-w-full w-max shrink-0 items-center gap-[var(--spacing-xs)] px-[var(--spacing-lg)] py-[var(--spacing-xxs)] text-label-code-sm',
-                  'data-[state=added]:bg-[var(--success)] data-[state=removed]:bg-[var(--danger)] data-[state=highlighted]:bg-[var(--info)]',
+                  'group relative flex min-w-full w-max shrink-0 items-center gap-(--spacing-xs) px-(--spacing-lg) py-(--spacing-xxs) text-label-code-sm',
+                  'data-[state=added]:bg-(--success) data-[state=removed]:bg-(--danger) data-[state=highlighted]:bg-(--info)',
                   getLineMotionClasses()
                 )
               "
@@ -582,12 +582,12 @@
               :data-state="getLineState(lineIndex + 1)"
             >
               <span
-                class="pointer-events-none absolute inset-0 z-0 bg-[var(--bg-hover)] opacity-0 transition-opacity duration-fast-02 ease-productive-entrance motion-reduce:transition-none group-hover:opacity-100"
+                class="pointer-events-none absolute inset-0 z-0 bg-(--bg-hover) opacity-0 transition-opacity duration-fast-02 ease-productive-entrance motion-reduce:transition-none group-hover:opacity-100"
                 aria-hidden="true"
               />
               <span
                 v-if="showDiffGutter"
-                class="relative z-[1] w-2 shrink-0 text-center group-data-[state=added]:text-[var(--success-contrast)] group-data-[state=removed]:text-[var(--danger-contrast)]"
+                class="relative z-1 w-2 shrink-0 text-center group-data-[state=added]:text-(--success-contrast) group-data-[state=removed]:text-(--danger-contrast)"
                 :data-testid="`${testId}__diff-marker`"
                 aria-hidden="true"
               >
@@ -595,13 +595,13 @@
               </span>
               <span
                 v-if="showLineNumbers"
-                class="relative z-[1] w-4 shrink-0 text-center text-[var(--code-sintax-line-number)]"
+                class="relative z-1 w-4 shrink-0 text-center text-(--code-sintax-line-number)"
                 :data-testid="`${testId}__line-number`"
               >
                 {{ formatLineNumber(lineIndex + 1) }}
               </span>
               <code
-                class="text-label-code-sm relative z-[1] shrink-0 whitespace-pre pr-[var(--spacing-xl)]"
+                class="text-label-code-sm relative z-1 shrink-0 whitespace-pre pr-(--spacing-xl)"
                 :data-testid="`${testId}__line-content`"
               >
                 <span
@@ -616,8 +616,8 @@
                 v-if="getLineState(lineIndex + 1) !== 'default'"
                 :class="
                   cn(
-                    'pointer-events-none absolute bottom-0 left-0 top-0 z-[2] w-[2px]',
-                    'group-data-[state=added]:bg-[var(--success-border)] group-data-[state=removed]:bg-[var(--danger-border)] group-data-[state=highlighted]:bg-[var(--info-border)]'
+                    'pointer-events-none absolute bottom-0 left-0 top-0 z-2 w-[2px]',
+                    'group-data-[state=added]:bg-(--success-border) group-data-[state=removed]:bg-(--danger-border) group-data-[state=highlighted]:bg-(--info-border)'
                   )
                 "
                 aria-hidden="true"
diff --git a/packages/webkit/src/components/data/code-block/presets/transitions.ts b/packages/webkit/src/components/data/code-block/presets/transitions.ts
index 3757d60ba..29cc5cd21 100644
--- a/packages/webkit/src/components/data/code-block/presets/transitions.ts
+++ b/packages/webkit/src/components/data/code-block/presets/transitions.ts
@@ -50,7 +50,7 @@ export const getCodeBlockLineTransitionStyle = (
 }
 
 export const codeBlockEnterOffsetClasses = {
-  right: 'translate-x-[var(--spacing-md)]',
-  left: '-translate-x-[var(--spacing-md)]',
+  right: 'translate-x-(--spacing-md)',
+  left: '-translate-x-(--spacing-md)',
   none: 'translate-x-0'
 } as const
diff --git a/packages/webkit/src/components/data/code-block/utils/highlight-code.ts b/packages/webkit/src/components/data/code-block/utils/highlight-code.ts
index 3858b4f60..d4bab0f83 100644
--- a/packages/webkit/src/components/data/code-block/utils/highlight-code.ts
+++ b/packages/webkit/src/components/data/code-block/utils/highlight-code.ts
@@ -7,13 +7,13 @@ export type CodeBlockHighlightToken = {
 }
 
 const TOKEN_CLASS: Record<CodeBlockHighlightTokenType, string> = {
-  keyword: 'text-[var(--code-sintax-keyword)]',
-  string: 'text-[var(--code-sintax-string)]',
-  function: 'text-[var(--code-sintax-function)]',
-  type: 'text-[var(--code-sintax-type)]',
-  punctuation: 'text-[var(--code-sintax-punctuation)]',
-  identifier: 'text-[var(--code-sintax-identifier)]',
-  comment: 'text-[var(--code-sintax-punctuation)]'
+  keyword: 'text-(--code-sintax-keyword)',
+  string: 'text-(--code-sintax-string)',
+  function: 'text-(--code-sintax-function)',
+  type: 'text-(--code-sintax-type)',
+  punctuation: 'text-(--code-sintax-punctuation)',
+  identifier: 'text-(--code-sintax-identifier)',
+  comment: 'text-(--code-sintax-punctuation)'
 }
 
 export const getHighlightTokenClass = (type: CodeBlockHighlightTokenType): string =>
diff --git a/packages/webkit/src/components/data/flow/flow-node/flow-node.vue b/packages/webkit/src/components/data/flow/flow-node/flow-node.vue
index 96be6df74..b12367c45 100644
--- a/packages/webkit/src/components/data/flow/flow-node/flow-node.vue
+++ b/packages/webkit/src/components/data/flow/flow-node/flow-node.vue
@@ -35,7 +35,7 @@
 
   const rootClasses = computed(() =>
     cn(
-      'relative z-[1] text-label-md text-[var(--text-default)] data-[styled]:inline-flex data-[styled]:min-h-10 data-[styled]:items-center data-[styled]:justify-center data-[styled]:whitespace-nowrap data-[styled]:rounded-[var(--shape-button)] data-[styled]:border data-[styled]:border-[var(--border-default)] data-[styled]:bg-[var(--bg-surface-raised)] data-[styled]:px-[var(--spacing-md)] data-[styled]:py-[var(--spacing-sm)] data-[disabled]:text-[var(--text-disabled)] data-[disabled]:opacity-60',
+      'relative z-1 text-label-md text-(--text-default) data-[styled]:inline-flex data-[styled]:min-h-10 data-[styled]:items-center data-[styled]:justify-center data-[styled]:whitespace-nowrap data-[styled]:rounded-(--shape-button) data-[styled]:border data-[styled]:border-(--border-default) data-[styled]:bg-(--bg-surface-raised) data-[styled]:px-(--spacing-md) data-[styled]:py-(--spacing-sm) data-[disabled]:text-(--text-disabled) data-[disabled]:opacity-60',
       attrs.class as string | undefined
     )
   )
diff --git a/packages/webkit/src/components/data/flow/flow-parallel/flow-parallel.vue b/packages/webkit/src/components/data/flow/flow-parallel/flow-parallel.vue
index cab6bc827..561187780 100644
--- a/packages/webkit/src/components/data/flow/flow-parallel/flow-parallel.vue
+++ b/packages/webkit/src/components/data/flow/flow-parallel/flow-parallel.vue
@@ -27,7 +27,7 @@
 
   const rootClasses = computed(() =>
     cn(
-      'flex flex-col gap-[var(--spacing-md)] data-[align=start]:items-start data-[align=end]:items-end',
+      'flex flex-col gap-(--spacing-md) data-[align=start]:items-start data-[align=end]:items-end',
       attrs.class as string | undefined
     )
   )
diff --git a/packages/webkit/src/components/data/flow/flow.vue b/packages/webkit/src/components/data/flow/flow.vue
index ff914e18d..21c4de5c6 100644
--- a/packages/webkit/src/components/data/flow/flow.vue
+++ b/packages/webkit/src/components/data/flow/flow.vue
@@ -37,7 +37,7 @@
   })
 
   const outerClasses = computed(() =>
-    cn('w-full overflow-x-auto p-[var(--spacing-md)]', attrs.class as string | undefined)
+    cn('w-full overflow-x-auto p-(--spacing-md)', attrs.class as string | undefined)
   )
 </script>
 
@@ -50,7 +50,7 @@
     <div
       ref="containerRef"
       :data-align="align"
-      class="relative flex w-fit flex-row gap-[var(--spacing-xl)] text-[var(--text-default)] data-[align=center]:items-center data-[align=start]:items-start"
+      class="relative flex w-fit flex-row gap-(--spacing-xl) text-(--text-default) data-[align=center]:items-center data-[align=start]:items-start"
     >
       <svg
         v-if="paths.length"
@@ -67,13 +67,13 @@
           <path
             :d="path.d"
             stroke-width="1"
-            class="stroke-[var(--border-default)]"
+            class="stroke-(--border-default)"
             :class="{ 'opacity-50': path.faded }"
           />
           <polygon
             v-if="path.arrow"
             :points="`${path.arrow.x - 7},${path.arrow.y - 4} ${path.arrow.x},${path.arrow.y} ${path.arrow.x - 7},${path.arrow.y + 4}`"
-            class="fill-[var(--border-default)]"
+            class="fill-(--border-default)"
             :class="{ 'opacity-50': path.faded }"
           />
         </template>
diff --git a/packages/webkit/src/components/data/paginator/pagination-button/pagination-button.vue b/packages/webkit/src/components/data/paginator/pagination-button/pagination-button.vue
index e62379a56..8e38adba2 100644
--- a/packages/webkit/src/components/data/paginator/pagination-button/pagination-button.vue
+++ b/packages/webkit/src/components/data/paginator/pagination-button/pagination-button.vue
@@ -59,10 +59,10 @@
     :disabled="disabled"
     :aria-current="selected ? 'page' : undefined"
     :aria-disabled="disabled || undefined"
-    class="relative isolate inline-flex h-7 items-center justify-center whitespace-nowrap rounded-[var(--shape-button)] px-[var(--spacing-xs)] bg-[var(--bg-surface)] text-[var(--text-default)] text-button-lg transition-colors duration-150 ease-out motion-reduce:transition-none data-[kind=number]:w-10 data-[kind=more]:w-10 data-[kind=previous]:w-10 data-[kind=next]:w-10 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-[var(--bg-hover)] before:opacity-0 before:transition-opacity before:duration-150 before:ease-out motion-reduce:before:transition-none before:content-[''] after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-[var(--bg-active)] after:opacity-0 after:transition-opacity after:duration-150 after:ease-out motion-reduce:after:transition-none after:content-[''] hover:before:opacity-100 active:after:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] data-[selected]:bg-[var(--bg-selected)] data-[selected]:border-[length:var(--border-width-default)] data-[selected]:border-solid data-[selected]:border-[var(--border-default)] data-[disabled]:bg-[var(--bg-disabled)] data-[disabled]:text-[var(--text-disabled)] data-[disabled]:cursor-not-allowed data-[disabled]:before:hidden data-[disabled]:after:hidden"
+    class="relative isolate inline-flex h-7 items-center justify-center whitespace-nowrap rounded-(--shape-button) px-(--spacing-xs) bg-(--bg-surface) text-(--text-default) text-button-lg transition-colors duration-150 ease-out motion-reduce:transition-none data-[kind=number]:w-10 data-[kind=more]:w-10 data-[kind=previous]:w-10 data-[kind=next]:w-10 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-(--bg-hover) before:opacity-0 before:transition-opacity before:duration-150 before:ease-out motion-reduce:before:transition-none before:content-[''] after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-(--bg-active) after:opacity-0 after:transition-opacity after:duration-150 after:ease-out motion-reduce:after:transition-none after:content-[''] hover:before:opacity-100 active:after:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) data-[selected]:bg-(--bg-selected) data-[selected]:border-(length:--border-width-default) data-[selected]:border-solid data-[selected]:border-(--border-default) data-[disabled]:bg-(--bg-disabled) data-[disabled]:text-(--text-disabled) data-[disabled]:cursor-not-allowed data-[disabled]:before:hidden data-[disabled]:after:hidden"
     @click="handleClick"
   >
-    <span class="relative z-[1] inline-flex items-center gap-[var(--spacing-xs)]">
+    <span class="relative z-1 inline-flex items-center gap-(--spacing-xs)">
       <i
         v-if="kind === 'previous'"
         class="pi pi-chevron-left text-[length:inherit] leading-none"
diff --git a/packages/webkit/src/components/data/paginator/paginator-info/paginator-info.vue b/packages/webkit/src/components/data/paginator/paginator-info/paginator-info.vue
index 5429d0a1f..d08f31902 100644
--- a/packages/webkit/src/components/data/paginator/paginator-info/paginator-info.vue
+++ b/packages/webkit/src/components/data/paginator/paginator-info/paginator-info.vue
@@ -26,7 +26,7 @@
   <span
     v-bind="$attrs"
     :data-testid="testId"
-    class="truncate text-label-sm text-[var(--text-muted)]"
+    class="truncate text-label-sm text-(--text-muted)"
   >
     <slot />
   </span>
diff --git a/packages/webkit/src/components/data/paginator/paginator-page-size/paginator-page-size.vue b/packages/webkit/src/components/data/paginator/paginator-page-size/paginator-page-size.vue
index 2a48ce5c0..ae8b2821e 100644
--- a/packages/webkit/src/components/data/paginator/paginator-page-size/paginator-page-size.vue
+++ b/packages/webkit/src/components/data/paginator/paginator-page-size/paginator-page-size.vue
@@ -51,12 +51,12 @@
   <div
     v-bind="$attrs"
     :data-testid="testId"
-    class="relative inline-flex h-8 min-w-16 items-center rounded-[var(--shape-elements)] bg-[var(--bg-canvas)] text-body-sm text-[var(--text-muted)]"
+    class="relative inline-flex h-8 min-w-16 items-center rounded-(--shape-elements) bg-(--bg-canvas) text-body-sm text-(--text-muted)"
   >
     <select
       :value="modelValue"
       aria-label="Rows per page"
-      class="h-8 w-full cursor-pointer appearance-none rounded-[var(--shape-elements)] border-[length:var(--border-width-default)] border-solid border-[var(--border-default)] bg-[var(--bg-surface)] pl-[var(--spacing-sm)] pr-7 text-label-sm text-[var(--text-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]"
+      class="h-8 w-full cursor-pointer appearance-none rounded-(--shape-elements) border-(length:--border-width-default) border-solid border-(--border-default) bg-(--bg-surface) pl-(--spacing-sm) pr-7 text-label-sm text-(--text-muted) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)"
       @change="handleChange"
     >
       <option
@@ -68,7 +68,7 @@
       </option>
     </select>
     <i
-      class="pi pi-chevron-down pointer-events-none absolute right-[var(--spacing-sm)] text-[length:inherit] leading-none"
+      class="pi pi-chevron-down pointer-events-none absolute right-(--spacing-sm) text-[length:inherit] leading-none"
       aria-hidden="true"
     />
   </div>
diff --git a/packages/webkit/src/components/data/paginator/paginator.vue b/packages/webkit/src/components/data/paginator/paginator.vue
index 0fc736e28..091d1534f 100644
--- a/packages/webkit/src/components/data/paginator/paginator.vue
+++ b/packages/webkit/src/components/data/paginator/paginator.vue
@@ -142,7 +142,7 @@
     v-bind="$attrs"
     :aria-label="ariaLabel"
     :data-testid="testId"
-    class="flex w-full flex-wrap items-center justify-between gap-[var(--spacing-sm)] text-[var(--text-default)]"
+    class="flex w-full flex-wrap items-center justify-between gap-(--spacing-sm) text-(--text-default)"
   >
     <div class="flex min-w-0 items-center">
       <slot name="info">
@@ -152,9 +152,9 @@
       </slot>
     </div>
     <div
-      class="flex flex-auto flex-wrap items-center justify-end gap-x-[var(--spacing-sm)] gap-y-[var(--spacing-xs)]"
+      class="flex flex-auto flex-wrap items-center justify-end gap-x-(--spacing-sm) gap-y-(--spacing-xs)"
     >
-      <div class="flex flex-wrap items-center justify-center gap-[var(--spacing-xxs)]">
+      <div class="flex flex-wrap items-center justify-center gap-(--spacing-xxs)">
         <template v-if="dataDriven">
           <PaginationButton
             kind="previous"
diff --git a/packages/webkit/src/components/data/pick-list/pick-list-controls/pick-list-controls.vue b/packages/webkit/src/components/data/pick-list/pick-list-controls/pick-list-controls.vue
index a53d33cde..1970f3102 100644
--- a/packages/webkit/src/components/data/pick-list/pick-list-controls/pick-list-controls.vue
+++ b/packages/webkit/src/components/data/pick-list/pick-list-controls/pick-list-controls.vue
@@ -24,14 +24,14 @@
   <div
     v-bind="$attrs"
     :data-testid="testId"
-    class="flex flex-row items-center justify-center gap-[var(--spacing-xs)] md:flex-col"
+    class="flex flex-row items-center justify-center gap-(--spacing-xs) md:flex-col"
   >
     <button
       type="button"
       :disabled="ctx.disabled.value || ctx.anyLoading.value || !ctx.hasSelection('source')"
       aria-label="Move selected to target"
       :data-testid="`${testId}__move-to-target`"
-      class="inline-flex size-10 shrink-0 items-center justify-center rounded-[var(--shape-elements)] text-[var(--text-default)] transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-[var(--bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] disabled:cursor-not-allowed disabled:text-[var(--text-disabled)]"
+      class="inline-flex size-10 shrink-0 items-center justify-center rounded-(--shape-elements) text-(--text-default) transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-(--bg-hover) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) disabled:cursor-not-allowed disabled:text-(--text-disabled)"
       @click="ctx.move('to-target')"
     >
       <svg
@@ -53,7 +53,7 @@
       :disabled="ctx.disabled.value || ctx.anyLoading.value || ctx.count('source') === 0"
       aria-label="Move all to target"
       :data-testid="`${testId}__move-all-to-target`"
-      class="inline-flex size-10 shrink-0 items-center justify-center rounded-[var(--shape-elements)] text-[var(--text-default)] transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-[var(--bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] disabled:cursor-not-allowed disabled:text-[var(--text-disabled)]"
+      class="inline-flex size-10 shrink-0 items-center justify-center rounded-(--shape-elements) text-(--text-default) transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-(--bg-hover) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) disabled:cursor-not-allowed disabled:text-(--text-disabled)"
       @click="ctx.moveAll('to-target')"
     >
       <svg
@@ -76,7 +76,7 @@
       :disabled="ctx.disabled.value || ctx.anyLoading.value || !ctx.hasSelection('target')"
       aria-label="Move selected to source"
       :data-testid="`${testId}__move-to-source`"
-      class="inline-flex size-10 shrink-0 items-center justify-center rounded-[var(--shape-elements)] text-[var(--text-default)] transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-[var(--bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] disabled:cursor-not-allowed disabled:text-[var(--text-disabled)]"
+      class="inline-flex size-10 shrink-0 items-center justify-center rounded-(--shape-elements) text-(--text-default) transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-(--bg-hover) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) disabled:cursor-not-allowed disabled:text-(--text-disabled)"
       @click="ctx.move('to-source')"
     >
       <svg
@@ -98,7 +98,7 @@
       :disabled="ctx.disabled.value || ctx.anyLoading.value || ctx.count('target') === 0"
       aria-label="Move all to source"
       :data-testid="`${testId}__move-all-to-source`"
-      class="inline-flex size-10 shrink-0 items-center justify-center rounded-[var(--shape-elements)] text-[var(--text-default)] transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-[var(--bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] disabled:cursor-not-allowed disabled:text-[var(--text-disabled)]"
+      class="inline-flex size-10 shrink-0 items-center justify-center rounded-(--shape-elements) text-(--text-default) transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-(--bg-hover) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) disabled:cursor-not-allowed disabled:text-(--text-disabled)"
       @click="ctx.moveAll('to-source')"
     >
       <svg
diff --git a/packages/webkit/src/components/data/pick-list/pick-list-source/pick-list-source.vue b/packages/webkit/src/components/data/pick-list/pick-list-source/pick-list-source.vue
index 911aceb8d..40aae9f08 100644
--- a/packages/webkit/src/components/data/pick-list/pick-list-source/pick-list-source.vue
+++ b/packages/webkit/src/components/data/pick-list/pick-list-source/pick-list-source.vue
@@ -62,11 +62,11 @@
     v-bind="$attrs"
     :data-testid="testId"
     :data-loading="loading || null"
-    class="flex min-w-0 flex-col gap-[var(--spacing-xs)]"
+    class="flex min-w-0 flex-col gap-(--spacing-xs)"
   >
     <h3
       :data-testid="`${testId}__header`"
-      class="text-label-lg text-[var(--text-muted)]"
+      class="text-label-lg text-(--text-muted)"
     >
       <slot name="title">{{ title }}</slot>
     </h3>
@@ -86,7 +86,7 @@
       leave-from-class="opacity-100"
       leave-to-class="opacity-0"
       :leave-active-class="itemTransitionActive"
-      class="m-0 flex min-h-[14rem] list-none flex-col gap-[var(--spacing-xxs)] overflow-auto rounded-[var(--shape-card)] border border-[var(--border-default)] bg-[var(--bg-surface)] p-[var(--spacing-xs)] data-[disabled]:bg-[var(--bg-disabled)]"
+      class="m-0 flex min-h-[14rem] list-none flex-col gap-(--spacing-xxs) overflow-auto rounded-(--shape-card) border border-(--border-default) bg-(--bg-surface) p-(--spacing-xs) data-[disabled]:bg-(--bg-disabled)"
     >
       <li
         v-if="loading"
@@ -94,9 +94,9 @@
         role="presentation"
         :data-testid="`${testId}__loading`"
         :style="itemTransitionStyle"
-        class="flex flex-1 items-center justify-center py-[var(--spacing-md)]"
+        class="flex flex-1 items-center justify-center py-(--spacing-md)"
       >
-        <Spinner class="size-6 text-[var(--text-muted)]" />
+        <Spinner class="size-6 text-(--text-muted)" />
       </li>
       <li
         v-for="(item, index) in ctx.items(side)"
@@ -108,7 +108,7 @@
         :data-selected="ctx.isSelected(side, index) || null"
         :data-testid="`${testId}__option`"
         :style="itemTransitionStyle"
-        class="cursor-pointer select-none rounded-[var(--shape-elements)] px-[var(--spacing-sm)] py-[var(--spacing-xs)] text-body-md text-[var(--text-default)] hover:bg-[var(--bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] data-[selected]:bg-[var(--bg-selected)] aria-disabled:cursor-not-allowed"
+        class="cursor-pointer select-none rounded-(--shape-elements) px-(--spacing-sm) py-(--spacing-xs) text-body-md text-(--text-default) hover:bg-(--bg-hover) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) data-[selected]:bg-(--bg-selected) aria-disabled:cursor-not-allowed"
         @click="ctx.toggleSelection(side, index)"
         @dblclick="ctx.itemDoubleClick($event, side, index)"
         @keydown="onOptionKeydown(index, $event)"
diff --git a/packages/webkit/src/components/data/pick-list/pick-list-target/pick-list-target.vue b/packages/webkit/src/components/data/pick-list/pick-list-target/pick-list-target.vue
index 73b73186c..f95771676 100644
--- a/packages/webkit/src/components/data/pick-list/pick-list-target/pick-list-target.vue
+++ b/packages/webkit/src/components/data/pick-list/pick-list-target/pick-list-target.vue
@@ -62,11 +62,11 @@
     v-bind="$attrs"
     :data-testid="testId"
     :data-loading="loading || null"
-    class="flex min-w-0 flex-col gap-[var(--spacing-xs)]"
+    class="flex min-w-0 flex-col gap-(--spacing-xs)"
   >
     <h3
       :data-testid="`${testId}__header`"
-      class="text-label-lg text-[var(--text-muted)]"
+      class="text-label-lg text-(--text-muted)"
     >
       <slot name="title">{{ title }}</slot>
     </h3>
@@ -86,7 +86,7 @@
       leave-from-class="opacity-100"
       leave-to-class="opacity-0"
       :leave-active-class="itemTransitionActive"
-      class="m-0 flex min-h-[14rem] list-none flex-col gap-[var(--spacing-xxs)] overflow-auto rounded-[var(--shape-card)] border border-[var(--border-default)] bg-[var(--bg-surface)] p-[var(--spacing-xs)] data-[disabled]:bg-[var(--bg-disabled)]"
+      class="m-0 flex min-h-[14rem] list-none flex-col gap-(--spacing-xxs) overflow-auto rounded-(--shape-card) border border-(--border-default) bg-(--bg-surface) p-(--spacing-xs) data-[disabled]:bg-(--bg-disabled)"
     >
       <li
         v-if="loading"
@@ -94,9 +94,9 @@
         role="presentation"
         :data-testid="`${testId}__loading`"
         :style="itemTransitionStyle"
-        class="flex flex-1 items-center justify-center py-[var(--spacing-md)]"
+        class="flex flex-1 items-center justify-center py-(--spacing-md)"
       >
-        <Spinner class="size-6 text-[var(--text-muted)]" />
+        <Spinner class="size-6 text-(--text-muted)" />
       </li>
       <li
         v-for="(item, index) in ctx.items(side)"
@@ -108,7 +108,7 @@
         :data-selected="ctx.isSelected(side, index) || null"
         :data-testid="`${testId}__option`"
         :style="itemTransitionStyle"
-        class="cursor-pointer select-none rounded-[var(--shape-elements)] px-[var(--spacing-sm)] py-[var(--spacing-xs)] text-body-md text-[var(--text-default)] hover:bg-[var(--bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] data-[selected]:bg-[var(--bg-selected)] aria-disabled:cursor-not-allowed"
+        class="cursor-pointer select-none rounded-(--shape-elements) px-(--spacing-sm) py-(--spacing-xs) text-body-md text-(--text-default) hover:bg-(--bg-hover) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) data-[selected]:bg-(--bg-selected) aria-disabled:cursor-not-allowed"
         @click="ctx.toggleSelection(side, index)"
         @dblclick="ctx.itemDoubleClick($event, side, index)"
         @keydown="onOptionKeydown(index, $event)"
diff --git a/packages/webkit/src/components/data/pick-list/pick-list.vue b/packages/webkit/src/components/data/pick-list/pick-list.vue
index afd47a91e..5bebbf1fe 100644
--- a/packages/webkit/src/components/data/pick-list/pick-list.vue
+++ b/packages/webkit/src/components/data/pick-list/pick-list.vue
@@ -202,7 +202,7 @@
     v-bind="$attrs"
     :data-testid="testId"
     :data-disabled="disabled || null"
-    class="grid grid-cols-1 items-stretch gap-[var(--spacing-sm)] data-[disabled]:opacity-60 md:grid-cols-[1fr_auto_1fr]"
+    class="grid grid-cols-1 items-stretch gap-(--spacing-sm) data-[disabled]:opacity-60 md:grid-cols-[1fr_auto_1fr]"
   >
     <slot
       :move="move"
diff --git a/packages/webkit/src/components/data/table/table-applied-filters/table-applied-filters.vue b/packages/webkit/src/components/data/table/table-applied-filters/table-applied-filters.vue
index 6a8c60190..d3a02a701 100644
--- a/packages/webkit/src/components/data/table/table-applied-filters/table-applied-filters.vue
+++ b/packages/webkit/src/components/data/table/table-applied-filters/table-applied-filters.vue
@@ -69,7 +69,7 @@
   <div
     v-bind="$attrs"
     :data-testid="testId"
-    class="flex flex-wrap items-center gap-[var(--spacing-xs)]"
+    class="flex flex-wrap items-center gap-(--spacing-xs)"
   >
     <template
       v-for="filter in filters"
diff --git a/packages/webkit/src/components/data/table/table-caption/table-caption.vue b/packages/webkit/src/components/data/table/table-caption/table-caption.vue
index 785fdf387..0eb619fd1 100644
--- a/packages/webkit/src/components/data/table/table-caption/table-caption.vue
+++ b/packages/webkit/src/components/data/table/table-caption/table-caption.vue
@@ -27,7 +27,7 @@
     v-bind="$attrs"
     role="caption"
     :data-testid="testId"
-    class="px-[var(--spacing-sm)] py-[var(--spacing-xs)] text-label-sm text-[var(--text-muted)]"
+    class="px-(--spacing-sm) py-(--spacing-xs) text-label-sm text-(--text-muted)"
   >
     <slot />
   </div>
diff --git a/packages/webkit/src/components/data/table/table-cell/table-cell.vue b/packages/webkit/src/components/data/table/table-cell/table-cell.vue
index 2a9f3584e..52068984e 100644
--- a/packages/webkit/src/components/data/table/table-cell/table-cell.vue
+++ b/packages/webkit/src/components/data/table/table-cell/table-cell.vue
@@ -86,7 +86,7 @@
     :data-grow="growAttr"
     :data-frozen="frozen ?? null"
     :data-clickable="clickable || null"
-    class="flex min-h-12 min-w-0 items-center gap-[var(--spacing-xs)] px-[var(--spacing-sm)] whitespace-nowrap text-label-md text-[var(--text-default)] data-[align=start]:text-start data-[align=center]:text-center data-[align=end]:text-end data-[align=start]:justify-start data-[align=center]:justify-center data-[align=end]:justify-end data-[grow=1]:flex-[1_0_5rem] data-[grow=2]:flex-[2_0_5rem] data-[grow=3]:flex-[3_0_5rem] data-[kind=checkbox]:w-10 data-[kind=checkbox]:flex-none data-[kind=checkbox]:justify-center data-[kind=checkbox]:px-0 data-[kind=action]:ml-auto data-[kind=action]:w-10 data-[kind=action]:flex-none data-[kind=action]:justify-center data-[kind=action]:px-0 data-[frozen=start]:sticky data-[frozen=start]:left-0 data-[frozen=end]:sticky data-[frozen=end]:right-0 data-[frozen]:z-10 data-[frozen]:bg-[var(--table-row-bg,var(--bg-surface))] data-[frozen=start]:after:pointer-events-none data-[frozen=start]:after:absolute data-[frozen=start]:after:inset-y-0 data-[frozen=start]:after:-right-6 data-[frozen=start]:after:w-6 data-[frozen=start]:after:content-[''] data-[frozen=start]:after:bg-gradient-to-l data-[frozen=start]:after:from-transparent data-[frozen=start]:after:to-[var(--table-row-bg,var(--bg-surface))] data-[frozen=end]:before:pointer-events-none data-[frozen=end]:before:absolute data-[frozen=end]:before:inset-y-0 data-[frozen=end]:before:-left-6 data-[frozen=end]:before:w-6 data-[frozen=end]:before:content-[''] data-[frozen=end]:before:bg-gradient-to-r data-[frozen=end]:before:from-transparent data-[frozen=end]:before:to-[var(--table-row-bg,var(--bg-surface))] data-[clickable]:cursor-pointer data-[clickable]:underline"
+    class="flex min-h-12 min-w-0 items-center gap-(--spacing-xs) px-(--spacing-sm) whitespace-nowrap text-label-md text-(--text-default) data-[align=start]:text-start data-[align=center]:text-center data-[align=end]:text-end data-[align=start]:justify-start data-[align=center]:justify-center data-[align=end]:justify-end data-[grow=1]:flex-[1_0_5rem] data-[grow=2]:flex-[2_0_5rem] data-[grow=3]:flex-[3_0_5rem] data-[kind=checkbox]:w-10 data-[kind=checkbox]:flex-none data-[kind=checkbox]:justify-center data-[kind=checkbox]:px-0 data-[kind=action]:ml-auto data-[kind=action]:w-10 data-[kind=action]:flex-none data-[kind=action]:justify-center data-[kind=action]:px-0 data-[frozen=start]:sticky data-[frozen=start]:left-0 data-[frozen=end]:sticky data-[frozen=end]:right-0 data-[frozen]:z-10 data-[frozen]:bg-[var(--table-row-bg,var(--bg-surface))] data-[frozen=start]:after:pointer-events-none data-[frozen=start]:after:absolute data-[frozen=start]:after:inset-y-0 data-[frozen=start]:after:-right-6 data-[frozen=start]:after:w-6 data-[frozen=start]:after:content-[''] data-[frozen=start]:after:bg-gradient-to-l data-[frozen=start]:after:from-transparent data-[frozen=start]:after:to-[var(--table-row-bg,var(--bg-surface))] data-[frozen=end]:before:pointer-events-none data-[frozen=end]:before:absolute data-[frozen=end]:before:inset-y-0 data-[frozen=end]:before:-left-6 data-[frozen=end]:before:w-6 data-[frozen=end]:before:content-[''] data-[frozen=end]:before:bg-gradient-to-r data-[frozen=end]:before:from-transparent data-[frozen=end]:before:to-[var(--table-row-bg,var(--bg-surface))] data-[clickable]:cursor-pointer data-[clickable]:underline"
   >
     <slot />
   </div>
diff --git a/packages/webkit/src/components/data/table/table-column-selector/table-column-selector.vue b/packages/webkit/src/components/data/table/table-column-selector/table-column-selector.vue
index 30335dc8e..93a997c18 100644
--- a/packages/webkit/src/components/data/table/table-column-selector/table-column-selector.vue
+++ b/packages/webkit/src/components/data/table/table-column-selector/table-column-selector.vue
@@ -120,13 +120,13 @@
           :aria-label="title"
           :data-testid="`${testId}__panel`"
           :style="panelStyle"
-          class="flex min-w-[var(--container-3xs)] max-w-[var(--container-2xs)] flex-col gap-[var(--spacing-xs)] rounded-[var(--shape-card)] border border-solid border-[length:var(--border-width-default)] border-[var(--border-default)] bg-[var(--bg-surface)] p-[var(--spacing-sm)] shadow-[var(--shadow-sm)] outline-none [transform-origin:var(--popup-origin,top_left)]"
+          class="flex min-w-(--container-3xs) max-w-(--container-2xs) flex-col gap-(--spacing-xs) rounded-(--shape-card) border border-solid border-(length:--border-width-default) border-(--border-default) bg-(--bg-surface) p-(--spacing-sm) shadow-(--shadow-sm) outline-none [transform-origin:var(--popup-origin,top_left)]"
         >
-          <p class="text-label-md text-[var(--text-default)]">{{ title }}</p>
+          <p class="text-label-md text-(--text-default)">{{ title }}</p>
           <label
             v-for="column in columns"
             :key="column.id"
-            class="flex items-center gap-[var(--spacing-sm)] text-body-sm text-[var(--text-default)]"
+            class="flex items-center gap-(--spacing-sm) text-body-sm text-(--text-default)"
           >
             <Checkbox
               binary
@@ -137,7 +137,7 @@
           </label>
           <p
             v-if="columns.length === 0"
-            class="text-body-sm text-[var(--text-muted)]"
+            class="text-body-sm text-(--text-muted)"
           >
             No hideable columns.
           </p>
diff --git a/packages/webkit/src/components/data/table/table-filter/table-filter.vue b/packages/webkit/src/components/data/table/table-filter/table-filter.vue
index cd7b60ebc..0348930b1 100644
--- a/packages/webkit/src/components/data/table/table-filter/table-filter.vue
+++ b/packages/webkit/src/components/data/table/table-filter/table-filter.vue
@@ -239,9 +239,9 @@
           :aria-label="title"
           :data-testid="`${testId}__panel`"
           :style="panelStyle"
-          class="flex min-w-[var(--container-2xs)] max-w-[var(--container-xs)] flex-col gap-[var(--spacing-sm)] rounded-[var(--shape-card)] border border-solid border-[length:var(--border-width-default)] border-[var(--border-default)] bg-[var(--bg-surface)] p-[var(--spacing-sm)] shadow-[var(--shadow-sm)] outline-none [transform-origin:var(--popup-origin,top_left)]"
+          class="flex min-w-(--container-2xs) max-w-(--container-xs) flex-col gap-(--spacing-sm) rounded-(--shape-card) border border-solid border-(length:--border-width-default) border-(--border-default) bg-(--bg-surface) p-(--spacing-sm) shadow-(--shadow-sm) outline-none [transform-origin:var(--popup-origin,top_left)]"
         >
-          <p class="text-label-md text-[var(--text-default)]">{{ title }}</p>
+          <p class="text-label-md text-(--text-default)">{{ title }}</p>
 
           <slot
             :fields="fields"
@@ -250,12 +250,12 @@
             :clear="clearAll"
             :remove="removeOne"
           >
-            <div class="flex flex-col gap-[var(--spacing-xs)]">
+            <div class="flex flex-col gap-(--spacing-xs)">
               <select
                 v-model="draftField"
                 :data-testid="`${testId}__field`"
                 aria-label="Field"
-                class="h-8 rounded-[var(--shape-elements)] border border-solid border-[length:var(--border-width-default)] border-[var(--border-default)] bg-[var(--bg-surface)] px-[var(--spacing-sm)] text-body-sm text-[var(--text-default)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)]"
+                class="h-8 rounded-(--shape-elements) border border-solid border-(length:--border-width-default) border-(--border-default) bg-(--bg-surface) px-(--spacing-sm) text-body-sm text-(--text-default) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color)"
               >
                 <option
                   v-for="field in fields"
@@ -271,7 +271,7 @@
                 :data-testid="`${testId}__operator`"
                 aria-label="Operator"
                 :disabled="!draftField"
-                class="h-8 rounded-[var(--shape-elements)] border border-solid border-[length:var(--border-width-default)] border-[var(--border-default)] bg-[var(--bg-surface)] px-[var(--spacing-sm)] text-body-sm text-[var(--text-default)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] disabled:cursor-not-allowed disabled:opacity-60"
+                class="h-8 rounded-(--shape-elements) border border-solid border-(length:--border-width-default) border-(--border-default) bg-(--bg-surface) px-(--spacing-sm) text-body-sm text-(--text-default) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) disabled:cursor-not-allowed disabled:opacity-60"
                 @change="
                   (event) =>
                     (draftOperator = (event.target as HTMLSelectElement).value as FilterOperator)
@@ -291,7 +291,7 @@
                 v-model="draftValue"
                 :data-testid="`${testId}__value`"
                 aria-label="Value"
-                class="h-8 rounded-[var(--shape-elements)] border border-solid border-[length:var(--border-width-default)] border-[var(--border-default)] bg-[var(--bg-surface)] px-[var(--spacing-sm)] text-body-sm text-[var(--text-default)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)]"
+                class="h-8 rounded-(--shape-elements) border border-solid border-(length:--border-width-default) border-(--border-default) bg-(--bg-surface) px-(--spacing-sm) text-body-sm text-(--text-default) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color)"
               >
                 <option
                   v-for="option in valueOptions"
diff --git a/packages/webkit/src/components/data/table/table-footer/table-footer.vue b/packages/webkit/src/components/data/table/table-footer/table-footer.vue
index 24fad0783..13e9d231b 100644
--- a/packages/webkit/src/components/data/table/table-footer/table-footer.vue
+++ b/packages/webkit/src/components/data/table/table-footer/table-footer.vue
@@ -27,7 +27,7 @@
     v-bind="$attrs"
     role="rowgroup"
     :data-testid="testId"
-    class="flex min-w-full flex-col bg-[var(--bg-surface)] text-[var(--text-muted)] border-t-[length:var(--border-width-default)] border-solid border-[var(--border-default)]"
+    class="flex min-w-full flex-col bg-(--bg-surface) text-(--text-muted) border-t-(length:--border-width-default) border-solid border-(--border-default)"
   >
     <slot />
   </div>
diff --git a/packages/webkit/src/components/data/table/table-head-cell/table-head-cell.vue b/packages/webkit/src/components/data/table/table-head-cell/table-head-cell.vue
index a3175d26b..e065413d8 100644
--- a/packages/webkit/src/components/data/table/table-head-cell/table-head-cell.vue
+++ b/packages/webkit/src/components/data/table/table-head-cell/table-head-cell.vue
@@ -113,7 +113,7 @@
     @click="toggleSort"
     @keydown.enter.prevent="toggleSort"
     @keydown.space.prevent="toggleSort"
-    class="group/head relative flex h-11 min-w-0 items-center gap-[var(--spacing-xs)] px-[var(--spacing-sm)] data-[sortable]:cursor-pointer data-[sortable]:select-none data-[sortable]:focus-visible:outline-none data-[sortable]:focus-visible:ring-2 data-[sortable]:focus-visible:ring-inset data-[sortable]:focus-visible:ring-[var(--ring-color)] data-[compact]:h-9 data-[compact]:px-[var(--spacing-xs)] text-label-sm text-[var(--text-muted)] data-[align=start]:text-start data-[align=center]:text-center data-[align=end]:text-end data-[align=start]:justify-start data-[align=center]:justify-center data-[align=end]:justify-end data-[grow=1]:flex-[1_0_5rem] data-[grow=2]:flex-[2_0_5rem] data-[grow=3]:flex-[3_0_5rem] data-[kind=checkbox]:w-10 data-[kind=checkbox]:flex-none data-[kind=checkbox]:justify-center data-[kind=checkbox]:px-0 data-[kind=action]:ml-auto data-[kind=action]:w-10 data-[kind=action]:flex-none data-[kind=action]:justify-center data-[kind=action]:px-0 data-[frozen=start]:sticky data-[frozen=start]:left-0 data-[frozen=end]:sticky data-[frozen=end]:right-0 data-[frozen]:z-10 data-[frozen]:bg-[var(--table-row-bg,var(--bg-surface))] data-[frozen=start]:after:pointer-events-none data-[frozen=start]:after:absolute data-[frozen=start]:after:inset-y-0 data-[frozen=start]:after:-right-6 data-[frozen=start]:after:w-6 data-[frozen=start]:after:content-[''] data-[frozen=start]:after:bg-gradient-to-l data-[frozen=start]:after:from-transparent data-[frozen=start]:after:to-[var(--table-row-bg,var(--bg-surface))] data-[frozen=end]:before:pointer-events-none data-[frozen=end]:before:absolute data-[frozen=end]:before:inset-y-0 data-[frozen=end]:before:-left-6 data-[frozen=end]:before:w-6 data-[frozen=end]:before:content-[''] data-[frozen=end]:before:bg-gradient-to-r data-[frozen=end]:before:from-transparent data-[frozen=end]:before:to-[var(--table-row-bg,var(--bg-surface))]"
+    class="group/head relative flex h-11 min-w-0 items-center gap-(--spacing-xs) px-(--spacing-sm) data-[sortable]:cursor-pointer data-[sortable]:select-none data-[sortable]:focus-visible:outline-none data-[sortable]:focus-visible:ring-2 data-[sortable]:focus-visible:ring-inset data-[sortable]:focus-visible:ring-(--ring-color) data-[compact]:h-9 data-[compact]:px-(--spacing-xs) text-label-sm text-(--text-muted) data-[align=start]:text-start data-[align=center]:text-center data-[align=end]:text-end data-[align=start]:justify-start data-[align=center]:justify-center data-[align=end]:justify-end data-[grow=1]:flex-[1_0_5rem] data-[grow=2]:flex-[2_0_5rem] data-[grow=3]:flex-[3_0_5rem] data-[kind=checkbox]:w-10 data-[kind=checkbox]:flex-none data-[kind=checkbox]:justify-center data-[kind=checkbox]:px-0 data-[kind=action]:ml-auto data-[kind=action]:w-10 data-[kind=action]:flex-none data-[kind=action]:justify-center data-[kind=action]:px-0 data-[frozen=start]:sticky data-[frozen=start]:left-0 data-[frozen=end]:sticky data-[frozen=end]:right-0 data-[frozen]:z-10 data-[frozen]:bg-[var(--table-row-bg,var(--bg-surface))] data-[frozen=start]:after:pointer-events-none data-[frozen=start]:after:absolute data-[frozen=start]:after:inset-y-0 data-[frozen=start]:after:-right-6 data-[frozen=start]:after:w-6 data-[frozen=start]:after:content-[''] data-[frozen=start]:after:bg-gradient-to-l data-[frozen=start]:after:from-transparent data-[frozen=start]:after:to-[var(--table-row-bg,var(--bg-surface))] data-[frozen=end]:before:pointer-events-none data-[frozen=end]:before:absolute data-[frozen=end]:before:inset-y-0 data-[frozen=end]:before:-left-6 data-[frozen=end]:before:w-6 data-[frozen=end]:before:content-[''] data-[frozen=end]:before:bg-gradient-to-r data-[frozen=end]:before:from-transparent data-[frozen=end]:before:to-[var(--table-row-bg,var(--bg-surface))]"
   >
     <slot v-if="kind === 'checkbox' || kind === 'action'" />
     <template v-else>
@@ -136,7 +136,7 @@
       aria-orientation="vertical"
       aria-label="Resize column"
       :data-resizing="resizing || null"
-      class="absolute inset-y-0 right-0 z-20 w-2 shrink-0 cursor-col-resize touch-none select-none before:absolute before:inset-y-2 before:right-0 before:w-[2px] before:rounded-full before:bg-transparent before:content-[''] before:transition-colors before:duration-150 before:ease-out motion-reduce:before:transition-none hover:before:bg-[var(--border-strong)] data-[resizing]:before:bg-[var(--ring-color)]"
+      class="absolute inset-y-0 right-0 z-20 w-2 shrink-0 cursor-col-resize touch-none select-none before:absolute before:inset-y-2 before:right-0 before:w-[2px] before:rounded-full before:bg-transparent before:content-[''] before:transition-colors before:duration-150 before:ease-out motion-reduce:before:transition-none hover:before:bg-(--border-strong) data-[resizing]:before:bg-(--ring-color)"
       @mousedown.stop="resizeHandler"
       @touchstart.stop="resizeHandler"
       @click.stop
diff --git a/packages/webkit/src/components/data/table/table-header/table-header.vue b/packages/webkit/src/components/data/table/table-header/table-header.vue
index 05ada87a9..e4ea5c9bb 100644
--- a/packages/webkit/src/components/data/table/table-header/table-header.vue
+++ b/packages/webkit/src/components/data/table/table-header/table-header.vue
@@ -53,7 +53,7 @@
     role="rowgroup"
     :data-testid="testId"
     :data-frozen="frozen || null"
-    class="flex w-full flex-col bg-[var(--bg-surface)] data-[frozen]:sticky data-[frozen]:top-0 data-[frozen]:z-20"
+    class="flex w-full flex-col bg-(--bg-surface) data-[frozen]:sticky data-[frozen]:top-0 data-[frozen]:z-20"
   >
     <slot />
   </div>
diff --git a/packages/webkit/src/components/data/table/table-row/table-row.vue b/packages/webkit/src/components/data/table/table-row/table-row.vue
index 8a4189a51..a9130bf54 100644
--- a/packages/webkit/src/components/data/table/table-row/table-row.vue
+++ b/packages/webkit/src/components/data/table/table-row/table-row.vue
@@ -47,7 +47,7 @@
     :data-frozen="frozen || null"
     :data-hoverable="group.hoverable || null"
     :aria-selected="selected || undefined"
-    class="flex w-full items-stretch [--table-row-bg:var(--bg-surface)] bg-[var(--table-row-bg)] border-b-[length:var(--border-width-default)] border-solid border-[var(--border-default)] transition-colors duration-150 ease-out motion-reduce:transition-none data-[hoverable]:hover:[--table-row-bg:var(--bg-canvas)] data-[state=selected]:[--table-row-bg:var(--bg-selected)] data-[state=selected]:hover:[--table-row-bg:var(--bg-selected)] data-[frozen]:sticky data-[frozen]:top-0 data-[frozen]:z-10"
+    class="flex w-full items-stretch [--table-row-bg:var(--bg-surface)] bg-(--table-row-bg) border-b-(length:--border-width-default) border-solid border-(--border-default) transition-colors duration-150 ease-out motion-reduce:transition-none data-[hoverable]:hover:[--table-row-bg:var(--bg-canvas)] data-[state=selected]:[--table-row-bg:var(--bg-selected)] data-[state=selected]:hover:[--table-row-bg:var(--bg-selected)] data-[frozen]:sticky data-[frozen]:top-0 data-[frozen]:z-10"
   >
     <slot />
   </div>
diff --git a/packages/webkit/src/components/data/table/table-toolbar/table-toolbar.vue b/packages/webkit/src/components/data/table/table-toolbar/table-toolbar.vue
index df4e682a9..ea430b2c0 100644
--- a/packages/webkit/src/components/data/table/table-toolbar/table-toolbar.vue
+++ b/packages/webkit/src/components/data/table/table-toolbar/table-toolbar.vue
@@ -26,7 +26,7 @@
   <div
     v-bind="$attrs"
     :data-testid="testId"
-    class="flex flex-1 items-center justify-end gap-[var(--spacing-xs)]"
+    class="flex flex-1 items-center justify-end gap-(--spacing-xs)"
   >
     <slot />
   </div>
diff --git a/packages/webkit/src/components/data/table/table.vue b/packages/webkit/src/components/data/table/table.vue
index e7ad26f7d..a3580ab6e 100644
--- a/packages/webkit/src/components/data/table/table.vue
+++ b/packages/webkit/src/components/data/table/table.vue
@@ -220,7 +220,7 @@
 
   // ScrollArea (the project's scroll primitive) is the scroll viewport. It only
   // forwards `class`, so the dynamic max-height is published as a CSS variable on
-  // the root and consumed by a static `max-h-[var(--table-viewport-height)]` class.
+  // the root and consumed by a static `max-h-(--table-viewport-height)` class.
   const viewportHeightVar = computed<Record<string, string> | undefined>(() =>
     props.maxHeight ? { '--table-viewport-height': props.maxHeight } : undefined
   )
@@ -917,23 +917,23 @@
     :data-border="border || null"
     :aria-busy="loading || undefined"
     :style="viewportHeightVar"
-    class="flex w-full flex-col overflow-hidden rounded-[var(--shape-elements)] bg-[var(--bg-surface)] text-[var(--text-default)] text-body-sm data-[border]:border-[length:var(--border-width-default)] data-[border]:border-solid data-[border]:border-[var(--border-default)]"
+    class="flex w-full flex-col overflow-hidden rounded-(--shape-elements) bg-(--bg-surface) text-(--text-default) text-body-sm data-[border]:border-(length:--border-width-default) data-[border]:border-solid data-[border]:border-(--border-default)"
   >
     <div
       v-if="$slots['title'] || $slots['toolbar']"
       role="presentation"
       :data-testid="`${testId}__toolbar`"
-      class="flex items-center gap-[var(--spacing-xs)] border-b-[length:var(--border-width-default)] border-solid border-[var(--border-default)] p-[var(--spacing-sm)]"
+      class="flex items-center gap-(--spacing-xs) border-b-(length:--border-width-default) border-solid border-(--border-default) p-(--spacing-sm)"
     >
       <div
         v-if="$slots['title']"
-        class="text-label-md text-[var(--text-default)]"
+        class="text-label-md text-(--text-default)"
       >
         <slot name="title" />
       </div>
       <div
         v-if="$slots['toolbar']"
-        class="flex flex-1 items-center justify-end gap-[var(--spacing-xs)]"
+        class="flex flex-1 items-center justify-end gap-(--spacing-xs)"
       >
         <slot
           name="toolbar"
@@ -949,7 +949,7 @@
       v-if="$slots['filters'] && appliedFilters.length > 0"
       role="presentation"
       :data-testid="`${testId}__filters`"
-      class="flex flex-wrap items-center gap-[var(--spacing-xs)] border-b-[length:var(--border-width-default)] border-solid border-[var(--border-default)] p-[var(--spacing-sm)]"
+      class="flex flex-wrap items-center gap-(--spacing-xs) border-b-(length:--border-width-default) border-solid border-(--border-default) p-(--spacing-sm)"
     >
       <slot
         name="filters"
@@ -968,7 +968,7 @@
     <ScrollArea
       :orientation="maxHeight ? 'both' : 'horizontal'"
       :data-testid="`${testId}__viewport`"
-      class="min-w-0 max-h-[var(--table-viewport-height)]"
+      class="min-w-0 max-h-(--table-viewport-height)"
     >
       <!-- Single width-defining container: the header and body share ONE
            max-content box, so every row resolves to the same width and the
@@ -1147,7 +1147,7 @@
     </ScrollArea>
 
     <TableFooter v-if="dataDriven && paginated">
-      <div class="flex items-center px-[var(--spacing-sm)] py-[var(--spacing-xs)]">
+      <div class="flex items-center px-(--spacing-sm) py-(--spacing-xs)">
         <Paginator
           class="w-full"
           :page="pageIndex + 1"
diff --git a/packages/webkit/src/components/feedback/empty-state/empty-state.vue b/packages/webkit/src/components/feedback/empty-state/empty-state.vue
index 0bce77fd4..f27ab0be5 100644
--- a/packages/webkit/src/components/feedback/empty-state/empty-state.vue
+++ b/packages/webkit/src/components/feedback/empty-state/empty-state.vue
@@ -47,7 +47,7 @@
     :data-testid="testId"
     :data-size="size"
     :data-bordered="bordered || null"
-    class="flex w-full flex-col items-center justify-center text-center data-[bordered]:rounded-[var(--shape-button)] data-[bordered]:border data-[bordered]:border-dashed data-[bordered]:border-[length:var(--border-width-default,1px)] data-[bordered]:border-[var(--border-default)] data-[bordered]:bg-[var(--bg-surface)] data-[size=small]:gap-[var(--spacing-4)] data-[size=small]:px-[var(--spacing-6)] data-[size=small]:py-[var(--spacing-8)] data-[size=medium]:gap-[var(--spacing-6)] data-[size=medium]:px-[var(--spacing-8)] data-[size=medium]:py-[var(--spacing-12)]"
+    class="flex w-full flex-col items-center justify-center text-center data-[bordered]:rounded-(--shape-button) data-[bordered]:border data-[bordered]:border-dashed data-[bordered]:border-[length:var(--border-width-default,1px)] data-[bordered]:border-(--border-default) data-[bordered]:bg-(--bg-surface) data-[size=small]:gap-(--spacing-4) data-[size=small]:px-(--spacing-6) data-[size=small]:py-(--spacing-8) data-[size=medium]:gap-(--spacing-6) data-[size=medium]:px-(--spacing-8) data-[size=medium]:py-(--spacing-12)"
   >
     <div
       v-if="$slots['icon'] || icon"
@@ -61,27 +61,27 @@
           class="relative flex items-center justify-center group-data-[size=small]:size-8 group-data-[size=medium]:size-10"
         >
           <span
-            class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-[var(--shape-card)] border border-[var(--border-strong)] bg-[var(--bg-canvas)] opacity-5 group-data-[size=small]:size-12 group-data-[size=medium]:size-14"
+            class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-(--shape-card) border border-(--border-strong) bg-(--bg-canvas) opacity-5 group-data-[size=small]:size-12 group-data-[size=medium]:size-14"
           />
           <span
-            class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-[var(--shape-card)] border border-[var(--border-strong)] bg-[var(--bg-canvas)] opacity-10 group-data-[size=small]:size-10 group-data-[size=medium]:size-12"
+            class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-(--shape-card) border border-(--border-strong) bg-(--bg-canvas) opacity-10 group-data-[size=small]:size-10 group-data-[size=medium]:size-12"
           />
           <span
-            class="relative flex items-center justify-center rounded-[var(--shape-elements)] border border-[var(--border-default)] bg-[var(--bg-surface)] group-data-[size=small]:size-8 group-data-[size=medium]:size-10"
+            class="relative flex items-center justify-center rounded-(--shape-elements) border border-(--border-default) bg-(--bg-surface) group-data-[size=small]:size-8 group-data-[size=medium]:size-10"
           >
             <i
               :class="icon"
-              class="leading-none text-[var(--text-default)] group-data-[size=small]:text-[length:0.875rem] group-data-[size=medium]:text-[length:1rem]"
+              class="leading-none text-(--text-default) group-data-[size=small]:text-[length:0.875rem] group-data-[size=medium]:text-[length:1rem]"
             />
           </span>
         </span>
       </slot>
     </div>
-    <div class="flex max-w-[var(--container-xl)] flex-col items-center gap-[var(--spacing-xs)]">
+    <div class="flex max-w-(--container-xl) flex-col items-center gap-(--spacing-xs)">
       <p
         :data-testid="`${testId}__title`"
         :data-size="size"
-        class="text-[var(--text-default)] data-[size=small]:text-heading-xxs data-[size=medium]:text-heading-sm"
+        class="text-(--text-default) data-[size=small]:text-heading-xxs data-[size=medium]:text-heading-sm"
       >
         {{ title }}
       </p>
@@ -89,7 +89,7 @@
         v-if="description"
         :data-testid="`${testId}__description`"
         :data-size="size"
-        class="text-[var(--text-muted)] data-[size=small]:text-body-xs data-[size=medium]:text-body-sm"
+        class="text-(--text-muted) data-[size=small]:text-body-xs data-[size=medium]:text-body-sm"
       >
         {{ description }}
       </p>
@@ -97,7 +97,7 @@
     <div
       v-if="$slots['actions']"
       :data-testid="`${testId}__actions`"
-      class="flex flex-col items-center gap-[var(--spacing-xs)]"
+      class="flex flex-col items-center gap-(--spacing-xs)"
     >
       <slot name="actions" />
     </div>
diff --git a/packages/webkit/src/components/feedback/message/message.vue b/packages/webkit/src/components/feedback/message/message.vue
index e1271e324..925a898ce 100644
--- a/packages/webkit/src/components/feedback/message/message.vue
+++ b/packages/webkit/src/components/feedback/message/message.vue
@@ -170,18 +170,18 @@
       :data-trailing="hasTrailingControl || null"
       :style="dismissTransitionStyle"
       tabindex="-1"
-      class="relative box-border flex w-full flex-wrap items-center gap-[var(--spacing-sm)] break-words rounded-[var(--shape-button)] border border-[length:var(--border-width-default,1px)] py-1.5 shadow-[var(--shadow-xs)] data-[size=small]:min-h-8 data-[size=small]:px-[var(--spacing-xs)] data-[size=medium]:min-h-9 data-[size=medium]:px-[var(--spacing-sm)] data-[trailing]:pr-[var(--spacing-xs)] data-[severity=info]:border-[var(--info-border)] data-[severity=info]:bg-[var(--info)] data-[severity=success]:border-[var(--success-border)] data-[severity=success]:bg-[var(--success)] data-[severity=warning]:border-[var(--warning-border)] data-[severity=warning]:bg-[var(--warning)] data-[severity=danger]:border-[var(--danger-border)] data-[severity=danger]:bg-[var(--danger)]"
+      class="relative box-border flex w-full flex-wrap items-center gap-(--spacing-sm) break-words rounded-(--shape-button) border border-[length:var(--border-width-default,1px)] py-1.5 shadow-(--shadow-xs) data-[size=small]:min-h-8 data-[size=small]:px-(--spacing-xs) data-[size=medium]:min-h-9 data-[size=medium]:px-(--spacing-sm) data-[trailing]:pr-(--spacing-xs) data-[severity=info]:border-(--info-border) data-[severity=info]:bg-(--info) data-[severity=success]:border-(--success-border) data-[severity=success]:bg-(--success) data-[severity=warning]:border-(--warning-border) data-[severity=warning]:bg-(--warning) data-[severity=danger]:border-(--danger-border) data-[severity=danger]:bg-(--danger)"
       @keydown="handleEscape"
     >
       <i
         :class="resolvedIcon"
         :data-severity="normalizedSeverity"
-        class="size-3.5 shrink-0 text-label-md leading-none data-[severity=info]:text-[var(--info-contrast)] data-[severity=success]:text-[var(--success-contrast)] data-[severity=warning]:text-[var(--warning-contrast)] data-[severity=danger]:text-[var(--danger-contrast)]"
+        class="size-3.5 shrink-0 text-label-md leading-none data-[severity=info]:text-(--info-contrast) data-[severity=success]:text-(--success-contrast) data-[severity=warning]:text-(--warning-contrast) data-[severity=danger]:text-(--danger-contrast)"
         aria-hidden="true"
       />
       <p
         :data-size="size"
-        class="m-0 min-w-0 flex-1 text-[var(--text-default)] data-[size=small]:text-label-sm data-[size=medium]:text-label-md [&_a]:text-link [&_a]:underline [&_a]:underline-offset-2 [&_a]:motion-reduce:transition-none"
+        class="m-0 min-w-0 flex-1 text-(--text-default) data-[size=small]:text-label-sm data-[size=medium]:text-label-md [&_a]:text-link [&_a]:underline [&_a]:underline-offset-2 [&_a]:motion-reduce:transition-none"
         :data-testid="`${testId}__content`"
       >
         <slot v-if="$slots['default']" />
diff --git a/packages/webkit/src/components/feedback/progress-bar/progress-bar.vue b/packages/webkit/src/components/feedback/progress-bar/progress-bar.vue
index 358f4b40f..345c0b4c0 100644
--- a/packages/webkit/src/components/feedback/progress-bar/progress-bar.vue
+++ b/packages/webkit/src/components/feedback/progress-bar/progress-bar.vue
@@ -51,12 +51,12 @@
     :aria-valuemax="indeterminate ? undefined : max"
     :aria-valuenow="indeterminate ? undefined : value"
     :aria-busy="indeterminate || undefined"
-    class="relative block w-full overflow-hidden bg-[var(--bg-surface-raised)] data-[size=small]:h-2 data-[size=medium]:h-3 data-[size=large]:h-4 data-[shape=rounded]:rounded-[var(--shape-elements)] data-[shape=flat]:rounded-[var(--shape-flat)]"
+    class="relative block w-full overflow-hidden bg-(--bg-surface-raised) data-[size=small]:h-2 data-[size=medium]:h-3 data-[size=large]:h-4 data-[shape=rounded]:rounded-(--shape-elements) data-[shape=flat]:rounded-(--shape-flat)"
   >
     <div
       :data-indeterminate="indeterminate || null"
       :style="indeterminate ? undefined : { width: percent + '%' }"
-      class="absolute inset-y-0 left-0 rounded-[inherit] bg-[var(--primary)] transition-[width] duration-moderate-02 ease-productive-entrance motion-reduce:transition-none motion-reduce:animate-none data-[indeterminate]:right-0 data-[indeterminate]:bg-transparent data-[indeterminate]:before:absolute data-[indeterminate]:before:inset-y-0 data-[indeterminate]:before:rounded-[inherit] data-[indeterminate]:before:bg-[var(--primary)] data-[indeterminate]:before:content-[''] data-[indeterminate]:before:animate-progress-indeterminate motion-reduce:before:animate-none motion-reduce:before:inset-x-0 data-[indeterminate]:after:absolute data-[indeterminate]:after:inset-y-0 data-[indeterminate]:after:rounded-[inherit] data-[indeterminate]:after:bg-[var(--primary)] data-[indeterminate]:after:content-[''] data-[indeterminate]:after:animate-progress-indeterminate-short motion-reduce:after:animate-none motion-reduce:after:hidden"
+      class="absolute inset-y-0 left-0 rounded-[inherit] bg-(--primary) transition-[width] duration-moderate-02 ease-productive-entrance motion-reduce:transition-none motion-reduce:animate-none data-[indeterminate]:right-0 data-[indeterminate]:bg-transparent data-[indeterminate]:before:absolute data-[indeterminate]:before:inset-y-0 data-[indeterminate]:before:rounded-[inherit] data-[indeterminate]:before:bg-(--primary) data-[indeterminate]:before:content-[''] data-[indeterminate]:before:animate-progress-indeterminate motion-reduce:before:animate-none motion-reduce:before:inset-x-0 data-[indeterminate]:after:absolute data-[indeterminate]:after:inset-y-0 data-[indeterminate]:after:rounded-[inherit] data-[indeterminate]:after:bg-(--primary) data-[indeterminate]:after:content-[''] data-[indeterminate]:after:animate-progress-indeterminate-short motion-reduce:after:animate-none motion-reduce:after:hidden"
     />
   </div>
 </template>
diff --git a/packages/webkit/src/components/feedback/skeleton/skeleton.vue b/packages/webkit/src/components/feedback/skeleton/skeleton.vue
index 86275298f..3149273c0 100644
--- a/packages/webkit/src/components/feedback/skeleton/skeleton.vue
+++ b/packages/webkit/src/components/feedback/skeleton/skeleton.vue
@@ -40,6 +40,6 @@
     :data-kind="kind"
     :data-animated="animated || null"
     :style="{ width, height }"
-    class="block bg-[var(--bg-placeholder)] data-[kind=shape]:rounded-[var(--shape-elements)] data-[kind=circle]:rounded-full data-[animated]:motion-safe:bg-[linear-gradient(90deg,transparent_0%,transparent_35%,var(--bg-placeholder-highlight)_50%,transparent_65%,transparent_100%)] data-[animated]:motion-safe:bg-[length:200%_100%] data-[animated]:motion-safe:animate-[var(--animate-shimmer)] motion-reduce:animate-none"
+    class="block bg-(--bg-placeholder) data-[kind=shape]:rounded-(--shape-elements) data-[kind=circle]:rounded-full data-[animated]:motion-safe:bg-[linear-gradient(90deg,transparent_0%,transparent_35%,var(--bg-placeholder-highlight)_50%,transparent_65%,transparent_100%)] data-[animated]:motion-safe:bg-[length:200%_100%] data-[animated]:motion-safe:animate-(--animate-shimmer) motion-reduce:animate-none"
   />
 </template>
diff --git a/packages/webkit/src/components/feedback/status-indicator/status-indicator.vue b/packages/webkit/src/components/feedback/status-indicator/status-indicator.vue
index 39d92d116..34c81cc1f 100644
--- a/packages/webkit/src/components/feedback/status-indicator/status-indicator.vue
+++ b/packages/webkit/src/components/feedback/status-indicator/status-indicator.vue
@@ -41,11 +41,11 @@
     :data-testid="testId"
     :data-severity="severity"
     :data-loading="loading || null"
-    class="group inline-flex items-center gap-[var(--spacing-3)] rounded-[var(--shape-elements)] text-body-sm text-[var(--text-default)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]"
+    class="group inline-flex items-center gap-(--spacing-3) rounded-(--shape-elements) text-body-sm text-(--text-default) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)"
   >
     <Spinner
       v-if="loading"
-      class="size-3 shrink-0 text-[var(--text-default)]"
+      class="size-3 shrink-0 text-(--text-default)"
       :data-testid="`${testId}__spinner`"
     />
     <span
@@ -53,10 +53,10 @@
       aria-hidden="true"
       :data-testid="`${testId}__dot`"
       :data-severity="severity"
-      class="size-2 shrink-0 rounded-full data-[severity=success]:bg-[var(--success-contrast)] data-[severity=info]:bg-[var(--info-contrast)] data-[severity=neutral]:bg-[var(--text-muted)] data-[severity=warning]:bg-[var(--warning-contrast)] data-[severity=alt]:bg-[var(--primary)] data-[severity=danger]:bg-[var(--danger-contrast)]"
+      class="size-2 shrink-0 rounded-full data-[severity=success]:bg-(--success-contrast) data-[severity=info]:bg-(--info-contrast) data-[severity=neutral]:bg-(--text-muted) data-[severity=warning]:bg-(--warning-contrast) data-[severity=alt]:bg-(--primary) data-[severity=danger]:bg-(--danger-contrast)"
     />
     <span
-      class="whitespace-nowrap group-data-[loading]:text-[var(--text-muted)]"
+      class="whitespace-nowrap group-data-[loading]:text-(--text-muted)"
       :data-testid="`${testId}__label`"
     >
       {{ loading ? `${label}...` : label }}
diff --git a/packages/webkit/src/components/feedback/toast/toast-description/toast-description.vue b/packages/webkit/src/components/feedback/toast/toast-description/toast-description.vue
index 5591b1be3..543ad505a 100644
--- a/packages/webkit/src/components/feedback/toast/toast-description/toast-description.vue
+++ b/packages/webkit/src/components/feedback/toast/toast-description/toast-description.vue
@@ -20,7 +20,7 @@
   <p
     v-bind="$attrs"
     :data-testid="testId"
-    class="text-body-xs text-[var(--text-muted)]"
+    class="text-body-xs text-(--text-muted)"
   >
     <slot />
   </p>
diff --git a/packages/webkit/src/components/feedback/toast/toast-item/toast-item.vue b/packages/webkit/src/components/feedback/toast/toast-item/toast-item.vue
index 87c9117c9..e8a710e49 100644
--- a/packages/webkit/src/components/feedback/toast/toast-item/toast-item.vue
+++ b/packages/webkit/src/components/feedback/toast/toast-item/toast-item.vue
@@ -56,25 +56,25 @@
     :role="role"
     :data-testid="testId"
     :data-type="type"
-    class="group pointer-events-auto relative flex w-full items-center gap-[var(--spacing-sm)] rounded-[var(--shape-elements)] border-solid border-[length:var(--border-width-default,1px)] border-[var(--border-default)] bg-[var(--bg-surface-raised)] p-[var(--spacing-sm)] text-[var(--text-default)] shadow-[var(--shadow-sm)]"
+    class="group pointer-events-auto relative flex w-full items-center gap-(--spacing-sm) rounded-(--shape-elements) border-solid border-[length:var(--border-width-default,1px)] border-(--border-default) bg-(--bg-surface-raised) p-(--spacing-sm) text-(--text-default) shadow-(--shadow-sm)"
   >
     <Spinner
       v-if="type === 'loading'"
-      class="size-4 shrink-0 text-[var(--text-muted)]"
+      class="size-4 shrink-0 text-(--text-muted)"
     />
     <i
       v-else-if="icon"
       :class="icon"
       :data-type="type"
-      class="shrink-0 self-start text-label-md leading-none text-[var(--text-muted)] data-[type=success]:text-[var(--success-contrast)] data-[type=info]:text-[var(--info-contrast)] data-[type=warning]:text-[var(--warning-contrast)] data-[type=error]:text-[var(--danger-contrast)]"
+      class="shrink-0 self-start text-label-md leading-none text-(--text-muted) data-[type=success]:text-(--success-contrast) data-[type=info]:text-(--info-contrast) data-[type=warning]:text-(--warning-contrast) data-[type=error]:text-(--danger-contrast)"
       aria-hidden="true"
     />
-    <div class="flex min-w-0 flex-1 flex-col gap-[var(--spacing-xxs)]">
+    <div class="flex min-w-0 flex-1 flex-col gap-(--spacing-xxs)">
       <slot />
     </div>
     <div
       v-if="$slots['trailing']"
-      class="flex shrink-0 items-center gap-[var(--spacing-xxs)]"
+      class="flex shrink-0 items-center gap-(--spacing-xxs)"
     >
       <slot name="trailing" />
     </div>
diff --git a/packages/webkit/src/components/feedback/toast/toast-title/toast-title.vue b/packages/webkit/src/components/feedback/toast/toast-title/toast-title.vue
index f914f3731..d8132055b 100644
--- a/packages/webkit/src/components/feedback/toast/toast-title/toast-title.vue
+++ b/packages/webkit/src/components/feedback/toast/toast-title/toast-title.vue
@@ -20,7 +20,7 @@
   <p
     v-bind="$attrs"
     :data-testid="testId"
-    class="text-label-md leading-none text-[var(--text-default)]"
+    class="text-label-md leading-none text-(--text-default)"
   >
     <slot />
   </p>
diff --git a/packages/webkit/src/components/inputs/box-grid-selection/box-grid-selection.vue b/packages/webkit/src/components/inputs/box-grid-selection/box-grid-selection.vue
index 4a74f0d34..73bf26093 100644
--- a/packages/webkit/src/components/inputs/box-grid-selection/box-grid-selection.vue
+++ b/packages/webkit/src/components/inputs/box-grid-selection/box-grid-selection.vue
@@ -54,7 +54,7 @@
 
   const rootClasses = computed(() =>
     cn(
-      'flex flex-wrap items-stretch gap-[var(--spacing-xs)]',
+      'flex flex-wrap items-stretch gap-(--spacing-xs)',
       'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
       attrs.class
     )
@@ -62,15 +62,15 @@
 
   const optionClasses = cn(
     selectableBlockCardClasses,
-    'flex shrink-0 cursor-pointer flex-col gap-[var(--spacing-xxs)]',
-    'px-[var(--spacing-sm)] py-[var(--spacing-sm)]',
+    'flex shrink-0 cursor-pointer flex-col gap-(--spacing-xxs)',
+    'px-(--spacing-sm) py-(--spacing-sm)',
     'transition-colors duration-fast-02 ease-productive-entrance motion-reduce:transition-none',
-    'data-[selected]:border-[var(--border-selected)] data-[selected]:bg-[var(--primary-selected)]',
+    'data-[selected]:border-(--border-selected) data-[selected]:bg-(--primary-selected)',
     'data-[selected]:before:hidden data-[selected]:after:hidden',
     'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50'
   )
 
-  const labelRowClasses = 'flex items-center gap-[var(--spacing-xxs)]'
+  const labelRowClasses = 'flex items-center gap-(--spacing-xxs)'
 
   function isSelected(item: BoxGridSelectionItem): boolean {
     return props.modelValue === item.value
@@ -163,19 +163,19 @@
         :selected="isSelected(item)"
       >
         <div
-          class="flex flex-col gap-[var(--spacing-xxs)]"
+          class="flex flex-col gap-(--spacing-xxs)"
           :data-testid="`${testId}__content`"
         >
           <div :class="labelRowClasses">
             <i
               v-if="item.icon"
               :class="item.icon"
-              class="text-[length:inherit] leading-none text-[var(--text-default)]"
+              class="text-[length:inherit] leading-none text-(--text-default)"
               aria-hidden="true"
               :data-testid="`${testId}__icon`"
             />
             <span
-              class="text-body-sm text-[var(--text-default)]"
+              class="text-body-sm text-(--text-default)"
               :data-testid="`${testId}__label`"
             >
               {{ item.label }}
@@ -183,7 +183,7 @@
           </div>
           <p
             v-if="item.description"
-            class="text-body-xs text-[var(--text-muted)]"
+            class="text-body-xs text-(--text-muted)"
             :data-testid="`${testId}__description`"
           >
             {{ item.description }}
diff --git a/packages/webkit/src/components/inputs/calendar/calendar-clear/calendar-clear.vue b/packages/webkit/src/components/inputs/calendar/calendar-clear/calendar-clear.vue
index d4d6c9e69..881ed2b92 100644
--- a/packages/webkit/src/components/inputs/calendar/calendar-clear/calendar-clear.vue
+++ b/packages/webkit/src/components/inputs/calendar/calendar-clear/calendar-clear.vue
@@ -42,7 +42,7 @@
     :disabled="disabled"
     :data-testid="testId"
     :data-disabled="disabled || null"
-    class="text-body-sm inline-flex items-center justify-center whitespace-nowrap rounded-[var(--shape-elements)] px-[var(--spacing-xs)] py-[var(--spacing-xxs)] text-[var(--text-default)] transition-colors duration-150 ease-out hover:bg-[var(--bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface-raised)] data-[disabled]:cursor-not-allowed data-[disabled]:text-[var(--text-disabled)] motion-reduce:transition-none"
+    class="text-body-sm inline-flex items-center justify-center whitespace-nowrap rounded-(--shape-elements) px-(--spacing-xs) py-(--spacing-xxs) text-(--text-default) transition-colors duration-150 ease-out hover:bg-(--bg-hover) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-surface-raised) data-[disabled]:cursor-not-allowed data-[disabled]:text-(--text-disabled) motion-reduce:transition-none"
     @click="onClick"
   >
     <slot />
diff --git a/packages/webkit/src/components/inputs/calendar/calendar-fields/calendar-fields.vue b/packages/webkit/src/components/inputs/calendar/calendar-fields/calendar-fields.vue
index a6342121c..5dc8a3dec 100644
--- a/packages/webkit/src/components/inputs/calendar/calendar-fields/calendar-fields.vue
+++ b/packages/webkit/src/components/inputs/calendar/calendar-fields/calendar-fields.vue
@@ -97,14 +97,14 @@
 
 <template>
   <div
-    class="flex flex-col gap-[var(--spacing-sm)]"
+    class="flex flex-col gap-(--spacing-sm)"
     data-testid="input-calendar__fields"
   >
-    <div class="flex flex-col gap-[var(--spacing-xxs)]">
-      <span class="text-label-sm text-[var(--text-muted)]">
+    <div class="flex flex-col gap-(--spacing-xxs)">
+      <span class="text-label-sm text-(--text-muted)">
         {{ mode === 'range' ? 'Start' : 'Date' }}
       </span>
-      <div class="flex items-center gap-[var(--spacing-xs)]">
+      <div class="flex items-center gap-(--spacing-xs)">
         <div class="min-w-0 flex-1">
           <InputText
             :model-value="startDateText"
@@ -133,10 +133,10 @@
 
     <div
       v-if="mode === 'range'"
-      class="flex flex-col gap-[var(--spacing-xxs)]"
+      class="flex flex-col gap-(--spacing-xxs)"
     >
-      <span class="text-label-sm text-[var(--text-muted)]"> End </span>
-      <div class="flex items-center gap-[var(--spacing-xs)]">
+      <span class="text-label-sm text-(--text-muted)"> End </span>
+      <div class="flex items-center gap-(--spacing-xs)">
         <div class="min-w-0 flex-1">
           <InputText
             :model-value="endDateText"
diff --git a/packages/webkit/src/components/inputs/calendar/calendar-grid/calendar-grid.vue b/packages/webkit/src/components/inputs/calendar/calendar-grid/calendar-grid.vue
index 53135b360..8994fa14f 100644
--- a/packages/webkit/src/components/inputs/calendar/calendar-grid/calendar-grid.vue
+++ b/packages/webkit/src/components/inputs/calendar/calendar-grid/calendar-grid.vue
@@ -338,19 +338,19 @@
       <div
         :key="monthsKey"
         :style="monthsTransitionStyle"
-        class="flex flex-col items-start gap-[var(--spacing-md)]"
+        class="flex flex-col items-start gap-(--spacing-md)"
       >
-        <div class="flex w-full items-center justify-between gap-[var(--spacing-xs)]">
-          <span class="text-body-sm text-[var(--text-default)]">
+        <div class="flex w-full items-center justify-between gap-(--spacing-xs)">
+          <span class="text-body-sm text-(--text-default)">
             {{ monthGrid.label }}
           </span>
 
-          <div class="flex shrink-0 items-center gap-[var(--spacing-xxs)]">
+          <div class="flex shrink-0 items-center gap-(--spacing-xxs)">
             <button
               type="button"
               :disabled="disabledAll"
               aria-label="Previous month"
-              class="inline-flex size-7 shrink-0 items-center justify-center rounded-[var(--shape-elements)] text-[var(--text-muted)] transition-colors duration-150 ease-out hover:bg-[var(--bg-hover)] hover:text-[var(--text-default)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface-raised)] disabled:cursor-not-allowed disabled:text-[var(--text-disabled)] motion-reduce:transition-none"
+              class="inline-flex size-7 shrink-0 items-center justify-center rounded-(--shape-elements) text-(--text-muted) transition-colors duration-150 ease-out hover:bg-(--bg-hover) hover:text-(--text-default) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-surface-raised) disabled:cursor-not-allowed disabled:text-(--text-disabled) motion-reduce:transition-none"
               @click="goToPreviousMonth"
             >
               <i
@@ -363,7 +363,7 @@
               type="button"
               :disabled="disabledAll"
               aria-label="Next month"
-              class="inline-flex size-7 shrink-0 items-center justify-center rounded-[var(--shape-elements)] text-[var(--text-muted)] transition-colors duration-150 ease-out hover:bg-[var(--bg-hover)] hover:text-[var(--text-default)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface-raised)] disabled:cursor-not-allowed disabled:text-[var(--text-disabled)] motion-reduce:transition-none"
+              class="inline-flex size-7 shrink-0 items-center justify-center rounded-(--shape-elements) text-(--text-muted) transition-colors duration-150 ease-out hover:bg-(--bg-hover) hover:text-(--text-default) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-surface-raised) disabled:cursor-not-allowed disabled:text-(--text-disabled) motion-reduce:transition-none"
               @click="goToNextMonth"
             >
               <i
@@ -387,13 +387,13 @@
               :key="`weekday-${index}`"
               role="columnheader"
               :data-size="size"
-              class="text-label-sm flex items-start justify-center text-[var(--text-muted)] data-[size=small]:w-8 data-[size=medium]:w-9 data-[size=large]:w-10"
+              class="text-label-sm flex items-start justify-center text-(--text-muted) data-[size=small]:w-8 data-[size=medium]:w-9 data-[size=large]:w-10"
             >
               {{ weekday }}
             </span>
           </div>
 
-          <div class="flex flex-col items-start gap-[var(--spacing-xxs)]">
+          <div class="flex flex-col items-start gap-(--spacing-xxs)">
             <div
               v-for="(week, weekIndex) in monthGrid.weeks"
               :key="`week-${weekIndex}`"
@@ -419,7 +419,7 @@
                   :data-disabled="day.disabled || null"
                   data-testid="input-calendar__day"
                   :tabindex="!day.outside && day.time === activeTime ? 0 : -1"
-                  class="flex items-center justify-center text-[var(--text-default)] transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface-raised)] data-[size=small]:size-8 data-[size=small]:text-body-xs data-[size=medium]:size-9 data-[size=medium]:text-body-sm data-[size=large]:size-10 data-[size=large]:text-body-md data-[band=none]:rounded-[var(--shape-elements)] data-[band=none]:hover:bg-[var(--bg-hover)] data-[band=single]:rounded-[var(--shape-elements)] data-[band=single]:bg-[var(--secondary-selected)] data-[band=single]:text-[var(--secondary-contrast)] data-[band=start]:rounded-l-[var(--shape-elements)] data-[band=start]:bg-[var(--secondary-selected)] data-[band=start]:text-[var(--secondary-contrast)] data-[band=end]:rounded-r-[var(--shape-elements)] data-[band=end]:bg-[var(--secondary-selected)] data-[band=end]:text-[var(--secondary-contrast)] data-[band=middle]:bg-[var(--bg-selected)] data-[outside]:text-[var(--text-disabled)] data-[disabled]:cursor-not-allowed data-[disabled]:text-[var(--text-disabled)] motion-reduce:transition-none"
+                  class="flex items-center justify-center text-(--text-default) transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-surface-raised) data-[size=small]:size-8 data-[size=small]:text-body-xs data-[size=medium]:size-9 data-[size=medium]:text-body-sm data-[size=large]:size-10 data-[size=large]:text-body-md data-[band=none]:rounded-(--shape-elements) data-[band=none]:hover:bg-(--bg-hover) data-[band=single]:rounded-(--shape-elements) data-[band=single]:bg-(--secondary-selected) data-[band=single]:text-(--secondary-contrast) data-[band=start]:rounded-l-(--shape-elements) data-[band=start]:bg-(--secondary-selected) data-[band=start]:text-(--secondary-contrast) data-[band=end]:rounded-r-(--shape-elements) data-[band=end]:bg-(--secondary-selected) data-[band=end]:text-(--secondary-contrast) data-[band=middle]:bg-(--bg-selected) data-[outside]:text-(--text-disabled) data-[disabled]:cursor-not-allowed data-[disabled]:text-(--text-disabled) motion-reduce:transition-none"
                   @click="selectDay(day)"
                   @keydown="onDayKeydown($event, day)"
                 >
diff --git a/packages/webkit/src/components/inputs/calendar/calendar-period/calendar-period.vue b/packages/webkit/src/components/inputs/calendar/calendar-period/calendar-period.vue
index fb7bbe8cb..c76a8a084 100644
--- a/packages/webkit/src/components/inputs/calendar/calendar-period/calendar-period.vue
+++ b/packages/webkit/src/components/inputs/calendar/calendar-period/calendar-period.vue
@@ -38,13 +38,13 @@
 
 <template>
   <div
-    class="flex gap-[var(--spacing-md)]"
+    class="flex gap-(--spacing-md)"
     :class="horizontal ? 'flex-row items-start' : 'flex-col items-stretch'"
     data-testid="input-calendar__period"
   >
     <div
-      class="flex min-w-[var(--container-4xs)] flex-col gap-[var(--spacing-xxs)]"
-      :class="horizontal ? '' : 'border-b border-[var(--border-default)] pb-[var(--spacing-sm)]'"
+      class="flex min-w-(--container-4xs) flex-col gap-(--spacing-xxs)"
+      :class="horizontal ? '' : 'border-b border-(--border-default) pb-(--spacing-sm)'"
     >
       <button
         v-for="preset in PRESETS"
@@ -52,28 +52,28 @@
         type="button"
         :disabled="disabled"
         :data-active="activeExpr === preset.expr || null"
-        class="text-body-sm inline-flex w-full items-center justify-between gap-[var(--spacing-xs)] rounded-[var(--shape-elements)] px-[var(--spacing-xs)] py-[var(--spacing-xxs)] text-left text-[var(--text-default)] transition-colors duration-150 ease-out hover:bg-[var(--bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface-raised)] data-[active]:bg-[var(--bg-selected)] disabled:cursor-not-allowed disabled:text-[var(--text-disabled)] motion-reduce:transition-none"
+        class="text-body-sm inline-flex w-full items-center justify-between gap-(--spacing-xs) rounded-(--shape-elements) px-(--spacing-xs) py-(--spacing-xxs) text-left text-(--text-default) transition-colors duration-150 ease-out hover:bg-(--bg-hover) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-surface-raised) data-[active]:bg-(--bg-selected) disabled:cursor-not-allowed disabled:text-(--text-disabled) motion-reduce:transition-none"
         @click="apply(preset.expr, preset.label)"
       >
         <span>{{ preset.label }}</span>
         <i
           v-if="activeExpr === preset.expr"
-          class="pi pi-check shrink-0 text-[length:inherit] leading-none text-[var(--text-muted)]"
+          class="pi pi-check shrink-0 text-[length:inherit] leading-none text-(--text-muted)"
           aria-hidden="true"
         />
       </button>
     </div>
 
-    <div class="flex flex-col gap-[var(--spacing-sm)]">
-      <div class="flex flex-col gap-[var(--spacing-xxs)]">
-        <span class="text-label-sm text-[var(--text-muted)]"> Type relative times </span>
-        <div class="flex max-w-[var(--container-2xs)] flex-wrap gap-[var(--spacing-xxs)]">
+    <div class="flex flex-col gap-(--spacing-sm)">
+      <div class="flex flex-col gap-(--spacing-xxs)">
+        <span class="text-label-sm text-(--text-muted)"> Type relative times </span>
+        <div class="flex max-w-(--container-2xs) flex-wrap gap-(--spacing-xxs)">
           <button
             v-for="hint in RELATIVE_HINTS"
             :key="hint"
             type="button"
             :disabled="disabled"
-            class="text-label-sm inline-flex items-center rounded-[var(--shape-elements)] border border-[var(--border-default)] px-[var(--spacing-xs)] py-[var(--spacing-xxs)] text-[var(--text-default)] transition-colors duration-150 ease-out hover:bg-[var(--bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface-raised)] disabled:cursor-not-allowed disabled:text-[var(--text-disabled)] motion-reduce:transition-none"
+            class="text-label-sm inline-flex items-center rounded-(--shape-elements) border border-(--border-default) px-(--spacing-xs) py-(--spacing-xxs) text-(--text-default) transition-colors duration-150 ease-out hover:bg-(--bg-hover) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-surface-raised) disabled:cursor-not-allowed disabled:text-(--text-disabled) motion-reduce:transition-none"
             @click="apply(hint, hint)"
           >
             {{ hint }}
@@ -81,15 +81,15 @@
         </div>
       </div>
 
-      <div class="flex flex-col gap-[var(--spacing-xxs)]">
-        <span class="text-label-sm text-[var(--text-muted)]"> Type fixed times </span>
-        <div class="flex max-w-[var(--container-2xs)] flex-wrap gap-[var(--spacing-xxs)]">
+      <div class="flex flex-col gap-(--spacing-xxs)">
+        <span class="text-label-sm text-(--text-muted)"> Type fixed times </span>
+        <div class="flex max-w-(--container-2xs) flex-wrap gap-(--spacing-xxs)">
           <button
             v-for="hint in FIXED_HINTS"
             :key="hint"
             type="button"
             :disabled="disabled"
-            class="text-label-sm inline-flex items-center rounded-[var(--shape-elements)] border border-[var(--border-default)] px-[var(--spacing-xs)] py-[var(--spacing-xxs)] text-[var(--text-default)] transition-colors duration-150 ease-out hover:bg-[var(--bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface-raised)] disabled:cursor-not-allowed disabled:text-[var(--text-disabled)] motion-reduce:transition-none"
+            class="text-label-sm inline-flex items-center rounded-(--shape-elements) border border-(--border-default) px-(--spacing-xs) py-(--spacing-xxs) text-(--text-default) transition-colors duration-150 ease-out hover:bg-(--bg-hover) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-surface-raised) disabled:cursor-not-allowed disabled:text-(--text-disabled) motion-reduce:transition-none"
             @click="apply(hint, hint)"
           >
             {{ hint }}
diff --git a/packages/webkit/src/components/inputs/calendar/calendar-preset/calendar-preset.vue b/packages/webkit/src/components/inputs/calendar/calendar-preset/calendar-preset.vue
index ac339956a..02dcd379c 100644
--- a/packages/webkit/src/components/inputs/calendar/calendar-preset/calendar-preset.vue
+++ b/packages/webkit/src/components/inputs/calendar/calendar-preset/calendar-preset.vue
@@ -73,7 +73,7 @@
     :data-testid="testId"
     :data-selected="selected || null"
     :data-disabled="disabled || null"
-    class="text-body-sm inline-flex w-full items-center whitespace-nowrap rounded-[var(--shape-elements)] px-[var(--spacing-xs)] py-[var(--spacing-xxs)] text-left text-[var(--text-default)] transition-colors duration-150 ease-out hover:bg-[var(--bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface-raised)] data-[selected]:bg-[var(--secondary-selected)] data-[selected]:text-[var(--secondary-contrast)] data-[disabled]:cursor-not-allowed data-[disabled]:text-[var(--text-disabled)] motion-reduce:transition-none"
+    class="text-body-sm inline-flex w-full items-center whitespace-nowrap rounded-(--shape-elements) px-(--spacing-xs) py-(--spacing-xxs) text-left text-(--text-default) transition-colors duration-150 ease-out hover:bg-(--bg-hover) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-surface-raised) data-[selected]:bg-(--secondary-selected) data-[selected]:text-(--secondary-contrast) data-[disabled]:cursor-not-allowed data-[disabled]:text-(--text-disabled) motion-reduce:transition-none"
     @click="onClick"
   >
     <slot />
diff --git a/packages/webkit/src/components/inputs/calendar/calendar-timezone/calendar-timezone.vue b/packages/webkit/src/components/inputs/calendar/calendar-timezone/calendar-timezone.vue
index 5e5a688b7..08684c68b 100644
--- a/packages/webkit/src/components/inputs/calendar/calendar-timezone/calendar-timezone.vue
+++ b/packages/webkit/src/components/inputs/calendar/calendar-timezone/calendar-timezone.vue
@@ -29,16 +29,16 @@
 
 <template>
   <label
-    class="flex flex-col gap-[var(--spacing-xxs)]"
+    class="flex flex-col gap-(--spacing-xxs)"
     data-testid="input-calendar__timezone"
   >
-    <span class="text-label-sm text-[var(--text-muted)]"> Timezone </span>
+    <span class="text-label-sm text-(--text-muted)"> Timezone </span>
     <span class="relative inline-flex w-full items-center">
       <select
         :value="value"
         :disabled="disabled"
         :data-size="size"
-        class="text-body-sm w-full appearance-none rounded-[var(--shape-elements)] border border-[var(--border-default)] bg-[var(--bg-surface)] pl-[var(--spacing-sm)] pr-[var(--spacing-lg)] text-[var(--text-default)] transition-colors duration-150 ease-out hover:border-[var(--border-strong)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface-raised)] disabled:cursor-not-allowed disabled:bg-[var(--bg-disabled)] disabled:text-[var(--text-disabled)] data-[size=small]:h-7 data-[size=medium]:h-8 data-[size=large]:h-10 motion-reduce:transition-none"
+        class="text-body-sm w-full appearance-none rounded-(--shape-elements) border border-(--border-default) bg-(--bg-surface) pl-(--spacing-sm) pr-(--spacing-lg) text-(--text-default) transition-colors duration-150 ease-out hover:border-(--border-strong) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-surface-raised) disabled:cursor-not-allowed disabled:bg-(--bg-disabled) disabled:text-(--text-disabled) data-[size=small]:h-7 data-[size=medium]:h-8 data-[size=large]:h-10 motion-reduce:transition-none"
         @change="onChange"
       >
         <option
@@ -50,7 +50,7 @@
         </option>
       </select>
       <i
-        class="pi pi-chevron-down pointer-events-none absolute right-[var(--spacing-sm)] text-[length:inherit] leading-none text-[var(--text-muted)]"
+        class="pi pi-chevron-down pointer-events-none absolute right-(--spacing-sm) text-[length:inherit] leading-none text-(--text-muted)"
         aria-hidden="true"
       />
     </span>
diff --git a/packages/webkit/src/components/inputs/calendar/calendar.vue b/packages/webkit/src/components/inputs/calendar/calendar.vue
index 9ef66338e..1dedd1d4d 100644
--- a/packages/webkit/src/components/inputs/calendar/calendar.vue
+++ b/packages/webkit/src/components/inputs/calendar/calendar.vue
@@ -494,7 +494,7 @@
           :data-state="isOpen ? 'open' : 'closed'"
           :data-disabled="disabled || null"
           :data-two-part="isTwoPart || null"
-          class="inline-flex w-[var(--container-3xs)] max-w-full items-stretch overflow-hidden rounded-[var(--shape-elements)] border border-[var(--border-default)] bg-[var(--bg-surface)] data-[disabled]:opacity-60 data-[two-part]:w-[var(--container-xs)]"
+          class="inline-flex w-(--container-3xs) max-w-full items-stretch overflow-hidden rounded-(--shape-elements) border border-(--border-default) bg-(--bg-surface) data-[disabled]:opacity-60 data-[two-part]:w-(--container-xs)"
         >
           <template v-if="isTwoPart">
             <button
@@ -505,16 +505,16 @@
               :data-testid="`${testId}__presets-trigger`"
               aria-haspopup="menu"
               :aria-expanded="isPresetsOpen"
-              class="text-body-sm inline-flex min-w-0 items-center gap-[var(--spacing-xs)] px-[var(--spacing-sm)] text-[var(--text-default)] transition-colors duration-150 ease-out hover:bg-[var(--bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] disabled:cursor-not-allowed disabled:text-[var(--text-disabled)] data-[size=small]:h-7 data-[size=medium]:h-8 data-[size=large]:h-10 motion-reduce:transition-none"
+              class="text-body-sm inline-flex min-w-0 items-center gap-(--spacing-xs) px-(--spacing-sm) text-(--text-default) transition-colors duration-150 ease-out hover:bg-(--bg-hover) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) disabled:cursor-not-allowed disabled:text-(--text-disabled) data-[size=small]:h-7 data-[size=medium]:h-8 data-[size=large]:h-10 motion-reduce:transition-none"
               @click="togglePresets"
             >
               <i
-                class="pi pi-clock shrink-0 text-[length:inherit] leading-none text-[var(--text-muted)]"
+                class="pi pi-clock shrink-0 text-[length:inherit] leading-none text-(--text-muted)"
                 aria-hidden="true"
               />
               <span class="min-w-0 truncate text-left">{{ presetLabel }}</span>
               <i
-                class="pi pi-chevron-down shrink-0 text-[length:inherit] leading-none text-[var(--text-muted)]"
+                class="pi pi-chevron-down shrink-0 text-[length:inherit] leading-none text-(--text-muted)"
                 aria-hidden="true"
               />
             </button>
@@ -527,11 +527,11 @@
               :data-testid="`${testId}__trigger`"
               aria-haspopup="dialog"
               :aria-expanded="isOpen"
-              class="text-body-sm inline-flex min-w-0 flex-1 items-center gap-[var(--spacing-xs)] border-l border-[var(--border-default)] px-[var(--spacing-sm)] text-[var(--text-default)] transition-colors duration-150 ease-out hover:bg-[var(--bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] disabled:cursor-not-allowed disabled:text-[var(--text-disabled)] data-[size=small]:h-7 data-[size=medium]:h-8 data-[size=large]:h-10 data-[empty]:text-[var(--text-muted)] motion-reduce:transition-none"
+              class="text-body-sm inline-flex min-w-0 flex-1 items-center gap-(--spacing-xs) border-l border-(--border-default) px-(--spacing-sm) text-(--text-default) transition-colors duration-150 ease-out hover:bg-(--bg-hover) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) disabled:cursor-not-allowed disabled:text-(--text-disabled) data-[size=small]:h-7 data-[size=medium]:h-8 data-[size=large]:h-10 data-[empty]:text-(--text-muted) motion-reduce:transition-none"
               @click="toggleOpen"
             >
               <i
-                class="pi pi-calendar shrink-0 text-[length:inherit] leading-none text-[var(--text-muted)]"
+                class="pi pi-calendar shrink-0 text-[length:inherit] leading-none text-(--text-muted)"
                 aria-hidden="true"
               />
               <span class="min-w-0 flex-1 truncate text-left">{{ rangeText }}</span>
@@ -547,27 +547,27 @@
               :data-testid="`${testId}__trigger`"
               aria-haspopup="dialog"
               :aria-expanded="isOpen"
-              class="text-body-sm inline-flex min-w-0 flex-1 items-stretch text-[var(--text-default)] transition-colors duration-150 ease-out hover:bg-[var(--bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] disabled:cursor-not-allowed disabled:text-[var(--text-disabled)] data-[size=small]:h-7 data-[size=medium]:h-8 data-[size=large]:h-10 motion-reduce:transition-none"
+              class="text-body-sm inline-flex min-w-0 flex-1 items-stretch text-(--text-default) transition-colors duration-150 ease-out hover:bg-(--bg-hover) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) disabled:cursor-not-allowed disabled:text-(--text-disabled) data-[size=small]:h-7 data-[size=medium]:h-8 data-[size=large]:h-10 motion-reduce:transition-none"
               @click="toggleOpen"
             >
               <span
-                class="flex min-w-0 items-center gap-[var(--spacing-xs)] px-[var(--spacing-sm)]"
+                class="flex min-w-0 items-center gap-(--spacing-xs) px-(--spacing-sm)"
               >
                 <i
-                  class="pi pi-clock shrink-0 text-[length:inherit] leading-none text-[var(--text-muted)]"
+                  class="pi pi-clock shrink-0 text-[length:inherit] leading-none text-(--text-muted)"
                   aria-hidden="true"
                 />
                 <span class="min-w-0 truncate text-left">{{ committedPeriodLabel }}</span>
                 <i
-                  class="pi pi-chevron-down shrink-0 text-[length:inherit] leading-none text-[var(--text-muted)]"
+                  class="pi pi-chevron-down shrink-0 text-[length:inherit] leading-none text-(--text-muted)"
                   aria-hidden="true"
                 />
               </span>
               <span
-                class="flex min-w-0 flex-1 items-center gap-[var(--spacing-xs)] border-l border-[var(--border-default)] px-[var(--spacing-sm)]"
+                class="flex min-w-0 flex-1 items-center gap-(--spacing-xs) border-l border-(--border-default) px-(--spacing-sm)"
               >
                 <i
-                  class="pi pi-calendar shrink-0 text-[length:inherit] leading-none text-[var(--text-muted)]"
+                  class="pi pi-calendar shrink-0 text-[length:inherit] leading-none text-(--text-muted)"
                   aria-hidden="true"
                 />
                 <span class="min-w-0 flex-1 truncate text-left">{{ windowLabel }}</span>
@@ -583,18 +583,18 @@
               :data-testid="`${testId}__trigger`"
               aria-haspopup="dialog"
               :aria-expanded="isOpen"
-              class="text-body-sm inline-flex min-w-0 flex-1 items-center gap-[var(--spacing-xs)] px-[var(--spacing-sm)] text-[var(--text-default)] transition-colors duration-150 ease-out hover:bg-[var(--bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] disabled:cursor-not-allowed disabled:text-[var(--text-disabled)] data-[size=small]:h-7 data-[size=medium]:h-8 data-[size=large]:h-10 data-[empty]:text-[var(--text-muted)] motion-reduce:transition-none"
+              class="text-body-sm inline-flex min-w-0 flex-1 items-center gap-(--spacing-xs) px-(--spacing-sm) text-(--text-default) transition-colors duration-150 ease-out hover:bg-(--bg-hover) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) disabled:cursor-not-allowed disabled:text-(--text-disabled) data-[size=small]:h-7 data-[size=medium]:h-8 data-[size=large]:h-10 data-[empty]:text-(--text-muted) motion-reduce:transition-none"
               @click="toggleOpen"
             >
               <i
                 :class="triggerIcon"
-                class="shrink-0 text-[length:inherit] leading-none text-[var(--text-muted)]"
+                class="shrink-0 text-[length:inherit] leading-none text-(--text-muted)"
                 aria-hidden="true"
               />
               <span class="min-w-0 flex-1 truncate text-left">{{ triggerText }}</span>
               <i
                 v-if="!split && !(clearable && hasCommitted)"
-                class="pi pi-chevron-down shrink-0 text-[length:inherit] leading-none text-[var(--text-muted)]"
+                class="pi pi-chevron-down shrink-0 text-[length:inherit] leading-none text-(--text-muted)"
                 aria-hidden="true"
               />
             </button>
@@ -605,7 +605,7 @@
               :disabled="disabled"
               aria-label="Clear selection"
               :data-testid="`${testId}__clear-trigger`"
-              class="inline-flex shrink-0 items-center justify-center px-[var(--spacing-xs)] text-[var(--text-muted)] transition-colors duration-150 ease-out hover:bg-[var(--bg-hover)] hover:text-[var(--text-default)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] motion-reduce:transition-none"
+              class="inline-flex shrink-0 items-center justify-center px-(--spacing-xs) text-(--text-muted) transition-colors duration-150 ease-out hover:bg-(--bg-hover) hover:text-(--text-default) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) motion-reduce:transition-none"
               @click="clearCommitted"
             >
               <i
@@ -621,7 +621,7 @@
               aria-label="Open calendar"
               :aria-expanded="isOpen"
               :data-testid="`${testId}__split`"
-              class="inline-flex shrink-0 items-center justify-center border-l border-[var(--border-default)] px-[var(--spacing-xs)] text-[var(--text-muted)] transition-colors duration-150 ease-out hover:bg-[var(--bg-hover)] hover:text-[var(--text-default)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] motion-reduce:transition-none"
+              class="inline-flex shrink-0 items-center justify-center border-l border-(--border-default) px-(--spacing-xs) text-(--text-muted) transition-colors duration-150 ease-out hover:bg-(--bg-hover) hover:text-(--text-default) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) motion-reduce:transition-none"
               @click="toggleOpen"
             >
               <i
@@ -648,7 +648,7 @@
           :data-state="isOpen ? 'open' : 'closed'"
           :data-placement="resolvedPlacement"
           :style="panelStyle"
-          class="flex flex-col overflow-hidden rounded-[var(--shape-card)] border border-[var(--border-default)] bg-[var(--bg-surface-raised)] shadow-[var(--shadow-sm)] outline-none [transform-origin:var(--popup-origin,top_left)]"
+          class="flex flex-col overflow-hidden rounded-(--shape-card) border border-(--border-default) bg-(--bg-surface-raised) shadow-(--shadow-sm) outline-none [transform-origin:var(--popup-origin,top_left)]"
           @keydown="onPanelKeydown"
         >
           <div
@@ -656,25 +656,25 @@
             :data-horizontal="horizontal || null"
             :class="horizontal ? 'flex-row' : 'flex-col'"
           >
-            <div class="p-[var(--spacing-sm)]">
+            <div class="p-(--spacing-sm)">
               <CalendarPeriod v-if="period" />
               <CalendarGrid v-else />
             </div>
 
             <div
               v-if="!period"
-              class="flex flex-col gap-[var(--spacing-sm)] p-[var(--spacing-sm)]"
+              class="flex flex-col gap-(--spacing-sm) p-(--spacing-sm)"
               :class="
                 horizontal
-                  ? 'min-w-[var(--container-3xs)] border-l border-[var(--border-default)]'
-                  : 'border-t border-[var(--border-default)]'
+                  ? 'min-w-(--container-3xs) border-l border-(--border-default)'
+                  : 'border-t border-(--border-default)'
               "
             >
               <CalendarFields />
 
               <span
                 v-if="$slots['footer']"
-                class="inline-flex items-center gap-[var(--spacing-xs)]"
+                class="inline-flex items-center gap-(--spacing-xs)"
               >
                 <slot name="footer" />
               </span>
@@ -712,7 +712,7 @@
           :data-state="isPresetsOpen ? 'open' : 'closed'"
           :data-placement="presetsPlacement"
           :style="presetsPanelStyle"
-          class="flex min-w-[var(--container-4xs)] flex-col gap-[var(--spacing-xxs)] rounded-[var(--shape-card)] border border-[var(--border-default)] bg-[var(--bg-surface-raised)] p-[var(--spacing-sm)] shadow-[var(--shadow-sm)] outline-none [transform-origin:var(--popup-origin,top_left)]"
+          class="flex min-w-(--container-4xs) flex-col gap-(--spacing-xxs) rounded-(--shape-card) border border-(--border-default) bg-(--bg-surface-raised) p-(--spacing-sm) shadow-(--shadow-sm) outline-none [transform-origin:var(--popup-origin,top_left)]"
           @keydown="onPresetsKeydown"
         >
           <slot name="presets">
@@ -724,13 +724,13 @@
               :disabled="disabled"
               :data-selected="preset.label === committedPeriodLabel || null"
               :data-testid="`${testId}__preset`"
-              class="text-body-sm inline-flex w-full items-center justify-between gap-[var(--spacing-xs)] rounded-[var(--shape-elements)] px-[var(--spacing-xs)] py-[var(--spacing-xxs)] text-left text-[var(--text-default)] transition-colors duration-150 ease-out hover:bg-[var(--bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface-raised)] data-[selected]:bg-[var(--bg-selected)] disabled:cursor-not-allowed disabled:text-[var(--text-disabled)] motion-reduce:transition-none"
+              class="text-body-sm inline-flex w-full items-center justify-between gap-(--spacing-xs) rounded-(--shape-elements) px-(--spacing-xs) py-(--spacing-xxs) text-left text-(--text-default) transition-colors duration-150 ease-out hover:bg-(--bg-hover) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-surface-raised) data-[selected]:bg-(--bg-selected) disabled:cursor-not-allowed disabled:text-(--text-disabled) motion-reduce:transition-none"
               @click="applyPreset(preset.value, preset.label)"
             >
               <span class="min-w-0 truncate">{{ preset.label }}</span>
               <i
                 v-if="preset.label === committedPeriodLabel"
-                class="pi pi-check shrink-0 text-[length:inherit] leading-none text-[var(--text-muted)]"
+                class="pi pi-check shrink-0 text-[length:inherit] leading-none text-(--text-muted)"
                 aria-hidden="true"
               />
             </button>
diff --git a/packages/webkit/src/components/inputs/checkbox/checkbox.vue b/packages/webkit/src/components/inputs/checkbox/checkbox.vue
index d74ca1f55..7db245d77 100644
--- a/packages/webkit/src/components/inputs/checkbox/checkbox.vue
+++ b/packages/webkit/src/components/inputs/checkbox/checkbox.vue
@@ -122,7 +122,7 @@
     :data-indeterminate="indeterminate || null"
     :data-disabled="disabled || null"
     :data-readonly="readonly || null"
-    class="group relative inline-flex size-[1.125rem] shrink-0 items-center justify-center align-middle rounded-[var(--shape-button)] border border-[var(--border-default)] bg-[var(--bg-surface)] text-transparent before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-[var(--bg-hover)] before:opacity-0 before:content-[''] before:transition-opacity before:duration-fast-02 before:ease-productive-entrance after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-[var(--bg-active)] after:opacity-0 after:content-[''] after:transition-opacity after:duration-fast-02 after:ease-productive-entrance hover:before:opacity-100 active:after:opacity-100 motion-reduce:before:transition-none motion-reduce:after:transition-none has-[:focus-visible]:outline-none has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--ring-color)] has-[:focus-visible]:ring-offset-1 has-[:focus-visible]:ring-offset-[var(--bg-canvas)] focus-within:before:opacity-0 has-[:focus-visible]:before:opacity-0 data-[checked]:border-[var(--primary)] data-[checked]:bg-[var(--primary)] data-[checked]:text-[var(--primary-contrast)] data-[checked]:before:hidden data-[checked]:after:hidden data-[indeterminate]:border-[var(--primary)] data-[indeterminate]:bg-[var(--primary)] data-[indeterminate]:text-[var(--primary-contrast)] data-[indeterminate]:before:hidden data-[indeterminate]:after:hidden data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--border-default)] data-[disabled]:bg-[var(--bg-disabled)] data-[disabled]:opacity-50 data-[disabled]:before:hidden data-[disabled]:after:hidden data-[readonly]:pointer-events-none data-[readonly]:cursor-not-allowed data-[readonly]:before:hidden data-[readonly]:after:hidden"
+    class="group relative inline-flex size-[1.125rem] shrink-0 items-center justify-center align-middle rounded-(--shape-button) border border-(--border-default) bg-(--bg-surface) text-transparent before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-(--bg-hover) before:opacity-0 before:content-[''] before:transition-opacity before:duration-fast-02 before:ease-productive-entrance after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-(--bg-active) after:opacity-0 after:content-[''] after:transition-opacity after:duration-fast-02 after:ease-productive-entrance hover:before:opacity-100 active:after:opacity-100 motion-reduce:before:transition-none motion-reduce:after:transition-none has-[:focus-visible]:outline-none has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-(--ring-color) has-[:focus-visible]:ring-offset-1 has-[:focus-visible]:ring-offset-(--bg-canvas) focus-within:before:opacity-0 has-[:focus-visible]:before:opacity-0 data-[checked]:border-(--primary) data-[checked]:bg-(--primary) data-[checked]:text-(--primary-contrast) data-[checked]:before:hidden data-[checked]:after:hidden data-[indeterminate]:border-(--primary) data-[indeterminate]:bg-(--primary) data-[indeterminate]:text-(--primary-contrast) data-[indeterminate]:before:hidden data-[indeterminate]:after:hidden data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:border-(--border-default) data-[disabled]:bg-(--bg-disabled) data-[disabled]:opacity-50 data-[disabled]:before:hidden data-[disabled]:after:hidden data-[readonly]:pointer-events-none data-[readonly]:cursor-not-allowed data-[readonly]:before:hidden data-[readonly]:after:hidden"
   >
     <input
       :id="inputId || ''"
@@ -141,7 +141,7 @@
     />
     <svg
       v-if="indeterminate"
-      class="size-2.5 shrink-0 stroke-[1.5] group-data-[disabled]:stroke-[var(--text-disabled)]"
+      class="size-2.5 shrink-0 stroke-[1.5] group-data-[disabled]:stroke-(--text-disabled)"
       viewBox="0 0 12 12"
       fill="none"
       aria-hidden="true"
@@ -156,7 +156,7 @@
     </svg>
     <svg
       v-else-if="isChecked"
-      class="size-2.5 shrink-0 stroke-[1.5] group-data-[disabled]:stroke-[var(--text-disabled)]"
+      class="size-2.5 shrink-0 stroke-[1.5] group-data-[disabled]:stroke-(--text-disabled)"
       viewBox="0 0 12 12"
       fill="none"
       aria-hidden="true"
diff --git a/packages/webkit/src/components/inputs/chip/chip.vue b/packages/webkit/src/components/inputs/chip/chip.vue
index dfaef57b8..7bf1795b4 100644
--- a/packages/webkit/src/components/inputs/chip/chip.vue
+++ b/packages/webkit/src/components/inputs/chip/chip.vue
@@ -105,12 +105,12 @@
       :tabindex="clickable ? 0 : undefined"
       :style="removeTransitionStyle"
       :class="attrs.class"
-      class="relative inline-flex items-center justify-center overflow-hidden border border-[var(--border-default)] border-[length:var(--border-width-default)] bg-[var(--bg-surface-raised)] text-[var(--text-default)] shadow-[var(--shadow-sm)] leading-none rounded-[var(--shape-elements)] before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-[var(--bg-hover)] before:opacity-0 before:content-[''] before:transition-opacity before:duration-fast-02 before:ease-productive-entrance motion-reduce:before:transition-none data-[size=medium]:text-label-md data-[size=small]:text-label-sm data-[size=medium]:leading-none data-[size=small]:leading-none data-[size=small]:h-5 data-[size=medium]:py-[var(--spacing-xs)] data-[size=medium]:px-[var(--spacing-sm)] data-[size=small]:p-[var(--spacing-xs)] data-[size=medium]:data-[removable]:pr-[var(--spacing-xs)] data-[size=small]:data-[removable]:pr-[var(--spacing-xxs)] data-[clickable]:cursor-pointer data-[clickable]:hover:before:opacity-100 data-[clickable]:active:before:opacity-100 data-[clickable]:active:border-[var(--border-strong)] data-[clickable]:focus-visible:outline-none data-[clickable]:focus-visible:ring-2 data-[clickable]:focus-visible:ring-[var(--ring-color)] data-[clickable]:focus-visible:ring-offset-2 data-[clickable]:focus-visible:ring-offset-[var(--bg-canvas)]"
+      class="relative inline-flex items-center justify-center overflow-hidden border border-(--border-default) border-(length:--border-width-default) bg-(--bg-surface-raised) text-(--text-default) shadow-(--shadow-sm) leading-none rounded-(--shape-elements) before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-(--bg-hover) before:opacity-0 before:content-[''] before:transition-opacity before:duration-fast-02 before:ease-productive-entrance motion-reduce:before:transition-none data-[size=medium]:text-label-md data-[size=small]:text-label-sm data-[size=medium]:leading-none data-[size=small]:leading-none data-[size=small]:h-5 data-[size=medium]:py-(--spacing-xs) data-[size=medium]:px-(--spacing-sm) data-[size=small]:p-(--spacing-xs) data-[size=medium]:data-[removable]:pr-(--spacing-xs) data-[size=small]:data-[removable]:pr-(--spacing-xxs) data-[clickable]:cursor-pointer data-[clickable]:hover:before:opacity-100 data-[clickable]:active:before:opacity-100 data-[clickable]:active:border-(--border-strong) data-[clickable]:focus-visible:outline-none data-[clickable]:focus-visible:ring-2 data-[clickable]:focus-visible:ring-(--ring-color) data-[clickable]:focus-visible:ring-offset-2 data-[clickable]:focus-visible:ring-offset-(--bg-canvas)"
       @click="onClick"
       @keydown="onKeydown"
     >
       <span
-        class="relative z-[var(--z-input-field)] inline-flex items-center justify-center gap-[var(--spacing-xxs)]"
+        class="relative z-(--z-input-field) inline-flex items-center justify-center gap-(--spacing-xxs)"
       >
         <slot v-if="$slots['default']" />
         <span
@@ -124,7 +124,7 @@
           type="button"
           aria-label="Remove"
           :data-testid="`${testId}__remove`"
-          class="inline-flex shrink-0 items-center justify-center rounded-[var(--shape-elements)] text-[var(--text-default)] transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-[var(--bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]"
+          class="inline-flex shrink-0 items-center justify-center rounded-(--shape-elements) text-(--text-default) transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-(--bg-hover) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)"
           @click.stop="onRemove"
         >
           <i
diff --git a/packages/webkit/src/components/inputs/field-checkbox-block/field-checkbox-block.vue b/packages/webkit/src/components/inputs/field-checkbox-block/field-checkbox-block.vue
index 63db828f3..3f7c5a11e 100644
--- a/packages/webkit/src/components/inputs/field-checkbox-block/field-checkbox-block.vue
+++ b/packages/webkit/src/components/inputs/field-checkbox-block/field-checkbox-block.vue
@@ -71,20 +71,20 @@
 
   const cardClasses = cn(
     selectableBlockCardClasses,
-    'p-[var(--spacing-sm)]',
-    'data-[highlighted]:border-[var(--border-selected)] data-[highlighted]:bg-[var(--primary-selected)]',
+    'p-(--spacing-sm)',
+    'data-[highlighted]:border-(--border-selected) data-[highlighted]:bg-(--primary-selected)',
     'data-[highlighted]:before:hidden data-[highlighted]:after:hidden',
     'data-[disabled]:opacity-50'
   )
 
   const rowClasses =
-    'flex cursor-pointer items-start gap-[var(--spacing-sm)] data-[disabled]:cursor-not-allowed'
+    'flex cursor-pointer items-start gap-(--spacing-sm) data-[disabled]:cursor-not-allowed'
 
   const textsClasses =
-    'flex min-w-0 flex-1 flex-col gap-[var(--spacing-xxs)] data-[disabled]:opacity-50'
+    'flex min-w-0 flex-1 flex-col gap-(--spacing-xxs) data-[disabled]:opacity-50'
 
   const helperClasses =
-    'inline-flex items-center gap-[var(--spacing-xxs)] rounded-[var(--shape-button)] border border-[var(--border-default)] bg-[var(--bg-surface)] px-[var(--spacing-xs)] py-[var(--spacing-xxs)] text-body-xs text-[var(--text-muted)] w-fit'
+    'inline-flex items-center gap-(--spacing-xxs) rounded-(--shape-button) border border-(--border-default) bg-(--bg-surface) px-(--spacing-xs) py-(--spacing-xxs) text-body-xs text-(--text-muted) w-fit'
 
   const rootClasses = computed(() => cn(sharedClasses, attrs.class))
 </script>
@@ -123,14 +123,14 @@
         >
           <span
             v-if="label"
-            class="text-body-sm text-[var(--text-default)]"
+            class="text-body-sm text-(--text-default)"
             :data-testid="`${testId}__label`"
           >
             {{ label }}
           </span>
           <span
             v-if="description"
-            class="text-body-xs text-[var(--text-muted)]"
+            class="text-body-xs text-(--text-muted)"
             :data-testid="`${testId}__description`"
           >
             {{ description }}
diff --git a/packages/webkit/src/components/inputs/field-checkbox/field-checkbox.vue b/packages/webkit/src/components/inputs/field-checkbox/field-checkbox.vue
index 5de217f7b..f17e766f2 100644
--- a/packages/webkit/src/components/inputs/field-checkbox/field-checkbox.vue
+++ b/packages/webkit/src/components/inputs/field-checkbox/field-checkbox.vue
@@ -65,13 +65,13 @@
   })
 
   const sharedClasses =
-    'flex cursor-pointer items-start gap-[var(--spacing-sm)] data-[disabled]:cursor-not-allowed'
+    'flex cursor-pointer items-start gap-(--spacing-sm) data-[disabled]:cursor-not-allowed'
 
   const textsClasses =
-    'flex min-w-0 flex-1 flex-col gap-[var(--spacing-xxs)] data-[disabled]:opacity-50'
+    'flex min-w-0 flex-1 flex-col gap-(--spacing-xxs) data-[disabled]:opacity-50'
 
   const helperClasses =
-    'inline-flex items-center gap-[var(--spacing-xxs)] rounded-[var(--shape-button)] border border-[var(--border-default)] bg-[var(--bg-surface)] px-[var(--spacing-xs)] py-[var(--spacing-xxs)] text-body-xs text-[var(--text-muted)] w-fit'
+    'inline-flex items-center gap-(--spacing-xxs) rounded-(--shape-button) border border-(--border-default) bg-(--bg-surface) px-(--spacing-xs) py-(--spacing-xxs) text-body-xs text-(--text-muted) w-fit'
 
   const rootClasses = computed(() => cn(sharedClasses, attrs.class))
 </script>
@@ -107,7 +107,7 @@
       />
       <span
         v-if="description"
-        class="text-body-xs text-[var(--text-muted)]"
+        class="text-body-xs text-(--text-muted)"
         :data-testid="`${testId}__description`"
       >
         {{ description }}
diff --git a/packages/webkit/src/components/inputs/field-input-group/field-input-group.vue b/packages/webkit/src/components/inputs/field-input-group/field-input-group.vue
index 36953e572..ad1ecb0f4 100644
--- a/packages/webkit/src/components/inputs/field-input-group/field-input-group.vue
+++ b/packages/webkit/src/components/inputs/field-input-group/field-input-group.vue
@@ -94,7 +94,7 @@
     :data-disabled="disabled || null"
     :data-invalid="invalid || null"
     :data-required="required || null"
-    class="flex flex-col gap-[var(--spacing-xs)] w-full"
+    class="flex flex-col gap-(--spacing-xs) w-full"
   >
     <Label
       v-if="label"
@@ -127,7 +127,7 @@
         :aria-invalid="invalid || undefined"
         :aria-required="required || undefined"
         :aria-describedby="describedBy"
-        class="w-full h-full bg-transparent border-0 outline-none focus:ring-0 px-[var(--spacing-md)] text-label-sm text-[var(--text-default)] placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed disabled:text-[var(--text-disabled)]"
+        class="w-full h-full bg-transparent border-0 outline-none focus:ring-0 px-(--spacing-md) text-label-sm text-(--text-default) placeholder:text-(--text-muted) disabled:cursor-not-allowed disabled:text-(--text-disabled)"
         @input="onInput"
       />
       <InputGroupAddon
diff --git a/packages/webkit/src/components/inputs/field-password/field-password.vue b/packages/webkit/src/components/inputs/field-password/field-password.vue
index cb516e0fd..6e9c2f16a 100644
--- a/packages/webkit/src/components/inputs/field-password/field-password.vue
+++ b/packages/webkit/src/components/inputs/field-password/field-password.vue
@@ -99,7 +99,7 @@
     :data-disabled="disabled || null"
     :data-invalid="invalid || null"
     :data-required="required || null"
-    class="flex flex-col gap-[var(--spacing-xs)] w-full"
+    class="flex flex-col gap-(--spacing-xs) w-full"
   >
     <Label
       v-if="label"
diff --git a/packages/webkit/src/components/inputs/field-phone-number/field-phone-number.vue b/packages/webkit/src/components/inputs/field-phone-number/field-phone-number.vue
index 4b7563f33..2599bd6fa 100644
--- a/packages/webkit/src/components/inputs/field-phone-number/field-phone-number.vue
+++ b/packages/webkit/src/components/inputs/field-phone-number/field-phone-number.vue
@@ -121,7 +121,7 @@
     :data-disabled="disabled || null"
     :data-invalid="invalid || null"
     :data-required="required || null"
-    class="flex flex-col gap-[var(--spacing-xs)] w-full"
+    class="flex flex-col gap-(--spacing-xs) w-full"
   >
     <Label
       v-if="label"
@@ -168,7 +168,7 @@
         :aria-invalid="invalid || undefined"
         :aria-required="required || undefined"
         :aria-describedby="describedBy"
-        class="w-full h-full bg-transparent border-0 outline-none focus:ring-0 px-[var(--spacing-md)] text-label-sm text-[var(--text-default)] placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed disabled:text-[var(--text-disabled)]"
+        class="w-full h-full bg-transparent border-0 outline-none focus:ring-0 px-(--spacing-md) text-label-sm text-(--text-default) placeholder:text-(--text-muted) disabled:cursor-not-allowed disabled:text-(--text-disabled)"
         @input="onInput"
       />
     </InputGroup>
diff --git a/packages/webkit/src/components/inputs/field-radio-block/field-radio-block.vue b/packages/webkit/src/components/inputs/field-radio-block/field-radio-block.vue
index 9d3b3fcec..3e561120c 100644
--- a/packages/webkit/src/components/inputs/field-radio-block/field-radio-block.vue
+++ b/packages/webkit/src/components/inputs/field-radio-block/field-radio-block.vue
@@ -64,17 +64,17 @@
 
   const cardClasses = cn(
     selectableBlockCardClasses,
-    'flex cursor-pointer items-start gap-[var(--spacing-sm)] p-[var(--spacing-sm)]',
-    'data-[selected]:border-[var(--border-selected)] data-[selected]:bg-[var(--bg-selected)]',
+    'flex cursor-pointer items-start gap-(--spacing-sm) p-(--spacing-sm)',
+    'data-[selected]:border-(--border-selected) data-[selected]:bg-(--bg-selected)',
     'data-[selected]:before:hidden data-[selected]:after:hidden',
     'data-[disabled]:opacity-50'
   )
 
   const textsClasses =
-    'flex min-w-0 flex-1 flex-col gap-[var(--spacing-xxs)] data-[disabled]:opacity-50'
+    'flex min-w-0 flex-1 flex-col gap-(--spacing-xxs) data-[disabled]:opacity-50'
 
   const helperClasses =
-    'inline-flex items-center gap-[var(--spacing-xxs)] rounded-[var(--shape-button)] border border-[var(--border-default)] bg-[var(--bg-surface)] px-[var(--spacing-xs)] py-[var(--spacing-xxs)] text-body-xs text-[var(--text-muted)] w-fit'
+    'inline-flex items-center gap-(--spacing-xxs) rounded-(--shape-button) border border-(--border-default) bg-(--bg-surface) px-(--spacing-xs) py-(--spacing-xxs) text-body-xs text-(--text-muted) w-fit'
 
   const rootClasses = computed(() => cn(sharedClasses, attrs.class))
 </script>
@@ -107,14 +107,14 @@
       >
         <span
           v-if="label"
-          class="text-body-sm text-[var(--text-default)]"
+          class="text-body-sm text-(--text-default)"
           :data-testid="`${testId}__label`"
         >
           {{ label }}
         </span>
         <span
           v-if="description"
-          class="text-body-xs text-[var(--text-muted)]"
+          class="text-body-xs text-(--text-muted)"
           :data-testid="`${testId}__description`"
         >
           {{ description }}
diff --git a/packages/webkit/src/components/inputs/field-radio/field-radio.vue b/packages/webkit/src/components/inputs/field-radio/field-radio.vue
index 2099613f6..f706c7e5a 100644
--- a/packages/webkit/src/components/inputs/field-radio/field-radio.vue
+++ b/packages/webkit/src/components/inputs/field-radio/field-radio.vue
@@ -57,13 +57,13 @@
   })
 
   const sharedClasses =
-    'flex cursor-pointer items-start gap-[var(--spacing-sm)] data-[disabled]:cursor-not-allowed'
+    'flex cursor-pointer items-start gap-(--spacing-sm) data-[disabled]:cursor-not-allowed'
 
   const textsClasses =
-    'flex min-w-0 flex-1 flex-col gap-[var(--spacing-xxs)] data-[disabled]:opacity-50'
+    'flex min-w-0 flex-1 flex-col gap-(--spacing-xxs) data-[disabled]:opacity-50'
 
   const helperClasses =
-    'inline-flex items-center gap-[var(--spacing-xxs)] rounded-[var(--shape-button)] border border-[var(--border-default)] bg-[var(--bg-surface)] px-[var(--spacing-xs)] py-[var(--spacing-xxs)] text-body-xs text-[var(--text-muted)] w-fit'
+    'inline-flex items-center gap-(--spacing-xxs) rounded-(--shape-button) border border-(--border-default) bg-(--bg-surface) px-(--spacing-xs) py-(--spacing-xxs) text-body-xs text-(--text-muted) w-fit'
 
   const rootClasses = computed(() => cn(sharedClasses, attrs.class))
 </script>
@@ -95,7 +95,7 @@
       />
       <span
         v-if="description"
-        class="text-body-xs text-[var(--text-muted)]"
+        class="text-body-xs text-(--text-muted)"
         :data-testid="`${testId}__description`"
       >
         {{ description }}
diff --git a/packages/webkit/src/components/inputs/field-select/field-select.vue b/packages/webkit/src/components/inputs/field-select/field-select.vue
index c79feb2d3..a7cdf4339 100644
--- a/packages/webkit/src/components/inputs/field-select/field-select.vue
+++ b/packages/webkit/src/components/inputs/field-select/field-select.vue
@@ -104,7 +104,7 @@
     :data-readonly="readonly || null"
     :data-invalid="invalid || null"
     :data-required="required || null"
-    class="flex flex-col gap-[var(--spacing-xs)] w-full"
+    class="flex flex-col gap-(--spacing-xs) w-full"
   >
     <Label
       v-if="label"
diff --git a/packages/webkit/src/components/inputs/field-switch-block/field-switch-block.vue b/packages/webkit/src/components/inputs/field-switch-block/field-switch-block.vue
index 5e3232e77..a02349ff9 100644
--- a/packages/webkit/src/components/inputs/field-switch-block/field-switch-block.vue
+++ b/packages/webkit/src/components/inputs/field-switch-block/field-switch-block.vue
@@ -57,20 +57,20 @@
 
   const cardClasses = cn(
     selectableBlockCardClasses,
-    'p-[var(--spacing-sm)]',
-    'data-[highlighted]:border-[var(--border-selected)] data-[highlighted]:bg-[var(--primary-selected)]',
+    'p-(--spacing-sm)',
+    'data-[highlighted]:border-(--border-selected) data-[highlighted]:bg-(--primary-selected)',
     'data-[highlighted]:before:hidden data-[highlighted]:after:hidden',
     'data-[disabled]:opacity-50'
   )
 
   const rowClasses =
-    'flex cursor-pointer items-start gap-[var(--spacing-sm)] data-[disabled]:cursor-not-allowed'
+    'flex cursor-pointer items-start gap-(--spacing-sm) data-[disabled]:cursor-not-allowed'
 
   const textsClasses =
-    'flex min-w-0 flex-1 flex-col gap-[var(--spacing-xxs)] data-[disabled]:opacity-50'
+    'flex min-w-0 flex-1 flex-col gap-(--spacing-xxs) data-[disabled]:opacity-50'
 
   const helperClasses =
-    'inline-flex items-center gap-[var(--spacing-xxs)] rounded-[var(--shape-button)] border border-[var(--border-default)] bg-[var(--bg-surface)] px-[var(--spacing-xs)] py-[var(--spacing-xxs)] text-body-xs text-[var(--text-muted)] w-fit'
+    'inline-flex items-center gap-(--spacing-xxs) rounded-(--shape-button) border border-(--border-default) bg-(--bg-surface) px-(--spacing-xs) py-(--spacing-xxs) text-body-xs text-(--text-muted) w-fit'
 
   const rootClasses = computed(() => cn(sharedClasses, attrs.class))
 </script>
@@ -107,14 +107,14 @@
         >
           <span
             v-if="label"
-            class="text-body-sm text-[var(--text-default)]"
+            class="text-body-sm text-(--text-default)"
             :data-testid="`${testId}__label`"
           >
             {{ label }}
           </span>
           <span
             v-if="description"
-            class="text-body-xs text-[var(--text-muted)]"
+            class="text-body-xs text-(--text-muted)"
             :data-testid="`${testId}__description`"
           >
             {{ description }}
diff --git a/packages/webkit/src/components/inputs/field-switch/field-switch.vue b/packages/webkit/src/components/inputs/field-switch/field-switch.vue
index 81f881fa6..8ce28540b 100644
--- a/packages/webkit/src/components/inputs/field-switch/field-switch.vue
+++ b/packages/webkit/src/components/inputs/field-switch/field-switch.vue
@@ -51,14 +51,14 @@
   })
 
   const sharedClasses =
-    'flex cursor-pointer items-start gap-[var(--spacing-sm)] data-[disabled]:cursor-not-allowed'
+    'flex cursor-pointer items-start gap-(--spacing-sm) data-[disabled]:cursor-not-allowed'
 
-  const contentClasses = 'flex min-w-0 flex-1 flex-col gap-[var(--spacing-xs)]'
+  const contentClasses = 'flex min-w-0 flex-1 flex-col gap-(--spacing-xs)'
 
-  const textsClasses = 'flex flex-col gap-[var(--spacing-xxs)] data-[disabled]:opacity-50'
+  const textsClasses = 'flex flex-col gap-(--spacing-xxs) data-[disabled]:opacity-50'
 
   const helperClasses =
-    'inline-flex w-fit items-center gap-[var(--spacing-xxs)] rounded-[var(--shape-elements)] border border-[var(--border-default)] bg-[var(--bg-surface)] px-[var(--spacing-xs)] py-[var(--spacing-xxs)] text-body-xs text-[var(--text-muted)]'
+    'inline-flex w-fit items-center gap-(--spacing-xxs) rounded-(--shape-elements) border border-(--border-default) bg-(--bg-surface) px-(--spacing-xs) py-(--spacing-xxs) text-body-xs text-(--text-muted)'
 
   const rootClasses = computed(() => cn(sharedClasses, attrs.class))
 </script>
@@ -97,7 +97,7 @@
         />
         <span
           v-if="description"
-          class="text-body-xs text-[var(--text-muted)]"
+          class="text-body-xs text-(--text-muted)"
           :data-testid="`${testId}__description`"
         >
           {{ description }}
diff --git a/packages/webkit/src/components/inputs/field-text-switch/field-text-switch.vue b/packages/webkit/src/components/inputs/field-text-switch/field-text-switch.vue
index 8b746f26d..117d23198 100644
--- a/packages/webkit/src/components/inputs/field-text-switch/field-text-switch.vue
+++ b/packages/webkit/src/components/inputs/field-text-switch/field-text-switch.vue
@@ -113,7 +113,7 @@
     :data-invalid="invalid || null"
     :data-required="required || null"
     :data-enabled="enabled || null"
-    class="flex flex-col gap-[var(--spacing-xs)] w-full"
+    class="flex flex-col gap-(--spacing-xs) w-full"
   >
     <Label
       v-if="label"
@@ -139,7 +139,7 @@
         :aria-invalid="invalid || undefined"
         :aria-required="required || undefined"
         :aria-describedby="describedBy"
-        class="w-full h-full bg-transparent border-0 outline-none focus:ring-0 px-[var(--spacing-md)] text-label-sm text-[var(--text-default)] placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed disabled:text-[var(--text-disabled)]"
+        class="w-full h-full bg-transparent border-0 outline-none focus:ring-0 px-(--spacing-md) text-label-sm text-(--text-default) placeholder:text-(--text-muted) disabled:cursor-not-allowed disabled:text-(--text-disabled)"
         @input="onInput"
       />
       <InputGroupAddon :data-testid="`${testId}__switch-slot`">
diff --git a/packages/webkit/src/components/inputs/field-text/field-text.vue b/packages/webkit/src/components/inputs/field-text/field-text.vue
index 851686655..59c9de1fd 100644
--- a/packages/webkit/src/components/inputs/field-text/field-text.vue
+++ b/packages/webkit/src/components/inputs/field-text/field-text.vue
@@ -92,7 +92,7 @@
     :data-disabled="disabled || null"
     :data-invalid="invalid || null"
     :data-required="required || null"
-    class="flex flex-col gap-[var(--spacing-xs)] w-full"
+    class="flex flex-col gap-(--spacing-xs) w-full"
   >
     <Label
       v-if="label"
diff --git a/packages/webkit/src/components/inputs/field-textarea/field-textarea.vue b/packages/webkit/src/components/inputs/field-textarea/field-textarea.vue
index 285c9351f..2248ab150 100644
--- a/packages/webkit/src/components/inputs/field-textarea/field-textarea.vue
+++ b/packages/webkit/src/components/inputs/field-textarea/field-textarea.vue
@@ -75,7 +75,7 @@
     :data-required="required || null"
     :data-readonly="readonly || null"
     :class="attrs.class as string"
-    class="flex w-full flex-col gap-[var(--spacing-xs)]"
+    class="flex w-full flex-col gap-(--spacing-xs)"
   >
     <Label
       v-if="label"
@@ -105,7 +105,7 @@
       :data-disabled="disabled || null"
       :data-invalid="invalid || null"
       :data-required="required || null"
-      class="inline-flex items-center gap-[var(--spacing-xxs)] w-fit text-body-xs text-[var(--text-muted)] data-[required]:text-[var(--warning)] data-[invalid]:text-[var(--danger)] data-[disabled]:rounded-[var(--shape-button)] data-[disabled]:border data-[disabled]:border-[var(--border-default)] data-[disabled]:bg-[var(--bg-surface)] data-[disabled]:px-[var(--spacing-xs)] data-[disabled]:py-[var(--spacing-xxs)] data-[disabled]:text-[var(--text-muted)]"
+      class="inline-flex items-center gap-(--spacing-xxs) w-fit text-body-xs text-(--text-muted) data-[required]:text-(--warning) data-[invalid]:text-(--danger) data-[disabled]:rounded-(--shape-button) data-[disabled]:border data-[disabled]:border-(--border-default) data-[disabled]:bg-(--bg-surface) data-[disabled]:px-(--spacing-xs) data-[disabled]:py-(--spacing-xxs) data-[disabled]:text-(--text-muted)"
     >
       <i
         v-if="disabled"
diff --git a/packages/webkit/src/components/inputs/helper-text/helper-text.vue b/packages/webkit/src/components/inputs/helper-text/helper-text.vue
index 3cf4fdde9..86f56cb62 100644
--- a/packages/webkit/src/components/inputs/helper-text/helper-text.vue
+++ b/packages/webkit/src/components/inputs/helper-text/helper-text.vue
@@ -35,7 +35,7 @@
     :data-testid="testId"
     :data-kind="kind"
     :class="attrs.class"
-    class="inline-flex items-center text-label-sm data-[kind=helper]:text-[var(--text-muted)] data-[kind=disabled]:text-[var(--text-muted)] data-[kind=invalid]:text-[var(--danger-contrast)] data-[kind=required]:text-[var(--warning-contrast)] data-[kind=disabled]:gap-[var(--spacing-xxs)]"
+    class="inline-flex items-center text-label-sm data-[kind=helper]:text-(--text-muted) data-[kind=disabled]:text-(--text-muted) data-[kind=invalid]:text-(--danger-contrast) data-[kind=required]:text-(--warning-contrast) data-[kind=disabled]:gap-(--spacing-xxs)"
   >
     <i
       v-if="kind === 'disabled'"
diff --git a/packages/webkit/src/components/inputs/input-group/input-group-addon/input-group-addon.vue b/packages/webkit/src/components/inputs/input-group/input-group-addon/input-group-addon.vue
index 6c6200b74..a58735763 100644
--- a/packages/webkit/src/components/inputs/input-group/input-group-addon/input-group-addon.vue
+++ b/packages/webkit/src/components/inputs/input-group/input-group-addon/input-group-addon.vue
@@ -16,7 +16,7 @@
   <span
     v-bind="$attrs"
     :data-testid="testId"
-    class="flex items-center self-stretch shrink-0 bg-[var(--bg-canvas)] text-label-sm text-[color:var(--text-muted)] px-[var(--spacing-md)] [[data-size=small]_&]:px-[var(--spacing-sm)] [[data-size=large]_&]:px-[var(--spacing-md)]"
+    class="flex items-center self-stretch shrink-0 bg-(--bg-canvas) text-label-sm text-(color:--text-muted) px-(--spacing-md) [[data-size=small]_&]:px-(--spacing-sm) [[data-size=large]_&]:px-(--spacing-md)"
   >
     <slot />
   </span>
diff --git a/packages/webkit/src/components/inputs/input-group/input-group.vue b/packages/webkit/src/components/inputs/input-group/input-group.vue
index 3e4df77e3..15bb7ce4b 100644
--- a/packages/webkit/src/components/inputs/input-group/input-group.vue
+++ b/packages/webkit/src/components/inputs/input-group/input-group.vue
@@ -44,7 +44,7 @@
     :aria-invalid="props.invalid ? 'true' : undefined"
     :aria-required="props.required ? 'true' : undefined"
     :aria-disabled="props.disabled ? 'true' : undefined"
-    class="relative inline-flex items-center w-full overflow-hidden rounded-[var(--shape-elements)] border border-[var(--border-default)] bg-[var(--bg-surface)] transition-colors duration-150 ease-out motion-reduce:transition-none data-[size=small]:h-7 data-[size=medium]:h-8 data-[size=large]:h-10 [&:not(:focus-within):not([data-invalid]):not([data-required]):not([data-disabled])]:hover:border-[var(--border-strong)] focus-within:outline-none focus-within:ring-2 focus-within:ring-[var(--ring-color)] focus-within:ring-offset-2 focus-within:ring-offset-[var(--bg-canvas)] data-[invalid]:border-[var(--danger-border)] data-[required]:border-[var(--warning-border)] data-[disabled]:bg-[var(--bg-disabled)] data-[disabled]:text-[var(--text-disabled)] data-[disabled]:cursor-not-allowed data-[disabled]:focus-within:ring-0 data-[disabled]:focus-within:ring-offset-0 [&_*]:focus-visible:!ring-0 [&_*]:focus-visible:!ring-offset-0 [&_*]:focus-within:!ring-0 [&_*]:focus-within:!ring-offset-0 [&_input]:!outline-none [&_button]:!border-transparent [&_button]:!rounded-none [&_a]:!border-transparent [&_a]:!rounded-none [&_[role=combobox]]:!border-transparent [&_[role=combobox]]:!rounded-none [&_[data-mode]]:!w-auto [&>*:not(:last-child)]:!border-r [&>*:not(:last-child)]:!border-r-[color:var(--border-default)] [&>*:first-child]:rounded-l-[var(--shape-elements)] [&>*:not(:first-child)]:rounded-l-none [&>*:last-child]:rounded-r-[var(--shape-elements)] [&>*:not(:last-child)]:rounded-r-none"
+    class="relative inline-flex items-center w-full overflow-hidden rounded-(--shape-elements) border border-(--border-default) bg-(--bg-surface) transition-colors duration-150 ease-out motion-reduce:transition-none data-[size=small]:h-7 data-[size=medium]:h-8 data-[size=large]:h-10 [&:not(:focus-within):not([data-invalid]):not([data-required]):not([data-disabled])]:hover:border-(--border-strong) focus-within:outline-none focus-within:ring-2 focus-within:ring-(--ring-color) focus-within:ring-offset-2 focus-within:ring-offset-(--bg-canvas) data-[invalid]:border-(--danger-border) data-[required]:border-(--warning-border) data-[disabled]:bg-(--bg-disabled) data-[disabled]:text-(--text-disabled) data-[disabled]:cursor-not-allowed data-[disabled]:focus-within:ring-0 data-[disabled]:focus-within:ring-offset-0 [&_*]:focus-visible:!ring-0 [&_*]:focus-visible:!ring-offset-0 [&_*]:focus-within:!ring-0 [&_*]:focus-within:!ring-offset-0 [&_input]:!outline-none [&_button]:!border-transparent [&_button]:!rounded-none [&_a]:!border-transparent [&_a]:!rounded-none [&_[role=combobox]]:!border-transparent [&_[role=combobox]]:!rounded-none [&_[data-mode]]:!w-auto [&>*:not(:last-child)]:!border-r [&>*:not(:last-child)]:!border-r-(color:--border-default) [&>*:first-child]:rounded-l-(--shape-elements) [&>*:not(:first-child)]:rounded-l-none [&>*:last-child]:rounded-r-(--shape-elements) [&>*:not(:last-child)]:rounded-r-none"
   >
     <slot />
   </div>
diff --git a/packages/webkit/src/components/inputs/input-number/input-number.vue b/packages/webkit/src/components/inputs/input-number/input-number.vue
index 8e06847c7..203e134ef 100644
--- a/packages/webkit/src/components/inputs/input-number/input-number.vue
+++ b/packages/webkit/src/components/inputs/input-number/input-number.vue
@@ -112,21 +112,21 @@
     :data-required="required || null"
     :class="[
       'relative inline-flex w-full items-center overflow-hidden',
-      'rounded-[var(--shape-elements)]',
-      'border border-[var(--border-default)] bg-[var(--bg-surface)] text-[var(--text-default)]',
+      'rounded-(--shape-elements)',
+      'border border-(--border-default) bg-(--bg-surface) text-(--text-default)',
       'transition-colors duration-150 ease-out motion-reduce:transition-none',
-      '[&:not(:focus-within):not([data-disabled])]:hover:border-[var(--border-strong)]',
-      'focus-within:outline-none focus-within:ring-2 focus-within:ring-[var(--ring-color)] focus-within:ring-offset-2 focus-within:ring-offset-[var(--bg-canvas)]',
+      '[&:not(:focus-within):not([data-disabled])]:hover:border-(--border-strong)',
+      'focus-within:outline-none focus-within:ring-2 focus-within:ring-(--ring-color) focus-within:ring-offset-2 focus-within:ring-offset-(--bg-canvas)',
       'data-[size=small]:h-7 data-[size=medium]:h-8 data-[size=large]:h-10',
-      'data-[invalid]:border-[var(--danger-border)]',
-      'data-[required]:border-[var(--warning-border)]',
-      'data-[disabled]:bg-[var(--bg-disabled)] data-[disabled]:text-[var(--text-disabled)] data-[disabled]:cursor-not-allowed data-[disabled]:hover:border-[var(--border-default)] data-[disabled]:focus-within:ring-0 data-[disabled]:focus-within:ring-offset-0',
+      'data-[invalid]:border-(--danger-border)',
+      'data-[required]:border-(--warning-border)',
+      'data-[disabled]:bg-(--bg-disabled) data-[disabled]:text-(--text-disabled) data-[disabled]:cursor-not-allowed data-[disabled]:hover:border-(--border-default) data-[disabled]:focus-within:ring-0 data-[disabled]:focus-within:ring-offset-0',
       attrs['class']
     ]"
   >
     <span
       v-if="$slots['prefix']"
-      class="relative z-[var(--z-input-field)] flex items-center pl-[var(--spacing-md)] text-[var(--text-muted)]"
+      class="relative z-(--z-input-field) flex items-center pl-(--spacing-md) text-(--text-muted)"
     >
       <slot name="prefix" />
     </span>
@@ -145,21 +145,21 @@
       :aria-required="required || undefined"
       :data-testid="testId"
       v-bind="passthroughAttrs"
-      class="relative z-[var(--z-input-field)] w-full min-w-0 border-0 bg-transparent outline-none px-[var(--spacing-md)] text-label-sm text-[var(--text-default)] placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed disabled:text-[var(--text-disabled)] read-only:cursor-default [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+      class="relative z-(--z-input-field) w-full min-w-0 border-0 bg-transparent outline-none px-(--spacing-md) text-label-sm text-(--text-default) placeholder:text-(--text-muted) disabled:cursor-not-allowed disabled:text-(--text-disabled) read-only:cursor-default [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
       @input="handleInput"
       @change="handleChange"
     />
 
     <span
       v-if="$slots['suffix']"
-      class="relative z-[var(--z-input-field)] flex items-center pr-[var(--spacing-md)] text-[var(--text-muted)]"
+      class="relative z-(--z-input-field) flex items-center pr-(--spacing-md) text-(--text-muted)"
     >
       <slot name="suffix" />
     </span>
 
     <span
       v-if="disabled"
-      class="relative z-[var(--z-input-field)] flex items-center pr-[var(--spacing-md)] text-[var(--text-disabled)]"
+      class="relative z-(--z-input-field) flex items-center pr-(--spacing-md) text-(--text-disabled)"
       aria-hidden="true"
     >
       <i class="pi pi-lock text-label-sm leading-none" />
@@ -167,14 +167,14 @@
 
     <span
       v-if="showButtons"
-      class="relative z-[var(--z-input-field)] flex h-full w-12 shrink-0 flex-col self-stretch border-l border-[var(--border-default)]"
+      class="relative z-(--z-input-field) flex h-full w-12 shrink-0 flex-col self-stretch border-l border-(--border-default)"
     >
       <button
         type="button"
         tabindex="-1"
         aria-label="Increment"
         :disabled="disabled || readonly"
-        class="flex flex-1 items-center justify-center border-b border-[var(--border-default)] text-[var(--text-default)] transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-[var(--bg-hover)] disabled:cursor-not-allowed disabled:text-[var(--text-disabled)]"
+        class="flex flex-1 items-center justify-center border-b border-(--border-default) text-(--text-default) transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-(--bg-hover) disabled:cursor-not-allowed disabled:text-(--text-disabled)"
         @click="handleIncrement"
       >
         <i
@@ -187,7 +187,7 @@
         tabindex="-1"
         aria-label="Decrement"
         :disabled="disabled || readonly"
-        class="flex flex-1 items-center justify-center text-[var(--text-default)] transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-[var(--bg-hover)] disabled:cursor-not-allowed disabled:text-[var(--text-disabled)]"
+        class="flex flex-1 items-center justify-center text-(--text-default) transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-(--bg-hover) disabled:cursor-not-allowed disabled:text-(--text-disabled)"
         @click="handleDecrement"
       >
         <i
diff --git a/packages/webkit/src/components/inputs/input-password/input-password.vue b/packages/webkit/src/components/inputs/input-password/input-password.vue
index 621f0b91e..b1c78f350 100644
--- a/packages/webkit/src/components/inputs/input-password/input-password.vue
+++ b/packages/webkit/src/components/inputs/input-password/input-password.vue
@@ -93,21 +93,21 @@
     :data-visible="visible || null"
     :class="[
       'relative inline-flex items-center w-full h-10',
-      'gap-[var(--spacing-xs)] pl-[var(--spacing-md)] pr-[var(--spacing-xxs)]',
-      'rounded-[var(--shape-elements)]',
-      'border border-[var(--border-default)] bg-[var(--bg-surface)] text-[var(--text-default)]',
+      'gap-(--spacing-xs) pl-(--spacing-md) pr-(--spacing-xxs)',
+      'rounded-(--shape-elements)',
+      'border border-(--border-default) bg-(--bg-surface) text-(--text-default)',
       'transition-colors duration-150 ease-out motion-reduce:transition-none',
-      '[&:not(:focus-within):not([data-disabled])]:hover:border-[var(--border-strong)]',
-      'focus-within:outline-none focus-within:ring-2 focus-within:ring-[var(--ring-color)] focus-within:ring-offset-2 focus-within:ring-offset-[var(--bg-canvas)]',
-      'data-[invalid]:border-[var(--danger-border)]',
-      'data-[required]:border-[var(--warning-border)]',
-      'data-[disabled]:bg-[var(--bg-disabled)] data-[disabled]:text-[var(--text-disabled)] data-[disabled]:cursor-not-allowed data-[disabled]:hover:border-[var(--border-default)] data-[disabled]:focus-within:ring-0 data-[disabled]:focus-within:ring-offset-0',
+      '[&:not(:focus-within):not([data-disabled])]:hover:border-(--border-strong)',
+      'focus-within:outline-none focus-within:ring-2 focus-within:ring-(--ring-color) focus-within:ring-offset-2 focus-within:ring-offset-(--bg-canvas)',
+      'data-[invalid]:border-(--danger-border)',
+      'data-[required]:border-(--warning-border)',
+      'data-[disabled]:bg-(--bg-disabled) data-[disabled]:text-(--text-disabled) data-[disabled]:cursor-not-allowed data-[disabled]:hover:border-(--border-default) data-[disabled]:focus-within:ring-0 data-[disabled]:focus-within:ring-offset-0',
       attrs.class
     ]"
   >
     <span
       v-if="hasIconLeft"
-      class="inline-flex shrink-0 items-center justify-center text-[var(--text-muted)]"
+      class="inline-flex shrink-0 items-center justify-center text-(--text-muted)"
       aria-hidden="true"
     >
       <slot name="iconLeft" />
@@ -125,14 +125,14 @@
       :aria-invalid="invalid || undefined"
       :aria-required="required || undefined"
       :data-testid="testId"
-      class="relative z-[var(--z-input-field)] w-full min-w-0 border-0 bg-transparent p-0 outline-none text-label-sm text-[var(--text-default)] placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed disabled:text-[var(--text-disabled)] read-only:cursor-default transition-opacity duration-150 ease-out motion-reduce:transition-none"
+      class="relative z-(--z-input-field) w-full min-w-0 border-0 bg-transparent p-0 outline-none text-label-sm text-(--text-default) placeholder:text-(--text-muted) disabled:cursor-not-allowed disabled:text-(--text-disabled) read-only:cursor-default transition-opacity duration-150 ease-out motion-reduce:transition-none"
       v-bind="passthroughAttrs"
       @input="handleInput"
     />
 
     <span
       v-if="hasIconRight"
-      class="inline-flex shrink-0 items-center justify-center text-[var(--text-muted)]"
+      class="inline-flex shrink-0 items-center justify-center text-(--text-muted)"
       aria-hidden="true"
     >
       <slot name="iconRight" />
diff --git a/packages/webkit/src/components/inputs/input-text/input-text.vue b/packages/webkit/src/components/inputs/input-text/input-text.vue
index 342d83722..aafd74cd2 100644
--- a/packages/webkit/src/components/inputs/input-text/input-text.vue
+++ b/packages/webkit/src/components/inputs/input-text/input-text.vue
@@ -91,23 +91,23 @@
     :data-has-icon-right="hasIconRight || null"
     :class="[
       'relative inline-flex items-center w-full cursor-text',
-      'gap-[var(--spacing-xs)] px-[var(--spacing-sm)]',
-      'rounded-[var(--shape-elements)]',
-      'border border-[var(--border-default)] bg-[var(--bg-surface)] text-[var(--text-default)]',
+      'gap-(--spacing-xs) px-(--spacing-sm)',
+      'rounded-(--shape-elements)',
+      'border border-(--border-default) bg-(--bg-surface) text-(--text-default)',
       'transition-colors duration-150 ease-out motion-reduce:transition-none',
-      '[&:not(:focus-within):not([data-disabled])]:hover:border-[var(--border-strong)]',
-      'focus-within:outline-none focus-within:ring-2 focus-within:ring-[var(--ring-color)] focus-within:ring-offset-2 focus-within:ring-offset-[var(--bg-canvas)]',
+      '[&:not(:focus-within):not([data-disabled])]:hover:border-(--border-strong)',
+      'focus-within:outline-none focus-within:ring-2 focus-within:ring-(--ring-color) focus-within:ring-offset-2 focus-within:ring-offset-(--bg-canvas)',
       'data-[size=small]:h-7 data-[size=medium]:h-8 data-[size=large]:h-10',
-      'data-[invalid]:border-[var(--danger-border)]',
-      'data-[required]:border-[var(--warning-border)]',
-      'data-[disabled]:bg-[var(--bg-disabled)] data-[disabled]:text-[var(--text-disabled)] data-[disabled]:cursor-not-allowed data-[disabled]:hover:border-[var(--border-default)] data-[disabled]:focus-within:ring-0 data-[disabled]:focus-within:ring-offset-0',
+      'data-[invalid]:border-(--danger-border)',
+      'data-[required]:border-(--warning-border)',
+      'data-[disabled]:bg-(--bg-disabled) data-[disabled]:text-(--text-disabled) data-[disabled]:cursor-not-allowed data-[disabled]:hover:border-(--border-default) data-[disabled]:focus-within:ring-0 data-[disabled]:focus-within:ring-offset-0',
       attrs.class
     ]"
     @mousedown="handleChromeMouseDown"
   >
     <span
       v-if="hasIconLeft"
-      class="inline-flex shrink-0 items-center justify-center text-[var(--text-muted)]"
+      class="inline-flex shrink-0 items-center justify-center text-(--text-muted)"
       aria-hidden="true"
     >
       <slot name="iconLeft" />
@@ -125,14 +125,14 @@
       :aria-invalid="invalid || undefined"
       :aria-required="required || undefined"
       :data-testid="testId"
-      class="relative z-[var(--z-input-field)] h-full w-full min-w-0 self-stretch border-0 bg-transparent p-0 outline-none text-label-sm text-[var(--text-default)] placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed disabled:text-[var(--text-disabled)] read-only:cursor-default"
+      class="relative z-(--z-input-field) h-full w-full min-w-0 self-stretch border-0 bg-transparent p-0 outline-none text-label-sm text-(--text-default) placeholder:text-(--text-muted) disabled:cursor-not-allowed disabled:text-(--text-disabled) read-only:cursor-default"
       v-bind="passthroughAttrs"
       @input="handleInput"
     />
 
     <span
       v-if="hasIconRight"
-      class="inline-flex shrink-0 items-center justify-center text-[var(--text-muted)]"
+      class="inline-flex shrink-0 items-center justify-center text-(--text-muted)"
       aria-hidden="true"
     >
       <slot name="iconRight" />
diff --git a/packages/webkit/src/components/inputs/label/label.vue b/packages/webkit/src/components/inputs/label/label.vue
index c355096a6..eed7d554d 100644
--- a/packages/webkit/src/components/inputs/label/label.vue
+++ b/packages/webkit/src/components/inputs/label/label.vue
@@ -33,7 +33,7 @@
     :data-testid="testId"
     :data-required="required || null"
     :class="attrs.class"
-    class="inline-flex items-center text-label-sm text-[var(--text-default)] data-[required]:gap-[var(--spacing-xxs)]"
+    class="inline-flex items-center text-label-sm text-(--text-default) data-[required]:gap-(--spacing-xxs)"
   >
     <span :data-testid="`${testId}__text`">
       <slot v-if="$slots['default']" />
@@ -42,11 +42,11 @@
     <span
       v-if="required"
       :data-testid="`${testId}__required`"
-      class="text-label-sm text-[var(--text-muted)]"
+      class="text-label-sm text-(--text-muted)"
     >
       <span
         aria-hidden="true"
-        class="text-[var(--primary)]"
+        class="text-(--primary)"
         >*</span
       >
       (Required)
diff --git a/packages/webkit/src/components/inputs/multi-select/multi-select-content/multi-select-content.vue b/packages/webkit/src/components/inputs/multi-select/multi-select-content/multi-select-content.vue
index d61149a0d..d4d4ddb60 100644
--- a/packages/webkit/src/components/inputs/multi-select/multi-select-content/multi-select-content.vue
+++ b/packages/webkit/src/components/inputs/multi-select/multi-select-content/multi-select-content.vue
@@ -144,25 +144,25 @@
         :data-state="ctx.open.value ? 'open' : 'closed'"
         :class="attrs.class"
         :style="positionStyle"
-        class="fixed z-[var(--z-input-overlay)] flex max-h-[20rem] flex-col overflow-hidden rounded-[var(--shape-elements)] border border-[var(--border-default)] bg-[var(--bg-surface-raised)] shadow-[var(--shadow-xs)]"
+        class="fixed z-(--z-input-overlay) flex max-h-[20rem] flex-col overflow-hidden rounded-(--shape-elements) border border-(--border-default) bg-(--bg-surface-raised) shadow-(--shadow-xs)"
         @keydown="onKeydown"
       >
         <div
           v-if="$slots['search']"
-          class="flex shrink-0 items-center justify-center p-[var(--spacing-xxs)]"
+          class="flex shrink-0 items-center justify-center p-(--spacing-xxs)"
           :data-testid="`${testId}__search`"
         >
           <slot name="search" />
         </div>
         <ScrollArea
-          class="flex max-h-60 flex-col items-stretch p-[var(--spacing-xxs)]"
+          class="flex max-h-60 flex-col items-stretch p-(--spacing-xxs)"
           :data-testid="`${testId}__list`"
         >
           <slot />
         </ScrollArea>
         <div
           v-if="$slots['footer']"
-          class="flex shrink-0 items-center justify-center p-[var(--spacing-xxs)]"
+          class="flex shrink-0 items-center justify-center p-(--spacing-xxs)"
           :data-testid="`${testId}__footer`"
         >
           <slot name="footer" />
diff --git a/packages/webkit/src/components/inputs/multi-select/multi-select-group/multi-select-group.vue b/packages/webkit/src/components/inputs/multi-select/multi-select-group/multi-select-group.vue
index 9e7a74575..f27834403 100644
--- a/packages/webkit/src/components/inputs/multi-select/multi-select-group/multi-select-group.vue
+++ b/packages/webkit/src/components/inputs/multi-select/multi-select-group/multi-select-group.vue
@@ -37,7 +37,7 @@
   >
     <div
       v-if="label"
-      class="flex items-center px-[var(--spacing-xs)] py-[var(--spacing-xxs)] text-overline-xs text-[var(--text-muted)] uppercase"
+      class="flex items-center px-(--spacing-xs) py-(--spacing-xxs) text-overline-xs text-(--text-muted) uppercase"
       :data-testid="`${testId}__label`"
     >
       {{ label }}
diff --git a/packages/webkit/src/components/inputs/multi-select/multi-select-option/multi-select-option.vue b/packages/webkit/src/components/inputs/multi-select/multi-select-option/multi-select-option.vue
index a2f79a066..5b8d15ce1 100644
--- a/packages/webkit/src/components/inputs/multi-select/multi-select-option/multi-select-option.vue
+++ b/packages/webkit/src/components/inputs/multi-select/multi-select-option/multi-select-option.vue
@@ -67,7 +67,7 @@
     :data-selected="selected || null"
     :data-disabled="disabled || null"
     :class="attrs.class"
-    class="flex h-8 cursor-pointer select-none items-center gap-[var(--spacing-xs)] rounded-[var(--shape-elements)] px-[var(--spacing-xs)] py-[var(--spacing-xxs)] text-label-sm text-[var(--text-default)] outline-none transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-[var(--bg-hover)] focus-visible:bg-[var(--bg-hover)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ring-color)] data-[selected]:bg-[var(--bg-selected)] data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
+    class="flex h-8 cursor-pointer select-none items-center gap-(--spacing-xs) rounded-(--shape-elements) px-(--spacing-xs) py-(--spacing-xxs) text-label-sm text-(--text-default) outline-none transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-(--bg-hover) focus-visible:bg-(--bg-hover) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ring-color) data-[selected]:bg-(--bg-selected) data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
     @click="onClick"
     @keydown="onKeydown"
   >
@@ -85,7 +85,7 @@
     />
     <i
       v-else-if="icon"
-      :class="[icon, 'flex shrink-0 items-center text-[var(--text-default)]']"
+      :class="[icon, 'flex shrink-0 items-center text-(--text-default)']"
       aria-hidden="true"
       :data-testid="`${testId}__icon`"
     />
diff --git a/packages/webkit/src/components/inputs/multi-select/multi-select-trigger/multi-select-trigger.vue b/packages/webkit/src/components/inputs/multi-select/multi-select-trigger/multi-select-trigger.vue
index bd2eddb82..8307c60ed 100644
--- a/packages/webkit/src/components/inputs/multi-select/multi-select-trigger/multi-select-trigger.vue
+++ b/packages/webkit/src/components/inputs/multi-select/multi-select-trigger/multi-select-trigger.vue
@@ -62,13 +62,13 @@
     :data-required="ctx.required.value || null"
     :data-filled="ctx.filled.value || null"
     :class="attrs.class"
-    class="group relative flex w-full items-center gap-[var(--spacing-xs)] overflow-hidden rounded-[var(--shape-elements)] border border-[var(--border-default)] bg-[var(--bg-surface)] px-[var(--spacing-sm)] text-label-sm text-[var(--text-default)] transition-colors duration-150 ease-out motion-reduce:transition-none hover:border-[var(--border-strong)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] data-[size=small]:h-7 data-[size=medium]:h-8 data-[size=large]:h-10 data-[invalid]:border-[var(--danger-border)] data-[invalid]:focus-visible:ring-[var(--danger)] data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--bg-disabled)] data-[disabled]:text-[var(--text-disabled)] data-[disabled]:hover:border-[var(--border-default)] data-[disabled]:focus-visible:ring-0 data-[disabled]:focus-visible:ring-offset-0 data-[readonly]:cursor-default"
+    class="group relative flex w-full items-center gap-(--spacing-xs) overflow-hidden rounded-(--shape-elements) border border-(--border-default) bg-(--bg-surface) px-(--spacing-sm) text-label-sm text-(--text-default) transition-colors duration-150 ease-out motion-reduce:transition-none hover:border-(--border-strong) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) data-[size=small]:h-7 data-[size=medium]:h-8 data-[size=large]:h-10 data-[invalid]:border-(--danger-border) data-[invalid]:focus-visible:ring-(--danger) data-[disabled]:cursor-not-allowed data-[disabled]:bg-(--bg-disabled) data-[disabled]:text-(--text-disabled) data-[disabled]:hover:border-(--border-default) data-[disabled]:focus-visible:ring-0 data-[disabled]:focus-visible:ring-offset-0 data-[readonly]:cursor-default"
     @click="onClick"
     @keydown="onKeydown"
   >
     <slot name="iconLeft" />
     <span
-      class="flex-1 truncate text-left data-[filled=false]:text-[var(--text-muted)] group-data-[disabled]:text-[var(--text-disabled)]"
+      class="flex-1 truncate text-left data-[filled=false]:text-(--text-muted) group-data-[disabled]:text-(--text-disabled)"
       :data-filled="ctx.filled.value"
       :data-testid="`${testId}__value`"
     >
@@ -76,7 +76,7 @@
       <template v-else>{{ ctx.placeholder.value }}</template>
     </span>
     <i
-      class="pi pi-chevron-down shrink-0 text-[var(--text-muted)] group-data-[disabled]:text-[var(--text-disabled)] transition-transform duration-150 ease-out motion-reduce:transition-none data-[state=open]:rotate-180"
+      class="pi pi-chevron-down shrink-0 text-(--text-muted) group-data-[disabled]:text-(--text-disabled) transition-transform duration-150 ease-out motion-reduce:transition-none data-[state=open]:rotate-180"
       :data-state="ctx.open.value ? 'open' : 'closed'"
       aria-hidden="true"
       :data-testid="`${testId}__chevron`"
diff --git a/packages/webkit/src/components/inputs/presets/interactive-states.js b/packages/webkit/src/components/inputs/presets/interactive-states.js
index d5bf4f110..8b0f6cde4 100644
--- a/packages/webkit/src/components/inputs/presets/interactive-states.js
+++ b/packages/webkit/src/components/inputs/presets/interactive-states.js
@@ -8,10 +8,10 @@
 /** Ghost overlay layers — hover on `::before`, active on `::after`. */
 export const ghostLayerClasses = [
   'before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit]',
-  "before:bg-[var(--bg-hover)] before:opacity-0 before:content-['']",
+  "before:bg-(--bg-hover) before:opacity-0 before:content-['']",
   'before:transition-opacity before:duration-fast-02 before:ease-productive-entrance',
   'after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit]',
-  "after:bg-[var(--bg-active)] after:opacity-0 after:content-['']",
+  "after:bg-(--bg-active) after:opacity-0 after:content-['']",
   'after:transition-opacity after:duration-fast-02 after:ease-productive-entrance',
   'hover:before:opacity-100 active:after:opacity-100',
   'motion-reduce:before:transition-none motion-reduce:after:transition-none'
@@ -41,28 +41,28 @@ export const focusSuppressHoverGhostClasses = [
 /** Focus ring on the element that receives keyboard focus. */
 export const focusVisibleRingClasses = [
   'focus-visible:outline-none',
-  'focus-visible:ring-2 focus-visible:ring-[var(--ring-color)]',
-  'focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-canvas)]'
+  'focus-visible:ring-2 focus-visible:ring-(--ring-color)',
+  'focus-visible:ring-offset-1 focus-visible:ring-offset-(--bg-canvas)'
 ]
 
 /** Focus ring when a descendant native control is focused (checkbox, radio). */
 export const hasFocusVisibleRingClasses = [
   'has-[:focus-visible]:outline-none',
-  'has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--ring-color)]',
-  'has-[:focus-visible]:ring-offset-1 has-[:focus-visible]:ring-offset-[var(--bg-canvas)]'
+  'has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-(--ring-color)',
+  'has-[:focus-visible]:ring-offset-1 has-[:focus-visible]:ring-offset-(--bg-canvas)'
 ]
 
 /** Focus ring for bordered surface wrappers (input-text, dropdown trigger). */
 export const focusWithinRingClasses = [
   'focus-within:outline-none',
-  'focus-within:ring-2 focus-within:ring-[var(--ring-color)]',
-  'focus-within:ring-offset-1 focus-within:ring-offset-[var(--bg-canvas)]'
+  'focus-within:ring-2 focus-within:ring-(--ring-color)',
+  'focus-within:ring-offset-1 focus-within:ring-offset-(--bg-canvas)'
 ]
 
 /** Bordered field shell with hover/active ghosts and focus-within ring. */
 export const surfaceControlWrapperClasses = [
   'relative inline-flex w-full items-center',
-  'rounded-[var(--shape-button)] border border-[var(--border-default)] bg-[var(--bg-surface)]',
+  'rounded-(--shape-button) border border-(--border-default) bg-(--bg-surface)',
   ...ghostLayerClasses,
   ...focusWithinRingClasses,
   ...focusSuppressHoverGhostClasses,
@@ -82,8 +82,8 @@ export const toggleControlClasses = [
 
 /** Selectable block card shell (field-*-block). */
 export const selectableBlockCardClasses = [
-  'relative rounded-[var(--shape-button)] border',
-  'bg-[var(--bg-surface)] border-[var(--border-muted)]',
+  'relative rounded-(--shape-button) border',
+  'bg-(--bg-surface) border-(--border-muted)',
   ...ghostLayerClasses,
   ...hasFocusVisibleRingClasses,
   ...focusSuppressHoverGhostClasses,
@@ -93,8 +93,8 @@ export const selectableBlockCardClasses = [
 
 /** Listbox / menu option row. */
 export const listOptionItemClasses = [
-  'relative flex w-full cursor-pointer items-center rounded-[var(--shape-button)]',
-  'px-[var(--spacing-xs)] py-[var(--spacing-xs)] text-left text-label-md',
+  'relative flex w-full cursor-pointer items-center rounded-(--shape-button)',
+  'px-(--spacing-xs) py-(--spacing-xs) text-left text-label-md',
   ...ghostLayerClasses,
   ...focusVisibleRingClasses,
   'focus-visible:before:opacity-100',
@@ -104,12 +104,12 @@ export const listOptionItemClasses = [
 /** Item row layout and kind/size tokens (wrapper or asChild target). */
 export const itemRowShellClasses = [
   'group/item relative flex w-full flex-wrap items-center',
-  'rounded-[var(--shape-button)] border border-transparent text-body-sm text-[var(--text-default)]',
-  'data-[kind=outline]:border-[var(--border-muted)] data-[kind=outline]:bg-[var(--bg-surface)]',
-  'data-[kind=muted]:bg-[var(--bg-hover)]',
+  'rounded-(--shape-button) border border-transparent text-body-sm text-(--text-default)',
+  'data-[kind=outline]:border-(--border-muted) data-[kind=outline]:bg-(--bg-surface)',
+  'data-[kind=muted]:bg-(--bg-hover)',
   // kind=inline needs no surface treatment (transparent, like default) and drops the outer padding below.
-  'data-[size=medium]:gap-[var(--spacing-md)] [&:not([data-kind=inline])]:data-[size=medium]:p-[var(--spacing-md)]',
-  'data-[size=small]:gap-[var(--spacing-xs)] [&:not([data-kind=inline])]:data-[size=small]:px-[var(--spacing-md)] [&:not([data-kind=inline])]:data-[size=small]:py-[var(--spacing-sm)]'
+  'data-[size=medium]:gap-(--spacing-md) [&:not([data-kind=inline])]:data-[size=medium]:p-(--spacing-md)',
+  'data-[size=small]:gap-(--spacing-xs) [&:not([data-kind=inline])]:data-[size=small]:px-(--spacing-md) [&:not([data-kind=inline])]:data-[size=small]:py-(--spacing-sm)'
 ]
 
 /** Item shell only — no row-level hover/focus; slotted Button/link own interaction. */
diff --git a/packages/webkit/src/components/inputs/radio-button/radio-button.vue b/packages/webkit/src/components/inputs/radio-button/radio-button.vue
index f5cbfb1e2..534443b32 100644
--- a/packages/webkit/src/components/inputs/radio-button/radio-button.vue
+++ b/packages/webkit/src/components/inputs/radio-button/radio-button.vue
@@ -61,18 +61,18 @@
 
   const sharedClasses = [
     ...toggleControlClasses,
-    'group size-5 rounded-full border border-[var(--border-default)] bg-[var(--bg-surface)]',
-    '[&:not([data-checked])]:hover:border-[var(--primary)] [&:not([data-checked])]:hover:before:opacity-0'
+    'group size-5 rounded-full border border-(--border-default) bg-(--bg-surface)',
+    '[&:not([data-checked])]:hover:border-(--primary) [&:not([data-checked])]:hover:before:opacity-0'
   ]
 
   const checkedClasses =
-    'data-[checked]:border-[var(--primary)] data-[checked]:bg-[var(--primary)] data-[checked]:after:hidden'
+    'data-[checked]:border-(--primary) data-[checked]:bg-(--primary) data-[checked]:after:hidden'
 
   const disabledClasses =
-    'data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--border-default)] data-[disabled]:bg-[var(--bg-disabled)] data-[disabled]:opacity-50 data-[checked]:data-[disabled]:border-[var(--border-default)] data-[checked]:data-[disabled]:bg-[var(--bg-disabled)]'
+    'data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:border-(--border-default) data-[disabled]:bg-(--bg-disabled) data-[disabled]:opacity-50 data-[checked]:data-[disabled]:border-(--border-default) data-[checked]:data-[disabled]:bg-(--bg-disabled)'
 
   const indicatorClasses =
-    'pointer-events-none absolute left-1/2 top-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-[var(--primary-contrast)] group-data-[disabled]:bg-[var(--text-disabled)]'
+    'pointer-events-none absolute left-1/2 top-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-(--primary-contrast) group-data-[disabled]:bg-(--text-disabled)'
 
   const rootClasses = computed(() =>
     cn(sharedClasses, checkedClasses, disabledClasses, attrs.class)
diff --git a/packages/webkit/src/components/inputs/select/select-content/select-content.vue b/packages/webkit/src/components/inputs/select/select-content/select-content.vue
index f054659de..805a6e3c5 100644
--- a/packages/webkit/src/components/inputs/select/select-content/select-content.vue
+++ b/packages/webkit/src/components/inputs/select/select-content/select-content.vue
@@ -148,25 +148,25 @@
         :data-mode="ctx.multiple.value ? 'multiple' : 'single'"
         :class="attrs.class"
         :style="positionStyle"
-        class="fixed z-[var(--z-input-overlay)] flex max-h-[20rem] flex-col overflow-hidden rounded-[var(--shape-elements)] border border-[var(--border-default)] bg-[var(--bg-surface-raised)] shadow-[var(--shadow-xs)]"
+        class="fixed z-(--z-input-overlay) flex max-h-[20rem] flex-col overflow-hidden rounded-(--shape-elements) border border-(--border-default) bg-(--bg-surface-raised) shadow-(--shadow-xs)"
         @keydown="onKeydown"
       >
         <div
           v-if="$slots['search']"
-          class="flex shrink-0 items-center justify-center p-[var(--spacing-xxs)]"
+          class="flex shrink-0 items-center justify-center p-(--spacing-xxs)"
           :data-testid="`${testId}__search`"
         >
           <slot name="search" />
         </div>
         <ScrollArea
-          class="flex max-h-60 flex-col items-stretch p-[var(--spacing-xxs)]"
+          class="flex max-h-60 flex-col items-stretch p-(--spacing-xxs)"
           :data-testid="`${testId}__list`"
         >
           <slot />
         </ScrollArea>
         <div
           v-if="$slots['footer']"
-          class="flex shrink-0 items-center justify-center p-[var(--spacing-xxs)]"
+          class="flex shrink-0 items-center justify-center p-(--spacing-xxs)"
           :data-testid="`${testId}__footer`"
         >
           <slot name="footer" />
diff --git a/packages/webkit/src/components/inputs/select/select-group/select-group.vue b/packages/webkit/src/components/inputs/select/select-group/select-group.vue
index 2f7d1dcaa..e7fc47622 100644
--- a/packages/webkit/src/components/inputs/select/select-group/select-group.vue
+++ b/packages/webkit/src/components/inputs/select/select-group/select-group.vue
@@ -35,7 +35,7 @@
   >
     <div
       v-if="label"
-      class="flex items-center px-[var(--spacing-xs)] py-[var(--spacing-xxs)] text-overline-xs text-[var(--text-muted)] uppercase"
+      class="flex items-center px-(--spacing-xs) py-(--spacing-xxs) text-overline-xs text-(--text-muted) uppercase"
       :data-testid="`${testId}__label`"
     >
       {{ label }}
diff --git a/packages/webkit/src/components/inputs/select/select-option/select-option.vue b/packages/webkit/src/components/inputs/select/select-option/select-option.vue
index a2cccc917..d39f2b11e 100644
--- a/packages/webkit/src/components/inputs/select/select-option/select-option.vue
+++ b/packages/webkit/src/components/inputs/select/select-option/select-option.vue
@@ -65,7 +65,7 @@
     :data-disabled="disabled || null"
     :data-mode="ctx.multiple.value ? 'multiple' : 'single'"
     :class="attrs.class"
-    class="flex h-8 cursor-pointer select-none items-center gap-[var(--spacing-xs)] rounded-[var(--shape-elements)] px-[var(--spacing-xs)] py-[var(--spacing-xxs)] text-label-sm text-[var(--text-default)] outline-none transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-[var(--bg-hover)] focus-visible:bg-[var(--bg-hover)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ring-color)] data-[selected]:bg-[var(--bg-selected)] data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
+    class="flex h-8 cursor-pointer select-none items-center gap-(--spacing-xs) rounded-(--shape-elements) px-(--spacing-xs) py-(--spacing-xxs) text-label-sm text-(--text-default) outline-none transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-(--bg-hover) focus-visible:bg-(--bg-hover) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ring-color) data-[selected]:bg-(--bg-selected) data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
     @click="onClick"
     @keydown="onKeydown"
   >
@@ -75,7 +75,7 @@
     />
     <i
       v-else-if="icon"
-      :class="[icon, 'flex shrink-0 items-center text-[var(--text-default)]']"
+      :class="[icon, 'flex shrink-0 items-center text-(--text-default)']"
       aria-hidden="true"
       :data-testid="`${testId}__icon`"
     />
@@ -88,7 +88,7 @@
     />
     <i
       v-if="selected"
-      class="pi pi-check shrink-0 text-[var(--text-default)]"
+      class="pi pi-check shrink-0 text-(--text-default)"
       aria-hidden="true"
       :data-testid="`${testId}__check`"
     />
diff --git a/packages/webkit/src/components/inputs/select/select-trigger/select-trigger.vue b/packages/webkit/src/components/inputs/select/select-trigger/select-trigger.vue
index 7873caf1b..19757cdbc 100644
--- a/packages/webkit/src/components/inputs/select/select-trigger/select-trigger.vue
+++ b/packages/webkit/src/components/inputs/select/select-trigger/select-trigger.vue
@@ -60,13 +60,13 @@
     :data-required="ctx.required.value || null"
     :data-filled="ctx.filled.value || null"
     :class="attrs.class"
-    class="group relative flex w-full items-center gap-[var(--spacing-xs)] overflow-hidden rounded-[var(--shape-elements)] border border-[var(--border-default)] bg-[var(--bg-surface)] px-[var(--spacing-sm)] text-label-sm text-[var(--text-default)] transition-colors duration-150 ease-out motion-reduce:transition-none hover:border-[var(--border-strong)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] data-[size=small]:h-7 data-[size=medium]:h-8 data-[size=large]:h-10 data-[invalid]:border-[var(--danger-border)] data-[invalid]:focus-visible:ring-[var(--danger)] data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--bg-disabled)] data-[disabled]:text-[var(--text-disabled)] data-[disabled]:hover:border-[var(--border-default)] data-[disabled]:focus-visible:ring-0 data-[disabled]:focus-visible:ring-offset-0 data-[readonly]:cursor-default"
+    class="group relative flex w-full items-center gap-(--spacing-xs) overflow-hidden rounded-(--shape-elements) border border-(--border-default) bg-(--bg-surface) px-(--spacing-sm) text-label-sm text-(--text-default) transition-colors duration-150 ease-out motion-reduce:transition-none hover:border-(--border-strong) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) data-[size=small]:h-7 data-[size=medium]:h-8 data-[size=large]:h-10 data-[invalid]:border-(--danger-border) data-[invalid]:focus-visible:ring-(--danger) data-[disabled]:cursor-not-allowed data-[disabled]:bg-(--bg-disabled) data-[disabled]:text-(--text-disabled) data-[disabled]:hover:border-(--border-default) data-[disabled]:focus-visible:ring-0 data-[disabled]:focus-visible:ring-offset-0 data-[readonly]:cursor-default"
     @click="onClick"
     @keydown="onKeydown"
   >
     <slot name="iconLeft" />
     <span
-      class="flex-1 truncate text-left data-[filled=false]:text-[var(--text-muted)] group-data-[disabled]:text-[var(--text-disabled)]"
+      class="flex-1 truncate text-left data-[filled=false]:text-(--text-muted) group-data-[disabled]:text-(--text-disabled)"
       :data-filled="ctx.filled.value"
       :data-testid="`${testId}__value`"
     >
@@ -74,7 +74,7 @@
       <template v-else>{{ ctx.placeholder.value }}</template>
     </span>
     <i
-      class="pi pi-chevron-down shrink-0 text-[var(--text-muted)] group-data-[disabled]:text-[var(--text-disabled)] transition-transform duration-150 ease-out motion-reduce:transition-none data-[state=open]:rotate-180"
+      class="pi pi-chevron-down shrink-0 text-(--text-muted) group-data-[disabled]:text-(--text-disabled) transition-transform duration-150 ease-out motion-reduce:transition-none data-[state=open]:rotate-180"
       :data-state="ctx.open.value ? 'open' : 'closed'"
       aria-hidden="true"
       :data-testid="`${testId}__chevron`"
diff --git a/packages/webkit/src/components/inputs/select/select.test.ts b/packages/webkit/src/components/inputs/select/select.test.ts
index 4c991fffa..4fab339a8 100644
--- a/packages/webkit/src/components/inputs/select/select.test.ts
+++ b/packages/webkit/src/components/inputs/select/select.test.ts
@@ -385,7 +385,7 @@ describe('Select (compound / overlay)', () => {
   })
 
   // ---- Focus ring: arrow-key navigation focuses the option (ENG-46730) -----
-  // Options carry `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)]`
+  // Options carry `focus-visible:ring-2 focus-visible:ring-(--ring-color)`
   // and `tabindex="-1"`, so the ring shows when the keyboard handler moves
   // focus to the option via `.focus()`. This regression test asserts the
   // handler actually moves DOM focus, which is the missing link when the ring
diff --git a/packages/webkit/src/components/inputs/switch/switch.vue b/packages/webkit/src/components/inputs/switch/switch.vue
index 617ce5c7c..a6bd9bd91 100644
--- a/packages/webkit/src/components/inputs/switch/switch.vue
+++ b/packages/webkit/src/components/inputs/switch/switch.vue
@@ -65,14 +65,14 @@
   }
 
   const ROOT_CLASS =
-    'group relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-[var(--shape-elements)] border border-[var(--border-default)] bg-[var(--bg-surface)] px-0.5 transition-colors duration-150 ease-out motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] data-[focused]:ring-2 data-[focused]:ring-[var(--ring-color)] data-[focused]:ring-offset-2 data-[focused]:ring-offset-[var(--bg-canvas)] hover:shadow-[inset_0_0_0_999px_var(--bg-hover)] data-[checked]:border-transparent data-[checked]:bg-[var(--accent)]'
+    'group relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-(--shape-elements) border border-(--border-default) bg-(--bg-surface) px-0.5 transition-colors duration-150 ease-out motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) data-[focused]:ring-2 data-[focused]:ring-(--ring-color) data-[focused]:ring-offset-2 data-[focused]:ring-offset-(--bg-canvas) hover:shadow-[inset_0_0_0_999px_var(--bg-hover)] data-[checked]:border-transparent data-[checked]:bg-(--accent)'
 
   const HANDLE_CLASS =
-    'pointer-events-none relative inline-flex h-4 w-4 items-center justify-center rounded-[var(--radius)] bg-[var(--text-muted)] transition-transform duration-150 ease-out motion-reduce:transition-none motion-reduce:transform-none group-data-[checked]:translate-x-4 group-data-[checked]:bg-[var(--color-base-white)]'
+    'pointer-events-none relative inline-flex h-4 w-4 items-center justify-center rounded-(--radius) bg-(--text-muted) transition-transform duration-150 ease-out motion-reduce:transition-none motion-reduce:transform-none group-data-[checked]:translate-x-4 group-data-[checked]:bg-(--color-base-white)'
 
   const LOCK_ICON_CLASS = 'pi text-body-xxs leading-none'
-  const LOCK_OFF_CLASS = `${LOCK_ICON_CLASS} pi-lock text-[var(--bg-surface)]`
-  const LOCK_ON_CLASS = `${LOCK_ICON_CLASS} pi-lock-open text-[var(--color-base-black)]`
+  const LOCK_OFF_CLASS = `${LOCK_ICON_CLASS} pi-lock text-(--bg-surface)`
+  const LOCK_ON_CLASS = `${LOCK_ICON_CLASS} pi-lock-open text-(--color-base-black)`
 
   const rootClass = computed(() => cn(ROOT_CLASS, attrs.class as string | undefined))
 </script>
diff --git a/packages/webkit/src/components/inputs/textarea/textarea.vue b/packages/webkit/src/components/inputs/textarea/textarea.vue
index 3fcab539e..f0382fe3a 100644
--- a/packages/webkit/src/components/inputs/textarea/textarea.vue
+++ b/packages/webkit/src/components/inputs/textarea/textarea.vue
@@ -83,16 +83,16 @@
     :data-resize="resizable"
     :class="[
       'relative block min-w-0 min-h-[80px]',
-      'px-[var(--spacing-sm)] py-[var(--spacing-sm)]',
-      'rounded-[var(--shape-elements)]',
-      'border border-[var(--border-default)] bg-[var(--bg-surface)] text-body-xs text-[var(--text-default)]',
-      'placeholder:text-[var(--text-muted)]',
+      'px-(--spacing-sm) py-(--spacing-sm)',
+      'rounded-(--shape-elements)',
+      'border border-(--border-default) bg-(--bg-surface) text-body-xs text-(--text-default)',
+      'placeholder:text-(--text-muted)',
       'transition-colors duration-150 ease-out motion-reduce:transition-none',
-      '[&:not(:focus):not([data-disabled])]:hover:border-[var(--border-strong)]',
-      'focus:outline-none focus-visible:outline-none focus:ring-2 focus:ring-[var(--ring-color)] focus:ring-offset-2 focus:ring-offset-[var(--bg-canvas)]',
-      'data-[invalid]:border-[var(--danger-border)]',
-      'data-[required]:border-[var(--warning-border)]',
-      'data-[disabled]:bg-[var(--bg-disabled)] data-[disabled]:text-[var(--text-disabled)] data-[disabled]:placeholder:text-[var(--text-disabled)] data-[disabled]:cursor-not-allowed data-[disabled]:hover:border-[var(--border-default)] data-[disabled]:focus:ring-0 data-[disabled]:focus:ring-offset-0',
+      '[&:not(:focus):not([data-disabled])]:hover:border-(--border-strong)',
+      'focus:outline-none focus-visible:outline-none focus:ring-2 focus:ring-(--ring-color) focus:ring-offset-2 focus:ring-offset-(--bg-canvas)',
+      'data-[invalid]:border-(--danger-border)',
+      'data-[required]:border-(--warning-border)',
+      'data-[disabled]:bg-(--bg-disabled) data-[disabled]:text-(--text-disabled) data-[disabled]:placeholder:text-(--text-disabled) data-[disabled]:cursor-not-allowed data-[disabled]:hover:border-(--border-default) data-[disabled]:focus:ring-0 data-[disabled]:focus:ring-offset-0',
       'data-[readonly]:cursor-default',
       'data-[resize=vertical]:resize-y data-[resize=horizontal]:resize-x data-[resize=both]:resize data-[resize=none]:resize-none',
       attrs.class
diff --git a/packages/webkit/src/components/inputs/theme-switcher/theme-switcher.vue b/packages/webkit/src/components/inputs/theme-switcher/theme-switcher.vue
index fbdc682c3..6b49dd819 100644
--- a/packages/webkit/src/components/inputs/theme-switcher/theme-switcher.vue
+++ b/packages/webkit/src/components/inputs/theme-switcher/theme-switcher.vue
@@ -147,10 +147,10 @@
   watch(() => props.value, scheduleIndicatorSync)
 
   const ROOT_CLASS =
-    'relative inline-flex h-7 w-fit items-center gap-[var(--spacing-xxs)] p-[var(--spacing-xxs)] rounded-full border-solid border-[length:var(--border-width-default)] border-[var(--border-default)] bg-[var(--bg-surface)]'
+    'relative inline-flex h-7 w-fit items-center gap-(--spacing-xxs) p-(--spacing-xxs) rounded-full border-solid border-(length:--border-width-default) border-(--border-default) bg-(--bg-surface)'
 
   const SEGMENT_CLASS =
-    'relative z-[var(--z-input-field)] inline-flex h-5 w-7 shrink-0 items-center justify-center rounded-full cursor-pointer text-label-sm text-[var(--text-default)] transition-colors duration-fast-02 ease-productive-entrance motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] [&:not([data-state=active])]:hover:bg-[var(--bg-hover)] disabled:cursor-not-allowed disabled:text-[var(--text-disabled)]'
+    'relative z-(--z-input-field) inline-flex h-5 w-7 shrink-0 items-center justify-center rounded-full cursor-pointer text-label-sm text-(--text-default) transition-colors duration-fast-02 ease-productive-entrance motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) [&:not([data-state=active])]:hover:bg-(--bg-hover) disabled:cursor-not-allowed disabled:text-(--text-disabled)'
 </script>
 
 <template>
@@ -169,7 +169,7 @@
       aria-hidden="true"
       :data-testid="`${testId}__indicator`"
       :style="{ transform: `translate3d(${indicatorOffsetX}px, ${indicatorOffsetY}px, 0)` }"
-      class="pointer-events-none absolute left-0 top-0 z-0 h-5 w-7 rounded-full bg-[var(--bg-selected)] transition-transform duration-moderate-02 ease-productive-entrance motion-reduce:transition-none"
+      class="pointer-events-none absolute left-0 top-0 z-0 h-5 w-7 rounded-full bg-(--bg-selected) transition-transform duration-moderate-02 ease-productive-entrance motion-reduce:transition-none"
     />
     <Tooltip
       v-for="(mode, index) in MODES"
diff --git a/packages/webkit/src/components/layout/divider/divider.vue b/packages/webkit/src/components/layout/divider/divider.vue
index b94bcc3e5..972926227 100644
--- a/packages/webkit/src/components/layout/divider/divider.vue
+++ b/packages/webkit/src/components/layout/divider/divider.vue
@@ -40,7 +40,7 @@
     :data-testid="testId"
     :data-orientation="orientation"
     :data-labelled="hasContent || null"
-    class="flex shrink-0 items-center justify-center text-overline-sm text-[var(--text-muted)] data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:h-full data-[orientation=vertical]:flex-col data-[labelled]:gap-[var(--spacing-xs)] before:content-[''] before:flex-1 before:self-center before:border-[var(--border-default)] after:content-[''] after:flex-1 after:self-center after:border-[var(--border-default)] data-[orientation=horizontal]:before:border-t data-[orientation=horizontal]:after:border-t data-[orientation=vertical]:before:border-l data-[orientation=vertical]:after:border-l"
+    class="flex shrink-0 items-center justify-center text-overline-sm text-(--text-muted) data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:h-full data-[orientation=vertical]:flex-col data-[labelled]:gap-(--spacing-xs) before:content-[''] before:flex-1 before:self-center before:border-(--border-default) after:content-[''] after:flex-1 after:self-center after:border-(--border-default) data-[orientation=horizontal]:before:border-t data-[orientation=horizontal]:after:border-t data-[orientation=vertical]:before:border-l data-[orientation=vertical]:after:border-l"
   >
     <span
       v-if="hasContent"
diff --git a/packages/webkit/src/components/layout/global-header/global-header-container.vue b/packages/webkit/src/components/layout/global-header/global-header-container.vue
index a120614d2..f78fb219c 100644
--- a/packages/webkit/src/components/layout/global-header/global-header-container.vue
+++ b/packages/webkit/src/components/layout/global-header/global-header-container.vue
@@ -26,7 +26,7 @@
   <div
     v-bind="$attrs"
     :data-testid="testId"
-    class="flex min-w-0 shrink-0 items-center gap-[var(--spacing-md)]"
+    class="flex min-w-0 shrink-0 items-center gap-(--spacing-md)"
   >
     <slot />
   </div>
diff --git a/packages/webkit/src/components/layout/global-header/global-header-left.vue b/packages/webkit/src/components/layout/global-header/global-header-left.vue
index a5948d90c..ac15e2b95 100644
--- a/packages/webkit/src/components/layout/global-header/global-header-left.vue
+++ b/packages/webkit/src/components/layout/global-header/global-header-left.vue
@@ -26,7 +26,7 @@
   <div
     v-bind="$attrs"
     :data-testid="testId"
-    class="flex min-w-0 shrink items-center justify-end gap-[var(--spacing-xs)]"
+    class="flex min-w-0 shrink items-center justify-end gap-(--spacing-xs)"
   >
     <slot />
   </div>
diff --git a/packages/webkit/src/components/layout/global-header/global-header-right.vue b/packages/webkit/src/components/layout/global-header/global-header-right.vue
index 5f1598578..6c5408d5a 100644
--- a/packages/webkit/src/components/layout/global-header/global-header-right.vue
+++ b/packages/webkit/src/components/layout/global-header/global-header-right.vue
@@ -26,7 +26,7 @@
   <div
     v-bind="$attrs"
     :data-testid="testId"
-    class="flex shrink-0 items-center justify-end gap-[var(--spacing-sm)]"
+    class="flex shrink-0 items-center justify-end gap-(--spacing-sm)"
   >
     <slot />
   </div>
diff --git a/packages/webkit/src/components/layout/global-header/global-header.vue b/packages/webkit/src/components/layout/global-header/global-header.vue
index 175d71a4e..b9c5a79d1 100644
--- a/packages/webkit/src/components/layout/global-header/global-header.vue
+++ b/packages/webkit/src/components/layout/global-header/global-header.vue
@@ -38,7 +38,7 @@
     role="banner"
     :aria-label="ariaLabel"
     :data-testid="testId"
-    class="flex h-14 w-full min-w-0 shrink-0 items-center gap-[var(--spacing-md)] border-b border-[var(--border-default)] bg-[var(--bg-surface)] px-[var(--spacing-md)]"
+    class="flex h-14 w-full min-w-0 shrink-0 items-center gap-(--spacing-md) border-b border-(--border-default) bg-(--bg-surface) px-(--spacing-md)"
   >
     <slot />
   </header>
diff --git a/packages/webkit/src/components/layout/scroll-area/scroll-area.vue b/packages/webkit/src/components/layout/scroll-area/scroll-area.vue
index ab3913721..ea742915c 100644
--- a/packages/webkit/src/components/layout/scroll-area/scroll-area.vue
+++ b/packages/webkit/src/components/layout/scroll-area/scroll-area.vue
@@ -50,7 +50,7 @@
       'relative min-h-0 min-w-0 overscroll-contain',
       '[scrollbar-width:thin] [scrollbar-color:var(--border-muted)_transparent]',
       overflowClasses[props.orientation],
-      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--border-default)]',
+      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-(--ring-color) focus-visible:ring-offset-1 focus-visible:ring-offset-(--border-default)',
       'motion-reduce:scroll-auto',
       attrs.class
     )
diff --git a/packages/webkit/src/components/layout/sidebar/sidebar-footer.vue b/packages/webkit/src/components/layout/sidebar/sidebar-footer.vue
index de2842c3d..99546b078 100644
--- a/packages/webkit/src/components/layout/sidebar/sidebar-footer.vue
+++ b/packages/webkit/src/components/layout/sidebar/sidebar-footer.vue
@@ -23,7 +23,7 @@
   )
 
   const rootClasses = computed(() =>
-    cn('w-full shrink-0 border-t border-[var(--border-muted)] pt-[var(--spacing-md)]', attrs.class)
+    cn('w-full shrink-0 border-t border-(--border-muted) pt-(--spacing-md)', attrs.class)
   )
 </script>
 
diff --git a/packages/webkit/src/components/layout/sidebar/sidebar.vue b/packages/webkit/src/components/layout/sidebar/sidebar.vue
index 3dd265ad8..0356eb801 100644
--- a/packages/webkit/src/components/layout/sidebar/sidebar.vue
+++ b/packages/webkit/src/components/layout/sidebar/sidebar.vue
@@ -37,7 +37,7 @@
   const rootClasses = computed(() =>
     cn(
       'flex h-full min-h-0 w-full min-w-0 flex-col',
-      'border-r border-[var(--border-muted)] bg-[var(--bg-surface)]',
+      'border-r border-(--border-muted) bg-(--bg-surface)',
       attrs.class
     )
   )
@@ -45,13 +45,13 @@
   const navClasses =
     'flex h-full min-h-0 flex-1 flex-col [--menu-item-ring-offset:var(--bg-surface)]'
 
-  const headerRegionClasses = 'w-full shrink-0 p-[var(--spacing-md)]'
+  const headerRegionClasses = 'w-full shrink-0 p-(--spacing-md)'
 
-  const footerRegionClasses = 'w-full shrink-0 px-[var(--spacing-md)] pb-[var(--spacing-md)]'
+  const footerRegionClasses = 'w-full shrink-0 px-(--spacing-md) pb-(--spacing-md)'
 
   const scrollClasses = computed(() =>
     cn(
-      'flex min-h-0 flex-1 flex-col gap-[var(--spacing-md)] p-[var(--spacing-md)]',
+      'flex min-h-0 flex-1 flex-col gap-(--spacing-md) p-(--spacing-md)',
       slots['header'] ? 'pt-0' : undefined
     )
   )
diff --git a/packages/webkit/src/components/navigation/breadcrumb-item/breadcrumb-item.vue b/packages/webkit/src/components/navigation/breadcrumb-item/breadcrumb-item.vue
index 96f34cedd..da2ac0474 100644
--- a/packages/webkit/src/components/navigation/breadcrumb-item/breadcrumb-item.vue
+++ b/packages/webkit/src/components/navigation/breadcrumb-item/breadcrumb-item.vue
@@ -74,15 +74,15 @@
       cn(
         [
           'group/breadcrumb-item relative inline-flex min-h-6 shrink-0 items-center justify-center',
-          'gap-[var(--spacing-xs)] rounded-[var(--shape-button)] px-[var(--spacing-xs)] py-[var(--spacing-xxs)]',
+          'gap-(--spacing-xs) rounded-(--shape-button) px-(--spacing-xs) py-(--spacing-xxs)',
           'text-label-md transition-colors duration-fast-02 ease-productive-entrance motion-reduce:transition-none',
-          'text-[var(--text-muted)] hover:text-[var(--text-default)]',
-          'aria-[current=page]:text-[var(--text-default)] aria-[current=page]:hover:text-[var(--text-default)]',
-          'data-[current=true]:text-[var(--text-default)] data-[current=true]:hover:text-[var(--text-default)]',
-          'data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:text-[var(--text-disabled)]',
+          'text-(--text-muted) hover:text-(--text-default)',
+          'aria-[current=page]:text-(--text-default) aria-[current=page]:hover:text-(--text-default)',
+          'data-[current=true]:text-(--text-default) data-[current=true]:hover:text-(--text-default)',
+          'data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:text-(--text-disabled)',
           ...ghostLayerClasses,
           ...focusVisibleRingClasses,
-          'focus-visible:bg-[var(--bg-mask)] focus-visible:border focus-visible:border-[var(--border-default)]'
+          'focus-visible:bg-(--bg-mask) focus-visible:border focus-visible:border-(--border-default)'
         ],
         attrs.class as string | undefined
       )
@@ -98,12 +98,12 @@
     <i
       v-if="showIcon"
       :class="icon"
-      class="relative z-[1] size-[0.875rem] shrink-0 text-[length:inherit] leading-none"
+      class="relative z-1 size-[0.875rem] shrink-0 text-[length:inherit] leading-none"
       aria-hidden="true"
       :data-testid="`${testId}__icon`"
     />
     <span
-      class="relative z-[1] whitespace-nowrap"
+      class="relative z-1 whitespace-nowrap"
       :data-testid="`${testId}__label`"
     >
       {{ label }}
diff --git a/packages/webkit/src/components/navigation/breadcrumb/breadcrumb-list.vue b/packages/webkit/src/components/navigation/breadcrumb/breadcrumb-list.vue
index 13ea13376..75e2a3573 100644
--- a/packages/webkit/src/components/navigation/breadcrumb/breadcrumb-list.vue
+++ b/packages/webkit/src/components/navigation/breadcrumb/breadcrumb-list.vue
@@ -24,7 +24,7 @@
     v-bind="attrs"
     :class="
       cn(
-        'flex flex-wrap items-center gap-[var(--spacing-xxs)] rounded-[var(--shape-button)]',
+        'flex flex-wrap items-center gap-(--spacing-xxs) rounded-(--shape-button)',
         attrs.class as string | undefined
       )
     "
diff --git a/packages/webkit/src/components/navigation/breadcrumb/breadcrumb-separator.vue b/packages/webkit/src/components/navigation/breadcrumb/breadcrumb-separator.vue
index 3d8976b3b..81f6269b0 100644
--- a/packages/webkit/src/components/navigation/breadcrumb/breadcrumb-separator.vue
+++ b/packages/webkit/src/components/navigation/breadcrumb/breadcrumb-separator.vue
@@ -25,7 +25,7 @@
     aria-hidden="true"
     :class="
       cn(
-        'inline-flex shrink-0 items-center text-[var(--text-muted)]',
+        'inline-flex shrink-0 items-center text-(--text-muted)',
         attrs.class as string | undefined
       )
     "
diff --git a/packages/webkit/src/components/navigation/breadcrumb/breadcrumb.vue b/packages/webkit/src/components/navigation/breadcrumb/breadcrumb.vue
index 695660746..0966fee84 100644
--- a/packages/webkit/src/components/navigation/breadcrumb/breadcrumb.vue
+++ b/packages/webkit/src/components/navigation/breadcrumb/breadcrumb.vue
@@ -110,7 +110,7 @@
                 :current="item.current"
                 :show-icon="item.showIcon"
                 :icon="item.icon"
-                :class="item.current ? 'text-[var(--text-default)]' : undefined"
+                :class="item.current ? 'text-(--text-default)' : undefined"
                 :data-testid="`${testId}__item-${index}`"
                 @click="(event) => !item.current && handleItemClick(event, item.href ?? '#')"
               />
@@ -135,7 +135,7 @@
               :show-icon="firstItem.showIcon"
               :icon="firstItem.icon"
               :class="
-                firstItem.current && !showDistinctEnds ? 'text-[var(--text-default)]' : undefined
+                firstItem.current && !showDistinctEnds ? 'text-(--text-default)' : undefined
               "
               :data-testid="`${testId}__item-0`"
               @click="
@@ -159,7 +159,7 @@
                 <Dropdown.Trigger
                   aria-label="Show pages in between"
                   :data-testid="`${testId}__overflow-trigger`"
-                  class="h-7 min-w-7 items-center justify-center rounded-[var(--shape-button)] px-1 text-button-md text-[var(--text-default)] transition-colors duration-fast-02 ease-productive-entrance hover:bg-[var(--bg-mask)] active:bg-[var(--bg-active)] motion-reduce:transition-none"
+                  class="h-7 min-w-7 items-center justify-center rounded-(--shape-button) px-1 text-button-md text-(--text-default) transition-colors duration-fast-02 ease-productive-entrance hover:bg-(--bg-mask) active:bg-(--bg-active) motion-reduce:transition-none"
                 >
                   <i
                     class="pi pi-ellipsis-h leading-none"
@@ -200,7 +200,7 @@
                 :current="lastItem.current"
                 :show-icon="lastItem.showIcon"
                 :icon="lastItem.icon"
-                class="text-[var(--text-default)]"
+                class="text-(--text-default)"
                 :data-testid="`${testId}__item-last`"
                 @click="
                   (event) => !lastItem.current && handleItemClick(event, lastItem.href ?? '#')
diff --git a/packages/webkit/src/components/navigation/dropdown/dropdown-group/dropdown-group.vue b/packages/webkit/src/components/navigation/dropdown/dropdown-group/dropdown-group.vue
index dfb437cda..18713fa21 100644
--- a/packages/webkit/src/components/navigation/dropdown/dropdown-group/dropdown-group.vue
+++ b/packages/webkit/src/components/navigation/dropdown/dropdown-group/dropdown-group.vue
@@ -49,13 +49,13 @@
       :aria-labelledby="hasLabel ? labelId : undefined"
       :data-testid="testId"
       :data-first="groupIndex === 0 || null"
-      class="flex flex-col [&:not([data-first])]:border-t [&:not([data-first])]:border-[var(--border-default)]"
+      class="flex flex-col [&:not([data-first])]:border-t [&:not([data-first])]:border-(--border-default)"
     >
       <div
         v-if="hasLabel"
         :id="labelId"
         :data-testid="`${testId}__label`"
-        class="px-[var(--spacing-sm)] py-[var(--spacing-xxs)] text-overline-sm uppercase text-[var(--text-muted)]"
+        class="px-(--spacing-sm) py-(--spacing-xxs) text-overline-sm uppercase text-(--text-muted)"
       >
         {{ label }}
       </div>
@@ -63,7 +63,7 @@
       <div
         v-if="$slots['top']"
         :data-testid="`${testId}__top`"
-        class="px-[var(--spacing-sm)] py-[var(--spacing-xxs)]"
+        class="px-(--spacing-sm) py-(--spacing-xxs)"
       >
         <slot name="top" />
       </div>
@@ -73,7 +73,7 @@
       <div
         v-if="$slots['bottom']"
         :data-testid="`${testId}__bottom`"
-        class="px-[var(--spacing-sm)] py-[var(--spacing-xxs)]"
+        class="px-(--spacing-sm) py-(--spacing-xxs)"
       >
         <slot name="bottom" />
       </div>
diff --git a/packages/webkit/src/components/navigation/dropdown/dropdown-option/dropdown-option.vue b/packages/webkit/src/components/navigation/dropdown/dropdown-option/dropdown-option.vue
index 7d6cffcc2..8cd027b9e 100644
--- a/packages/webkit/src/components/navigation/dropdown/dropdown-option/dropdown-option.vue
+++ b/packages/webkit/src/components/navigation/dropdown/dropdown-option/dropdown-option.vue
@@ -92,7 +92,7 @@
     :data-testid="testId"
     :data-selected="selected || null"
     :data-disabled="disabled || null"
-    class="flex h-8 min-h-8 cursor-pointer select-none items-center gap-[var(--spacing-xs)] rounded-[var(--shape-button)] px-[var(--spacing-sm)] py-[var(--spacing-xxs)] text-label-sm text-[var(--text-default)] outline-none transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-[var(--bg-hover)] focus-visible:bg-[var(--bg-hover)] focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] data-[selected]:bg-[var(--bg-selected)] data-[disabled]:cursor-not-allowed data-[disabled]:text-[var(--text-disabled)]"
+    class="flex h-8 min-h-8 cursor-pointer select-none items-center gap-(--spacing-xs) rounded-(--shape-button) px-(--spacing-sm) py-(--spacing-xxs) text-label-sm text-(--text-default) outline-none transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-(--bg-hover) focus-visible:bg-(--bg-hover) focus-visible:ring-2 focus-visible:ring-(--ring-color) data-[selected]:bg-(--bg-selected) data-[disabled]:cursor-not-allowed data-[disabled]:text-(--text-disabled)"
     @click="onClick"
     @keydown="onKeydown"
   >
@@ -119,7 +119,7 @@
     <span
       v-else-if="hasCommand"
       :data-testid="`${testId}__command`"
-      class="flex shrink-0 items-center text-label-sm text-[var(--text-muted)]"
+      class="flex shrink-0 items-center text-label-sm text-(--text-muted)"
     >
       {{ command }}
     </span>
diff --git a/packages/webkit/src/components/navigation/dropdown/dropdown-trigger/dropdown-trigger.vue b/packages/webkit/src/components/navigation/dropdown/dropdown-trigger/dropdown-trigger.vue
index c02cb6cea..602d3f73f 100644
--- a/packages/webkit/src/components/navigation/dropdown/dropdown-trigger/dropdown-trigger.vue
+++ b/packages/webkit/src/components/navigation/dropdown/dropdown-trigger/dropdown-trigger.vue
@@ -79,7 +79,7 @@
     :data-testid="testId"
     :data-state="isOpen ? 'open' : 'closed'"
     :data-disabled="isDisabled || null"
-    class="inline-flex w-fit shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
+    class="inline-flex w-fit shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
     @click="onClick"
     @keydown="onKeydown"
   >
diff --git a/packages/webkit/src/components/navigation/dropdown/dropdown.test.ts b/packages/webkit/src/components/navigation/dropdown/dropdown.test.ts
index 78075e6a0..c33af41f4 100644
--- a/packages/webkit/src/components/navigation/dropdown/dropdown.test.ts
+++ b/packages/webkit/src/components/navigation/dropdown/dropdown.test.ts
@@ -387,7 +387,7 @@ describe('Dropdown (compound / overlay)', () => {
     const firstCls = groups[0].className
 
     expect(secondCls).toContain('[&:not([data-first])]:border-t')
-    expect(secondCls).toContain('[&:not([data-first])]:border-[var(--border-default)]')
+    expect(secondCls).toContain('[&:not([data-first])]:border-(--border-default)')
 
     expect(secondCls).not.toMatch(/(?:^|[\s:])mt-\[/)
     expect(secondCls).not.toMatch(/(?:^|[\s:])pt-\[/)
diff --git a/packages/webkit/src/components/navigation/dropdown/dropdown.vue b/packages/webkit/src/components/navigation/dropdown/dropdown.vue
index b9c72c515..07f8b7800 100644
--- a/packages/webkit/src/components/navigation/dropdown/dropdown.vue
+++ b/packages/webkit/src/components/navigation/dropdown/dropdown.vue
@@ -348,13 +348,13 @@
           :data-state="isOpenRef ? 'open' : 'closed'"
           :data-placement="resolvedPlacementRef"
           :style="panelStyle"
-          class="flex min-w-[var(--container-3xs)] max-w-[var(--container-2xs)] flex-col overflow-hidden rounded-[var(--shape-card)] border border-[var(--border-default)] bg-[var(--bg-surface)] p-[var(--spacing-xxs)] shadow-[var(--shadow-sm)] outline-none [transform-origin:var(--popup-origin,top_left)]"
+          class="flex min-w-(--container-3xs) max-w-(--container-2xs) flex-col overflow-hidden rounded-(--shape-card) border border-(--border-default) bg-(--bg-surface) p-(--spacing-xxs) shadow-(--shadow-sm) outline-none [transform-origin:var(--popup-origin,top_left)]"
           @keydown="onPanelKeydown"
         >
           <div
             v-if="$slots['top']"
             :data-testid="`${testId}__top`"
-            class="sticky top-0 z-10 bg-[var(--bg-surface)] pb-[var(--spacing-xxs)]"
+            class="sticky top-0 z-10 bg-(--bg-surface) pb-(--spacing-xxs)"
           >
             <slot name="top" />
           </div>
@@ -368,7 +368,7 @@
           <div
             v-if="$slots['bottom']"
             :data-testid="`${testId}__bottom`"
-            class="sticky bottom-0 z-10 bg-[var(--bg-surface)] pt-[var(--spacing-xxs)]"
+            class="sticky bottom-0 z-10 bg-(--bg-surface) pt-(--spacing-xxs)"
           >
             <slot name="bottom" />
           </div>
diff --git a/packages/webkit/src/components/navigation/link/link.vue b/packages/webkit/src/components/navigation/link/link.vue
index 913045ab8..711b93137 100644
--- a/packages/webkit/src/components/navigation/link/link.vue
+++ b/packages/webkit/src/components/navigation/link/link.vue
@@ -46,15 +46,15 @@
 
   const rootClasses = computed(() => [
     'group relative inline-flex shrink-0 items-center whitespace-nowrap',
-    'rounded-[var(--shape-button)] text-[var(--text-link)]',
+    'rounded-(--shape-button) text-(--text-link)',
     'transition-colors duration-150 ease-out motion-reduce:transition-none',
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)]',
-    'focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color)',
+    'focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)',
     'data-[size=large]:h-10 data-[size=large]:min-h-10 data-[size=large]:text-button-lg',
     'data-[size=medium]:h-8 data-[size=medium]:min-h-8 data-[size=medium]:text-button-md',
     'data-[size=small]:h-7 data-[size=small]:min-h-7 data-[size=small]:text-button-md',
     'data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed',
-    'data-[disabled]:text-[var(--text-disabled)]! data-[disabled]:[&_.link-ghost]:hidden',
+    'data-[disabled]:text-(--text-disabled)! data-[disabled]:[&_.link-ghost]:hidden',
     attrs['class']
   ])
 
@@ -82,12 +82,12 @@
     @click="handleClick"
   >
     <span
-      class="link-ghost pointer-events-none absolute top-1/2 -translate-y-1/2 -left-[var(--spacing-xs)] -right-[var(--spacing-xs)] group-data-[size=large]:h-8 group-data-[size=medium]:h-6 group-data-[size=small]:h-5 rounded-[var(--shape-button)] bg-[var(--bg-surface-raised)] opacity-0 transition-opacity duration-150 ease-out motion-reduce:transition-none group-hover:opacity-100 group-focus-visible:opacity-100 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:opacity-0 before:transition-opacity before:duration-150 before:ease-out before:content-[''] motion-reduce:before:transition-none group-hover:before:opacity-100 group-focus-visible:before:opacity-100 before:bg-[var(--bg-hover)] group-active:before:bg-[var(--bg-active)]"
+      class="link-ghost pointer-events-none absolute top-1/2 -translate-y-1/2 -left-(--spacing-xs) -right-(--spacing-xs) group-data-[size=large]:h-8 group-data-[size=medium]:h-6 group-data-[size=small]:h-5 rounded-(--shape-button) bg-(--bg-surface-raised) opacity-0 transition-opacity duration-150 ease-out motion-reduce:transition-none group-hover:opacity-100 group-focus-visible:opacity-100 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:opacity-0 before:transition-opacity before:duration-150 before:ease-out before:content-[''] motion-reduce:before:transition-none group-hover:before:opacity-100 group-focus-visible:before:opacity-100 before:bg-(--bg-hover) group-active:before:bg-(--bg-active)"
       aria-hidden="true"
       :data-testid="`${testId}__ghost`"
     />
     <span
-      class="relative z-[1] inline-flex flex-nowrap items-center gap-[var(--spacing-xs)]"
+      class="relative z-1 inline-flex flex-nowrap items-center gap-(--spacing-xs)"
       :data-testid="`${testId}__content`"
     >
       <span
@@ -99,7 +99,7 @@
       <i
         v-if="showIcon"
         :class="icon"
-        class="inline-flex size-[var(--spacing-sm)] shrink-0 items-center justify-center text-[length:inherit] leading-none"
+        class="inline-flex size-(--spacing-sm) shrink-0 items-center justify-center text-[length:inherit] leading-none"
         aria-hidden="true"
         :data-testid="`${testId}__icon`"
       />
diff --git a/packages/webkit/src/components/navigation/menu-item/menu-item.vue b/packages/webkit/src/components/navigation/menu-item/menu-item.vue
index 67b976109..5d38235de 100644
--- a/packages/webkit/src/components/navigation/menu-item/menu-item.vue
+++ b/packages/webkit/src/components/navigation/menu-item/menu-item.vue
@@ -79,30 +79,30 @@
   const listItemClasses = computed(() => cn('relative w-full shrink-0', attrs.class))
 
   const focusRingClasses = [
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)]',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color)',
     'focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--menu-item-ring-offset,var(--bg-canvas))]'
   ]
 
   const interactiveClasses = computed(() =>
     cn(
       'group relative flex h-8 w-full shrink-0 items-center',
-      'gap-[var(--spacing-xs)] rounded-[var(--shape-elements)]',
-      'pl-[var(--spacing-xxs)] pr-[var(--spacing-xs)] py-[var(--spacing-xxs)]',
+      'gap-(--spacing-xs) rounded-(--shape-elements)',
+      'pl-(--spacing-xxs) pr-(--spacing-xs) py-(--spacing-xxs)',
       'transition-colors motion-reduce:transition-none',
       focusRingClasses,
       props.selected
-        ? 'bg-[var(--bg-selected)] text-[var(--text-default)]'
-        : 'text-[var(--text-default)] hover:bg-[var(--bg-hover)] focus-visible:bg-[var(--bg-hover)]',
+        ? 'bg-(--bg-selected) text-(--text-default)'
+        : 'text-(--text-default) hover:bg-(--bg-hover) focus-visible:bg-(--bg-hover)',
       props.disabled &&
-        'pointer-events-none text-[var(--text-disabled)] hover:bg-transparent focus-visible:bg-transparent'
+        'pointer-events-none text-(--text-disabled) hover:bg-transparent focus-visible:bg-transparent'
     )
   )
 
   const groupRowClasses = computed(() =>
     cn(
       'relative flex h-7 w-full shrink-0 items-center',
-      'rounded-[var(--shape-elements)] pl-[var(--spacing-xxs)] pr-[var(--spacing-xs)] py-[var(--spacing-xxs)]',
-      'text-[var(--text-muted)]',
+      'rounded-(--shape-elements) pl-(--spacing-xxs) pr-(--spacing-xs) py-(--spacing-xxs)',
+      'text-(--text-muted)',
       attrs.class
     )
   )
@@ -113,10 +113,10 @@
     cn(
       'size-4 shrink-0 leading-none text-[length:inherit]',
       props.disabled
-        ? 'text-[var(--text-disabled)]'
+        ? 'text-(--text-disabled)'
         : props.selected
-          ? 'text-[var(--text-default)]'
-          : 'text-[var(--text-muted)] group-hover:text-[var(--text-default)] group-focus-visible:text-[var(--text-default)]'
+          ? 'text-(--text-default)'
+          : 'text-(--text-muted) group-hover:text-(--text-default) group-focus-visible:text-(--text-default)'
     )
   )
 
diff --git a/packages/webkit/src/components/navigation/navigation-menu/presets/styles.js b/packages/webkit/src/components/navigation/navigation-menu/presets/styles.js
index 9ffeedf0f..16276bf01 100644
--- a/packages/webkit/src/components/navigation/navigation-menu/presets/styles.js
+++ b/packages/webkit/src/components/navigation/navigation-menu/presets/styles.js
@@ -3,16 +3,16 @@ import { cn } from '../../../../utils/cn'
 export const navigationMenuNavSelectorVar =
   '[--webkit-nav-selector:color-mix(in_srgb,var(--bg-hover)_60%,transparent)]'
 const triggerBaseClasses = [
-  'relative z-[1] inline-flex cursor-pointer items-center gap-[var(--spacing-xs)]',
-  'rounded-[var(--shape-button)] bg-transparent px-[var(--spacing-sm)] py-[var(--spacing-xs)]',
+  'relative z-1 inline-flex cursor-pointer items-center gap-(--spacing-xs)',
+  'rounded-(--shape-button) bg-transparent px-(--spacing-sm) py-(--spacing-xs)',
   'no-underline transition-colors duration-moderate-02 ease-in-out motion-reduce:transition-none',
-  'text-label-md text-[var(--text-default)]',
-  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)]',
-  'focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]'
+  'text-label-md text-(--text-default)',
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color)',
+  'focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)'
 ]
 const navigationMenuTriggerStateClasses =
-  'data-[popup-open]:text-[var(--text-default)] data-[pressed]:text-[var(--text-default)]'
-const navigationMenuLinkStateClasses = 'data-[active]:text-[var(--text-default)]'
+  'data-[popup-open]:text-(--text-default) data-[pressed]:text-(--text-default)'
+const navigationMenuLinkStateClasses = 'data-[active]:text-(--text-default)'
 export function getNavigationMenuTriggerClasses(isLink, extra) {
   return cn(
     triggerBaseClasses,
@@ -24,38 +24,38 @@ export function getNavigationMenuRootClasses(extra) {
   return cn('relative', navigationMenuNavSelectorVar, extra)
 }
 export const navigationMenuEntryAnchorClasses = [
-  'group flex min-h-14 w-full items-start gap-[var(--spacing-xs)]',
-  'rounded-[var(--shape-button)] p-[var(--spacing-xs)] no-underline',
-  'text-[var(--text-default)] transition-colors duration-fast-02 ease-productive-entrance motion-reduce:transition-none',
-  'hover:bg-[var(--bg-hover)]',
-  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)]',
-  'focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]'
+  'group flex min-h-14 w-full items-start gap-(--spacing-xs)',
+  'rounded-(--shape-button) p-(--spacing-xs) no-underline',
+  'text-(--text-default) transition-colors duration-fast-02 ease-productive-entrance motion-reduce:transition-none',
+  'hover:bg-(--bg-hover)',
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color)',
+  'focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)'
 ]
 export const navigationMenuEntryIconClasses =
-  'mt-0.5 flex size-3.5 shrink-0 items-center justify-center text-[var(--text-default)] [&_i]:text-body-xs'
+  'mt-0.5 flex size-3.5 shrink-0 items-center justify-center text-(--text-default) [&_i]:text-body-xs'
 export const navigationMenuEntryTextClasses = 'flex min-w-0 flex-col'
 export const navigationMenuEntryTitleClasses = [
-  'text-label-md text-[var(--text-default)]',
-  'group-hover:text-[var(--text-default)]',
-  'data-[featured]:text-[var(--text-link)] data-[featured]:group-hover:text-[var(--text-link)]'
+  'text-label-md text-(--text-default)',
+  'group-hover:text-(--text-default)',
+  'data-[featured]:text-(--text-link) data-[featured]:group-hover:text-(--text-link)'
 ]
-export const navigationMenuEntryDescriptionClasses = 'text-body-xs text-[var(--text-muted)]'
+export const navigationMenuEntryDescriptionClasses = 'text-body-xs text-(--text-muted)'
 export const navigationMenuListGroupClasses =
-  'm-0 flex list-none flex-col gap-[var(--spacing-xs)] p-0'
+  'm-0 flex list-none flex-col gap-(--spacing-xs) p-0'
 export const navigationMenuListRootClasses = [
-  'relative z-[1] m-0 flex list-none items-center gap-[var(--spacing-xs)] p-0'
+  'relative z-1 m-0 flex list-none items-center gap-(--spacing-xs) p-0'
 ]
 /** Sliding highlight on root NavigationMenu.List (uses `--webkit-nav-selector` from root). */
 export const navigationMenuListSelectorClasses =
-  'pointer-events-none absolute z-0 rounded-[var(--shape-button)] bg-[var(--webkit-nav-selector)] transition-[left,top,width,height,opacity] duration-moderate-02 ease-productive-entrance motion-reduce:transition-none'
+  'pointer-events-none absolute z-0 rounded-(--shape-button) bg-(--webkit-nav-selector) transition-[left,top,width,height,opacity] duration-moderate-02 ease-productive-entrance motion-reduce:transition-none'
 export const navigationMenuIconClasses = [
   'inline-flex transition-transform duration-moderate-02 ease-productive-entrance motion-reduce:transition-none',
   'data-[open]:rotate-180'
 ]
 export const navigationMenuPopupSurfaceClasses = [
-  'relative overflow-hidden rounded-[var(--shape-card)]',
-  'border border-solid border-[var(--border-default)]',
-  'bg-[var(--bg-surface-raised)] shadow-[var(--shadow-lg)]',
+  'relative overflow-hidden rounded-(--shape-card)',
+  'border border-solid border-(--border-default)',
+  'bg-(--bg-surface-raised) shadow-(--shadow-lg)',
   'max-h-[var(--available-height,100vh)]'
 ]
 export const navigationMenuBackdropClasses = [
@@ -66,8 +66,8 @@ export const navigationMenuBackdropClasses = [
   'data-[ending-style]:opacity-0'
 ]
 export const navigationMenuArrowClasses = [
-  'absolute size-3 rotate-45 border border-solid border-[var(--border-default)]',
-  'bg-[var(--bg-surface-raised)]',
+  'absolute size-3 rotate-45 border border-solid border-(--border-default)',
+  'bg-(--bg-surface-raised)',
   'data-[side=bottom]:-top-1.5 data-[side=bottom]:border-b-0 data-[side=bottom]:border-r-0',
   'data-[side=top]:-bottom-1.5 data-[side=top]:border-l-0 data-[side=top]:border-t-0'
 ]
@@ -75,5 +75,5 @@ export const navigationMenuPositionerLayoutClasses = [
   'fixed z-50 max-h-[var(--available-height,100vh)]',
   'max-w-[min(var(--available-width,100vw),100vw)]'
 ]
-export const navigationMenuContentPaddingClasses = 'p-[var(--spacing-md)]'
-export const navigationMenuOverlineClasses = 'mb-[var(--spacing-sm)] px-[var(--spacing-sm)]'
+export const navigationMenuContentPaddingClasses = 'p-(--spacing-md)'
+export const navigationMenuOverlineClasses = 'mb-(--spacing-sm) px-(--spacing-sm)'
diff --git a/packages/webkit/src/components/navigation/tab-view/presets/transitions.ts b/packages/webkit/src/components/navigation/tab-view/presets/transitions.ts
index 5da30a08c..433475317 100644
--- a/packages/webkit/src/components/navigation/tab-view/presets/transitions.ts
+++ b/packages/webkit/src/components/navigation/tab-view/presets/transitions.ts
@@ -41,7 +41,7 @@ export const getTabViewIndicatorTransitionStyle = (): { transition: string } =>
 
 /** Enter offset when moving to a tab on the right (positive → 0). */
 export const tabViewEnterOffsetClasses = {
-  right: 'translate-x-[var(--spacing-md)]',
-  left: '-translate-x-[var(--spacing-md)]',
+  right: 'translate-x-(--spacing-md)',
+  left: '-translate-x-(--spacing-md)',
   none: 'translate-x-0'
 } as const
diff --git a/packages/webkit/src/components/navigation/tab-view/tab-view-item.vue b/packages/webkit/src/components/navigation/tab-view/tab-view-item.vue
index 647a5c544..bf17698b4 100644
--- a/packages/webkit/src/components/navigation/tab-view/tab-view-item.vue
+++ b/packages/webkit/src/components/navigation/tab-view/tab-view-item.vue
@@ -70,33 +70,33 @@
   const panelId = computed(() => (context ? context.panelId(resolvedValue.value) : undefined))
 
   const itemSharedClasses = [
-    'relative z-[1] inline-flex h-[30px] shrink-0 cursor-pointer items-center',
-    'gap-[var(--spacing-xs)] rounded-[var(--shape-button)]',
-    'px-[var(--spacing-sm)] py-[var(--spacing-xs)]',
+    'relative z-1 inline-flex h-[30px] shrink-0 cursor-pointer items-center',
+    'gap-(--spacing-xs) rounded-(--shape-button)',
+    'px-(--spacing-sm) py-(--spacing-xs)',
     'text-label-md transition-colors motion-reduce:transition-none',
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)]',
-    'focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]'
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color)',
+    'focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)'
   ]
 
   const itemClasses = computed(() =>
     cn(
       itemSharedClasses,
       isDisabled.value &&
-        'pointer-events-none bg-[var(--bg-disabled)] text-[var(--text-disabled)] opacity-60',
+        'pointer-events-none bg-(--bg-disabled) text-(--text-disabled) opacity-60',
       !isDisabled.value &&
         context &&
         !isSelected.value &&
-        'bg-transparent text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-default)]',
+        'bg-transparent text-(--text-muted) hover:bg-(--bg-hover) hover:text-(--text-default)',
       !isDisabled.value &&
         context &&
         isSelected.value &&
-        'bg-transparent text-[var(--secondary-contrast)]',
+        'bg-transparent text-(--secondary-contrast)',
       !context &&
         isSelected.value &&
-        'bg-[var(--secondary-selected)] text-[var(--secondary-contrast)]',
+        'bg-(--secondary-selected) text-(--secondary-contrast)',
       !context &&
         !isSelected.value &&
-        'bg-transparent text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-default)]',
+        'bg-transparent text-(--text-muted) hover:bg-(--bg-hover) hover:text-(--text-default)',
       attrs.class as string | undefined
     )
   )
@@ -105,7 +105,7 @@
     'flex size-3.5 shrink-0 items-center justify-center text-[inherit] [&_i]:text-body-xs'
 
   const closeClasses =
-    'flex size-3.5 shrink-0 items-center justify-center rounded-[var(--shape-button)] text-[inherit] hover:bg-[var(--bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)]'
+    'flex size-3.5 shrink-0 items-center justify-center rounded-(--shape-button) text-[inherit] hover:bg-(--bg-hover) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color)'
 
   const activate = (event: globalThis.MouseEvent) => {
     if (isDisabled.value) {
diff --git a/packages/webkit/src/components/navigation/tab-view/tab-view-list.vue b/packages/webkit/src/components/navigation/tab-view/tab-view-list.vue
index 87cfb019b..c8d28fd01 100644
--- a/packages/webkit/src/components/navigation/tab-view/tab-view-list.vue
+++ b/packages/webkit/src/components/navigation/tab-view/tab-view-list.vue
@@ -62,14 +62,14 @@
    */
   const listClasses = computed(() =>
     cn(
-      'relative flex w-full shrink-0 items-end gap-[var(--spacing-xs)] overflow-x-auto bg-transparent [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+      'relative flex w-full shrink-0 items-end gap-(--spacing-xs) overflow-x-auto bg-transparent [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
       attrs.class as string | undefined
     )
   )
 
   const indicatorClasses = [
     'pointer-events-none absolute left-0 top-0 z-0',
-    'rounded-[var(--shape-button)] bg-[var(--secondary-selected)]',
+    'rounded-(--shape-button) bg-(--secondary-selected)',
     'motion-reduce:transition-none'
   ]
 
@@ -164,7 +164,7 @@
         v-if="canScrollStart"
         :data-testid="`${testId}__fade-start`"
         aria-hidden="true"
-        class="pointer-events-none absolute inset-y-0 left-0 z-10 w-[var(--spacing-6)] bg-gradient-to-r from-[var(--bg-canvas)] to-transparent"
+        class="pointer-events-none absolute inset-y-0 left-0 z-10 w-(--spacing-6) bg-gradient-to-r from-(--bg-canvas) to-transparent"
       />
     </Transition>
     <Transition
@@ -175,7 +175,7 @@
         v-if="canScrollEnd"
         :data-testid="`${testId}__fade-end`"
         aria-hidden="true"
-        class="pointer-events-none absolute inset-y-0 right-0 z-10 w-[var(--spacing-6)] bg-gradient-to-l from-[var(--bg-canvas)] to-transparent"
+        class="pointer-events-none absolute inset-y-0 right-0 z-10 w-(--spacing-6) bg-gradient-to-l from-(--bg-canvas) to-transparent"
       />
     </Transition>
   </div>
diff --git a/packages/webkit/src/components/overlay/command-menu/command-menu-empty/command-menu-empty.vue b/packages/webkit/src/components/overlay/command-menu/command-menu-empty/command-menu-empty.vue
index 40972e377..fdb97df11 100644
--- a/packages/webkit/src/components/overlay/command-menu/command-menu-empty/command-menu-empty.vue
+++ b/packages/webkit/src/components/overlay/command-menu/command-menu-empty/command-menu-empty.vue
@@ -25,7 +25,7 @@
     v-show="!ctx.hasVisibleItems.value"
     v-bind="attrs"
     :data-testid="testId"
-    class="p-[var(--spacing-sm)] text-label-sm text-[var(--text-muted)]"
+    class="p-(--spacing-sm) text-label-sm text-(--text-muted)"
   >
     <slot>No results found.</slot>
   </div>
diff --git a/packages/webkit/src/components/overlay/command-menu/command-menu-group/command-menu-group.vue b/packages/webkit/src/components/overlay/command-menu/command-menu-group/command-menu-group.vue
index 048d697b7..287829a16 100644
--- a/packages/webkit/src/components/overlay/command-menu/command-menu-group/command-menu-group.vue
+++ b/packages/webkit/src/components/overlay/command-menu/command-menu-group/command-menu-group.vue
@@ -51,7 +51,7 @@
       v-if="hasHeading"
       :id="headingId"
       :data-testid="`${testId}__heading`"
-      class="px-[var(--spacing-sm)] py-[var(--spacing-xxs)] text-overline-sm uppercase text-[var(--text-muted)]"
+      class="px-(--spacing-sm) py-(--spacing-xxs) text-overline-sm uppercase text-(--text-muted)"
     >
       {{ heading }}
     </div>
diff --git a/packages/webkit/src/components/overlay/command-menu/command-menu-input/command-menu-input.vue b/packages/webkit/src/components/overlay/command-menu/command-menu-input/command-menu-input.vue
index 014c63f9e..d3923cd05 100644
--- a/packages/webkit/src/components/overlay/command-menu/command-menu-input/command-menu-input.vue
+++ b/packages/webkit/src/components/overlay/command-menu/command-menu-input/command-menu-input.vue
@@ -42,7 +42,7 @@
 
 <template>
   <div
-    class="w-full border-b border-[var(--border-default)] p-[var(--spacing-sm)]"
+    class="w-full border-b border-(--border-default) p-(--spacing-sm)"
     :data-testid="testId"
   >
     <InputText
diff --git a/packages/webkit/src/components/overlay/command-menu/command-menu-item/command-menu-item.vue b/packages/webkit/src/components/overlay/command-menu/command-menu-item/command-menu-item.vue
index 5ee0289da..8868317c8 100644
--- a/packages/webkit/src/components/overlay/command-menu/command-menu-item/command-menu-item.vue
+++ b/packages/webkit/src/components/overlay/command-menu/command-menu-item/command-menu-item.vue
@@ -103,7 +103,7 @@
     :data-testid="testId"
     :data-active="ctx.isActive(value) || undefined"
     :data-disabled="disabled || undefined"
-    class="flex min-h-8 items-center gap-[var(--spacing-xs)] rounded-[var(--shape-button)] px-[var(--spacing-sm)] py-[var(--spacing-xxs)] text-label-sm text-[var(--text-default)] transition-colors duration-150 ease-out motion-reduce:transition-none data-[active]:bg-[var(--bg-selected)] data-[disabled]:cursor-not-allowed data-[disabled]:text-[var(--text-disabled)]"
+    class="flex min-h-8 items-center gap-(--spacing-xs) rounded-(--shape-button) px-(--spacing-sm) py-(--spacing-xxs) text-label-sm text-(--text-default) transition-colors duration-150 ease-out motion-reduce:transition-none data-[active]:bg-(--bg-selected) data-[disabled]:cursor-not-allowed data-[disabled]:text-(--text-disabled)"
     @click="!disabled && activate($event)"
     @keydown.enter.prevent="!disabled && activate($event)"
     @keydown.space.prevent="!disabled && activate($event)"
diff --git a/packages/webkit/src/components/overlay/command-menu/command-menu-list/command-menu-list.vue b/packages/webkit/src/components/overlay/command-menu/command-menu-list/command-menu-list.vue
index 0a637fa0e..05bdb658b 100644
--- a/packages/webkit/src/components/overlay/command-menu/command-menu-list/command-menu-list.vue
+++ b/packages/webkit/src/components/overlay/command-menu/command-menu-list/command-menu-list.vue
@@ -26,7 +26,7 @@
     :id="ctx.listId"
     role="listbox"
     :data-testid="testId"
-    class="max-h-[24rem] overflow-y-auto p-[var(--spacing-xxs)]"
+    class="max-h-[24rem] overflow-y-auto p-(--spacing-xxs)"
   >
     <slot />
   </div>
diff --git a/packages/webkit/src/components/overlay/command-menu/command-menu-separator/command-menu-separator.vue b/packages/webkit/src/components/overlay/command-menu/command-menu-separator/command-menu-separator.vue
index a0d164352..62303baf3 100644
--- a/packages/webkit/src/components/overlay/command-menu/command-menu-separator/command-menu-separator.vue
+++ b/packages/webkit/src/components/overlay/command-menu/command-menu-separator/command-menu-separator.vue
@@ -22,6 +22,6 @@
     role="separator"
     aria-hidden="true"
     :data-testid="testId"
-    class="my-[var(--spacing-xxs)] border-t border-[var(--border-default)]"
+    class="my-(--spacing-xxs) border-t border-(--border-default)"
   />
 </template>
diff --git a/packages/webkit/src/components/overlay/dialog/dialog-content.vue b/packages/webkit/src/components/overlay/dialog/dialog-content.vue
index 5c6f9efdc..e3eab47fc 100644
--- a/packages/webkit/src/components/overlay/dialog/dialog-content.vue
+++ b/packages/webkit/src/components/overlay/dialog/dialog-content.vue
@@ -60,7 +60,7 @@
 
   const shellClasses = computed(() =>
     cn(
-      'fixed inset-0 z-[1001] flex',
+      'fixed inset-0 z-1001 flex',
       dialogShellPositionClasses,
       'pointer-events-none',
       attrs.class as string | undefined
diff --git a/packages/webkit/src/components/overlay/dialog/dialog-description.vue b/packages/webkit/src/components/overlay/dialog/dialog-description.vue
index d768cfbdd..5ab5fdc7a 100644
--- a/packages/webkit/src/components/overlay/dialog/dialog-description.vue
+++ b/packages/webkit/src/components/overlay/dialog/dialog-description.vue
@@ -17,7 +17,7 @@
   const ctx = inject(DialogInjectionKey)
 
   const rootClasses = computed(() =>
-    cn('text-body-xs text-[var(--text-muted)]', attrs.class as string | undefined)
+    cn('text-body-xs text-(--text-muted)', attrs.class as string | undefined)
   )
 </script>
 
diff --git a/packages/webkit/src/components/overlay/dialog/dialog-overlay.vue b/packages/webkit/src/components/overlay/dialog/dialog-overlay.vue
index 60ee34e04..08f7cde11 100644
--- a/packages/webkit/src/components/overlay/dialog/dialog-overlay.vue
+++ b/packages/webkit/src/components/overlay/dialog/dialog-overlay.vue
@@ -31,7 +31,7 @@
 
   const rootClasses = computed(() =>
     cn(
-      'fixed inset-0 z-[1000] bg-[var(--bg-backdrop)]',
+      'fixed inset-0 z-1000 bg-(--bg-backdrop)',
       dialogOverlayTransitionClasses,
       attrs.class as string | undefined
     )
diff --git a/packages/webkit/src/components/overlay/dialog/dialog-title.vue b/packages/webkit/src/components/overlay/dialog/dialog-title.vue
index dec81e2bd..5ce524854 100644
--- a/packages/webkit/src/components/overlay/dialog/dialog-title.vue
+++ b/packages/webkit/src/components/overlay/dialog/dialog-title.vue
@@ -17,7 +17,7 @@
   const ctx = inject(DialogInjectionKey)
 
   const rootClasses = computed(() =>
-    cn('text-heading-sm text-[var(--text-default)]', attrs.class as string | undefined)
+    cn('text-heading-sm text-(--text-default)', attrs.class as string | undefined)
   )
 </script>
 
diff --git a/packages/webkit/src/components/overlay/drawer/drawer-content.vue b/packages/webkit/src/components/overlay/drawer/drawer-content.vue
index f78bebc1b..098fb6107 100644
--- a/packages/webkit/src/components/overlay/drawer/drawer-content.vue
+++ b/packages/webkit/src/components/overlay/drawer/drawer-content.vue
@@ -72,7 +72,7 @@
 
   const shellClasses = computed(() =>
     cn(
-      'fixed z-[1001] flex p-0',
+      'fixed z-1001 flex p-0',
       drawerShellPositionClasses,
       isLeft.value ? 'md:left-0 md:justify-start' : 'md:right-0 md:justify-end',
       'pointer-events-none',
@@ -92,8 +92,8 @@
       'pointer-events-auto flex min-h-0 h-full flex-col',
       drawerPanelPositionClasses,
       isLeft.value
-        ? 'md:rounded-r-[var(--shape-card)] md:rounded-l-[var(--shape-flat)]'
-        : 'md:rounded-l-[var(--shape-card)] md:rounded-r-[var(--shape-flat)]'
+        ? 'md:rounded-r-(--shape-card) md:rounded-l-(--shape-flat)'
+        : 'md:rounded-l-(--shape-card) md:rounded-r-(--shape-flat)'
     )
   )
 </script>
diff --git a/packages/webkit/src/components/overlay/drawer/drawer-description.vue b/packages/webkit/src/components/overlay/drawer/drawer-description.vue
index 2e597c004..9b271afe6 100644
--- a/packages/webkit/src/components/overlay/drawer/drawer-description.vue
+++ b/packages/webkit/src/components/overlay/drawer/drawer-description.vue
@@ -17,7 +17,7 @@
   const ctx = inject(DrawerInjectionKey)
 
   const rootClasses = computed(() =>
-    cn('text-body-sm text-[var(--text-muted)]', attrs.class as string | undefined)
+    cn('text-body-sm text-(--text-muted)', attrs.class as string | undefined)
   )
 </script>
 
diff --git a/packages/webkit/src/components/overlay/drawer/drawer-overlay.vue b/packages/webkit/src/components/overlay/drawer/drawer-overlay.vue
index 7e6889aec..f3f87f420 100644
--- a/packages/webkit/src/components/overlay/drawer/drawer-overlay.vue
+++ b/packages/webkit/src/components/overlay/drawer/drawer-overlay.vue
@@ -26,7 +26,7 @@
 
   const rootClasses = computed(() =>
     cn(
-      'fixed inset-0 z-[1000] bg-[var(--bg-backdrop)]',
+      'fixed inset-0 z-1000 bg-(--bg-backdrop)',
       drawerOverlayTransitionClasses,
       attrs.class as string | undefined
     )
diff --git a/packages/webkit/src/components/overlay/drawer/drawer-title.vue b/packages/webkit/src/components/overlay/drawer/drawer-title.vue
index ddd854acc..f7b6c3695 100644
--- a/packages/webkit/src/components/overlay/drawer/drawer-title.vue
+++ b/packages/webkit/src/components/overlay/drawer/drawer-title.vue
@@ -17,7 +17,7 @@
   const ctx = inject(DrawerInjectionKey)
 
   const rootClasses = computed(() =>
-    cn('text-heading-sm text-[var(--text-default)]', attrs.class as string | undefined)
+    cn('text-heading-sm text-(--text-default)', attrs.class as string | undefined)
   )
 </script>
 
diff --git a/packages/webkit/src/components/overlay/panel/panel-content.vue b/packages/webkit/src/components/overlay/panel/panel-content.vue
index 3f9b9db8b..18b63b82a 100644
--- a/packages/webkit/src/components/overlay/panel/panel-content.vue
+++ b/packages/webkit/src/components/overlay/panel/panel-content.vue
@@ -26,7 +26,7 @@
 
   const contentClasses = computed(() =>
     cn(
-      'p-[var(--spacing-lg)]',
+      'p-(--spacing-lg)',
       !drawerScrollHost ? 'min-h-0 flex-1 overflow-y-auto' : undefined,
       !drawerScrollHost ? (attrs.class as string | undefined) : undefined
     )
diff --git a/packages/webkit/src/components/overlay/panel/panel-footer.vue b/packages/webkit/src/components/overlay/panel/panel-footer.vue
index b2a9bb00b..998217af8 100644
--- a/packages/webkit/src/components/overlay/panel/panel-footer.vue
+++ b/packages/webkit/src/components/overlay/panel/panel-footer.vue
@@ -18,9 +18,9 @@
 
   const rootClasses = computed(() =>
     cn(
-      'flex min-h-16 shrink-0 items-center gap-[var(--spacing-sm)]',
-      'border-0 border-t border-t-[length:var(--border-width-default)] border-t-[var(--border-muted)] bg-[var(--bg-surface)]',
-      'px-[var(--spacing-lg)] py-[var(--spacing-md)]',
+      'flex min-h-16 shrink-0 items-center gap-(--spacing-sm)',
+      'border-0 border-t border-t-(length:--border-width-default) border-t-(--border-muted) bg-(--bg-surface)',
+      'px-(--spacing-lg) py-(--spacing-md)',
       attrs.class as string | undefined
     )
   )
diff --git a/packages/webkit/src/components/overlay/panel/panel-header.vue b/packages/webkit/src/components/overlay/panel/panel-header.vue
index a66e8b5e4..601634fcc 100644
--- a/packages/webkit/src/components/overlay/panel/panel-header.vue
+++ b/packages/webkit/src/components/overlay/panel/panel-header.vue
@@ -18,9 +18,9 @@
 
   const rootClasses = computed(() =>
     cn(
-      'flex min-h-14 shrink-0 items-center justify-between gap-[var(--spacing-xs)]',
-      'border-0 border-b border-b-[length:var(--border-width-default)] border-b-[var(--border-muted)] bg-[var(--bg-surface)]',
-      'pl-[var(--spacing-lg)] pr-[var(--spacing-md)] py-[var(--spacing-md)]',
+      'flex min-h-14 shrink-0 items-center justify-between gap-(--spacing-xs)',
+      'border-0 border-b border-b-(length:--border-width-default) border-b-(--border-muted) bg-(--bg-surface)',
+      'pl-(--spacing-lg) pr-(--spacing-md) py-(--spacing-md)',
       attrs.class as string | undefined
     )
   )
diff --git a/packages/webkit/src/components/overlay/panel/panel.vue b/packages/webkit/src/components/overlay/panel/panel.vue
index 98c54b4f0..6af3b270c 100644
--- a/packages/webkit/src/components/overlay/panel/panel.vue
+++ b/packages/webkit/src/components/overlay/panel/panel.vue
@@ -40,9 +40,9 @@
   const rootClasses = computed(() =>
     cn(
       'flex w-full flex-col overflow-hidden',
-      'rounded-[var(--shape-card)] border border-[length:var(--border-width-default)]',
-      'border-[var(--border-muted)]',
-      'bg-[var(--bg-surface)] shadow-[var(--shadow-2xl)]',
+      'rounded-(--shape-card) border border-(length:--border-width-default)',
+      'border-(--border-muted)',
+      'bg-(--bg-surface) shadow-(--shadow-2xl)',
       isFluid.value
         ? 'w-full max-w-none'
         : props.sizeAtMd
diff --git a/packages/webkit/src/components/overlay/panel/presets/sizes.js b/packages/webkit/src/components/overlay/panel/presets/sizes.js
index fa6579419..2b951aa95 100644
--- a/packages/webkit/src/components/overlay/panel/presets/sizes.js
+++ b/packages/webkit/src/components/overlay/panel/presets/sizes.js
@@ -1,12 +1,12 @@
 /** Panel max-width presets (`var(--container-*)` from theme). */
 export const panelSizeClasses = {
-  small: 'max-w-[var(--container-sm)]',
-  medium: 'max-w-[var(--container-xl)]',
-  large: 'max-w-[var(--container-2xl)]'
+  small: 'max-w-(--container-sm)',
+  medium: 'max-w-(--container-xl)',
+  large: 'max-w-(--container-2xl)'
 }
 /** Dialog: container cap from `md` up; mobile stays fluid `w-full`. */
 export const dialogPanelSizeClasses = {
-  small: 'md:max-w-[var(--container-sm)]',
-  medium: 'md:max-w-[var(--container-xl)]',
-  large: 'md:max-w-[var(--container-2xl)]'
+  small: 'md:max-w-(--container-sm)',
+  medium: 'md:max-w-(--container-xl)',
+  large: 'md:max-w-(--container-2xl)'
 }
diff --git a/packages/webkit/src/components/overlay/popover/popover-content/popover-content.vue b/packages/webkit/src/components/overlay/popover/popover-content/popover-content.vue
index a99192f59..40c0e4914 100644
--- a/packages/webkit/src/components/overlay/popover/popover-content/popover-content.vue
+++ b/packages/webkit/src/components/overlay/popover/popover-content/popover-content.vue
@@ -39,7 +39,7 @@
         :data-placement="ctx.placement.value"
         :data-width="ctx.width.value || null"
         :style="ctx.panelStyle.value"
-        class="flex min-w-[var(--container-3xs)] max-w-[var(--container-xs)] flex-col rounded-[var(--shape-elements)] border border-[var(--border-default)] bg-[var(--bg-surface-raised)] shadow-[var(--shadow-sm)] outline-none data-[width=small]:min-w-[var(--container-xs)] data-[width=small]:max-w-[var(--container-xs)] data-[width=medium]:min-w-[var(--container-sm)] data-[width=medium]:max-w-[var(--container-sm)] data-[width=large]:min-w-[var(--container-md)] data-[width=large]:max-w-[var(--container-md)]"
+        class="flex min-w-(--container-3xs) max-w-(--container-xs) flex-col rounded-(--shape-elements) border border-(--border-default) bg-(--bg-surface-raised) shadow-(--shadow-sm) outline-none data-[width=small]:min-w-(--container-xs) data-[width=small]:max-w-(--container-xs) data-[width=medium]:min-w-(--container-sm) data-[width=medium]:max-w-(--container-sm) data-[width=large]:min-w-(--container-md) data-[width=large]:max-w-(--container-md)"
       >
         <div
           :data-testid="`${ctx.testId}__body`"
diff --git a/packages/webkit/src/components/overlay/popover/popover-description/popover-description.vue b/packages/webkit/src/components/overlay/popover/popover-description/popover-description.vue
index 4f2bbc85e..fec396728 100644
--- a/packages/webkit/src/components/overlay/popover/popover-description/popover-description.vue
+++ b/packages/webkit/src/components/overlay/popover/popover-description/popover-description.vue
@@ -33,7 +33,7 @@
     v-bind="attrs"
     :id="ctx.descriptionId"
     :data-testid="testId"
-    class="text-body-xs text-[var(--text-muted)]"
+    class="text-body-xs text-(--text-muted)"
   >
     <slot />
   </p>
diff --git a/packages/webkit/src/components/overlay/popover/popover-footer/popover-footer.vue b/packages/webkit/src/components/overlay/popover/popover-footer/popover-footer.vue
index 8434ee5dd..361ead9c1 100644
--- a/packages/webkit/src/components/overlay/popover/popover-footer/popover-footer.vue
+++ b/packages/webkit/src/components/overlay/popover/popover-footer/popover-footer.vue
@@ -24,7 +24,7 @@
   <footer
     v-bind="attrs"
     :data-testid="testId"
-    class="flex items-center justify-end gap-[var(--spacing-xs)] border-t border-[var(--border-default)] py-[var(--spacing-sm)] px-[var(--spacing-md)]"
+    class="flex items-center justify-end gap-(--spacing-xs) border-t border-(--border-default) py-(--spacing-sm) px-(--spacing-md)"
   >
     <slot />
   </footer>
diff --git a/packages/webkit/src/components/overlay/popover/popover-header/popover-header.vue b/packages/webkit/src/components/overlay/popover/popover-header/popover-header.vue
index 0927207db..9566bdbc0 100644
--- a/packages/webkit/src/components/overlay/popover/popover-header/popover-header.vue
+++ b/packages/webkit/src/components/overlay/popover/popover-header/popover-header.vue
@@ -24,7 +24,7 @@
   <header
     v-bind="attrs"
     :data-testid="testId"
-    class="relative border-b border-[var(--border-default)] py-[var(--spacing-sm)] px-[var(--spacing-md)]"
+    class="relative border-b border-(--border-default) py-(--spacing-sm) px-(--spacing-md)"
   >
     <!--
       min-h matches the absolute close button (IconButton small = 1.75rem): with no
@@ -32,7 +32,7 @@
       close, instead of centering in the header's symmetric padding.
     -->
     <div
-      class="flex min-h-[--(size-4)] flex-col gap-[var(--spacing-xxs)] pr-[var(--spacing-xxl)] [&>button]:absolute [&>button]:right-[var(--spacing-md)] [&>button]:top-[var(--spacing-sm)]"
+      class="flex min-h-[--(size-4)] flex-col gap-(--spacing-xxs) pr-(--spacing-xxl) [&>button]:absolute [&>button]:right-(--spacing-md) [&>button]:top-(--spacing-sm)"
     >
       <slot />
     </div>
diff --git a/packages/webkit/src/components/overlay/popover/popover-title/popover-title.vue b/packages/webkit/src/components/overlay/popover/popover-title/popover-title.vue
index 2eecdaa0f..2387bacdb 100644
--- a/packages/webkit/src/components/overlay/popover/popover-title/popover-title.vue
+++ b/packages/webkit/src/components/overlay/popover/popover-title/popover-title.vue
@@ -33,7 +33,7 @@
     v-bind="attrs"
     :id="ctx.titleId"
     :data-testid="testId"
-    class="text-body-sm text-[var(--text-default)]"
+    class="text-body-sm text-(--text-default)"
   >
     <slot />
   </h2>
diff --git a/packages/webkit/src/components/overlay/presets/mobile-position.js b/packages/webkit/src/components/overlay/presets/mobile-position.js
index 3b080857c..e0a2d29f1 100644
--- a/packages/webkit/src/components/overlay/presets/mobile-position.js
+++ b/packages/webkit/src/components/overlay/presets/mobile-position.js
@@ -6,11 +6,11 @@
 export const overlayMobileFluidClasses = ['max-md:w-full', 'max-md:h-fit', 'max-md:max-h-[80vh]']
 export const dialogShellPositionClasses = [
   'max-md:items-end max-md:justify-center max-md:p-0',
-  'md:items-center md:justify-center md:p-[var(--spacing-md)]'
+  'md:items-center md:justify-center md:p-(--spacing-md)'
 ]
 export const dialogPanelPositionClasses = [...overlayMobileFluidClasses, 'max-md:overflow-y-auto']
 export const dialogPanelShapeClasses = [
-  'max-md:rounded-b-[var(--shape-flat)] max-md:rounded-t-[var(--shape-card)]',
+  'max-md:rounded-b-(--shape-flat) max-md:rounded-t-(--shape-card)',
   ...overlayMobileFluidClasses
 ]
 export const drawerShellPositionClasses = [
@@ -22,6 +22,6 @@ export const drawerShellPositionClasses = [
 export const drawerPanelPositionClasses = [
   ...overlayMobileFluidClasses,
   'max-md:max-w-none',
-  'max-md:rounded-b-[var(--shape-flat)] max-md:rounded-t-[var(--shape-card)]',
+  'max-md:rounded-b-(--shape-flat) max-md:rounded-t-(--shape-card)',
   'md:h-full md:min-h-0 md:max-h-full'
 ]
diff --git a/packages/webkit/src/components/overlay/tooltip/tooltip.vue b/packages/webkit/src/components/overlay/tooltip/tooltip.vue
index 7337c0702..89a09dd58 100644
--- a/packages/webkit/src/components/overlay/tooltip/tooltip.vue
+++ b/packages/webkit/src/components/overlay/tooltip/tooltip.vue
@@ -142,7 +142,7 @@
   <span
     ref="triggerRef"
     v-bind="attrs"
-    class="inline-flex w-fit shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]"
+    class="inline-flex w-fit shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)"
     :data-testid="testId"
     :data-state="isOpen ? 'open' : 'closed'"
     :data-disabled="disabled || null"
@@ -173,7 +173,7 @@
         :data-placement="resolvedPlacementRef"
         :aria-hidden="!isOpen"
         :style="panelStyle"
-        class="pointer-events-none flex min-h-8 max-w-[var(--container-3xs)] items-center justify-center overflow-clip break-words rounded-[var(--shape-elements)] bg-[var(--bg-contrast)] p-[var(--spacing-xs)] text-center text-body-xs text-[var(--text-contrast)] [transform-origin:var(--popup-origin,center)]"
+        class="pointer-events-none flex min-h-8 max-w-(--container-3xs) items-center justify-center overflow-clip break-words rounded-(--shape-elements) bg-(--bg-contrast) p-(--spacing-xs) text-center text-body-xs text-(--text-contrast) [transform-origin:var(--popup-origin,center)]"
       >
         {{ text }}
       </div>
diff --git a/packages/webkit/src/components/tag/tag.vue b/packages/webkit/src/components/tag/tag.vue
index e16d8e4f2..0bac2b759 100644
--- a/packages/webkit/src/components/tag/tag.vue
+++ b/packages/webkit/src/components/tag/tag.vue
@@ -74,7 +74,7 @@
     :data-size="size"
     :data-rounded="rounded || null"
     :class="attrs.class"
-    class="inline-flex items-center justify-center overflow-hidden border border-transparent leading-none text-tag-md data-[size=small]:text-tag-sm data-[size=medium]:gap-[var(--spacing-xs)] data-[size=small]:gap-[var(--spacing-xxs)] data-[size=medium]:h-6 data-[size=medium]:px-[var(--spacing-xs)] data-[size=small]:h-5 data-[size=small]:px-[var(--spacing-xxs)] rounded-[var(--shape-elements)] data-[rounded]:rounded-full! focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] data-[severity=primary]:bg-[var(--primary-mask)] data-[severity=primary]:text-[var(--primary)] data-[severity=secondary]:border-[length:var(--border-width-default)] data-[severity=secondary]:border-[var(--border-default)] data-[severity=secondary]:bg-[var(--bg-canvas)] data-[severity=secondary]:text-[var(--text-default)] data-[severity=accent]:bg-[var(--accent)] data-[severity=accent]:text-[var(--accent-contrast)] data-[severity=contrast]:bg-[var(--bg-contrast)] data-[severity=contrast]:text-[var(--text-contrast)] data-[severity=success]:bg-[var(--success)] data-[severity=success]:text-[var(--success-contrast)] data-[severity=info]:bg-[var(--info)] data-[severity=info]:text-[var(--info-contrast)] data-[severity=warning]:bg-[var(--warning)] data-[severity=warning]:text-[var(--warning-contrast)] data-[severity=danger]:bg-[var(--danger)] data-[severity=danger]:text-[var(--danger-contrast)]"
+    class="inline-flex items-center justify-center overflow-hidden border border-transparent leading-none text-tag-md data-[size=small]:text-tag-sm data-[size=medium]:gap-(--spacing-xs) data-[size=small]:gap-(--spacing-xxs) data-[size=medium]:h-6 data-[size=medium]:px-(--spacing-xs) data-[size=small]:h-5 data-[size=small]:px-(--spacing-xxs) rounded-(--shape-elements) data-[rounded]:rounded-full! focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) data-[severity=primary]:bg-(--primary-mask) data-[severity=primary]:text-(--primary) data-[severity=secondary]:border-(length:--border-width-default) data-[severity=secondary]:border-(--border-default) data-[severity=secondary]:bg-(--bg-canvas) data-[severity=secondary]:text-(--text-default) data-[severity=accent]:bg-(--accent) data-[severity=accent]:text-(--accent-contrast) data-[severity=contrast]:bg-(--bg-contrast) data-[severity=contrast]:text-(--text-contrast) data-[severity=success]:bg-(--success) data-[severity=success]:text-(--success-contrast) data-[severity=info]:bg-(--info) data-[severity=info]:text-(--info-contrast) data-[severity=warning]:bg-(--warning) data-[severity=warning]:text-(--warning-contrast) data-[severity=danger]:bg-(--danger) data-[severity=danger]:text-(--danger-contrast)"
   >
     <i
       v-if="icon"
diff --git a/packages/webkit/src/components/templates/deploy-success/deploy-success.vue b/packages/webkit/src/components/templates/deploy-success/deploy-success.vue
index e912fca83..fdfe2b02b 100644
--- a/packages/webkit/src/components/templates/deploy-success/deploy-success.vue
+++ b/packages/webkit/src/components/templates/deploy-success/deploy-success.vue
@@ -109,7 +109,7 @@
   const ItemActions = Item['Actions']
 
   const ROOT_CLASS =
-    'flex min-h-full w-full flex-col bg-[var(--bg-canvas)] transition-colors duration-fast-02 ease-productive-entrance motion-reduce:transition-none'
+    'flex min-h-full w-full flex-col bg-(--bg-canvas) transition-colors duration-fast-02 ease-productive-entrance motion-reduce:transition-none'
 
   const STEP_BUTTON_CLASS = cn(
     'cursor-pointer border-0 bg-transparent text-left text-inherit',
@@ -142,7 +142,7 @@
     </slot>
 
     <main
-      class="flex flex-1 flex-col items-center px-[var(--spacing-xxl)] py-[var(--spacing-xxl)]"
+      class="flex flex-1 flex-col items-center px-(--spacing-xxl) py-(--spacing-xxl)"
       :aria-labelledby="successHeadingId"
       :data-testid="`${testId}__main`"
     >
@@ -154,22 +154,22 @@
         <template #header>
           <slot name="success">
             <div
-              class="flex w-full items-start justify-between gap-[var(--spacing-md)]"
+              class="flex w-full items-start justify-between gap-(--spacing-md)"
               :data-testid="`${testId}__success`"
             >
-              <div class="flex min-w-0 flex-col gap-[var(--spacing-xs)]">
+              <div class="flex min-w-0 flex-col gap-(--spacing-xs)">
                 <h1
                   :id="successHeadingId"
-                  class="text-heading-sm text-[var(--text-default)] [word-break:break-word]"
+                  class="text-heading-sm text-(--text-default) [word-break:break-word]"
                   :data-testid="`${testId}__title`"
                 >
                   {{ title }}
                 </h1>
                 <div
-                  class="flex flex-wrap items-center gap-[var(--spacing-xs)]"
+                  class="flex flex-wrap items-center gap-(--spacing-xs)"
                   :data-testid="`${testId}__description-row`"
                 >
-                  <p class="text-body-sm whitespace-nowrap text-[var(--text-muted)]">
+                  <p class="text-body-sm whitespace-nowrap text-(--text-muted)">
                     {{ description }}
                   </p>
                   <Tag
@@ -196,11 +196,11 @@
         <template #content>
           <slot name="logs">
             <div
-              class="flex w-full flex-col gap-[var(--spacing-lg)] px-[var(--spacing-lg)] py-[var(--spacing-lg)]"
+              class="flex w-full flex-col gap-(--spacing-lg) px-(--spacing-lg) py-(--spacing-lg)"
               :data-testid="`${testId}__logs`"
             >
               <h2
-                class="text-heading-xs w-full text-[var(--text-default)] [word-break:break-word]"
+                class="text-heading-xs w-full text-(--text-default) [word-break:break-word]"
                 :data-testid="`${testId}__app-name`"
               >
                 {{ appName }}
@@ -221,22 +221,22 @@
 
         <template #footer>
           <div
-            class="flex w-full flex-col gap-[var(--spacing-md)] px-[var(--spacing-lg)] pb-[var(--spacing-sm)] pt-[var(--spacing-md)]"
+            class="flex w-full flex-col gap-(--spacing-md) px-(--spacing-lg) pb-(--spacing-sm) pt-(--spacing-md)"
           >
             <slot name="steps">
               <div
-                class="flex w-full flex-col gap-[var(--spacing-md)]"
+                class="flex w-full flex-col gap-(--spacing-md)"
                 :data-testid="`${testId}__steps`"
               >
                 <p
-                  class="w-full text-label-sm text-[var(--text-default)] [word-break:break-word]"
+                  class="w-full text-label-sm text-(--text-default) [word-break:break-word]"
                   :data-testid="`${testId}__steps-label`"
                 >
                   {{ stepsLabel }}
                 </p>
 
                 <div
-                  class="flex w-full flex-col gap-[var(--spacing-xs)]"
+                  class="flex w-full flex-col gap-(--spacing-xs)"
                   :data-testid="`${testId}__steps-list`"
                 >
                   <Item
@@ -254,7 +254,7 @@
                     >
                       <ItemMedia
                         media-kind="icon"
-                        class="relative z-[1] size-10! shrink-0 translate-y-0! self-center border-[var(--border-muted)] bg-[var(--bg-surface)]"
+                        class="relative z-1 size-10! shrink-0 translate-y-0! self-center border-(--border-muted) bg-(--bg-surface)"
                       >
                         <i
                           :class="step.icon"
@@ -262,13 +262,13 @@
                           aria-hidden="true"
                         />
                       </ItemMedia>
-                      <ItemContent class="relative z-[1]">
+                      <ItemContent class="relative z-1">
                         <ItemTitle>{{ step.title }}</ItemTitle>
                         <ItemDescription>{{ step.description }}</ItemDescription>
                       </ItemContent>
-                      <ItemActions class="relative z-[1]">
+                      <ItemActions class="relative z-1">
                         <i
-                          class="pi pi-chevron-right size-6 shrink-0 leading-none text-[var(--text-default)]"
+                          class="pi pi-chevron-right size-6 shrink-0 leading-none text-(--text-default)"
                           aria-hidden="true"
                         />
                       </ItemActions>
diff --git a/packages/webkit/src/components/templates/onboarding-form/onboarding-form.vue b/packages/webkit/src/components/templates/onboarding-form/onboarding-form.vue
index e12e7b100..0e2c9691f 100644
--- a/packages/webkit/src/components/templates/onboarding-form/onboarding-form.vue
+++ b/packages/webkit/src/components/templates/onboarding-form/onboarding-form.vue
@@ -136,7 +136,7 @@
   const onFooterLinkClick = (event: MouseEvent) => emit('footer-link-click', event)
 
   const rootClass = computed(() =>
-    cn('flex w-full max-w-[var(--container-lg)] flex-col', attrs.class as string | undefined)
+    cn('flex w-full max-w-(--container-lg) flex-col', attrs.class as string | undefined)
   )
 </script>
 
@@ -156,23 +156,23 @@
     >
       <template #content>
         <div
-          class="flex w-full flex-col gap-[var(--spacing-xl)] p-[var(--spacing-xl)]"
+          class="flex w-full flex-col gap-(--spacing-xl) p-(--spacing-xl)"
           :data-testid="`${testId}__body`"
         >
           <h1
             :id="headingId"
-            class="text-center text-heading-md text-[var(--text-default)] [word-break:break-word]"
+            class="text-center text-heading-md text-(--text-default) [word-break:break-word]"
             :data-testid="`${testId}__title`"
           >
             {{ title }}
           </h1>
 
           <section
-            class="flex w-full flex-col gap-[var(--spacing-xxs)]"
+            class="flex w-full flex-col gap-(--spacing-xxs)"
             :data-testid="`${testId}__plan-section`"
           >
             <p
-              class="text-body-sm text-[var(--text-muted)]"
+              class="text-body-sm text-(--text-muted)"
               :data-testid="`${testId}__plan-label`"
             >
               {{ planLabel }}
@@ -185,7 +185,7 @@
                 :data-testid="`${testId}__plan-card`"
               >
                 <ItemContent>
-                  <div class="flex flex-wrap items-center gap-[var(--spacing-xs)]">
+                  <div class="flex flex-wrap items-center gap-(--spacing-xs)">
                     <ItemTitle :data-testid="`${testId}__plan-title`">
                       {{ planTitle }}
                     </ItemTitle>
@@ -214,19 +214,19 @@
           </section>
 
           <section
-            class="flex w-full flex-col gap-[var(--spacing-xxs)]"
+            class="flex w-full flex-col gap-(--spacing-xxs)"
             :data-testid="`${testId}__usage-section`"
           >
             <label
               :id="`${usageFieldId}-label`"
               :for="usageFieldId"
-              class="text-body-sm text-[var(--text-muted)]"
+              class="text-body-sm text-(--text-muted)"
               :data-testid="`${testId}__usage-label`"
             >
               {{ usageLabel }}
               <span
                 v-if="usageRequired"
-                class="text-[var(--primary)]"
+                class="text-(--primary)"
                 aria-hidden="true"
               >
                 *
@@ -245,19 +245,19 @@
           </section>
 
           <section
-            class="flex w-full flex-col gap-[var(--spacing-xxs)]"
+            class="flex w-full flex-col gap-(--spacing-xxs)"
             :data-testid="`${testId}__full-name-section`"
           >
             <label
               :id="`${fullNameFieldId}-label`"
               :for="fullNameFieldId"
-              class="text-body-sm text-[var(--text-muted)]"
+              class="text-body-sm text-(--text-muted)"
               :data-testid="`${testId}__full-name-label`"
             >
               {{ fullNameLabel }}
               <span
                 v-if="fullNameRequired"
-                class="text-[var(--primary)]"
+                class="text-(--primary)"
                 aria-hidden="true"
               >
                 *
@@ -299,13 +299,13 @@
       <template #footer>
         <slot name="footer">
           <p
-            class="w-full text-center text-body-sm text-[var(--text-muted)] [word-break:break-word]"
+            class="w-full text-center text-body-sm text-(--text-muted) [word-break:break-word]"
             :data-testid="`${testId}__footer`"
           >
             {{ footerPrefix }}
             <a
               :href="footerLinkHref"
-              class="text-[var(--text-link)] transition-colors duration-fast-02 ease-productive-entrance hover:text-[var(--text-default)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] motion-reduce:transition-none"
+              class="text-(--text-link) transition-colors duration-fast-02 ease-productive-entrance hover:text-(--text-default) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) motion-reduce:transition-none"
               :data-testid="`${testId}__footer-link`"
               @click="onFooterLinkClick"
             >
diff --git a/packages/webkit/src/components/templates/plan-success/plan-success.vue b/packages/webkit/src/components/templates/plan-success/plan-success.vue
index d4aedca92..91aba52b8 100644
--- a/packages/webkit/src/components/templates/plan-success/plan-success.vue
+++ b/packages/webkit/src/components/templates/plan-success/plan-success.vue
@@ -69,7 +69,7 @@
   const GlobalHeaderBrand = GlobalHeader['Brand']
 
   const ROOT_CLASS =
-    'flex min-h-full w-full flex-col bg-[var(--bg-canvas)] transition-colors duration-fast-02 ease-productive-entrance motion-reduce:transition-none'
+    'flex min-h-full w-full flex-col bg-(--bg-canvas) transition-colors duration-fast-02 ease-productive-entrance motion-reduce:transition-none'
 </script>
 
 <template>
@@ -93,7 +93,7 @@
     </slot>
 
     <main
-      class="flex flex-1 flex-col items-center justify-center px-[var(--spacing-xxl)] py-[var(--spacing-xxl)]"
+      class="flex flex-1 flex-col items-center justify-center px-(--spacing-xxl) py-(--spacing-xxl)"
       :aria-labelledby="successHeadingId"
       :data-testid="`${testId}__main`"
     >
@@ -105,7 +105,7 @@
         <template #header>
           <slot name="success">
             <div
-              class="flex w-full flex-col items-center gap-[var(--spacing-xs)] px-[var(--spacing-xl)] py-[var(--spacing-md)] text-center"
+              class="flex w-full flex-col items-center gap-(--spacing-xs) px-(--spacing-xl) py-(--spacing-md) text-center"
               :data-testid="`${testId}__success`"
             >
               <span
@@ -113,22 +113,22 @@
                 :data-testid="`${testId}__success-icon`"
               >
                 <i
-                  class="pi pi-check text-heading-sm leading-none text-[var(--success)]"
+                  class="pi pi-check text-heading-sm leading-none text-(--success)"
                   aria-hidden="true"
                 />
               </span>
               <div
-                class="flex w-full max-w-[360px] flex-col gap-[var(--spacing-xxs)] [word-break:break-word]"
+                class="flex w-full max-w-[360px] flex-col gap-(--spacing-xxs) [word-break:break-word]"
               >
                 <h1
                   :id="successHeadingId"
-                  class="text-heading-sm text-[var(--text-default)]"
+                  class="text-heading-sm text-(--text-default)"
                   :data-testid="`${testId}__title`"
                 >
                   {{ title }}
                 </h1>
                 <p
-                  class="text-body-xs text-[var(--text-muted)]"
+                  class="text-body-xs text-(--text-muted)"
                   :data-testid="`${testId}__description`"
                 >
                   {{ description }}
@@ -141,44 +141,44 @@
         <template #content>
           <slot name="steps">
             <div
-              class="flex w-full flex-col gap-[var(--spacing-md)] px-[var(--spacing-xl)] py-[var(--spacing-xl)]"
+              class="flex w-full flex-col gap-(--spacing-md) px-(--spacing-xl) py-(--spacing-xl)"
               :data-testid="`${testId}__steps`"
             >
               <p
-                class="w-full text-button-md text-[var(--text-muted)] [word-break:break-word]"
+                class="w-full text-button-md text-(--text-muted) [word-break:break-word]"
                 :data-testid="`${testId}__steps-label`"
               >
                 {{ stepsLabel }}
               </p>
               <ol
-                class="flex w-full list-none flex-col gap-[var(--spacing-md)] p-0"
+                class="flex w-full list-none flex-col gap-(--spacing-md) p-0"
                 :data-testid="`${testId}__steps-list`"
               >
                 <li
                   v-for="(step, index) in steps"
                   :key="index"
-                  class="flex w-full items-start justify-between gap-[var(--spacing-sm)]"
+                  class="flex w-full items-start justify-between gap-(--spacing-sm)"
                   :data-testid="`${testId}__step-${index + 1}`"
                 >
                   <div
-                    class="flex size-10 shrink-0 items-center justify-center rounded-[var(--shape-button)] bg-[var(--bg-hover)] px-[var(--spacing-xs)] text-button-md text-[var(--text-default)]"
+                    class="flex size-10 shrink-0 items-center justify-center rounded-(--shape-button) bg-(--bg-hover) px-(--spacing-xs) text-button-md text-(--text-default)"
                     :data-testid="`${testId}__step-${index + 1}-badge`"
                     aria-hidden="true"
                   >
                     {{ index + 1 }}
                   </div>
                   <div
-                    class="flex min-w-0 flex-1 flex-col gap-[var(--spacing-xxs)] [word-break:break-word]"
+                    class="flex min-w-0 flex-1 flex-col gap-(--spacing-xxs) [word-break:break-word]"
                     :data-testid="`${testId}__step-${index + 1}-content`"
                   >
                     <p
-                      class="text-body-sm text-[var(--text-default)]"
+                      class="text-body-sm text-(--text-default)"
                       :data-testid="`${testId}__step-${index + 1}-title`"
                     >
                       {{ step.title }}
                     </p>
                     <p
-                      class="text-body-xs text-[var(--text-muted)]"
+                      class="text-body-xs text-(--text-muted)"
                       :data-testid="`${testId}__step-${index + 1}-description`"
                     >
                       {{ step.description }}
diff --git a/packages/webkit/src/components/templates/platform-shell/platform-shell.vue b/packages/webkit/src/components/templates/platform-shell/platform-shell.vue
index 293770ab3..7b2dd8553 100644
--- a/packages/webkit/src/components/templates/platform-shell/platform-shell.vue
+++ b/packages/webkit/src/components/templates/platform-shell/platform-shell.vue
@@ -54,7 +54,7 @@
   <div
     v-bind="$attrs"
     :data-testid="testId"
-    class="flex h-screen min-h-0 w-full flex-col bg-[var(--bg-canvas)]"
+    class="flex h-screen min-h-0 w-full flex-col bg-(--bg-canvas)"
   >
     <GlobalHeader
       :aria-label="props.headerAriaLabel"
@@ -84,11 +84,11 @@
       </aside>
 
       <main
-        class="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-[var(--bg-canvas)]"
+        class="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-(--bg-canvas)"
         :data-testid="`${testId}__main`"
       >
         <div
-          class="flex min-h-0 flex-1 flex-col gap-[var(--spacing-xl)] overflow-auto p-[var(--spacing-xl)]"
+          class="flex min-h-0 flex-1 flex-col gap-(--spacing-xl) overflow-auto p-(--spacing-xl)"
           :data-testid="`${testId}__main-inner`"
         >
           <div
diff --git a/packages/webkit/src/components/templates/sign-up-card/sign-up-card.vue b/packages/webkit/src/components/templates/sign-up-card/sign-up-card.vue
index 28ba364eb..713448d66 100644
--- a/packages/webkit/src/components/templates/sign-up-card/sign-up-card.vue
+++ b/packages/webkit/src/components/templates/sign-up-card/sign-up-card.vue
@@ -74,7 +74,7 @@
 
   const rootClass = computed(() => {
     const classes = [
-      'flex w-full max-w-[var(--container-sm)] flex-col items-center gap-[var(--spacing-xs)]'
+      'flex w-full max-w-(--container-sm) flex-col items-center gap-(--spacing-xs)'
     ]
 
     if (attrs.class) {
@@ -86,48 +86,48 @@
 
   const cardClass = [
     'flex w-full shrink-0 flex-col items-start overflow-clip',
-    'rounded-[var(--shape-card)] border border-[length:var(--border-width-default,1px)]',
-    'border-[var(--border-default)] bg-[var(--bg-surface)]'
+    'rounded-(--shape-card) border border-[length:var(--border-width-default,1px)]',
+    'border-(--border-default) bg-(--bg-surface)'
   ]
 
   const contentClass = [
-    'flex w-full shrink-0 flex-col items-start gap-[var(--spacing-xl)]',
-    'px-[var(--spacing-xl)] py-[var(--spacing-xl)]'
+    'flex w-full shrink-0 flex-col items-start gap-(--spacing-xl)',
+    'px-(--spacing-xl) py-(--spacing-xl)'
   ]
 
   const headerClass = [
-    'flex w-full max-w-[var(--container-sm)] shrink-0 flex-col items-start',
-    'gap-[var(--spacing-xs)] [word-break:break-word]'
+    'flex w-full max-w-(--container-sm) shrink-0 flex-col items-start',
+    'gap-(--spacing-xs) [word-break:break-word]'
   ]
 
-  const titleClass = 'text-heading-sm w-full text-[var(--text-default)] [word-break:break-word]'
+  const titleClass = 'text-heading-sm w-full text-(--text-default) [word-break:break-word]'
 
-  const subtitleClass = 'text-body-sm w-full text-[var(--text-muted)] [word-break:break-word]'
+  const subtitleClass = 'text-body-sm w-full text-(--text-muted) [word-break:break-word]'
 
-  const actionsClass = ['flex w-full shrink-0 flex-col items-start gap-[var(--spacing-xl)]']
+  const actionsClass = ['flex w-full shrink-0 flex-col items-start gap-(--spacing-xl)']
 
-  const socialClass = 'flex w-full shrink-0 flex-col items-start gap-[var(--spacing-sm)]'
+  const socialClass = 'flex w-full shrink-0 flex-col items-start gap-(--spacing-sm)'
 
   const dividerClass = [
     'm-0 w-full shrink-0 border-0',
-    'border-t border-[length:var(--border-width-default,1px)] border-t-[var(--border-default)]'
+    'border-t border-[length:var(--border-width-default,1px)] border-t-(--border-default)'
   ]
 
   const legalClass =
-    'text-body-sm w-full shrink-0 text-center text-[var(--text-muted)] [word-break:break-word]'
+    'text-body-sm w-full shrink-0 text-center text-(--text-muted) [word-break:break-word]'
 
   const linkClass =
-    'text-[var(--text-link)] transition-colors hover:text-[var(--text-default)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--ring-color)] rounded-[var(--shape-button)]'
+    'text-(--text-link) transition-colors hover:text-(--text-default) focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-(--ring-color) rounded-(--shape-button)'
 
-  const footerClass = 'flex w-full shrink-0 items-center justify-center gap-[var(--spacing-xs)]'
+  const footerClass = 'flex w-full shrink-0 items-center justify-center gap-(--spacing-xs)'
 
   const footerPromptClass =
-    'text-body-sm shrink-0 text-center text-[var(--text-muted)] whitespace-nowrap'
+    'text-body-sm shrink-0 text-center text-(--text-muted) whitespace-nowrap'
 
   const signInLinkClass = [
-    'text-body-sm inline-flex h-10 shrink-0 items-center text-[var(--text-link)]',
-    'rounded-[var(--shape-button)] transition-colors hover:text-[var(--text-default)]',
-    'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--ring-color)]'
+    'text-body-sm inline-flex h-10 shrink-0 items-center text-(--text-link)',
+    'rounded-(--shape-button) transition-colors hover:text-(--text-default)',
+    'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-(--ring-color)'
   ]
 
   const onGithubClick = (event) => emit('github-click', event)
diff --git a/packages/webkit/src/styles.css b/packages/webkit/src/styles.css
index 05907e970..ded4b2c42 100644
--- a/packages/webkit/src/styles.css
+++ b/packages/webkit/src/styles.css
@@ -1,6 +1,6 @@
 /*
  * Registers webkit's source files with Tailwind v4 so the component utility classes
- * (data-[kind=…]:bg-[var(--…)] …) compile in the consumer's build — node_modules is
+ * (data-[kind=…]:bg-(--…) …) compile in the consumer's build — node_modules is
  * excluded from Tailwind's automatic content detection, so without this the components
  * render UNSTYLED.
  *
diff --git a/packages/webkit/src/utils/cn.js b/packages/webkit/src/utils/cn.js
index 965b05810..617fe4f5f 100644
--- a/packages/webkit/src/utils/cn.js
+++ b/packages/webkit/src/utils/cn.js
@@ -8,7 +8,7 @@ const twMerge = extendTailwindMerge({
   extend: {
     classGroups: {
       // Default twMerge treats `text-body-*` as text-color, so pairing
-      // `text-body-sm` + `text-[var(--text-muted)]` drops the typography class.
+      // `text-body-sm` + `text-(--text-muted)` drops the typography class.
       'font-size': [{ text: [(part) => SEMANTIC_TEXT_SIZE_RE.test(part)] }]
     }
   }
@@ -21,8 +21,8 @@ const twMerge = extendTailwindMerge({
  * (token-aware deduplication). Consumer overrides win predictably:
  *
  *   cn('px-4 text-body-sm', 'px-6')                            -> 'text-body-sm px-6'
- *   cn('text-body-sm', 'text-[var(--text-muted)]')             -> both kept
- *   cn('text-[var(--text-default)]', cond && 'text-[var(--text-muted)]')
+ *   cn('text-body-sm', 'text-(--text-muted)')             -> both kept
+ *   cn('text-(--text-default)', cond && 'text-(--text-muted)')
  *
  * Use inside `rootClasses` computeds when consumer-provided `attrs.class`
  * may override internal token choices. For simple additive cases, plain
diff --git a/packages/webkit/test/codemods/canonicalize-tw-v4.test.mjs b/packages/webkit/test/codemods/canonicalize-tw-v4.test.mjs
new file mode 100644
index 000000000..2bf22f26b
--- /dev/null
+++ b/packages/webkit/test/codemods/canonicalize-tw-v4.test.mjs
@@ -0,0 +1,82 @@
+// ENG-47001 — proves the Tailwind v4 canonicalization codemod converts families A/B/E
+// and PROVABLY leaves families C and D bracketed. C (`[--x:var(--y)]`) and D
+// (`w-[calc(var(--a)*2)]`, gradients, var-with-fallback) compile to NOTHING in the
+// paren shorthand, so a greedy rewrite would silently delete styling with no build or
+// lint error. This test is the net the acceptance criteria requires.
+
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+
+import { convert } from '../../../../scripts/codemods/canonicalize-tw-v4.mjs'
+
+const only = (s) => convert(s).out
+
+test('family A — whole-value var becomes the paren shorthand', () => {
+  for (const [from, to] of [
+    ['bg-[var(--primary)]', 'bg-(--primary)'],
+    ['focus-visible:ring-offset-[var(--bg-canvas)]', 'focus-visible:ring-offset-(--bg-canvas)'],
+    ['max-w-[var(--container-2xl)]', 'max-w-(--container-2xl)'],
+    ['data-[disabled]:bg-[var(--bg-disabled)]', 'data-[disabled]:bg-(--bg-disabled)']
+  ]) {
+    assert.equal(only(from), to)
+  }
+})
+
+test('family B — typed value keeps its type inside the parens', () => {
+  for (const [from, to] of [
+    ['text-[length:var(--text-body-md)]', 'text-(length:--text-body-md)'],
+    ['border-[color:var(--border-default)]', 'border-(color:--border-default)'],
+    ['font-[family-name:var(--font-sora)]', 'font-(family-name:--font-sora)']
+  ]) {
+    assert.equal(only(from), to)
+  }
+})
+
+test('family E — numeric z-index arbitrary loses its brackets', () => {
+  for (const [from, to] of [
+    ['z-[1]', 'z-1'],
+    ['z-[2]', 'z-2'],
+    ['z-[1002]', 'z-1002']
+  ]) {
+    assert.equal(only(from), to)
+  }
+})
+
+test('family C — custom-property declarations stay bracketed (paren form emits no CSS)', () => {
+  for (const c of [
+    '[--table-row-bg:var(--bg-surface)]',
+    '[--menu-item-ring-offset:var(--bg-surface)]',
+    'data-[state=selected]:[--table-row-bg:var(--bg-selected)]',
+    'data-[hoverable]:hover:[--table-row-bg:var(--bg-canvas)]'
+  ]) {
+    assert.equal(only(c), c, `family C must be left untouched: ${c}`)
+  }
+})
+
+test('family D — expression values stay bracketed', () => {
+  for (const d of [
+    'w-[calc(var(--a)*2)]',
+    'shadow-[inset_0_0_0_999px_var(--bg-hover)]',
+    'bg-[linear-gradient(90deg,var(--color-base-white),var(--color-blue-500))]',
+    '[transform-origin:var(--popup-origin,center)]',
+    '[scrollbar-color:var(--border-muted)_transparent]',
+    // var WITH a fallback is not a bare whole-value var — the paren shorthand cannot
+    // express the comma cleanly, so it must stay bracketed too.
+    'bg-[var(--table-row-bg,var(--bg-surface))]',
+    'text-[length:var(--border-width-default,1px)]'
+  ]) {
+    assert.equal(only(d), d, `family D must be left untouched: ${d}`)
+  }
+})
+
+test('a real mixed line — table-row root — converts A and B while leaving C intact', () => {
+  const line =
+    '[--table-row-bg:var(--bg-surface)] bg-[var(--table-row-bg)] ' +
+    'border-b-[length:var(--border-width-default)] border-[var(--border-default)] ' +
+    'data-[state=selected]:[--table-row-bg:var(--bg-selected)] z-[10]'
+  const expected =
+    '[--table-row-bg:var(--bg-surface)] bg-(--table-row-bg) ' +
+    'border-b-(length:--border-width-default) border-(--border-default) ' +
+    'data-[state=selected]:[--table-row-bg:var(--bg-selected)] z-10'
+  assert.equal(only(line), expected)
+})
diff --git a/scripts/codemods/canonicalize-tw-v4.mjs b/scripts/codemods/canonicalize-tw-v4.mjs
new file mode 100644
index 000000000..bb6b8510e
--- /dev/null
+++ b/scripts/codemods/canonicalize-tw-v4.mjs
@@ -0,0 +1,137 @@
+#!/usr/bin/env node
+// ENG-47001 — canonicalize Tailwind v4 arbitrary-value syntax.
+//
+// Rewrites the three families the real v4 compiler (tailwindcss 4.3.3) proved emit
+// byte-identical CSS:
+//   A  whole-value var   prop-[var(--x)]        -> prop-(--x)
+//   B  typed value       prop-[type:var(--x)]   -> prop-(type:--x)
+//   E  numeric arbitrary z-[<int>]              -> z-<int>          (z-index only; the
+//                                                  only numeric-arbitrary prefix in-repo,
+//                                                  and z-<n> == z-[n] for any integer)
+//
+// It provably LEAVES two families bracketed, because converting them emits no CSS:
+//   C  custom-property declaration  [--x:var(--y)]      (type segment starts with `--`)
+//   D  expression value             w-[calc(var(--a)*2)] (bracket opens with calc/min/…)
+//
+// Both are excluded by construction: A only fires when `[` is immediately followed by
+// `var(`; B only when the type segment starts with a letter. Neither can match C or D.
+// verify-skips.test.mjs pins that.
+//
+// Usage:  node scripts/codemods/canonicalize-tw-v4.mjs [--write]
+//         (default is a dry run that only reports)
+
+import { readFileSync, writeFileSync, statSync, readdirSync } from 'node:fs'
+import { join, extname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const REPO = fileURLToPath(new URL('../..', import.meta.url))
+
+// Areas the sweep covers (acceptance criteria). apps/icons-gallery (Tailwind v3) is
+// deliberately absent — it must stay untouched.
+const ROOTS = [
+  'packages/webkit/src',
+  'packages/webkit/docs',
+  'packages/webkit/cli-templates',
+  'packages/theme',
+  'apps/storybook',
+  '.specs',
+  '.claude'
+]
+
+const EXTS = new Set(['.vue', '.ts', '.js', '.mjs', '.cjs', '.md', '.mdx', '.css', '.scss'])
+const SKIP_DIRS = new Set(['node_modules', 'dist', 'coverage', '.git', 'storybook-static'])
+
+// --- the three conversions ------------------------------------------------------
+// B first (it consumes `[type:var(--x)]`); A next (`[var(--x)]`); E last.
+const A = { re: /\[var\((--[A-Za-z0-9-]+)\)\]/g, to: '($1)' }
+const B = { re: /\[([a-z][a-z-]*):var\((--[A-Za-z0-9-]+)\)\]/g, to: '($1:$2)' }
+const E = { re: /\bz-\[(\d+)\]/g, to: 'z-$1' }
+
+// Strong invariant: collect every arbitrary bracket value that mentions `var(` — the
+// full var-bearing surface. The ones A/B convert leave the brackets; every OTHER
+// var-bearing bracket (family C custom-property declarations, family D expression
+// values) must survive the codemod byte-for-byte. We compare this residual multiset
+// before and after; if a single C/D bracket changed, the codemod is unsafe.
+const VAR_BRACKET = /\[[^\][]*var\([^\][]*\)[^\][]*\]/g
+const A_MATCH = /^\[var\(--[A-Za-z0-9-]+\)\]$/
+const B_MATCH = /^\[[a-z][a-z-]*:var\(--[A-Za-z0-9-]+\)\]$/
+
+function residualVarBrackets(text) {
+  return (text.match(VAR_BRACKET) || [])
+    .filter((b) => !A_MATCH.test(b) && !B_MATCH.test(b))
+    .sort()
+}
+
+export function convert(text) {
+  let out = text
+  let a = 0
+  let b = 0
+  let e = 0
+  out = out.replace(B.re, (...m) => (b++, `(${m[1]}:${m[2]})`))
+  out = out.replace(A.re, (...m) => (a++, `(${m[1]})`))
+  out = out.replace(E.re, (...m) => (e++, `z-${m[1]}`))
+  return { out, a, b, e }
+}
+
+function walk(dir, acc) {
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    if (entry.name.startsWith('.') && entry.name !== '.specs' && entry.name !== '.claude') {
+      // allow the two dotted roots through, skip other dotfiles/dirs
+      if (!(dir === REPO && (entry.name === '.specs' || entry.name === '.claude'))) {
+        if (entry.isDirectory() && entry.name.startsWith('.')) continue
+      }
+    }
+    const full = join(dir, entry.name)
+    if (entry.isDirectory()) {
+      if (SKIP_DIRS.has(entry.name)) continue
+      walk(full, acc)
+    } else if (EXTS.has(extname(entry.name))) {
+      acc.push(full)
+    }
+  }
+  return acc
+}
+
+function main() {
+  const write = process.argv.includes('--write')
+  const files = []
+  for (const root of ROOTS) walk(join(REPO, root), files)
+
+  let totalA = 0
+  let totalB = 0
+  let totalE = 0
+  let changedFiles = 0
+  let residualTotal = 0
+
+  for (const file of files) {
+    const text = readFileSync(file, 'utf8')
+    const before = residualVarBrackets(text)
+    residualTotal += before.length
+
+    const { out, a, b, e } = convert(text)
+    if (a + b + e === 0) continue
+
+    // Invariant: every var-bearing bracket that is NOT an A/B conversion (i.e. every
+    // family C / family D site) must be byte-identical after the codemod.
+    const after = residualVarBrackets(out)
+    if (before.length !== after.length || before.some((v, i) => v !== after[i])) {
+      throw new Error(`residual var-bracket set changed in ${file} — unsafe, aborting.`)
+    }
+
+    totalA += a
+    totalB += b
+    totalE += e
+    changedFiles++
+    if (write) writeFileSync(file, out)
+  }
+
+  console.log(`${write ? 'APPLIED' : 'DRY RUN'} — scanned ${files.length} files`)
+  console.log(`  Family A (prop-[var(--x)]   -> prop-(--x))     : ${totalA}`)
+  console.log(`  Family B (prop-[type:var()] -> prop-(type:--x)): ${totalB}`)
+  console.log(`  Family E (z-[<int>]         -> z-<int>)        : ${totalE}`)
+  console.log(`  files changed                                  : ${changedFiles}`)
+  console.log(`  C/D var-bearing brackets left untouched        : ${residualTotal}`)
+}
+
+// Only run when invoked directly (not when imported by the test).
+if (process.argv[1] && process.argv[1].endsWith('canonicalize-tw-v4.mjs')) main()

From 11846e43f3acff0a6b05c24ae927e99f8d3b8cf8 Mon Sep 17 00:00:00 2001
From: Isaque dos Santos <isaque.santos@azion.com>
Date: Mon, 3 Aug 2026 20:53:03 -0300
Subject: [PATCH 3/6] chore: [ENG-47001] drop the one-time codemod and strip
 test comments
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The canonicalization sweep is applied and committed, so the one-shot codemod
(scripts/codemods/canonicalize-tw-v4.mjs) and its skip-proof test are no longer
needed — the permanent protection is the token-check guardrail tests plus the
CI visual baselines (which prove the A/B/E conversions are byte-identical).
Also removes the explanatory comments from the guardrail tests.
---
 .../test/codemods/canonicalize-tw-v4.test.mjs |  82 -----------
 .../test/eslint-plugin/token-checks.test.mjs  |   6 -
 scripts/codemods/canonicalize-tw-v4.mjs       | 137 ------------------
 3 files changed, 225 deletions(-)
 delete mode 100644 packages/webkit/test/codemods/canonicalize-tw-v4.test.mjs
 delete mode 100644 scripts/codemods/canonicalize-tw-v4.mjs

diff --git a/packages/webkit/test/codemods/canonicalize-tw-v4.test.mjs b/packages/webkit/test/codemods/canonicalize-tw-v4.test.mjs
deleted file mode 100644
index 2bf22f26b..000000000
--- a/packages/webkit/test/codemods/canonicalize-tw-v4.test.mjs
+++ /dev/null
@@ -1,82 +0,0 @@
-// ENG-47001 — proves the Tailwind v4 canonicalization codemod converts families A/B/E
-// and PROVABLY leaves families C and D bracketed. C (`[--x:var(--y)]`) and D
-// (`w-[calc(var(--a)*2)]`, gradients, var-with-fallback) compile to NOTHING in the
-// paren shorthand, so a greedy rewrite would silently delete styling with no build or
-// lint error. This test is the net the acceptance criteria requires.
-
-import { test } from 'node:test'
-import assert from 'node:assert/strict'
-
-import { convert } from '../../../../scripts/codemods/canonicalize-tw-v4.mjs'
-
-const only = (s) => convert(s).out
-
-test('family A — whole-value var becomes the paren shorthand', () => {
-  for (const [from, to] of [
-    ['bg-[var(--primary)]', 'bg-(--primary)'],
-    ['focus-visible:ring-offset-[var(--bg-canvas)]', 'focus-visible:ring-offset-(--bg-canvas)'],
-    ['max-w-[var(--container-2xl)]', 'max-w-(--container-2xl)'],
-    ['data-[disabled]:bg-[var(--bg-disabled)]', 'data-[disabled]:bg-(--bg-disabled)']
-  ]) {
-    assert.equal(only(from), to)
-  }
-})
-
-test('family B — typed value keeps its type inside the parens', () => {
-  for (const [from, to] of [
-    ['text-[length:var(--text-body-md)]', 'text-(length:--text-body-md)'],
-    ['border-[color:var(--border-default)]', 'border-(color:--border-default)'],
-    ['font-[family-name:var(--font-sora)]', 'font-(family-name:--font-sora)']
-  ]) {
-    assert.equal(only(from), to)
-  }
-})
-
-test('family E — numeric z-index arbitrary loses its brackets', () => {
-  for (const [from, to] of [
-    ['z-[1]', 'z-1'],
-    ['z-[2]', 'z-2'],
-    ['z-[1002]', 'z-1002']
-  ]) {
-    assert.equal(only(from), to)
-  }
-})
-
-test('family C — custom-property declarations stay bracketed (paren form emits no CSS)', () => {
-  for (const c of [
-    '[--table-row-bg:var(--bg-surface)]',
-    '[--menu-item-ring-offset:var(--bg-surface)]',
-    'data-[state=selected]:[--table-row-bg:var(--bg-selected)]',
-    'data-[hoverable]:hover:[--table-row-bg:var(--bg-canvas)]'
-  ]) {
-    assert.equal(only(c), c, `family C must be left untouched: ${c}`)
-  }
-})
-
-test('family D — expression values stay bracketed', () => {
-  for (const d of [
-    'w-[calc(var(--a)*2)]',
-    'shadow-[inset_0_0_0_999px_var(--bg-hover)]',
-    'bg-[linear-gradient(90deg,var(--color-base-white),var(--color-blue-500))]',
-    '[transform-origin:var(--popup-origin,center)]',
-    '[scrollbar-color:var(--border-muted)_transparent]',
-    // var WITH a fallback is not a bare whole-value var — the paren shorthand cannot
-    // express the comma cleanly, so it must stay bracketed too.
-    'bg-[var(--table-row-bg,var(--bg-surface))]',
-    'text-[length:var(--border-width-default,1px)]'
-  ]) {
-    assert.equal(only(d), d, `family D must be left untouched: ${d}`)
-  }
-})
-
-test('a real mixed line — table-row root — converts A and B while leaving C intact', () => {
-  const line =
-    '[--table-row-bg:var(--bg-surface)] bg-[var(--table-row-bg)] ' +
-    'border-b-[length:var(--border-width-default)] border-[var(--border-default)] ' +
-    'data-[state=selected]:[--table-row-bg:var(--bg-selected)] z-[10]'
-  const expected =
-    '[--table-row-bg:var(--bg-surface)] bg-(--table-row-bg) ' +
-    'border-b-(length:--border-width-default) border-(--border-default) ' +
-    'data-[state=selected]:[--table-row-bg:var(--bg-selected)] z-10'
-  assert.equal(only(line), expected)
-})
diff --git a/packages/webkit/test/eslint-plugin/token-checks.test.mjs b/packages/webkit/test/eslint-plugin/token-checks.test.mjs
index 25ffc00db..738f7029d 100644
--- a/packages/webkit/test/eslint-plugin/token-checks.test.mjs
+++ b/packages/webkit/test/eslint-plugin/token-checks.test.mjs
@@ -76,9 +76,6 @@ test('the one-level nesting limit is pinned', () => {
   assert.ok(!found.includes('zero-unit-in-calc'), 'zero-unit-in-calc cannot see this deep')
 })
 
-// ENG-47001: the six `[`-keyed guardrails must catch the canonical v4 paren spelling
-// (`prop-(…)`) too — accepting the IntelliSense suggestion must not walk through the
-// typography / motion / animation gates. Each case is checked in both spellings.
 test('the arbitrary-value guardrails catch the paren spelling as well as the bracket spelling', () => {
   const cases = [
     ['typography-raw-length', 'text-[length:var(--text-body-md)]', 'text-(length:--text-body-md)'],
@@ -108,9 +105,6 @@ test('the paren spellings named in ENG-47001 acceptance are all caught', () => {
 })
 
 test('the widened guardrails do not fire on the canonical whole-value paren token', () => {
-  // `bg-(--primary)` and friends (family A) are the sanctioned canonical form — the
-  // motion/typography guards key on their own prefixes, so a plain color/spacing token
-  // in paren form must stay silent.
   for (const content of ['bg-(--primary)', 'max-w-(--container-2xl)', 'ring-offset-(--bg-canvas)']) {
     const found = ids(content)
     for (const id of [
diff --git a/scripts/codemods/canonicalize-tw-v4.mjs b/scripts/codemods/canonicalize-tw-v4.mjs
deleted file mode 100644
index bb6b8510e..000000000
--- a/scripts/codemods/canonicalize-tw-v4.mjs
+++ /dev/null
@@ -1,137 +0,0 @@
-#!/usr/bin/env node
-// ENG-47001 — canonicalize Tailwind v4 arbitrary-value syntax.
-//
-// Rewrites the three families the real v4 compiler (tailwindcss 4.3.3) proved emit
-// byte-identical CSS:
-//   A  whole-value var   prop-[var(--x)]        -> prop-(--x)
-//   B  typed value       prop-[type:var(--x)]   -> prop-(type:--x)
-//   E  numeric arbitrary z-[<int>]              -> z-<int>          (z-index only; the
-//                                                  only numeric-arbitrary prefix in-repo,
-//                                                  and z-<n> == z-[n] for any integer)
-//
-// It provably LEAVES two families bracketed, because converting them emits no CSS:
-//   C  custom-property declaration  [--x:var(--y)]      (type segment starts with `--`)
-//   D  expression value             w-[calc(var(--a)*2)] (bracket opens with calc/min/…)
-//
-// Both are excluded by construction: A only fires when `[` is immediately followed by
-// `var(`; B only when the type segment starts with a letter. Neither can match C or D.
-// verify-skips.test.mjs pins that.
-//
-// Usage:  node scripts/codemods/canonicalize-tw-v4.mjs [--write]
-//         (default is a dry run that only reports)
-
-import { readFileSync, writeFileSync, statSync, readdirSync } from 'node:fs'
-import { join, extname } from 'node:path'
-import { fileURLToPath } from 'node:url'
-
-const REPO = fileURLToPath(new URL('../..', import.meta.url))
-
-// Areas the sweep covers (acceptance criteria). apps/icons-gallery (Tailwind v3) is
-// deliberately absent — it must stay untouched.
-const ROOTS = [
-  'packages/webkit/src',
-  'packages/webkit/docs',
-  'packages/webkit/cli-templates',
-  'packages/theme',
-  'apps/storybook',
-  '.specs',
-  '.claude'
-]
-
-const EXTS = new Set(['.vue', '.ts', '.js', '.mjs', '.cjs', '.md', '.mdx', '.css', '.scss'])
-const SKIP_DIRS = new Set(['node_modules', 'dist', 'coverage', '.git', 'storybook-static'])
-
-// --- the three conversions ------------------------------------------------------
-// B first (it consumes `[type:var(--x)]`); A next (`[var(--x)]`); E last.
-const A = { re: /\[var\((--[A-Za-z0-9-]+)\)\]/g, to: '($1)' }
-const B = { re: /\[([a-z][a-z-]*):var\((--[A-Za-z0-9-]+)\)\]/g, to: '($1:$2)' }
-const E = { re: /\bz-\[(\d+)\]/g, to: 'z-$1' }
-
-// Strong invariant: collect every arbitrary bracket value that mentions `var(` — the
-// full var-bearing surface. The ones A/B convert leave the brackets; every OTHER
-// var-bearing bracket (family C custom-property declarations, family D expression
-// values) must survive the codemod byte-for-byte. We compare this residual multiset
-// before and after; if a single C/D bracket changed, the codemod is unsafe.
-const VAR_BRACKET = /\[[^\][]*var\([^\][]*\)[^\][]*\]/g
-const A_MATCH = /^\[var\(--[A-Za-z0-9-]+\)\]$/
-const B_MATCH = /^\[[a-z][a-z-]*:var\(--[A-Za-z0-9-]+\)\]$/
-
-function residualVarBrackets(text) {
-  return (text.match(VAR_BRACKET) || [])
-    .filter((b) => !A_MATCH.test(b) && !B_MATCH.test(b))
-    .sort()
-}
-
-export function convert(text) {
-  let out = text
-  let a = 0
-  let b = 0
-  let e = 0
-  out = out.replace(B.re, (...m) => (b++, `(${m[1]}:${m[2]})`))
-  out = out.replace(A.re, (...m) => (a++, `(${m[1]})`))
-  out = out.replace(E.re, (...m) => (e++, `z-${m[1]}`))
-  return { out, a, b, e }
-}
-
-function walk(dir, acc) {
-  for (const entry of readdirSync(dir, { withFileTypes: true })) {
-    if (entry.name.startsWith('.') && entry.name !== '.specs' && entry.name !== '.claude') {
-      // allow the two dotted roots through, skip other dotfiles/dirs
-      if (!(dir === REPO && (entry.name === '.specs' || entry.name === '.claude'))) {
-        if (entry.isDirectory() && entry.name.startsWith('.')) continue
-      }
-    }
-    const full = join(dir, entry.name)
-    if (entry.isDirectory()) {
-      if (SKIP_DIRS.has(entry.name)) continue
-      walk(full, acc)
-    } else if (EXTS.has(extname(entry.name))) {
-      acc.push(full)
-    }
-  }
-  return acc
-}
-
-function main() {
-  const write = process.argv.includes('--write')
-  const files = []
-  for (const root of ROOTS) walk(join(REPO, root), files)
-
-  let totalA = 0
-  let totalB = 0
-  let totalE = 0
-  let changedFiles = 0
-  let residualTotal = 0
-
-  for (const file of files) {
-    const text = readFileSync(file, 'utf8')
-    const before = residualVarBrackets(text)
-    residualTotal += before.length
-
-    const { out, a, b, e } = convert(text)
-    if (a + b + e === 0) continue
-
-    // Invariant: every var-bearing bracket that is NOT an A/B conversion (i.e. every
-    // family C / family D site) must be byte-identical after the codemod.
-    const after = residualVarBrackets(out)
-    if (before.length !== after.length || before.some((v, i) => v !== after[i])) {
-      throw new Error(`residual var-bracket set changed in ${file} — unsafe, aborting.`)
-    }
-
-    totalA += a
-    totalB += b
-    totalE += e
-    changedFiles++
-    if (write) writeFileSync(file, out)
-  }
-
-  console.log(`${write ? 'APPLIED' : 'DRY RUN'} — scanned ${files.length} files`)
-  console.log(`  Family A (prop-[var(--x)]   -> prop-(--x))     : ${totalA}`)
-  console.log(`  Family B (prop-[type:var()] -> prop-(type:--x)): ${totalB}`)
-  console.log(`  Family E (z-[<int>]         -> z-<int>)        : ${totalE}`)
-  console.log(`  files changed                                  : ${changedFiles}`)
-  console.log(`  C/D var-bearing brackets left untouched        : ${residualTotal}`)
-}
-
-// Only run when invoked directly (not when imported by the test).
-if (process.argv[1] && process.argv[1].endsWith('canonicalize-tw-v4.mjs')) main()

From 35f962a1bab46ccbce5dfd1eeca5d097e53fdcfd Mon Sep 17 00:00:00 2001
From: Isaque dos Santos <isaque.santos@azion.com>
Date: Tue, 4 Aug 2026 08:03:14 -0300
Subject: [PATCH 4/6] style(webkit): [ENG-47001] run prettier on the files
 touched by the sweep
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The canonicalization changed class-string lengths, so prettier re-wraps a few
:class attributes and the token-check test. Formatting only — no behavior change.
---
 .../cli-templates/claude/rules/webkit-tokens.md    |  4 +---
 .../claude/skills/webkit-form/SKILL.md             |  5 +----
 .../skills/webkit-theming-dark-mode/SKILL.md       |  4 +---
 packages/webkit/docs/GUIDELINES.md                 | 10 +++++-----
 packages/webkit/docs/STYLEGUIDE.md                 |  6 +++---
 .../content/card-pricing/card-pricing.vue          |  5 +----
 .../src/components/content/currency/currency.vue   | 14 +++-----------
 .../src/components/data/code-block/code-block.vue  |  5 +----
 .../src/components/inputs/calendar/calendar.vue    |  4 +---
 .../field-checkbox-block/field-checkbox-block.vue  |  3 +--
 .../inputs/field-checkbox/field-checkbox.vue       |  3 +--
 .../inputs/field-radio-block/field-radio-block.vue |  3 +--
 .../components/inputs/field-radio/field-radio.vue  |  3 +--
 .../field-switch-block/field-switch-block.vue      |  3 +--
 .../navigation/breadcrumb/breadcrumb-separator.vue |  5 +----
 .../navigation/breadcrumb/breadcrumb.vue           |  4 +---
 .../navigation/navigation-menu/presets/styles.js   |  3 +--
 .../navigation/tab-view/tab-view-item.vue          |  4 +---
 .../templates/sign-up-card/sign-up-card.vue        |  4 +---
 .../test/eslint-plugin/token-checks.test.mjs       |  6 +++++-
 20 files changed, 32 insertions(+), 66 deletions(-)

diff --git a/packages/webkit/cli-templates/claude/rules/webkit-tokens.md b/packages/webkit/cli-templates/claude/rules/webkit-tokens.md
index b35a969c1..1e47c6c9d 100644
--- a/packages/webkit/cli-templates/claude/rules/webkit-tokens.md
+++ b/packages/webkit/cli-templates/claude/rules/webkit-tokens.md
@@ -20,9 +20,7 @@ The design system ships tokens. Use them. Never hardcode a raw color or an off-s
 ## Correct
 
 ```html
-<div
-  class="bg-(--bg-surface) text-(--text-default) p-(--spacing-md) rounded-(--shape-card)"
->
+<div class="bg-(--bg-surface) text-(--text-default) p-(--spacing-md) rounded-(--shape-card)">
   ...
 </div>
 ```
diff --git a/packages/webkit/cli-templates/claude/skills/webkit-form/SKILL.md b/packages/webkit/cli-templates/claude/skills/webkit-form/SKILL.md
index ae6a33b87..62375ad8f 100644
--- a/packages/webkit/cli-templates/claude/skills/webkit-form/SKILL.md
+++ b/packages/webkit/cli-templates/claude/skills/webkit-form/SKILL.md
@@ -772,10 +772,7 @@ Each section is a **group of related controls**. Give it programmatic grouping w
 attribute, which is how you lock the scope on submit.
 
 ```vue
-<fieldset
-  class="m-0 flex min-w-0 flex-col gap-(--spacing-lg) border-0 p-0"
-  :disabled="submitting"
->
+<fieldset class="m-0 flex min-w-0 flex-col gap-(--spacing-lg) border-0 p-0" :disabled="submitting">
   <legend class="sr-only">Account settings</legend>
   <!-- sections: CardBox + Item.List (Approach A) OR stacked field-* (Approach B) -->
 </fieldset>
diff --git a/packages/webkit/cli-templates/claude/skills/webkit-theming-dark-mode/SKILL.md b/packages/webkit/cli-templates/claude/skills/webkit-theming-dark-mode/SKILL.md
index cc321fcf7..35c038ade 100644
--- a/packages/webkit/cli-templates/claude/skills/webkit-theming-dark-mode/SKILL.md
+++ b/packages/webkit/cli-templates/claude/skills/webkit-theming-dark-mode/SKILL.md
@@ -64,9 +64,7 @@ at once. Bind a raw color and you have pinned one theme.
 
 ```vue
 <!-- ✅ role-based: correct in both themes, no branches -->
-<div
-  class="bg-(--bg-surface) text-(--text-default) border border-(--border-default)"
->
+<div class="bg-(--bg-surface) text-(--text-default) border border-(--border-default)">
   <span class="text-(--primary)">Active</span>
 </div>
 
diff --git a/packages/webkit/docs/GUIDELINES.md b/packages/webkit/docs/GUIDELINES.md
index 66b21caa1..2cffbd2b4 100644
--- a/packages/webkit/docs/GUIDELINES.md
+++ b/packages/webkit/docs/GUIDELINES.md
@@ -37,9 +37,9 @@ typography) are **blocked** by lint and hooks — the token is always the answer
 | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
 | **Color**      | `var(--primary)` · `var(--bg-surface)` · `var(--text-default)` · `var(--border-default)` · feedback `--success/--warning/--danger/--info`   | `#f3652b` · `text-blue-600` · `rgb(…)`                    |
 | **Typography** | the generated classes — `text-heading-md`, `text-body-sm`, `text-button-lg`, `text-label-md` (font + size + line-height + tracking bundled) | `text-sm` · `leading-*` · `tracking-*` · `font-family`    |
-| **Spacing**    | the semantic scale — `p-(--spacing-md)` · `gap-(--spacing-sm)` (`xxs…xxl`)                                                        | primitive `--spacing-1…-96` · `p-4` when a token applies  |
-| **Shape**      | `rounded-(--shape-button)` · `--shape-card` · `--shape-elements`                                                                       | `rounded-lg` · numeric radii                              |
-| **Shadow**     | `shadow-(--shadow-md)`                                                                                                                 | bare `shadow-md` · hex/rgb elevation                      |
+| **Spacing**    | the semantic scale — `p-(--spacing-md)` · `gap-(--spacing-sm)` (`xxs…xxl`)                                                                  | primitive `--spacing-1…-96` · `p-4` when a token applies  |
+| **Shape**      | `rounded-(--shape-button)` · `--shape-card` · `--shape-elements`                                                                            | `rounded-lg` · numeric radii                              |
+| **Shadow**     | `shadow-(--shadow-md)`                                                                                                                      | bare `shadow-md` · hex/rgb elevation                      |
 | **Motion**     | catalogued `animate-*` utilities + `transition-*` with token durations; **every** motion class pairs with `motion-reduce:`                  | local `@keyframes` · `duration-[…]` · animation libraries |
 
 Tokens are light/dark aware — using them is what makes a component theme correctly for free.
@@ -61,7 +61,7 @@ Each is a `scope: general` standard. Follow ✅, avoid ❌.
 | **Event payloads**      | `emit('click', item)` · `{ value, event }` payload objects           | activation events emit `(event, item?)` — DOM event always first                        |
 | **Slots**               | `<slot/>` with no declaration                                        | `defineSlots<{ default():unknown }>()`                                                  |
 | **Composables**         | `return reactive({…})`                                               | `return { value: readonly(v), set }` · args via `toValue` · cleanup in `onScopeDispose` |
-| **Styling**             | `const kindClasses = {…}` · `#f3652b` · `text-blue-600`              | `data-[kind=primary]:bg-(--primary)` inline · tokens only                          |
+| **Styling**             | `const kindClasses = {…}` · `#f3652b` · `text-blue-600`              | `data-[kind=primary]:bg-(--primary)` inline · tokens only                               |
 | **Component structure** | random `<script setup>` order                                        | fixed order: options → props → emits → models → slots → state                           |
 | **Root element**        | wrapper `<div>` that swallows attrs · `as` prop                      | own the root · `inheritAttrs:false` + `$attrs` + `cn` · polymorphism via `href`         |
 | **States**              | ad-hoc spinner / "no results" string                                 | `data-*` + `Skeleton` / `EmptyState`                                                    |
@@ -116,7 +116,7 @@ export default [...webkit.configs.recommended]
 | **Tree-shaking**          | `import Table` (compound) when you only render the root | `import TableRoot from '@aziontech/webkit/table-root'`   |
 | **Don't override styles** | `<Button class="p-8" />`                                | compose inside its slots, or use a `styleSeam` component |
 | **No deprecated**         | importing a deprecated component                        | the suggested replacement                                |
-| **Tokens, not colors**    | `class="text-[#fff]"`                                   | `class="text-(--text-default)"`                     |
+| **Tokens, not colors**    | `class="text-[#fff]"`                                   | `class="text-(--text-default)"`                          |
 | **Icons**                 | `import Icons from '@aziontech/icons'`                  | `import '@aziontech/icons'` (side-effect)                |
 
 **Discover the API before you write it:** the webkit MCP server (`npx webkit-mcp`, wired
diff --git a/packages/webkit/docs/STYLEGUIDE.md b/packages/webkit/docs/STYLEGUIDE.md
index 79f338da8..db902634a 100644
--- a/packages/webkit/docs/STYLEGUIDE.md
+++ b/packages/webkit/docs/STYLEGUIDE.md
@@ -50,9 +50,9 @@ the answer, and using it is what makes light/dark theming work for free.
 | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
 | Color      | `var(--primary)` · `var(--bg-surface)` · `var(--text-default)` · `var(--border-default)` · feedback `--success/--warning/--danger/--info` (+ `-contrast`/`-border`) | `#f3652b` · `rgb(…)` · `hsl(…)` · Tailwind palette (`text-blue-600`, `bg-gray-500`)        |
 | Typography | generated classes — `text-heading-md`, `text-body-sm`, `text-button-lg`, `text-label-md`, `text-overline-md` (font + size + line-height + tracking bundled)         | `text-sm` · `leading-*` · `tracking-*` · `font-family` · `text-[length:…]`                 |
-| Spacing    | the semantic scale `var(--spacing-xxs…xxl)` — `p-(--spacing-md)`, `gap-(--spacing-sm)`                                                                    | the primitive numeric scale (`--spacing-1…-96`) · `p-4` when a token applies · `p-[13px]`  |
-| Shape      | `rounded-(--shape-button)` · `--shape-card` · `--shape-elements` · `rounded-[inherit]` for pseudo-elements                                                     | `rounded-lg` · numeric radii                                                               |
-| Shadow     | `shadow-(--shadow-md)`                                                                                                                                         | bare `shadow-md` · hex/rgb elevation · legacy `--card-shadow`                              |
+| Spacing    | the semantic scale `var(--spacing-xxs…xxl)` — `p-(--spacing-md)`, `gap-(--spacing-sm)`                                                                              | the primitive numeric scale (`--spacing-1…-96`) · `p-4` when a token applies · `p-[13px]`  |
+| Shape      | `rounded-(--shape-button)` · `--shape-card` · `--shape-elements` · `rounded-[inherit]` for pseudo-elements                                                          | `rounded-lg` · numeric radii                                                               |
+| Shadow     | `shadow-(--shadow-md)`                                                                                                                                              | bare `shadow-md` · hex/rgb elevation · legacy `--card-shadow`                              |
 | Motion     | catalogued `animate-*` utilities + `transition-*` with token durations; **every** motion class pairs with `motion-reduce:`                                          | local `@keyframes` · `animate-[…]` / `duration-[…]` arbitrary values · animation libraries |
 
 If a design needs a color/size that has no token, that is a **theme gap**: record it and
diff --git a/packages/webkit/src/components/content/card-pricing/card-pricing.vue b/packages/webkit/src/components/content/card-pricing/card-pricing.vue
index dc3a29ee3..df78ad3dc 100644
--- a/packages/webkit/src/components/content/card-pricing/card-pricing.vue
+++ b/packages/webkit/src/components/content/card-pricing/card-pricing.vue
@@ -100,10 +100,7 @@
     :data-testid="testId"
   >
     <div
-      :class="[
-        'flex w-full flex-col items-start shrink-0',
-        isMiddle ? 'gap-(--spacing-lg)' : ''
-      ]"
+      :class="['flex w-full flex-col items-start shrink-0', isMiddle ? 'gap-(--spacing-lg)' : '']"
     >
       <div
         :class="headerContainerClasses"
diff --git a/packages/webkit/src/components/content/currency/currency.vue b/packages/webkit/src/components/content/currency/currency.vue
index 7e24c9d94..5c0f8347c 100644
--- a/packages/webkit/src/components/content/currency/currency.vue
+++ b/packages/webkit/src/components/content/currency/currency.vue
@@ -46,9 +46,7 @@
       <span
         v-if="prefix"
         :class="[
-          isLarge
-            ? 'text-heading-md text-(--text-default)'
-            : 'text-label-lg text-(--text-default)'
+          isLarge ? 'text-heading-md text-(--text-default)' : 'text-label-lg text-(--text-default)'
         ]"
         :data-testid="`${testId}__prefix`"
       >
@@ -56,9 +54,7 @@
       </span>
       <span
         :class="[
-          isLarge
-            ? 'text-heading-md text-(--text-default)'
-            : 'text-label-lg text-(--text-default)'
+          isLarge ? 'text-heading-md text-(--text-default)' : 'text-label-lg text-(--text-default)'
         ]"
         :data-testid="`${testId}__value`"
       >
@@ -67,11 +63,7 @@
     </span>
     <span
       v-if="suffix"
-      :class="[
-        isLarge
-          ? 'text-label-md text-(--text-muted)'
-          : 'text-label-sm text-(--text-muted)'
-      ]"
+      :class="[isLarge ? 'text-label-md text-(--text-muted)' : 'text-label-sm text-(--text-muted)']"
       :data-testid="`${testId}__suffix`"
     >
       {{ suffix }}
diff --git a/packages/webkit/src/components/data/code-block/code-block.vue b/packages/webkit/src/components/data/code-block/code-block.vue
index ef5c1dc02..d9b159b88 100644
--- a/packages/webkit/src/components/data/code-block/code-block.vue
+++ b/packages/webkit/src/components/data/code-block/code-block.vue
@@ -547,10 +547,7 @@
       <ScrollArea
         orientation="both"
         :class="
-          cn(
-            'min-h-0 min-w-0 flex-1 py-(--spacing-sm)',
-            'focus-visible:ring-offset-(--bg-surface)'
-          )
+          cn('min-h-0 min-w-0 flex-1 py-(--spacing-sm)', 'focus-visible:ring-offset-(--bg-surface)')
         "
         :data-testid="`${testId}__scroll`"
       >
diff --git a/packages/webkit/src/components/inputs/calendar/calendar.vue b/packages/webkit/src/components/inputs/calendar/calendar.vue
index 1dedd1d4d..92bfbdb89 100644
--- a/packages/webkit/src/components/inputs/calendar/calendar.vue
+++ b/packages/webkit/src/components/inputs/calendar/calendar.vue
@@ -550,9 +550,7 @@
               class="text-body-sm inline-flex min-w-0 flex-1 items-stretch text-(--text-default) transition-colors duration-150 ease-out hover:bg-(--bg-hover) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) disabled:cursor-not-allowed disabled:text-(--text-disabled) data-[size=small]:h-7 data-[size=medium]:h-8 data-[size=large]:h-10 motion-reduce:transition-none"
               @click="toggleOpen"
             >
-              <span
-                class="flex min-w-0 items-center gap-(--spacing-xs) px-(--spacing-sm)"
-              >
+              <span class="flex min-w-0 items-center gap-(--spacing-xs) px-(--spacing-sm)">
                 <i
                   class="pi pi-clock shrink-0 text-[length:inherit] leading-none text-(--text-muted)"
                   aria-hidden="true"
diff --git a/packages/webkit/src/components/inputs/field-checkbox-block/field-checkbox-block.vue b/packages/webkit/src/components/inputs/field-checkbox-block/field-checkbox-block.vue
index 3f7c5a11e..507bd73d1 100644
--- a/packages/webkit/src/components/inputs/field-checkbox-block/field-checkbox-block.vue
+++ b/packages/webkit/src/components/inputs/field-checkbox-block/field-checkbox-block.vue
@@ -80,8 +80,7 @@
   const rowClasses =
     'flex cursor-pointer items-start gap-(--spacing-sm) data-[disabled]:cursor-not-allowed'
 
-  const textsClasses =
-    'flex min-w-0 flex-1 flex-col gap-(--spacing-xxs) data-[disabled]:opacity-50'
+  const textsClasses = 'flex min-w-0 flex-1 flex-col gap-(--spacing-xxs) data-[disabled]:opacity-50'
 
   const helperClasses =
     'inline-flex items-center gap-(--spacing-xxs) rounded-(--shape-button) border border-(--border-default) bg-(--bg-surface) px-(--spacing-xs) py-(--spacing-xxs) text-body-xs text-(--text-muted) w-fit'
diff --git a/packages/webkit/src/components/inputs/field-checkbox/field-checkbox.vue b/packages/webkit/src/components/inputs/field-checkbox/field-checkbox.vue
index f17e766f2..4d6196db2 100644
--- a/packages/webkit/src/components/inputs/field-checkbox/field-checkbox.vue
+++ b/packages/webkit/src/components/inputs/field-checkbox/field-checkbox.vue
@@ -67,8 +67,7 @@
   const sharedClasses =
     'flex cursor-pointer items-start gap-(--spacing-sm) data-[disabled]:cursor-not-allowed'
 
-  const textsClasses =
-    'flex min-w-0 flex-1 flex-col gap-(--spacing-xxs) data-[disabled]:opacity-50'
+  const textsClasses = 'flex min-w-0 flex-1 flex-col gap-(--spacing-xxs) data-[disabled]:opacity-50'
 
   const helperClasses =
     'inline-flex items-center gap-(--spacing-xxs) rounded-(--shape-button) border border-(--border-default) bg-(--bg-surface) px-(--spacing-xs) py-(--spacing-xxs) text-body-xs text-(--text-muted) w-fit'
diff --git a/packages/webkit/src/components/inputs/field-radio-block/field-radio-block.vue b/packages/webkit/src/components/inputs/field-radio-block/field-radio-block.vue
index 3e561120c..7f10311c9 100644
--- a/packages/webkit/src/components/inputs/field-radio-block/field-radio-block.vue
+++ b/packages/webkit/src/components/inputs/field-radio-block/field-radio-block.vue
@@ -70,8 +70,7 @@
     'data-[disabled]:opacity-50'
   )
 
-  const textsClasses =
-    'flex min-w-0 flex-1 flex-col gap-(--spacing-xxs) data-[disabled]:opacity-50'
+  const textsClasses = 'flex min-w-0 flex-1 flex-col gap-(--spacing-xxs) data-[disabled]:opacity-50'
 
   const helperClasses =
     'inline-flex items-center gap-(--spacing-xxs) rounded-(--shape-button) border border-(--border-default) bg-(--bg-surface) px-(--spacing-xs) py-(--spacing-xxs) text-body-xs text-(--text-muted) w-fit'
diff --git a/packages/webkit/src/components/inputs/field-radio/field-radio.vue b/packages/webkit/src/components/inputs/field-radio/field-radio.vue
index f706c7e5a..0086528a4 100644
--- a/packages/webkit/src/components/inputs/field-radio/field-radio.vue
+++ b/packages/webkit/src/components/inputs/field-radio/field-radio.vue
@@ -59,8 +59,7 @@
   const sharedClasses =
     'flex cursor-pointer items-start gap-(--spacing-sm) data-[disabled]:cursor-not-allowed'
 
-  const textsClasses =
-    'flex min-w-0 flex-1 flex-col gap-(--spacing-xxs) data-[disabled]:opacity-50'
+  const textsClasses = 'flex min-w-0 flex-1 flex-col gap-(--spacing-xxs) data-[disabled]:opacity-50'
 
   const helperClasses =
     'inline-flex items-center gap-(--spacing-xxs) rounded-(--shape-button) border border-(--border-default) bg-(--bg-surface) px-(--spacing-xs) py-(--spacing-xxs) text-body-xs text-(--text-muted) w-fit'
diff --git a/packages/webkit/src/components/inputs/field-switch-block/field-switch-block.vue b/packages/webkit/src/components/inputs/field-switch-block/field-switch-block.vue
index a02349ff9..d9662b38e 100644
--- a/packages/webkit/src/components/inputs/field-switch-block/field-switch-block.vue
+++ b/packages/webkit/src/components/inputs/field-switch-block/field-switch-block.vue
@@ -66,8 +66,7 @@
   const rowClasses =
     'flex cursor-pointer items-start gap-(--spacing-sm) data-[disabled]:cursor-not-allowed'
 
-  const textsClasses =
-    'flex min-w-0 flex-1 flex-col gap-(--spacing-xxs) data-[disabled]:opacity-50'
+  const textsClasses = 'flex min-w-0 flex-1 flex-col gap-(--spacing-xxs) data-[disabled]:opacity-50'
 
   const helperClasses =
     'inline-flex items-center gap-(--spacing-xxs) rounded-(--shape-button) border border-(--border-default) bg-(--bg-surface) px-(--spacing-xs) py-(--spacing-xxs) text-body-xs text-(--text-muted) w-fit'
diff --git a/packages/webkit/src/components/navigation/breadcrumb/breadcrumb-separator.vue b/packages/webkit/src/components/navigation/breadcrumb/breadcrumb-separator.vue
index 81f6269b0..9316a73a9 100644
--- a/packages/webkit/src/components/navigation/breadcrumb/breadcrumb-separator.vue
+++ b/packages/webkit/src/components/navigation/breadcrumb/breadcrumb-separator.vue
@@ -24,10 +24,7 @@
     role="presentation"
     aria-hidden="true"
     :class="
-      cn(
-        'inline-flex shrink-0 items-center text-(--text-muted)',
-        attrs.class as string | undefined
-      )
+      cn('inline-flex shrink-0 items-center text-(--text-muted)', attrs.class as string | undefined)
     "
     :data-testid="testId"
   >
diff --git a/packages/webkit/src/components/navigation/breadcrumb/breadcrumb.vue b/packages/webkit/src/components/navigation/breadcrumb/breadcrumb.vue
index 0966fee84..4c044e0e2 100644
--- a/packages/webkit/src/components/navigation/breadcrumb/breadcrumb.vue
+++ b/packages/webkit/src/components/navigation/breadcrumb/breadcrumb.vue
@@ -134,9 +134,7 @@
               :current="firstItem.current && !showDistinctEnds"
               :show-icon="firstItem.showIcon"
               :icon="firstItem.icon"
-              :class="
-                firstItem.current && !showDistinctEnds ? 'text-(--text-default)' : undefined
-              "
+              :class="firstItem.current && !showDistinctEnds ? 'text-(--text-default)' : undefined"
               :data-testid="`${testId}__item-0`"
               @click="
                 (event) => !firstItem.current && handleItemClick(event, firstItem.href ?? '#')
diff --git a/packages/webkit/src/components/navigation/navigation-menu/presets/styles.js b/packages/webkit/src/components/navigation/navigation-menu/presets/styles.js
index 16276bf01..f29b79e03 100644
--- a/packages/webkit/src/components/navigation/navigation-menu/presets/styles.js
+++ b/packages/webkit/src/components/navigation/navigation-menu/presets/styles.js
@@ -40,8 +40,7 @@ export const navigationMenuEntryTitleClasses = [
   'data-[featured]:text-(--text-link) data-[featured]:group-hover:text-(--text-link)'
 ]
 export const navigationMenuEntryDescriptionClasses = 'text-body-xs text-(--text-muted)'
-export const navigationMenuListGroupClasses =
-  'm-0 flex list-none flex-col gap-(--spacing-xs) p-0'
+export const navigationMenuListGroupClasses = 'm-0 flex list-none flex-col gap-(--spacing-xs) p-0'
 export const navigationMenuListRootClasses = [
   'relative z-1 m-0 flex list-none items-center gap-(--spacing-xs) p-0'
 ]
diff --git a/packages/webkit/src/components/navigation/tab-view/tab-view-item.vue b/packages/webkit/src/components/navigation/tab-view/tab-view-item.vue
index bf17698b4..1209c77f7 100644
--- a/packages/webkit/src/components/navigation/tab-view/tab-view-item.vue
+++ b/packages/webkit/src/components/navigation/tab-view/tab-view-item.vue
@@ -91,9 +91,7 @@
         context &&
         isSelected.value &&
         'bg-transparent text-(--secondary-contrast)',
-      !context &&
-        isSelected.value &&
-        'bg-(--secondary-selected) text-(--secondary-contrast)',
+      !context && isSelected.value && 'bg-(--secondary-selected) text-(--secondary-contrast)',
       !context &&
         !isSelected.value &&
         'bg-transparent text-(--text-muted) hover:bg-(--bg-hover) hover:text-(--text-default)',
diff --git a/packages/webkit/src/components/templates/sign-up-card/sign-up-card.vue b/packages/webkit/src/components/templates/sign-up-card/sign-up-card.vue
index 713448d66..8dd9c7952 100644
--- a/packages/webkit/src/components/templates/sign-up-card/sign-up-card.vue
+++ b/packages/webkit/src/components/templates/sign-up-card/sign-up-card.vue
@@ -73,9 +73,7 @@
   const testId = computed(() => attrs['data-testid'] ?? 'template-sign-up-card')
 
   const rootClass = computed(() => {
-    const classes = [
-      'flex w-full max-w-(--container-sm) flex-col items-center gap-(--spacing-xs)'
-    ]
+    const classes = ['flex w-full max-w-(--container-sm) flex-col items-center gap-(--spacing-xs)']
 
     if (attrs.class) {
       classes.push(attrs.class)
diff --git a/packages/webkit/test/eslint-plugin/token-checks.test.mjs b/packages/webkit/test/eslint-plugin/token-checks.test.mjs
index 738f7029d..e06974dd9 100644
--- a/packages/webkit/test/eslint-plugin/token-checks.test.mjs
+++ b/packages/webkit/test/eslint-plugin/token-checks.test.mjs
@@ -105,7 +105,11 @@ test('the paren spellings named in ENG-47001 acceptance are all caught', () => {
 })
 
 test('the widened guardrails do not fire on the canonical whole-value paren token', () => {
-  for (const content of ['bg-(--primary)', 'max-w-(--container-2xl)', 'ring-offset-(--bg-canvas)']) {
+  for (const content of [
+    'bg-(--primary)',
+    'max-w-(--container-2xl)',
+    'ring-offset-(--bg-canvas)'
+  ]) {
     const found = ids(content)
     for (const id of [
       'typography-raw-length',

From 5f1e339be1c3ef2a8d94b5a49bd511a42a82c82d Mon Sep 17 00:00:00 2001
From: Isaque dos Santos <isaque.santos@azion.com>
Date: Wed, 5 Aug 2026 14:36:00 -0300
Subject: [PATCH 5/6] refactor: canonicalize remaining bracket var() tokens
 from main merges

Two spots merged in from main still used the bracket syntax for
fallback-less var() tokens; convert them to the parenthesis shorthand
the sweep standardizes on.
---
 .../src/stories/components/overlay/dialog/Dialog.stories.js     | 2 +-
 .../webkit/src/components/overlay/presets/mobile-position.js    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/storybook/src/stories/components/overlay/dialog/Dialog.stories.js b/apps/storybook/src/stories/components/overlay/dialog/Dialog.stories.js
index 02857b58a..8ec2f1d55 100644
--- a/apps/storybook/src/stories/components/overlay/dialog/Dialog.stories.js
+++ b/apps/storybook/src/stories/components/overlay/dialog/Dialog.stories.js
@@ -227,7 +227,7 @@ export const Default = {
   }
 }
 
-const SIZES_TEMPLATE = `<div class="flex flex-wrap items-center gap-[var(--spacing-md)]">
+const SIZES_TEMPLATE = `<div class="flex flex-wrap items-center gap-(--spacing-md)">
   <Dialog v-for="size in sizes" :key="size" v-model:open="openBySize[size]" :size="size">
     <DialogTrigger>
       <Button :label="sizeLabels[size]" kind="outlined" />
diff --git a/packages/webkit/src/components/overlay/presets/mobile-position.js b/packages/webkit/src/components/overlay/presets/mobile-position.js
index 1bcbbd5cb..e8c7cc9d0 100644
--- a/packages/webkit/src/components/overlay/presets/mobile-position.js
+++ b/packages/webkit/src/components/overlay/presets/mobile-position.js
@@ -25,7 +25,7 @@ export const dialogShellPositionClasses = [
  */
 export const dialogPanelPositionClasses = ['max-md:w-full']
 export const dialogPanelShapeClasses = [
-  'max-md:rounded-b-[var(--shape-flat)] max-md:rounded-t-[var(--shape-card)]',
+  'max-md:rounded-b-(--shape-flat) max-md:rounded-t-(--shape-card)',
   // Below `md` the sheet is fluid and hugs its content up to the cap.
   'max-md:w-full max-md:h-fit',
   /*

From ef6c09088e3df246aa3c1fc71ad7c878f4201869 Mon Sep 17 00:00:00 2001
From: Isaque dos Santos <isaque.santos@azion.com>
Date: Wed, 5 Aug 2026 15:19:51 -0300
Subject: [PATCH 6/6] fix(webkit): restore main's TabView pill and Panel height
 cap lost in merges
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Merges f24330a2/17f4244b kept the branch-side tab-view-item/list and
panel shells, silently dropping main's Figma pill fix (#857) and the
Panel max-h-full scroll bound (#835) while taking main's updated visual
baselines — so the TabView snapshots failed CI. Restore main's
semantics in the branch's canonical token syntax, and canonicalize the
standalone story + spec line that came in bracketed.
---
 .specs/tab-view.md                               |  2 +-
 .../navigation/tab-view/TabView.stories.js       |  4 ++--
 .../navigation/tab-view/tab-view-item.vue        | 16 ++++++++++------
 .../navigation/tab-view/tab-view-list.vue        |  4 +++-
 .../src/components/overlay/panel/panel.vue       |  9 ++++++++-
 5 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/.specs/tab-view.md b/.specs/tab-view.md
index d376965ae..9c3763637 100644
--- a/.specs/tab-view.md
+++ b/.specs/tab-view.md
@@ -63,7 +63,7 @@ Helps users move between views or sections. Migrated from the existing implement
 | surface | `var(--bg-surface)` |
 | text | `var(--text-default)` |
 | spacing | `var(--spacing-3)` |
-| height (tab item) | `var(--size-8)` — 32 px, applied as `h-[var(--size-8)]` |
+| height (tab item) | `var(--size-8)` — 32 px, applied as `h-(--size-8)` |
 | shape | `var(--shape-elements)` |
 | ring | `var(--ring-color)` |
 
diff --git a/apps/storybook/src/stories/components/navigation/tab-view/TabView.stories.js b/apps/storybook/src/stories/components/navigation/tab-view/TabView.stories.js
index 586eb2277..b0fb332c8 100644
--- a/apps/storybook/src/stories/components/navigation/tab-view/TabView.stories.js
+++ b/apps/storybook/src/stories/components/navigation/tab-view/TabView.stories.js
@@ -193,14 +193,14 @@ export const Default = {
 // No TabView.Root: each item reads its own `selected` instead of the injected context, and
 // paints its own pill because there is no List indicator behind it to do that.
 const STANDALONE_TEMPLATE = `
-  <div class="flex items-center gap-[var(--spacing-xxs)]">
+  <div class="flex items-center gap-(--spacing-xxs)">
     <TabView.Item label="Selected" selected />
     <TabView.Item label="Idle" />
     <TabView.Item label="Disabled" disabled />
   </div>
 `
 
-const STANDALONE_SOURCE = `<div class="flex items-center gap-[var(--spacing-xxs)]">
+const STANDALONE_SOURCE = `<div class="flex items-center gap-(--spacing-xxs)">
   <TabView.Item label="Selected" selected />
   <TabView.Item label="Idle" />
   <TabView.Item label="Disabled" disabled />
diff --git a/packages/webkit/src/components/navigation/tab-view/tab-view-item.vue b/packages/webkit/src/components/navigation/tab-view/tab-view-item.vue
index 1209c77f7..1c647fb2d 100644
--- a/packages/webkit/src/components/navigation/tab-view/tab-view-item.vue
+++ b/packages/webkit/src/components/navigation/tab-view/tab-view-item.vue
@@ -70,9 +70,9 @@
   const panelId = computed(() => (context ? context.panelId(resolvedValue.value) : undefined))
 
   const itemSharedClasses = [
-    'relative z-1 inline-flex h-[30px] shrink-0 cursor-pointer items-center',
+    'relative z-1 inline-flex h-(--size-8) shrink-0 cursor-pointer items-center',
     'gap-(--spacing-xs) rounded-(--shape-button)',
-    'px-(--spacing-sm) py-(--spacing-xs)',
+    'px-(--spacing-xs) py-(--spacing-xs)',
     'text-label-md transition-colors motion-reduce:transition-none',
     'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color)',
     'focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)'
@@ -87,11 +87,15 @@
         context &&
         !isSelected.value &&
         'bg-transparent text-(--text-muted) hover:bg-(--bg-hover) hover:text-(--text-default)',
-      !isDisabled.value &&
-        context &&
+      // Selected label stays `--text-default` (Figma). `--secondary-contrast` is the
+      // on-`--secondary` pair (black on dark / white on light) and only reads correctly
+      // against a solid `--secondary-selected` fill, which the pill is not.
+      !isDisabled.value && context && isSelected.value && 'bg-transparent text-(--text-default)',
+      // Standalone (no TabView context): the item paints its own pill, so it carries the
+      // mask + hairline + xs shadow the List's indicator provides in the composed case.
+      !context &&
         isSelected.value &&
-        'bg-transparent text-(--secondary-contrast)',
-      !context && isSelected.value && 'bg-(--secondary-selected) text-(--secondary-contrast)',
+        'border-(length:--border-width-default) border-(--border-muted) bg-(--secondary-mask) text-(--text-default) shadow-(--shadow-xs)',
       !context &&
         !isSelected.value &&
         'bg-transparent text-(--text-muted) hover:bg-(--bg-hover) hover:text-(--text-default)',
diff --git a/packages/webkit/src/components/navigation/tab-view/tab-view-list.vue b/packages/webkit/src/components/navigation/tab-view/tab-view-list.vue
index bc0470a66..5765ebfc9 100644
--- a/packages/webkit/src/components/navigation/tab-view/tab-view-list.vue
+++ b/packages/webkit/src/components/navigation/tab-view/tab-view-list.vue
@@ -73,7 +73,9 @@
   // (dark) / near-black (light) and reads as an inverted chip.
   const indicatorClasses = [
     'pointer-events-none absolute left-0 top-0 z-0',
-    'rounded-(--shape-button) bg-(--secondary-selected)',
+    'rounded-(--shape-button) bg-(--secondary-mask)',
+    'border-(length:--border-width-default) border-(--border-muted)',
+    'shadow-(--shadow-xs)',
     'motion-reduce:transition-none'
   ]
 
diff --git a/packages/webkit/src/components/overlay/panel/panel.vue b/packages/webkit/src/components/overlay/panel/panel.vue
index 6af3b270c..470c1be3d 100644
--- a/packages/webkit/src/components/overlay/panel/panel.vue
+++ b/packages/webkit/src/components/overlay/panel/panel.vue
@@ -39,7 +39,14 @@
 
   const rootClasses = computed(() =>
     cn(
-      'flex w-full flex-col overflow-hidden',
+      // `max-h-full` is what makes `overflow-hidden` mean something. The shell
+      // clips its own overflow, but with no height bound it simply grows to fit
+      // its content, so nothing is ever clipped and `panel-content`'s
+      // `overflow-y-auto` never fires. Measured inside a 400px-tall container the
+      // shell rendered 771px with the body not scrolling; with the cap it is
+      // 400px and the body scrolls. Dialog and Drawer already bound it from the
+      // outside, so this only changes the case where nothing else does.
+      'flex w-full max-h-full flex-col overflow-hidden',
       'rounded-(--shape-card) border border-(length:--border-width-default)',
       'border-(--border-muted)',
       'bg-(--bg-surface) shadow-(--shadow-2xl)',