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 fe4233043..f27eb92e4 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.
@@ -452,11 +452,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).
@@ -509,9 +509,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 01726feee..1ca3a2f05 100644
--- a/.specs/calendar.md
+++ b/.specs/calendar.md
@@ -126,7 +126,7 @@ import CalendarClear from '@aziontech/webkit/calendar-clear'
 
 - Visual states: `default`, `hover`, `focus-visible`, `selected`, `in-range`, `disabled`, `today`, `outside` (adjacent-month), popover `open` / `closed`
 - **Field contract parity.** Every field-shaped surface — the trigger, the Start/End date+time fields, and the timezone selector — follows the shared `inputs` field contract used by `input-text`, `input-number`, `select-trigger` and `textarea`, so a Calendar reads identically to a text field placed beside it: heights are `small=28px` / `medium=32px` / `large=40px`, the value renders at `.text-label-sm`, and `disabled` applies `var(--bg-disabled)` + `var(--text-disabled)` + `cursor-not-allowed` rather than an opacity wash.
-- **Hover is identical to `input-text`.** The whole trigger is one field with one border, so hover raises **only** that border to `var(--border-strong)` — no background wash on any segment. It is suppressed while the control is focused (the focus ring is the active affordance) and while `disabled`, via the same selector `input-text` uses: `[&:not(:focus-within):not([data-disabled])]:hover:border-[var(--border-strong)]` (the timezone `<select>` is focusable itself, so it uses the `:not(:focus):not(:disabled)` form). Because the border lives on the trigger shell, hovering any segment — preset, calendar, clear, or split — raises the single shared border, exactly as hovering a text field's icon slot does. `hover:bg-[var(--bg-hover)]` survives only on the preset **dropdown menu rows**, which are menu items inside the popover, not field surfaces, and have no `input-text` counterpart.
+- **Hover is identical to `input-text`.** The whole trigger is one field with one border, so hover raises **only** that border to `var(--border-strong)` — no background wash on any segment. It is suppressed while the control is focused (the focus ring is the active affordance) and while `disabled`, via the same selector `input-text` uses: `[&:not(:focus-within):not([data-disabled])]:hover:border-(--border-strong)` (the timezone `<select>` is focusable itself, so it uses the `:not(:focus):not(:disabled)` form). Because the border lives on the trigger shell, hovering any segment — preset, calendar, clear, or split — raises the single shared border, exactly as hovering a text field's icon slot does. `hover:bg-(--bg-hover)` survives only on the preset **dropdown menu rows**, which are menu items inside the popover, not field surfaces, and have no `input-text` counterpart.
 - `data-state` on the root and trigger mirrors the popover open state (`open` | `closed`)
 - `data-size` mirrors the `size` prop on the root, trigger, and each day cell (`small` | `medium` | `large`)
 - `data-selected` mirrors a fully-selected day cell (single value, or a range endpoint) and an active preset
@@ -188,7 +188,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. The Start/End date+time fields reuse `input-text`, whose ring offset resolves `var(--input-ring-offset, var(--bg-canvas))`; the fields container declares `--input-ring-offset: var(--bg-surface-raised)` once and it inherits to every field, so the ring gap matches the raised popover the fields sit on.
+- 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. The Start/End date+time fields reuse `input-text`, whose ring offset resolves `var(--input-ring-offset, var(--bg-canvas))`; the fields container declares `--input-ring-offset: var(--bg-surface-raised)` once and it inherits to every field, so the ring gap matches the raised popover the fields sit on.
 - Field labels: each visible Start / End / Date label is a `<label for>` bound to its date field through `useId()`; the time field beside it carries its own `aria-label` (`Start time` / `End time` / `Time`), so every field has a programmatic accessible name.
 - 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"`.
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 33eb2436b..d77c3df60 100644
--- a/.specs/code-block.md
+++ b/.specs/code-block.md
@@ -180,7 +180,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 733f1ffed..3f1ddbcf1 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 3f337dd52..47a78ea20 100644
--- a/.specs/dialog.md
+++ b/.specs/dialog.md
@@ -108,7 +108,7 @@ Modal surface above the page, built on the shared Panel shell. The consumer comp
 
 ## 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 9ce464d3a..b7383bcd0 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>
@@ -149,7 +149,7 @@ Each part is also a standalone import (`import FlowNode from '@aziontech/webkit/
 
 ## 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"`, as does every connector port (`data-flow-port`) — the ports are a visual attachment affordance and carry no meaning for AT. 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 1c4b6b20e..2d1979db3 100644
--- a/.specs/input-text.md
+++ b/.specs/input-text.md
@@ -108,7 +108,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`, with the offset color resolving `var(--input-ring-offset, var(--bg-canvas))` — applied via `focus-within` on the field wrapper so the ring covers the whole control including icon slots. A host that places the field on a surface other than the canvas (a raised popover, a drawer) declares `--input-ring-offset` on any ancestor; custom properties inherit, so one declaration retunes the ring gap of every field inside it (this is how `calendar`'s fields panel matches its raised popover).
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2`, with the offset color resolving `var(--input-ring-offset, var(--bg-canvas))` — applied via `focus-within` on the field wrapper so the ring covers the whole control including icon slots. A host that places the field on a surface other than the canvas (a raised popover, a drawer) declares `--input-ring-offset` on any ancestor; custom properties inherit, so one declaration retunes the ring gap of every field inside it (this is how `calendar`'s fields panel matches its raised popover).
 - 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.md b/.specs/menu.md
index 7d032bc01..dc31395f7 100644
--- a/.specs/menu.md
+++ b/.specs/menu.md
@@ -61,18 +61,18 @@ mapping is in Tokens, and the single value with no token behind it is in Theme g
 - Put every `Menu.Item` and `Menu.Sub` inside a `Menu.Group` or an **inline** `Menu.SubContent`. Those own the `<ul>`; a row outside one is a `<li>` with no list, which is invalid HTML. A group with no `label` is the correct way to express an unlabeled block — including inside a **drill** `Menu.SubContent`, which is a level container rather than a list precisely so it can hold groups.
 - Treat a drilled level as a whole menu, because it is one: give it groups and labels the way the root has them. A second-level nav that is only flat rows is a missed opportunity, not a constraint of the component.
 - Let the host own width, padding and scrolling. The menu fills the width it is given and adds no outer margin, so it drops into `Sidebar`, a drawer, or a bare `<div>` unchanged.
-- Keep padding **inside the row**, never on the list. Every list (`Group`'s `<ul>`, `SubContent`'s `<ul>`) is a bare `m-0 list-none p-0 flex flex-col`; the row owns `px-[var(--spacing-sm)]` and `min-h-8`. That is what lets a row's hover surface span the full menu width instead of stopping short of a list inset.
+- Keep padding **inside the row**, never on the list. Every list (`Group`'s `<ul>`, `SubContent`'s `<ul>`) is a bare `m-0 list-none p-0 flex flex-col`; the row owns `px-(--spacing-sm)` and `min-h-8`. That is what lets a row's hover surface span the full menu width instead of stopping short of a list inset.
 - **The rail means parentage, not membership.** It is drawn only by an inline `Menu.SubContent`, where it ties children to the row above them. A `Menu.Group` draws none and indents nothing: its label already marks the section, so a rail there would spend the same ink saying something the label has said and dilute what the rail means everywhere else. A grouped row therefore sits flush with an ungrouped one.
 - Indentation is the nested list's `padding-left`, not a margin on each row — so the rail, which is drawn relative to that padding box, stays aligned no matter what a row contains.
 - One step of nesting is `--menu-indent` = `calc(var(--spacing-sm) + var(--spacing-md))` (28 px), the step the reference sidebar uses. It is deliberately **narrower than the row's own icon column** (40 px), which is a chosen trade: a tighter tree, at the cost of a child's label landing slightly left of its parent's rather than aligned with it. Widening it to 40 px would align the columns and read as more indentation.
-- **One content column, `var(--spacing-sm)`.** Every row type starts its content on it, whatever the row is: a group title's text, an icon-bearing row's **glyph** (its box pads by `var(--spacing-xxs)`, and the glyph's centring inside a `size-8` box carries it the rest of the way), and an icon-less row's label — a `SubTrigger` without a glyph included — (`pl-[var(--spacing-sm)]` directly). A `SubTrigger` that does carry one (drill only) switches to the icon-bearing inset, so both cases land on the column. Nesting shifts the whole column by exactly one `--menu-indent`, so the alignment cascades at every depth. Measured: level 1 content at 12 px for all four row types, level 2 at 40 px.
+- **One content column, `var(--spacing-sm)`.** Every row type starts its content on it, whatever the row is: a group title's text, an icon-bearing row's **glyph** (its box pads by `var(--spacing-xxs)`, and the glyph's centring inside a `size-8` box carries it the rest of the way), and an icon-less row's label — a `SubTrigger` without a glyph included — (`pl-(--spacing-sm)` directly). A `SubTrigger` that does carry one (drill only) switches to the icon-bearing inset, so both cases land on the column. Nesting shifts the whole column by exactly one `--menu-indent`, so the alignment cascades at every depth. Measured: level 1 content at 12 px for all four row types, level 2 at 40 px.
 - **The rail descends from that column**, so `--menu-rail-x` is `var(--spacing-sm)` — one value for every parent, not a per-row calculation. The elbow spans from that line to the child **row's left edge** (`--menu-indent - --menu-rail-x`) and stops there: it must never reach the child's content, because the row's box begins at the indent and its hover and selected surfaces fill that box, so a wider elbow would be drawn underneath them. **The rail lives in the gutter beside the rows, never on top of one.** Every token involved is fixed at all breakpoints, unlike `--spacing-lg` / `--spacing-xl`, which would drift the elbow.
 - **A row renders no icon box when it has no icon.** An empty box misreports where the row's content starts, so the label sits off the column its siblings hold and the rail anchors to blank space. This rule is what makes the column hold.
 - Hover and active are `::before` / `::after` **ghost layers** per [`DESIGN.md`](../.claude/docs/DESIGN.md) § Interactive states — never a `transition-colors` on the row root, and never a `background-color` swap that discards the selected fill.
 - Pick one affordance per meaning: `chevron-down` expands children in place, `chevron-right` replaces the menu. A **group title carries no affordance at all** — it separates rows without folding them, so it never competes with the rows it labels. Folding belongs to a row, which has a chevron and a rail to say which rows it owns.
 - **The menu is typed in the `label` family, not `body`.** A menu row is compact UI text, which is what `.text-label-*` is for. Rows — `Menu.Item`, `Menu.SubTrigger` and `Menu.Back` alike — are `.text-label-md` (14 px) in `var(--text-default)`. **Only the first-level group title is smaller and muted:** `.text-label-sm` (12 px) in `var(--text-muted)`, which replaced the overline and is the one place the menu changes register. Hierarchy below that is carried by the indent and the rail, not by shrinking each level — and a component with two render branches must give both the same label class, or the same menu renders two sizes.
 - Prefer `groups` when the tree is data. Hand-composing a recursive tree with `v-for` means re-implementing recursion in the consuming app; the data path renders through the same sub-components.
-- Draw the elbow with borders, not a glyph: `w-[var(--spacing-sm)] h-4 -left-[var(--spacing-sm)] border-l border-b border-[var(--border-default)] rounded-bl-[var(--shape-elements)]` on the row's `::before`, and the continuation on its `::after`, hidden on `:last-child`. All tokens, no SVG, and it scales with the row.
+- Draw the elbow with borders, not a glyph: `w-(--spacing-sm) h-4 -left-(--spacing-sm) border-l border-b border-(--border-default) rounded-bl-(--shape-elements)` on the row's `::before`, and the continuation on its `::after`, hidden on `:last-child`. All tokens, no SVG, and it scales with the row.
 - Do not nest more than three levels. Past that the indent eats the rail's readable width; restructure with a drill row instead.
 - A drill row navigates **on its one activation**, not through a second target. Splitting the row into a link plus a drill affordance is what costs a second tab stop and nests interactive elements — that shape stays rejected. Instead the single button both pushes the level and emits `navigate`, so the consumer routes to the level's landing page as it opens: one target, one tab stop, and the user never opens a second-level menu while still looking at the page they came from. The landing page is still the first item inside the level, so the level reads complete on its own.
 
@@ -179,7 +179,7 @@ element instead of three.
   - Slots: `default` — replaces the label text; `tag` — replaces the trailing `Tag` (its presence alone renders the tag region, with or without `tagValue`).
   - **This spec is menu-item's only spec.** It previously carried its own `.specs/menu-item.md`, which is removed with this change: a sub-component of a compound is documented in the compound's spec, the way `menu-sub` and `menu-group` already are. The `./menu-item` export path stays public, so its API lives here (that is what `build-catalog.mjs` reads to give the path an entry in `catalog.json`).
   - **Deliberately deferred — this release is additive only.** The redesigned row (a `size-3` icon, `var(--primary)` on the selected icon, `var(--border-default)` on the selected surface, the box model below, and `::before` / `::after` ghost layers replacing its root `transition-colors`) is a **visual breaking change** and is therefore **out of scope here**. It lands later as a `spec_version: 2` revision of *this* spec, on a major. Until then `Menu` renders today's row: correct behaviour, old visuals.
-- `menu-group/menu-group.vue` — A section that separates rows under a title. Renders a `<section>` (`flex flex-col`) holding a **static** title row — no toggle, no hover surface, not a control — plus the bare `<ul>` that holds the rows. The label is `.text-label-sm` in `var(--text-muted)` — **not** an overline: no uppercasing and no baked-in tracking, so `.text-overline-xs` is deliberately not used. It takes `my-[var(--spacing-sm)]`, dropped to `0` on the first group so the menu does not start with a gap. **It draws no connector rail and applies no indent** — its rows sit flush with an ungrouped row's, because the label already separates the section and the rail means something else (see Best practices).
+- `menu-group/menu-group.vue` — A section that separates rows under a title. Renders a `<section>` (`flex flex-col`) holding a **static** title row — no toggle, no hover surface, not a control — plus the bare `<ul>` that holds the rows. The label is `.text-label-sm` in `var(--text-muted)` — **not** an overline: no uppercasing and no baked-in tracking, so `.text-overline-xs` is deliberately not used. It takes `my-(--spacing-sm)`, dropped to `0` on the first group so the menu does not start with a gap. **It draws no connector rail and applies no indent** — its rows sit flush with an ungrouped row's, because the label already separates the section and the rail means something else (see Best practices).
   - Props: `label?: string` (default `''` — the title text; omit for an unlabeled block), `ariaLabel?: string` (default `''` — accessible name when there is no visible `label`).
   - No `open` model and no `collapsible`: a section is not a disclosure.
   - **A root group plays the rail's own entrance** when the menu mounts with an empty stack and the root's `enterOnMount` is set — the case where the reader travelled *back out* of a level and the host remounted, leaving the group no rendered off-canvas position to slide from. A group behind a *pushed* level does not (it should stay put, not animate in behind the level), and a **nested** group never travels on its own: the level carries it.
@@ -191,7 +191,7 @@ element instead of three.
 - `menu-sub-trigger/menu-sub-trigger.vue` — The row that owns children, and a **heading for them**.
   - **Geometry matches `Menu.Item` exactly** — height, padding (including `py`), gap, 32 px icon box, glyph size, and the unset root font-size that sizes that glyph — so its icon and label columns line up with the leaves around it.
   - **Typography is a row's, not a title's.** Its label is `.text-label-md` in `var(--text-default)` — the same treatment `Menu.Item` uses. Only a **first-level group title** is allowed to be smaller and muted (`.text-label-sm` in `var(--text-muted)`, the thing that replaced the overline); from there every row is 14 px, a trigger included, however deep it sits. A row that owns children is still a row.
-  - **An inline trigger carries no icon; a drill trigger may.** An inline row is a separator for the rows it expands *beneath itself*, in their own column — a glyph there competes with the rows it owns, so the column belongs to them and only the chevron sits on the trailing edge. A drill row has nothing beneath it (it **replaces** the menu), so it is read as one of the destinations it is listed among and takes an icon for the same reason they do. The component **enforces** this rather than trusting the caller: `showIcon` is `icon && kind === 'drill'`, so an inline trigger handed an `icon` still renders none. When shown, the glyph uses `Menu.Item`'s own box (32 px, `pl-[var(--spacing-xxs)]`, `size-4` glyph, muted → default on hover) so it lands on the same content column as the leaves around it. With `kind="inline"` it renders a rotating `pi pi-chevron-down`, toggles the sub through context, and exposes `aria-expanded` / `aria-controls`. With `kind="drill"` it renders a static `pi pi-chevron-right`, pushes its sub onto the root's stack, and carries **no** `aria-expanded` — nothing expands, so the attribute would be a lie.
+  - **An inline trigger carries no icon; a drill trigger may.** An inline row is a separator for the rows it expands *beneath itself*, in their own column — a glyph there competes with the rows it owns, so the column belongs to them and only the chevron sits on the trailing edge. A drill row has nothing beneath it (it **replaces** the menu), so it is read as one of the destinations it is listed among and takes an icon for the same reason they do. The component **enforces** this rather than trusting the caller: `showIcon` is `icon && kind === 'drill'`, so an inline trigger handed an `icon` still renders none. When shown, the glyph uses `Menu.Item`'s own box (32 px, `pl-(--spacing-xxs)`, `size-4` glyph, muted → default on hover) so it lands on the same content column as the leaves around it. With `kind="inline"` it renders a rotating `pi pi-chevron-down`, toggles the sub through context, and exposes `aria-expanded` / `aria-controls`. With `kind="drill"` it renders a static `pi pi-chevron-right`, pushes its sub onto the root's stack, and carries **no** `aria-expanded` — nothing expands, so the attribute would be a lie.
   - **A drill trigger is a destination as well as a level.** In data-driven mode a `kind: 'drill'` node emits `navigate` `(event, node)` on activation, alongside pushing its level — so a consumer can route to the level's landing page while the level opens, rather than leaving the user on the page they were already on. An inline trigger emits nothing: toggling a disclosure is not a navigation.
   - Props: `label?: string` (default `''` — visible row text), `kind?: 'inline' | 'drill'` (default `'inline'` — whether children expand in place or replace the menu), `icon?: string` (default `''` — leading glyph; honoured for `kind="drill"` only, see above), `disabled?: boolean` (default `false` — blocks toggling and pushing).
   - Slots: `default` — replaces the label text.
@@ -201,7 +201,7 @@ element instead of three.
   - `kind="drill"` — **a second-level menu with the same anatomy as the root**, not a flat row list: a `<div role="group">` labelled by its trigger, so it holds `Menu.Group`s exactly like the root does. It therefore follows the root's composition rule — rows live inside a `Menu.Group` (an unlabeled one for a flat level), because a `<ul>` here could never contain a group's `<section>`. It mounts only while its sub is on the stack, draws no rail (a pushed level is not indented), and its own mount is the one phase CSS cannot tween, so a `<Transition>` supplies the from-frame. **That Transition must always exist before its child does**, so the level is withheld for one tick after its Teleport becomes renderable and every arrival — a live push and a restored stack alike — takes the same `enter` path. `appear` is deliberately **not** used: the Teleport's target is the root's level host, a ref the root sets in *its* `onMounted`, which runs after this component's (children mount first) — so on a restored stack the Transition and its child would first render together and the appear hooks would not play, making the entrance depend on where the reader happened to come from.
   - A `Menu.Group` nested inside a drilled level is part of that level and never steps aside on its own — the level slides as one piece. Only a **root-level** group translates out on a push.
   - Slots: `default` — the nested rows.
-- `menu-back/menu-back.vue` — The return row for drill levels. **It renders inside the current level, not where it is declared:** the level exposes an anchor through the root context and Back teleports into it. That placement is load-bearing on two counts — the level's own slide animates Back for free (no second transition to keep in sync), and Back never occupies the root's flow, so popping cannot shift the menu it returns to. Held in the root's flow it reserved a 32 px row plus its margin for the whole exit, pushing the returning menu down and snapping it back at the end. A level claims the anchor when it becomes current and releases it only when it **unmounts**, so a level still sliding out keeps its header; Back holds the last level label for the same reason, since the stack empties the instant a pop begins. It carries `mb-[var(--spacing-sm)]` so it reads as heading the level rather than as the first row of the level's first group. It spans the full row width with its label **centred** — it heads a level rather than navigating within one — and uses the same label class as every other row, so it reads at the rows' size. Its padding is symmetric (unlike a nav row's) so the centred label lands on the true midpoint, while its chevron still sits on the rows' icon column. Context-aware: it reads the root's stack and **renders nothing at the root level**, so it can be declared unconditionally. Its accessible name names the level it returns to. It reads the label from the root's level map, which every drill sub fills when its **trigger mounts** — not only on a push — so a stack restored through `v-model:path` still names its level instead of rendering a bare chevron.
+- `menu-back/menu-back.vue` — The return row for drill levels. **It renders inside the current level, not where it is declared:** the level exposes an anchor through the root context and Back teleports into it. That placement is load-bearing on two counts — the level's own slide animates Back for free (no second transition to keep in sync), and Back never occupies the root's flow, so popping cannot shift the menu it returns to. Held in the root's flow it reserved a 32 px row plus its margin for the whole exit, pushing the returning menu down and snapping it back at the end. A level claims the anchor when it becomes current and releases it only when it **unmounts**, so a level still sliding out keeps its header; Back holds the last level label for the same reason, since the stack empties the instant a pop begins. It carries `mb-(--spacing-sm)` so it reads as heading the level rather than as the first row of the level's first group. It spans the full row width with its label **centred** — it heads a level rather than navigating within one — and uses the same label class as every other row, so it reads at the rows' size. Its padding is symmetric (unlike a nav row's) so the centred label lands on the true midpoint, while its chevron still sits on the rows' icon column. Context-aware: it reads the root's stack and **renders nothing at the root level**, so it can be declared unconditionally. Its accessible name names the level it returns to. It reads the label from the root's level map, which every drill sub fills when its **trigger mounts** — not only on a push — so a stack restored through `v-model:path` still names its level instead of rendering a bare chevron.
   - Props: `label?: string` (default `''` — overrides the parent trigger's label taken from context).
   - Slots: `default` — replaces the label text.
 
@@ -438,12 +438,12 @@ literals), so the right column is the contract:
 | Region | Kumo | Ours (DESIGN.md) |
 |---|---|---|
 | list reset | `m-0 list-none p-0 flex flex-col` | adopted as-is — structure, no values |
-| row padding-x | `px-3` (12 px) | `px-[var(--spacing-sm)]` — exact match |
-| icon-to-label gap | `gap-2.5` (10 px) | `gap-[var(--spacing-sm)]` (12 px) — the Figma value; no 10 px spacing token exists |
-| group-label margin-y | `my-3` (12 px) | `my-[var(--spacing-sm)]`, `0` on the first group — exact match |
+| row padding-x | `px-3` (12 px) | `px-(--spacing-sm)` — exact match |
+| icon-to-label gap | `gap-2.5` (10 px) | `gap-(--spacing-sm)` (12 px) — the Figma value; no 10 px spacing token exists |
+| group-label margin-y | `my-3` (12 px) | `my-(--spacing-sm)`, `0` on the first group — exact match |
 | row min-height | `min-h-8.5` (34 px) | `min-h-8` — the theme size scale (checklist § Sizing), and the Figma frame's row height |
 | icon size | — | `size-3` — theme size scale, matches the Figma 12 px glyph |
-| row radius | `rounded-lg` (8 px) | `rounded-[var(--shape-elements)]` — DESIGN.md forbids `rounded-lg` and every numeric radius |
+| row radius | `rounded-lg` (8 px) | `rounded-(--shape-elements)` — DESIGN.md forbids `rounded-lg` and every numeric radius |
 | rail connector column | — (Kumo draws no rail) | `var(--spacing-sm)` (12 px) — the elbow's width and its negative offset |
 | rail elbow height | — | `h-4` — half the row, so the horizontal leg meets the row's centre line |
 | nested indent | `pl-7` (28 px) | `pl-[calc(var(--spacing-sm)+var(--spacing-md))]` (**28 px — matched to the reference**); narrower than our own 40 px icon column, so children sit slightly left of the parent's label rather than on it. Both tokens are breakpoint-fixed, unlike `--spacing-lg` / `--spacing-xl` |
@@ -473,7 +473,7 @@ it.
 
 | Figma variable | Temporary primitive | Follow-up |
 |---|---|---|
-| Kumo row-to-row gap `1px` (`gap-y-px`) — a hairline that makes adjacent hover surfaces read as separate rows | **None.** Rows are flush (`flex flex-col`, no `gap-y`). DESIGN.md forbids arbitrary spacing utilities and directs new values to `spacings.data.js`; the smallest token is `--spacing-xxs` (4 px), which is 4× too large. Kumo's paired `before:-inset-y-px` hit-area bleed is dropped with it — with no gap there is no dead strip to cover. | `TODO: tokenizar` — add a `spacing-hairline` (`1px`) entry to `spacings.data.js`, then set `gap-y-[var(--spacing-hairline)]` on every list and restore the bleed. Purely cosmetic; the menu is correct without it. |
+| Kumo row-to-row gap `1px` (`gap-y-px`) — a hairline that makes adjacent hover surfaces read as separate rows | **None.** Rows are flush (`flex flex-col`, no `gap-y`). DESIGN.md forbids arbitrary spacing utilities and directs new values to `spacings.data.js`; the smallest token is `--spacing-xxs` (4 px), which is 4× too large. Kumo's paired `before:-inset-y-px` hit-area bleed is dropped with it — with no gap there is no dead strip to cover. | `TODO: tokenizar` — add a `spacing-hairline` (`1px`) entry to `spacings.data.js`, then set `gap-y-(--spacing-hairline)` on every list and restore the bleed. Purely cosmetic; the menu is correct without it. |
 
 Two further reference values are **conscious mappings, not gaps** — DESIGN.md already dictates the
 answer, so no token is missing: Kumo's `min-h-8.5` (34 px) becomes `min-h-8` (the theme size scale,
@@ -482,7 +482,7 @@ and the Figma row height), and its `rounded-lg` (8 px) becomes `var(--shape-elem
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--menu-ring-offset,var(--bg-canvas))]` — `ring-offset-1` per [`DESIGN.md`](../.claude/docs/DESIGN.md) § Interactive states, with the offset colour handed down by the host (`Sidebar` sets `--menu-ring-offset` to its own surface, mirroring the existing `--menu-item-ring-offset` pattern).
+- Visible focus: `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--menu-ring-offset,var(--bg-canvas))]` — `ring-offset-1` per [`DESIGN.md`](../.claude/docs/DESIGN.md) § Interactive states, with the offset colour handed down by the host (`Sidebar` sets `--menu-ring-offset` to its own surface, mirroring the existing `--menu-item-ring-offset` pattern).
 - Keyboard map: `Tab` / `Shift+Tab` move between rows; `Enter`/`Space` activates a row, toggles an inline `Sub`, or pushes a drill level; `ArrowRight` expands a collapsed inline `Sub` or pushes a drill level; `ArrowLeft` collapses an expanded inline `Sub`, or pops one drill level when the current level is not the root; `Escape` pops one drill level.
 - ARIA:
   - The root renders a plain container with `role="navigation"` and `aria-label` from `ariaLabel`. It does **not** render `<nav>`: the menu is injected into a host that may already be a `<nav>` landmark (`Sidebar` is), and nesting landmarks duplicates them in the landmark list. When the host provides the landmark, the consumer suppresses the role by passing `role="presentation"` — and **the name goes with the role**: the root renders no `aria-label` under `role="presentation"` / `"none"`, because ARIA prohibits naming a presentational element and the a11y tree drops the name anyway. The consumer therefore suppresses the landmark with one attribute rather than remembering to unset `ariaLabel` as well.
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 5afda1651..9c3763637 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
 
@@ -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)` |
 
@@ -75,7 +75,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 50e838200..3b7ef3deb 100644
--- a/apps/storybook/src/stories/components/data/flow/Flow.stories.js
+++ b/apps/storybook/src/stories/components/data/flow/Flow.stories.js
@@ -215,11 +215,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>
@@ -243,15 +243,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/menu/Menu.stories.js b/apps/storybook/src/stories/components/navigation/menu/Menu.stories.js
index 3ad7c3a01..7bf0e7d15 100644
--- a/apps/storybook/src/stories/components/navigation/menu/Menu.stories.js
+++ b/apps/storybook/src/stories/components/navigation/menu/Menu.stories.js
@@ -127,7 +127,8 @@ const meta = {
     },
     default: {
       control: false,
-      description: 'The composed anatomy. Rendered before the `groups` tree, not instead of it — so a `Menu.Back` can accompany a data-driven menu.',
+      description:
+        'The composed anatomy. Rendered before the `groups` tree, not instead of it — so a `Menu.Back` can accompany a data-driven menu.',
       table: { category: 'slots' }
     }
   },
@@ -191,7 +192,7 @@ export const Default = {
 }
 
 // One template const per story: it renders the canvas AND builds the snippet.
-const TYPES_TEMPLATE = `<div class="flex flex-wrap items-start gap-[var(--spacing-md)]">
+const TYPES_TEMPLATE = `<div class="flex flex-wrap items-start gap-(--spacing-md)">
   <div class="${HOST_CLASS}">
     <Menu aria-label="Expands in place">
       <MenuGroup label="Expands in place">
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 f954b3bd6..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
@@ -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>`
@@ -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 />
@@ -242,14 +242,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>
@@ -264,14 +264,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/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/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 26da14684..6557c4bf0 100644
--- a/apps/storybook/src/stories/foundations/Motion.stories.js
+++ b/apps/storybook/src/stories/foundations/Motion.stories.js
@@ -18,11 +18,11 @@ const curveRows = Object.entries(curve).map(([name, value]) => ({ name: `ease-${
 // for text rows, and flow-dash drives stroke-dashoffset — an SVG presentation attribute a
 // <div> does not have, so it previews on a real stroke (`stroke:` = its dasharray).
 // 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%)',
@@ -30,20 +30,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)'
   },
   // A dash cycle of 8 divides the keyframe's 24 travel, so the loop is seamless.
   'flow-dash': { stroke: '4 4' }
@@ -117,15 +117,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)">
                 <!-- An animation that drives an SVG presentation attribute (stroke-dashoffset)
                      shows nothing on a div, so it previews on a real stroke instead. -->
                 <svg
@@ -143,7 +143,7 @@ export const Overview = {
                     y2="1"
                     stroke-width="1"
                     :stroke-dasharray="row.preview.stroke"
-                    class="stroke-[var(--accent)] motion-reduce:animate-none"
+                    class="stroke-(--accent) motion-reduce:animate-none"
                     :class="row.className"
                   />
                 </svg>
@@ -159,16 +159,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
@@ -177,9 +177,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,
@@ -188,30 +188,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 474c05101..1541ad76f 100644
--- a/packages/theme/src/scripts/build-tokens.mjs
+++ b/packages/theme/src/scripts/build-tokens.mjs
@@ -324,7 +324,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/catalog.json b/packages/webkit/catalog.json
index 22e5ac034..1bc12c767 100644
--- a/packages/webkit/catalog.json
+++ b/packages/webkit/catalog.json
@@ -8208,18 +8208,18 @@
         "Put every `Menu.Item` and `Menu.Sub` inside a `Menu.Group` or an **inline** `Menu.SubContent`. Those own the `<ul>`; a row outside one is a `<li>` with no list, which is invalid HTML. A group with no `label` is the correct way to express an unlabeled block — including inside a **drill** `Menu.SubContent`, which is a level container rather than a list precisely so it can hold groups.",
         "Treat a drilled level as a whole menu, because it is one: give it groups and labels the way the root has them. A second-level nav that is only flat rows is a missed opportunity, not a constraint of the component.",
         "Let the host own width, padding and scrolling. The menu fills the width it is given and adds no outer margin, so it drops into `Sidebar`, a drawer, or a bare `<div>` unchanged.",
-        "Keep padding **inside the row**, never on the list. Every list (`Group`'s `<ul>`, `SubContent`'s `<ul>`) is a bare `m-0 list-none p-0 flex flex-col`; the row owns `px-[var(--spacing-sm)]` and `min-h-8`. That is what lets a row's hover surface span the full menu width instead of stopping short of a list inset.",
+        "Keep padding **inside the row**, never on the list. Every list (`Group`'s `<ul>`, `SubContent`'s `<ul>`) is a bare `m-0 list-none p-0 flex flex-col`; the row owns `px-(--spacing-sm)` and `min-h-8`. That is what lets a row's hover surface span the full menu width instead of stopping short of a list inset.",
         "**The rail means parentage, not membership.** It is drawn only by an inline `Menu.SubContent`, where it ties children to the row above them. A `Menu.Group` draws none and indents nothing: its label already marks the section, so a rail there would spend the same ink saying something the label has said and dilute what the rail means everywhere else. A grouped row therefore sits flush with an ungrouped one.",
         "Indentation is the nested list's `padding-left`, not a margin on each row — so the rail, which is drawn relative to that padding box, stays aligned no matter what a row contains.",
         "One step of nesting is `--menu-indent` = `calc(var(--spacing-sm) + var(--spacing-md))` (28 px), the step the reference sidebar uses. It is deliberately **narrower than the row's own icon column** (40 px), which is a chosen trade: a tighter tree, at the cost of a child's label landing slightly left of its parent's rather than aligned with it. Widening it to 40 px would align the columns and read as more indentation.",
-        "**One content column, `var(--spacing-sm)`.** Every row type starts its content on it, whatever the row is: a group title's text, an icon-bearing row's **glyph** (its box pads by `var(--spacing-xxs)`, and the glyph's centring inside a `size-8` box carries it the rest of the way), and an icon-less row's label — a `SubTrigger` without a glyph included — (`pl-[var(--spacing-sm)]` directly). A `SubTrigger` that does carry one (drill only) switches to the icon-bearing inset, so both cases land on the column. Nesting shifts the whole column by exactly one `--menu-indent`, so the alignment cascades at every depth. Measured: level 1 content at 12 px for all four row types, level 2 at 40 px.",
+        "**One content column, `var(--spacing-sm)`.** Every row type starts its content on it, whatever the row is: a group title's text, an icon-bearing row's **glyph** (its box pads by `var(--spacing-xxs)`, and the glyph's centring inside a `size-8` box carries it the rest of the way), and an icon-less row's label — a `SubTrigger` without a glyph included — (`pl-(--spacing-sm)` directly). A `SubTrigger` that does carry one (drill only) switches to the icon-bearing inset, so both cases land on the column. Nesting shifts the whole column by exactly one `--menu-indent`, so the alignment cascades at every depth. Measured: level 1 content at 12 px for all four row types, level 2 at 40 px.",
         "**The rail descends from that column**, so `--menu-rail-x` is `var(--spacing-sm)` — one value for every parent, not a per-row calculation. The elbow spans from that line to the child **row's left edge** (`--menu-indent - --menu-rail-x`) and stops there: it must never reach the child's content, because the row's box begins at the indent and its hover and selected surfaces fill that box, so a wider elbow would be drawn underneath them. **The rail lives in the gutter beside the rows, never on top of one.** Every token involved is fixed at all breakpoints, unlike `--spacing-lg` / `--spacing-xl`, which would drift the elbow.",
         "**A row renders no icon box when it has no icon.** An empty box misreports where the row's content starts, so the label sits off the column its siblings hold and the rail anchors to blank space. This rule is what makes the column hold.",
         "Hover and active are `::before` / `::after` **ghost layers** per [`DESIGN.md`](../.claude/docs/DESIGN.md) § Interactive states — never a `transition-colors` on the row root, and never a `background-color` swap that discards the selected fill.",
         "Pick one affordance per meaning: `chevron-down` expands children in place, `chevron-right` replaces the menu. A **group title carries no affordance at all** — it separates rows without folding them, so it never competes with the rows it labels. Folding belongs to a row, which has a chevron and a rail to say which rows it owns.",
         "**The menu is typed in the `label` family, not `body`.** A menu row is compact UI text, which is what `.text-label-*` is for. Rows — `Menu.Item`, `Menu.SubTrigger` and `Menu.Back` alike — are `.text-label-md` (14 px) in `var(--text-default)`. **Only the first-level group title is smaller and muted:** `.text-label-sm` (12 px) in `var(--text-muted)`, which replaced the overline and is the one place the menu changes register. Hierarchy below that is carried by the indent and the rail, not by shrinking each level — and a component with two render branches must give both the same label class, or the same menu renders two sizes.",
         "Prefer `groups` when the tree is data. Hand-composing a recursive tree with `v-for` means re-implementing recursion in the consuming app; the data path renders through the same sub-components.",
-        "Draw the elbow with borders, not a glyph: `w-[var(--spacing-sm)] h-4 -left-[var(--spacing-sm)] border-l border-b border-[var(--border-default)] rounded-bl-[var(--shape-elements)]` on the row's `::before`, and the continuation on its `::after`, hidden on `:last-child`. All tokens, no SVG, and it scales with the row.",
+        "Draw the elbow with borders, not a glyph: `w-(--spacing-sm) h-4 -left-(--spacing-sm) border-l border-b border-(--border-default) rounded-bl-(--shape-elements)` on the row's `::before`, and the continuation on its `::after`, hidden on `:last-child`. All tokens, no SVG, and it scales with the row.",
         "Do not nest more than three levels. Past that the indent eats the rail's readable width; restructure with a drill row instead.",
         "A drill row navigates **on its one activation**, not through a second target. Splitting the row into a link plus a drill affordance is what costs a second tab stop and nests interactive elements — that shape stays rejected. Instead the single button both pushes the level and emits `navigate`, so the consumer routes to the level's landing page as it opens: one target, one tab stop, and the user never opens a second-level menu while still looking at the page they came from. The landing page is still the first item inside the level, so the level reads complete on its own."
       ]
@@ -8314,18 +8314,18 @@
         "Put every `Menu.Item` and `Menu.Sub` inside a `Menu.Group` or an **inline** `Menu.SubContent`. Those own the `<ul>`; a row outside one is a `<li>` with no list, which is invalid HTML. A group with no `label` is the correct way to express an unlabeled block — including inside a **drill** `Menu.SubContent`, which is a level container rather than a list precisely so it can hold groups.",
         "Treat a drilled level as a whole menu, because it is one: give it groups and labels the way the root has them. A second-level nav that is only flat rows is a missed opportunity, not a constraint of the component.",
         "Let the host own width, padding and scrolling. The menu fills the width it is given and adds no outer margin, so it drops into `Sidebar`, a drawer, or a bare `<div>` unchanged.",
-        "Keep padding **inside the row**, never on the list. Every list (`Group`'s `<ul>`, `SubContent`'s `<ul>`) is a bare `m-0 list-none p-0 flex flex-col`; the row owns `px-[var(--spacing-sm)]` and `min-h-8`. That is what lets a row's hover surface span the full menu width instead of stopping short of a list inset.",
+        "Keep padding **inside the row**, never on the list. Every list (`Group`'s `<ul>`, `SubContent`'s `<ul>`) is a bare `m-0 list-none p-0 flex flex-col`; the row owns `px-(--spacing-sm)` and `min-h-8`. That is what lets a row's hover surface span the full menu width instead of stopping short of a list inset.",
         "**The rail means parentage, not membership.** It is drawn only by an inline `Menu.SubContent`, where it ties children to the row above them. A `Menu.Group` draws none and indents nothing: its label already marks the section, so a rail there would spend the same ink saying something the label has said and dilute what the rail means everywhere else. A grouped row therefore sits flush with an ungrouped one.",
         "Indentation is the nested list's `padding-left`, not a margin on each row — so the rail, which is drawn relative to that padding box, stays aligned no matter what a row contains.",
         "One step of nesting is `--menu-indent` = `calc(var(--spacing-sm) + var(--spacing-md))` (28 px), the step the reference sidebar uses. It is deliberately **narrower than the row's own icon column** (40 px), which is a chosen trade: a tighter tree, at the cost of a child's label landing slightly left of its parent's rather than aligned with it. Widening it to 40 px would align the columns and read as more indentation.",
-        "**One content column, `var(--spacing-sm)`.** Every row type starts its content on it, whatever the row is: a group title's text, an icon-bearing row's **glyph** (its box pads by `var(--spacing-xxs)`, and the glyph's centring inside a `size-8` box carries it the rest of the way), and an icon-less row's label — a `SubTrigger` without a glyph included — (`pl-[var(--spacing-sm)]` directly). A `SubTrigger` that does carry one (drill only) switches to the icon-bearing inset, so both cases land on the column. Nesting shifts the whole column by exactly one `--menu-indent`, so the alignment cascades at every depth. Measured: level 1 content at 12 px for all four row types, level 2 at 40 px.",
+        "**One content column, `var(--spacing-sm)`.** Every row type starts its content on it, whatever the row is: a group title's text, an icon-bearing row's **glyph** (its box pads by `var(--spacing-xxs)`, and the glyph's centring inside a `size-8` box carries it the rest of the way), and an icon-less row's label — a `SubTrigger` without a glyph included — (`pl-(--spacing-sm)` directly). A `SubTrigger` that does carry one (drill only) switches to the icon-bearing inset, so both cases land on the column. Nesting shifts the whole column by exactly one `--menu-indent`, so the alignment cascades at every depth. Measured: level 1 content at 12 px for all four row types, level 2 at 40 px.",
         "**The rail descends from that column**, so `--menu-rail-x` is `var(--spacing-sm)` — one value for every parent, not a per-row calculation. The elbow spans from that line to the child **row's left edge** (`--menu-indent - --menu-rail-x`) and stops there: it must never reach the child's content, because the row's box begins at the indent and its hover and selected surfaces fill that box, so a wider elbow would be drawn underneath them. **The rail lives in the gutter beside the rows, never on top of one.** Every token involved is fixed at all breakpoints, unlike `--spacing-lg` / `--spacing-xl`, which would drift the elbow.",
         "**A row renders no icon box when it has no icon.** An empty box misreports where the row's content starts, so the label sits off the column its siblings hold and the rail anchors to blank space. This rule is what makes the column hold.",
         "Hover and active are `::before` / `::after` **ghost layers** per [`DESIGN.md`](../.claude/docs/DESIGN.md) § Interactive states — never a `transition-colors` on the row root, and never a `background-color` swap that discards the selected fill.",
         "Pick one affordance per meaning: `chevron-down` expands children in place, `chevron-right` replaces the menu. A **group title carries no affordance at all** — it separates rows without folding them, so it never competes with the rows it labels. Folding belongs to a row, which has a chevron and a rail to say which rows it owns.",
         "**The menu is typed in the `label` family, not `body`.** A menu row is compact UI text, which is what `.text-label-*` is for. Rows — `Menu.Item`, `Menu.SubTrigger` and `Menu.Back` alike — are `.text-label-md` (14 px) in `var(--text-default)`. **Only the first-level group title is smaller and muted:** `.text-label-sm` (12 px) in `var(--text-muted)`, which replaced the overline and is the one place the menu changes register. Hierarchy below that is carried by the indent and the rail, not by shrinking each level — and a component with two render branches must give both the same label class, or the same menu renders two sizes.",
         "Prefer `groups` when the tree is data. Hand-composing a recursive tree with `v-for` means re-implementing recursion in the consuming app; the data path renders through the same sub-components.",
-        "Draw the elbow with borders, not a glyph: `w-[var(--spacing-sm)] h-4 -left-[var(--spacing-sm)] border-l border-b border-[var(--border-default)] rounded-bl-[var(--shape-elements)]` on the row's `::before`, and the continuation on its `::after`, hidden on `:last-child`. All tokens, no SVG, and it scales with the row.",
+        "Draw the elbow with borders, not a glyph: `w-(--spacing-sm) h-4 -left-(--spacing-sm) border-l border-b border-(--border-default) rounded-bl-(--shape-elements)` on the row's `::before`, and the continuation on its `::after`, hidden on `:last-child`. All tokens, no SVG, and it scales with the row.",
         "Do not nest more than three levels. Past that the indent eats the rail's readable width; restructure with a drill row instead.",
         "A drill row navigates **on its one activation**, not through a second target. Splitting the row into a link plus a drill affordance is what costs a second tab stop and nests interactive elements — that shape stays rejected. Instead the single button both pushes the level and emits `navigate`, so the consumer routes to the level's landing page as it opens: one target, one tab stop, and the user never opens a second-level menu while still looking at the page they came from. The landing page is still the first item inside the level, so the level reads complete on its own."
       ]
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..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-[var(--bg-surface)] text-[var(--text-default)] p-[var(--spacing-md)] rounded-[var(--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-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..62375ad8f 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
@@ -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-[var(--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>
@@ -874,9 +871,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..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,10 +64,8 @@ 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)]"
->
-  <span class="text-[var(--primary)]">Active</span>
+<div class="bg-(--bg-surface) text-(--text-default) border border-(--border-default)">
+  <span class="text-(--primary)">Active</span>
 </div>
 
 <!-- ❌ value-based: legible in one theme, broken in the other -->
@@ -89,9 +87,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 +104,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 +123,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 +141,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 +193,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 319e28bc3..7c0791d73 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
@@ -68,7 +68,7 @@ text-body-* > text-label-* > text-overline-*`). See `/webkit-baseline-ui`.
    - **Verify it by measuring, not by looking.** Read the rendered `x` of each row type and assert
      they are equal, and assert a rail's right edge never exceeds the row surface's left edge. A 4px
      break is invisible in review and obvious in production.
-6. **Contain the page** — cap reading/content width with `max-w-[var(--container-*)]`, keep
+6. **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`.
 7. **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..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-[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..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-[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 f8f67ee62..112104004 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)] py-[var(--spacing-xl)]"
+      class="flex h-full min-h-0 flex-col items-center justify-center gap-(--spacing-md) bg-(--bg-canvas) py-(--spacing-xl)"
     >
-      <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 777d69944..d9edd27a4 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 h-fit 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 h-fit 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 3673abdaa..13cf89d98 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-sm)] 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-sm) 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..df78ad3dc 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>
 
@@ -100,10 +100,7 @@
     :data-testid="testId"
   >
     <div
-      :class="[
-        'flex w-full flex-col items-start shrink-0',
-        isMiddle ? 'gap-[var(--spacing-lg)]' : ''
-      ]"
+      :class="['flex w-full flex-col items-start shrink-0', isMiddle ? 'gap-(--spacing-lg)' : '']"
     >
       <div
         :class="headerContainerClasses"
@@ -112,11 +109,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 +127,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 +136,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 +150,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 +168,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 +182,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..5c0f8347c 100644
--- a/packages/webkit/src/components/content/currency/currency.vue
+++ b/packages/webkit/src/components/content/currency/currency.vue
@@ -37,18 +37,16 @@
   <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)]'
+          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-[var(--text-default)]'
-            : 'text-label-lg text-[var(--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-[var(--text-muted)]'
-          : 'text-label-sm text-[var(--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/content/item/item-actions.vue b/packages/webkit/src/components/content/item/item-actions.vue
index 93d77340d..4df4a9eb9 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 w-fit shrink-0 items-center gap-[var(--spacing-xs)]"
+    class="flex w-fit shrink-0 items-center gap-(--spacing-xs)"
   >
     <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..d9b159b88 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
@@ -547,10 +547,7 @@
       <ScrollArea
         orientation="both"
         :class="
-          cn(
-            'min-h-0 min-w-0 flex-1 py-[var(--spacing-sm)]',
-            'focus-visible:ring-offset-[var(--bg-surface)]'
-          )
+          cn('min-h-0 min-w-0 flex-1 py-(--spacing-sm)', 'focus-visible:ring-offset-(--bg-surface)')
         "
         :data-testid="`${testId}__scroll`"
       >
@@ -572,8 +569,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 +579,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 +592,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 +613,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 cacb086b1..424fe7c04 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-comment)]'
+  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-comment)'
 }
 
 export const getHighlightTokenClass = (type: CodeBlockHighlightTokenType): string =>
diff --git a/packages/webkit/src/components/data/flow/flow-anchor/flow-anchor.vue b/packages/webkit/src/components/data/flow/flow-anchor/flow-anchor.vue
index 1faddc6bc..7104784ff 100644
--- a/packages/webkit/src/components/data/flow/flow-anchor/flow-anchor.vue
+++ b/packages/webkit/src/components/data/flow/flow-anchor/flow-anchor.vue
@@ -33,7 +33,7 @@
   // block, so its padding box and border box coincide and no pull-back is needed. Adding
   // one here would push the port a pixel past the edge connectors.ts attaches to.
   const PORT_CLASS =
-    'pointer-events-none absolute top-1/2 size-2 -translate-y-1/2 rounded-[var(--radius-sm)] border-solid border-[length:var(--border-width-default,1px)] border-[var(--border-muted)] bg-[var(--accent)] data-[flow-port=end]:left-0 data-[flow-port=end]:-translate-x-full data-[flow-port=start]:right-0 data-[flow-port=start]:translate-x-full group-data-[disabled]:border-dashed'
+    'pointer-events-none absolute top-1/2 size-2 -translate-y-1/2 rounded-(--radius-sm) border-solid border-[length:var(--border-width-default,1px)] border-(--border-muted) bg-(--accent) data-[flow-port=end]:left-0 data-[flow-port=end]:-translate-x-full data-[flow-port=start]:right-0 data-[flow-port=start]:translate-x-full group-data-[disabled]:border-dashed'
 
   const rootClass = computed(() => cn('relative block', attrs.class as string | undefined))
 </script>
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 c2adc3f8b..618d01c23 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
@@ -37,7 +37,7 @@
   )
 
   const ROOT_CLASS =
-    'group relative z-[1] text-label-md text-[var(--text-default)] focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] 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-solid data-[styled]:border-[length:var(--border-width-default,1px)] 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-[styled]:shadow-[var(--shadow-xs)] data-[disabled]:text-[var(--text-disabled)] data-[disabled]:opacity-60'
+    'group relative z-1 text-label-md text-(--text-default) focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) 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-solid data-[styled]:border-[length:var(--border-width-default,1px)] data-[styled]:border-(--border-default) data-[styled]:bg-(--bg-surface-raised) data-[styled]:px-(--spacing-md) data-[styled]:py-(--spacing-sm) data-[styled]:shadow-(--shadow-xs) data-[disabled]:text-(--text-disabled) data-[disabled]:opacity-60'
 
   // The connector port: an 8px square sitting entirely OUTSIDE the node box, flush against
   // the edge a connector attaches to. `data-flow-port` picks the edge; the border goes
@@ -50,7 +50,7 @@
   // focus-visible ring never crop it. The border-box edge is the exact point connectors.ts
   // attaches to, so the line meets the port's inner edge and the square occludes the rest.
   const PORT_CLASS =
-    'pointer-events-none absolute top-1/2 size-2 -translate-y-1/2 rounded-[var(--radius-sm)] border-solid border-[length:var(--border-width-default,1px)] border-[var(--border-muted)] bg-[var(--accent)] data-[flow-port=end]:-left-px data-[flow-port=end]:-translate-x-full data-[flow-port=start]:-right-px data-[flow-port=start]:translate-x-full group-data-[disabled]:border-dashed'
+    'pointer-events-none absolute top-1/2 size-2 -translate-y-1/2 rounded-(--radius-sm) border-solid border-[length:var(--border-width-default,1px)] border-(--border-muted) bg-(--accent) data-[flow-port=end]:-left-px data-[flow-port=end]:-translate-x-full data-[flow-port=start]:-right-px data-[flow-port=start]:translate-x-full group-data-[disabled]:border-dashed'
 
   const rootClass = computed(() => cn(ROOT_CLASS, attrs.class as string | undefined))
 </script>
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 28a97ca03..b252dbd8e 100644
--- a/packages/webkit/src/components/data/flow/flow.vue
+++ b/packages/webkit/src/components/data/flow/flow.vue
@@ -37,7 +37,7 @@
   })
 
   const outerClass = 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>
 
@@ -57,10 +57,10 @@
     <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 [&>[data-flow-leading]_[data-flow-port=end]]:hidden [&>[data-flow-trailing]_[data-flow-port=start]]:hidden [&_[data-flow-terminal]_[data-flow-port=start]]:hidden"
+      class="relative flex w-fit flex-row gap-(--spacing-xl) text-(--text-default) data-[align=center]:items-center data-[align=start]:items-start [&>[data-flow-leading]_[data-flow-port=end]]:hidden [&>[data-flow-trailing]_[data-flow-port=start]]:hidden [&_[data-flow-terminal]_[data-flow-port=start]]:hidden"
     >
       <!-- Connectors run port-to-port: each end terminates under a node's connector port,
-           which paints over it (the nodes sit at z-[1], this layer behind them).
+           which paints over it (the nodes sit at z-1, this layer behind them).
 
            The stroke marches: `stroke-dasharray="4 4"` plus `animate-flow-dash` (which
            drives `stroke-dashoffset` 24 → 0) reads as the connection carrying something,
@@ -85,7 +85,7 @@
           stroke-width="1"
           stroke-dasharray="4 4"
           :data-faded="path.faded || null"
-          class="animate-flow-dash stroke-[var(--accent)] motion-reduce:animate-none data-[faded]:animate-none data-[faded]:opacity-50"
+          class="animate-flow-dash stroke-(--accent) motion-reduce:animate-none data-[faded]:animate-none data-[faded]:opacity-50"
         />
       </svg>
       <slot />
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 dd71781ec..103d14c4a 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
@@ -109,17 +109,17 @@
        focus ring's offset has to match it. --input-ring-offset is InputText's hook
        for that; declared once here it inherits to every field below. -->
   <div
-    class="flex flex-col gap-[var(--spacing-sm)] [--input-ring-offset:var(--bg-surface-raised)]"
+    class="flex flex-col gap-(--spacing-sm) [--input-ring-offset:var(--bg-surface-raised)]"
     data-testid="input-calendar__fields"
   >
-    <div class="flex flex-col gap-[var(--spacing-xxs)]">
+    <div class="flex flex-col gap-(--spacing-xxs)">
       <label
         :for="startDateId"
-        class="text-label-sm text-[var(--text-muted)]"
+        class="text-label-sm text-(--text-muted)"
       >
         {{ startLabel }}
       </label>
-      <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
             :id="startDateId"
@@ -150,15 +150,15 @@
 
     <div
       v-if="mode === 'range'"
-      class="flex flex-col gap-[var(--spacing-xxs)]"
+      class="flex flex-col gap-(--spacing-xxs)"
     >
       <label
         :for="endDateId"
-        class="text-label-sm text-[var(--text-muted)]"
+        class="text-label-sm text-(--text-muted)"
       >
         End
       </label>
-      <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
             :id="endDateId"
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 4ea59016a..5c1c97f9a 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
@@ -323,23 +323,23 @@
   <div
     ref="gridRef"
     data-testid="input-calendar__grid"
-    class="flex flex-col items-start gap-[var(--spacing-md)]"
+    class="flex flex-col items-start gap-(--spacing-md)"
   >
     <!-- Static header. The month label and the prev/next controls live OUTSIDE the
          transition so they never travel with the sliding strip — only the month
          itself moves. Keeping the buttons mounted also means focus stays on the
          control the user just pressed instead of being torn down under them. -->
-    <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
@@ -352,7 +352,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
@@ -394,13 +394,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}`"
@@ -426,7 +426,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 75bdcfbaf..fa0d63b03 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-label-sm inline-flex h-8 min-h-8 w-full items-center justify-between gap-[var(--spacing-xs)] rounded-[var(--shape-button)] px-[var(--spacing-sm)] 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-label-sm inline-flex h-8 min-h-8 w-full items-center justify-between gap-(--spacing-xs) rounded-(--shape-button) px-(--spacing-sm) 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 067b5de87..0ca7be5ee 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-label-sm inline-flex h-8 min-h-8 w-full items-center gap-[var(--spacing-xs)] whitespace-nowrap rounded-[var(--shape-button)] px-[var(--spacing-sm)] 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-label-sm inline-flex h-8 min-h-8 w-full items-center gap-(--spacing-xs) whitespace-nowrap rounded-(--shape-button) px-(--spacing-sm) 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 2ef5c8c37..c04d52832 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-label-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 [&:not(:focus):not(:disabled)]: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-label-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 [&:not(:focus):not(:disabled)]: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 ae5344049..efaaa8d7f 100644
--- a/packages/webkit/src/components/inputs/calendar/calendar.vue
+++ b/packages/webkit/src/components/inputs/calendar/calendar.vue
@@ -497,7 +497,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)] transition-colors duration-150 ease-out [&:not(:focus-within):not([data-disabled])]:hover:border-[var(--border-strong)] data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--bg-disabled)] data-[disabled]:text-[var(--text-disabled)] data-[two-part]:w-[var(--container-xs)] motion-reduce:transition-none"
+          class="inline-flex w-(--container-3xs) max-w-full items-stretch overflow-hidden rounded-(--shape-elements) border border-(--border-default) bg-(--bg-surface) transition-colors duration-150 ease-out [&:not(:focus-within):not([data-disabled])]:hover:border-(--border-strong) data-[disabled]:cursor-not-allowed data-[disabled]:bg-(--bg-disabled) data-[disabled]:text-(--text-disabled) data-[two-part]:w-(--container-xs) motion-reduce:transition-none"
         >
           <template v-if="isTwoPart">
             <button
@@ -508,17 +508,17 @@
               :data-testid="`${testId}__presets-trigger`"
               aria-haspopup="menu"
               :aria-expanded="isPresetsOpen"
-              class="text-label-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 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-label-sm inline-flex min-w-0 items-center gap-(--spacing-xs) px-(--spacing-sm) 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-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
                 :data-state="isPresetsOpen ? 'open' : 'closed'"
-                class="pi pi-chevron-down shrink-0 text-[length:inherit] leading-none text-[var(--text-muted)] transition-transform duration-150 ease-out data-[state=open]:rotate-180 motion-reduce:transition-none"
+                class="pi pi-chevron-down shrink-0 text-[length:inherit] leading-none text-(--text-muted) transition-transform duration-150 ease-out data-[state=open]:rotate-180 motion-reduce:transition-none"
                 aria-hidden="true"
               />
             </button>
@@ -531,11 +531,11 @@
               :data-testid="`${testId}__trigger`"
               aria-haspopup="dialog"
               :aria-expanded="isOpen"
-              class="text-label-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 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-label-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 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>
@@ -551,28 +551,26 @@
               :data-testid="`${testId}__trigger`"
               aria-haspopup="dialog"
               :aria-expanded="isOpen"
-              class="text-label-sm inline-flex min-w-0 flex-1 items-stretch 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-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-label-sm inline-flex min-w-0 flex-1 items-stretch 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-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)]"
-              >
+              <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-[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
                   :data-state="isOpen ? 'open' : 'closed'"
-                  class="pi pi-chevron-down shrink-0 text-[length:inherit] leading-none text-[var(--text-muted)] transition-transform duration-150 ease-out data-[state=open]:rotate-180 motion-reduce:transition-none"
+                  class="pi pi-chevron-down shrink-0 text-[length:inherit] leading-none text-(--text-muted) transition-transform duration-150 ease-out data-[state=open]:rotate-180 motion-reduce:transition-none"
                   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>
@@ -588,19 +586,19 @@
               :data-testid="`${testId}__trigger`"
               aria-haspopup="dialog"
               :aria-expanded="isOpen"
-              class="text-label-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 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-label-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 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)"
                 :data-state="isOpen ? 'open' : 'closed'"
-                class="pi pi-chevron-down shrink-0 text-[length:inherit] leading-none text-[var(--text-muted)] transition-transform duration-150 ease-out data-[state=open]:rotate-180 motion-reduce:transition-none"
+                class="pi pi-chevron-down shrink-0 text-[length:inherit] leading-none text-(--text-muted) transition-transform duration-150 ease-out data-[state=open]:rotate-180 motion-reduce:transition-none"
                 aria-hidden="true"
               />
             </button>
@@ -611,7 +609,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: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:text-(--text-default) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) motion-reduce:transition-none"
               @click="clearCommitted"
             >
               <i
@@ -627,7 +625,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: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:text-(--text-default) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) motion-reduce:transition-none"
               @click="toggleOpen"
             >
               <i
@@ -663,7 +661,7 @@
           :data-state="isOpen ? 'open' : 'closed'"
           :data-placement="resolvedPlacement"
           :style="panelStyle"
-          class="flex max-w-[min(90vw,44rem)] 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 max-w-[min(90vw,44rem)] 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
@@ -671,7 +669,7 @@
             :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>
@@ -679,18 +677,18 @@
             <div
               v-if="!period"
               :data-size="size"
-              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)] data-[size=small]:max-w-[calc(7*var(--size-8)_+_2*var(--spacing-sm))] data-[size=medium]:max-w-[calc(7*var(--size-9)_+_2*var(--spacing-sm))] data-[size=large]:max-w-[calc(7*var(--size-10)_+_2*var(--spacing-sm))]'
+                  ? 'min-w-(--container-3xs) border-l border-(--border-default)'
+                  : 'border-t border-(--border-default) data-[size=small]:max-w-[calc(7*var(--size-8)_+_2*var(--spacing-sm))] data-[size=medium]:max-w-[calc(7*var(--size-9)_+_2*var(--spacing-sm))] data-[size=large]:max-w-[calc(7*var(--size-10)_+_2*var(--spacing-sm))]'
               "
             >
               <CalendarFields v-if="showFields" />
 
               <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>
@@ -728,7 +726,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-xxs)] 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-xxs) shadow-(--shadow-sm) outline-none [transform-origin:var(--popup-origin,top_left)]"
           @keydown="onPresetsKeydown"
         >
           <slot name="presets">
@@ -740,13 +738,13 @@
               :disabled="disabled"
               :data-selected="preset.label === committedPeriodLabel || null"
               :data-testid="`${testId}__preset`"
-              class="text-label-sm inline-flex h-8 min-h-8 w-full items-center justify-between gap-[var(--spacing-xs)] rounded-[var(--shape-button)] px-[var(--spacing-sm)] 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-label-sm inline-flex h-8 min-h-8 w-full items-center justify-between gap-(--spacing-xs) rounded-(--shape-button) px-(--spacing-sm) 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..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
@@ -71,20 +71,19 @@
 
   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'
+  const textsClasses = '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 +122,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..4d6196db2 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,12 @@
   })
 
   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'
+  const textsClasses = '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 +106,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..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
@@ -64,17 +64,16 @@
 
   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'
+  const textsClasses = '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 +106,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..0086528a4 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,12 @@
   })
 
   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'
+  const textsClasses = '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 +94,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..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
@@ -57,20 +57,19 @@
 
   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'
+  const textsClasses = '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 +106,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 92c1d78a1..4a1bfc5bf 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:not([role=switch])]:!border-transparent [&_button:not([role=switch])]:!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:not([role=switch])]:!border-transparent [&_button:not([role=switch])]:!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 23390397b..4eb4a7cbb 100644
--- a/packages/webkit/src/components/inputs/input-text/input-text.vue
+++ b/packages/webkit/src/components/inputs/input-text/input-text.vue
@@ -91,29 +91,29 @@
     :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)]',
+      '[&:not(:focus-within):not([data-disabled])]:hover:border-(--border-strong)',
       // The ring offset must match the surface BEHIND the field, so a host that
       // puts the field on something other than the canvas (a raised popover, a
       // drawer) retunes it by setting --input-ring-offset on any ancestor. A CSS
       // variable, not a class the host has to out-specify: custom properties
       // inherit, so one declaration covers a whole group of fields, and it costs
       // no extra utility to resolve.
-      'focus-within:outline-none focus-within:ring-2 focus-within:ring-[var(--ring-color)] focus-within:ring-offset-2 focus-within:ring-offset-[var(--input-ring-offset,var(--bg-canvas))]',
+      'focus-within:outline-none focus-within:ring-2 focus-within:ring-(--ring-color) focus-within:ring-offset-2 focus-within:ring-offset-[var(--input-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-[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" />
@@ -131,14 +131,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 c9d98cd67..89dc3d76c 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-3.5 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-3.5 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 a8f76d64e..60cfdbf22 100644
--- a/packages/webkit/src/components/layout/scroll-area/scroll-area.vue
+++ b/packages/webkit/src/components/layout/scroll-area/scroll-area.vue
@@ -57,7 +57,7 @@
       'relative min-h-0 min-w-0',
       '[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..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-[var(--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 695660746..4c044e0e2 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 ?? '#')"
               />
@@ -134,9 +134,7 @@
               :current="firstItem.current && !showDistinctEnds"
               :show-icon="firstItem.showIcon"
               :icon="firstItem.icon"
-              :class="
-                firstItem.current && !showDistinctEnds ? 'text-[var(--text-default)]' : undefined
-              "
+              :class="firstItem.current && !showDistinctEnds ? 'text-(--text-default)' : undefined"
               :data-testid="`${testId}__item-0`"
               @click="
                 (event) => !firstItem.current && handleItemClick(event, firstItem.href ?? '#')
@@ -159,7 +157,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 +198,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/menu-back/menu-back.vue b/packages/webkit/src/components/navigation/menu/menu-back/menu-back.vue
index 604c220c7..bbedbdaed 100644
--- a/packages/webkit/src/components/navigation/menu/menu-back/menu-back.vue
+++ b/packages/webkit/src/components/navigation/menu/menu-back/menu-back.vue
@@ -71,18 +71,18 @@
     // as that group's first row — it heads the level, it is not part of it.
     // No motion of its own: it renders INSIDE the current level (see the teleport below), so
     // the level's slide carries it and its box never sits in the root's flow.
-    'group relative flex h-8 w-full shrink-0 items-center gap-[var(--spacing-xs)] ' +
-    'mb-[var(--spacing-sm)] ' +
+    'group relative flex h-8 w-full shrink-0 items-center gap-(--spacing-xs) ' +
+    'mb-(--spacing-sm) ' +
     // Symmetric padding, unlike a nav row's: the label is centred against the whole row, so
     // the leading and trailing insets have to match or it lands off-centre by their difference.
     // The chevron still sits on the same column as an item's icon.
-    'rounded-[var(--shape-elements)] px-[var(--spacing-xxs)] ' +
-    'text-[var(--text-default)] ' +
-    "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 " +
+    'rounded-(--shape-elements) px-(--spacing-xxs) ' +
+    'text-(--text-default) ' +
+    "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 ' +
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--menu-ring-offset,var(--bg-canvas))]'
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--menu-ring-offset,var(--bg-canvas))]'
 
   const rootClass = computed(() => cn(ROOT_CLASS, attrs.class as string | undefined))
 
@@ -118,7 +118,7 @@
         :data-testid="`${testId}__icon`"
       >
         <i
-          class="pi pi-chevron-left size-4 shrink-0 leading-none text-[length:inherit] text-[var(--text-muted)]"
+          class="pi pi-chevron-left size-4 shrink-0 leading-none text-[length:inherit] text-(--text-muted)"
           aria-hidden="true"
         />
       </span>
diff --git a/packages/webkit/src/components/navigation/menu/menu-group/menu-group.vue b/packages/webkit/src/components/navigation/menu/menu-group/menu-group.vue
index 30f17974d..4710bcf3c 100644
--- a/packages/webkit/src/components/navigation/menu/menu-group/menu-group.vue
+++ b/packages/webkit/src/components/navigation/menu/menu-group/menu-group.vue
@@ -73,7 +73,7 @@
     // `relative z-10` / `aria-hidden:z-0`: the hidden level is absolutely positioned, and a
     // positioned element paints above an in-flow sibling by default — the current level has
     // to win, or the level being replaced sits on top of the one replacing it.
-    'relative z-10 flex w-full flex-col my-[var(--spacing-sm)] first-of-type:my-0 translate-x-0 ' +
+    'relative z-10 flex w-full flex-col my-(--spacing-sm) first-of-type:my-0 translate-x-0 ' +
     // `-translate-x-full` clears the group's own width but not the host's padding, so a
     // `Sidebar`-inset menu leaves a sliver of the outgoing level on screen. Fading it is
     // the only fix available to a component that cannot know its host's padding. Only the
@@ -139,7 +139,7 @@
         v-if="hasLabel"
         :id="labelId"
         :data-testid="`${testId}__label`"
-        class="flex min-h-8 w-full shrink-0 items-center px-[var(--spacing-sm)] text-label-sm text-[var(--text-muted)]"
+        class="flex min-h-8 w-full shrink-0 items-center px-(--spacing-sm) text-label-sm text-(--text-muted)"
       >
         <span class="min-w-0 flex-1 truncate">
           <slot name="label">{{ label }}</slot>
diff --git a/packages/webkit/src/components/navigation/menu/menu-item/menu-item.vue b/packages/webkit/src/components/navigation/menu/menu-item/menu-item.vue
index b7d23d3e9..6f7f06766 100644
--- a/packages/webkit/src/components/navigation/menu/menu-item/menu-item.vue
+++ b/packages/webkit/src/components/navigation/menu/menu-item/menu-item.vue
@@ -79,34 +79,34 @@
   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)]',
-      'pr-[var(--spacing-xs)] py-[var(--spacing-xxs)]',
+      'gap-(--spacing-xs) rounded-(--shape-elements)',
+      'pr-(--spacing-xs) py-(--spacing-xxs)',
       // One content column for the whole menu (`--spacing-sm`). With an icon the 32px box
       // supplies the inset and the glyph lands on that column (`--spacing-xxs` + the glyph's
       // centring); with no icon the label takes the column directly.
-      props.icon ? 'pl-[var(--spacing-xxs)]' : 'pl-[var(--spacing-sm)]',
+      props.icon ? 'pl-(--spacing-xxs)' : 'pl-(--spacing-sm)',
       '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
     )
   )
@@ -120,10 +120,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/menu/menu-sub-content/menu-sub-content.vue b/packages/webkit/src/components/navigation/menu/menu-sub-content/menu-sub-content.vue
index ef1591395..b58021746 100644
--- a/packages/webkit/src/components/navigation/menu/menu-sub-content/menu-sub-content.vue
+++ b/packages/webkit/src/components/navigation/menu/menu-sub-content/menu-sub-content.vue
@@ -127,10 +127,10 @@
     'relative m-0 flex w-full list-none flex-col p-0 ' +
     '[--menu-indent:calc(var(--spacing-sm)+var(--spacing-xs))] ' +
     '[--menu-rail-x:var(--spacing-sm)] ' +
-    'pl-[var(--menu-indent)] ' +
+    'pl-(--menu-indent) ' +
     '[&>li]:relative ' +
-    "[&>li]:before:pointer-events-none [&>li]:before:absolute [&>li]:before:top-0 [&>li]:before:left-[calc(var(--menu-rail-x)-var(--menu-indent))] [&>li]:before:h-4 [&>li]:before:w-[calc(var(--menu-indent)-var(--menu-rail-x))] [&>li]:before:rounded-bl-[var(--shape-elements)] [&>li]:before:border-b [&>li]:before:border-l [&>li]:before:border-[var(--border-default)] [&>li]:before:content-[''] " +
-    "[&>li]:after:pointer-events-none [&>li]:after:absolute [&>li]:after:top-4 [&>li]:after:bottom-0 [&>li]:after:left-[calc(var(--menu-rail-x)-var(--menu-indent))] [&>li]:after:w-0 [&>li]:after:border-l [&>li]:after:border-[var(--border-default)] [&>li]:after:content-[''] " +
+    "[&>li]:before:pointer-events-none [&>li]:before:absolute [&>li]:before:top-0 [&>li]:before:left-[calc(var(--menu-rail-x)-var(--menu-indent))] [&>li]:before:h-4 [&>li]:before:w-[calc(var(--menu-indent)-var(--menu-rail-x))] [&>li]:before:rounded-bl-(--shape-elements) [&>li]:before:border-b [&>li]:before:border-l [&>li]:before:border-(--border-default) [&>li]:before:content-[''] " +
+    "[&>li]:after:pointer-events-none [&>li]:after:absolute [&>li]:after:top-4 [&>li]:after:bottom-0 [&>li]:after:left-[calc(var(--menu-rail-x)-var(--menu-indent))] [&>li]:after:w-0 [&>li]:after:border-l [&>li]:after:border-(--border-default) [&>li]:after:content-[''] " +
     '[&>li:last-child]:after:hidden'
 
   /**
diff --git a/packages/webkit/src/components/navigation/menu/menu-sub-trigger/menu-sub-trigger.vue b/packages/webkit/src/components/navigation/menu/menu-sub-trigger/menu-sub-trigger.vue
index 0abb542f9..7cb4625ba 100644
--- a/packages/webkit/src/components/navigation/menu/menu-sub-trigger/menu-sub-trigger.vue
+++ b/packages/webkit/src/components/navigation/menu/menu-sub-trigger/menu-sub-trigger.vue
@@ -55,19 +55,19 @@
   // allowed to be smaller and muted; from there every row is 14px, a trigger included — a row
   // that owns children is still a row. The chevron sits on the trailing edge.
   const ROOT_CLASS =
-    'group relative flex h-8 w-full shrink-0 items-center gap-[var(--spacing-xs)] ' +
-    'rounded-[var(--shape-elements)] pr-[var(--spacing-xs)] py-[var(--spacing-xxs)] text-left ' +
-    'text-[var(--text-default)] ' +
-    "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 " +
+    'group relative flex h-8 w-full shrink-0 items-center gap-(--spacing-xs) ' +
+    'rounded-(--shape-elements) pr-(--spacing-xs) py-(--spacing-xxs) text-left ' +
+    'text-(--text-default) ' +
+    "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 ' +
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--menu-ring-offset,var(--bg-canvas))] ' +
-    'data-[disabled]:cursor-not-allowed data-[disabled]:text-[var(--text-disabled)] data-[disabled]:before:hidden data-[disabled]:after:hidden'
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--menu-ring-offset,var(--bg-canvas))] ' +
+    'data-[disabled]:cursor-not-allowed data-[disabled]:text-(--text-disabled) data-[disabled]:before:hidden data-[disabled]:after:hidden'
 
   // The chevron is a trailing affordance, not part of the icon column, so it keeps its own
   // smaller size. `text-label-sm` is the token that gets it there without a raw text-* class.
-  const CHEVRON_CLASS = 'size-3 shrink-0 leading-none text-label-sm text-[var(--text-muted)]'
+  const CHEVRON_CLASS = 'size-3 shrink-0 leading-none text-label-sm text-(--text-muted)'
 
   // Same box and glyph as `Menu.Item`, so the two land on the menu's one content column: the
   // 32px box supplies the inset and the glyph's centring carries it the rest of the way.
@@ -78,8 +78,8 @@
       props.icon,
       'size-4 shrink-0 leading-none text-[length:inherit]',
       props.disabled
-        ? 'text-[var(--text-disabled)]'
-        : 'text-[var(--text-muted)] group-hover:text-[var(--text-default)] group-focus-visible:text-[var(--text-default)]'
+        ? 'text-(--text-disabled)'
+        : 'text-(--text-muted) group-hover:text-(--text-default) group-focus-visible:text-(--text-default)'
     )
   )
 
@@ -88,7 +88,7 @@
       ROOT_CLASS,
       // The menu's ONE content column (`--spacing-sm`): a group title's text, an icon-bearing
       // row's glyph and an icon-less row's label all start on it.
-      showIcon.value ? 'pl-[var(--spacing-xxs)]' : 'pl-[var(--spacing-sm)]',
+      showIcon.value ? 'pl-(--spacing-xxs)' : 'pl-(--spacing-sm)',
       attrs.class as string | undefined
     )
   )
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..f29b79e03 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,37 @@ 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 navigationMenuListGroupClasses =
-  'm-0 flex list-none flex-col gap-[var(--spacing-xs)] p-0'
+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 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 +65,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 +74,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 bd87e0193..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,38 +70,35 @@
   const panelId = computed(() => (context ? context.panelId(resolvedValue.value) : undefined))
 
   const itemSharedClasses = [
-    'relative z-[1] inline-flex h-[var(--size-8)] shrink-0 cursor-pointer items-center',
-    'gap-[var(--spacing-xs)] rounded-[var(--shape-button)]',
-    'px-[var(--spacing-xs)] py-[var(--spacing-xs)]',
+    'relative z-1 inline-flex h-(--size-8) shrink-0 cursor-pointer items-center',
+    'gap-(--spacing-xs) rounded-(--shape-button)',
+    '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-[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)',
       // 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-[var(--text-default)]',
+      !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 &&
-        'border-[length:var(--border-width-default)] border-[var(--border-muted)] bg-[var(--secondary-mask)] text-[var(--text-default)] shadow-[var(--shadow-xs)]',
+        'border-(length:--border-width-default) border-(--border-muted) bg-(--secondary-mask) text-(--text-default) shadow-(--shadow-xs)',
       !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
     )
   )
@@ -110,7 +107,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 cdcb986fe..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
@@ -62,7 +62,7 @@
    */
   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
     )
   )
@@ -73,9 +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-[var(--shape-button)] bg-[var(--secondary-mask)]',
-    'border-[length:var(--border-width-default)] border-[var(--border-muted)]',
-    'shadow-[var(--shadow-xs)]',
+    'rounded-(--shape-button) bg-(--secondary-mask)',
+    'border-(length:--border-width-default) border-(--border-muted)',
+    'shadow-(--shadow-xs)',
     'motion-reduce:transition-none'
   ]
 
@@ -170,7 +170,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
@@ -181,7 +181,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 cd3932023..3b16220ed 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
@@ -45,7 +45,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 a1a89e5d2..470c1be3d 100644
--- a/packages/webkit/src/components/overlay/panel/panel.vue
+++ b/packages/webkit/src/components/overlay/panel/panel.vue
@@ -47,9 +47,9 @@
       // 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-[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 6cc819047..e8c7cc9d0 100644
--- a/packages/webkit/src/components/overlay/presets/mobile-position.js
+++ b/packages/webkit/src/components/overlay/presets/mobile-position.js
@@ -14,7 +14,7 @@
 export const overlayMobileFluidClasses = ['max-md:w-full', 'max-md:h-fit', 'max-md:max-h-[80dvh]']
 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)'
 ]
 /**
  * The motion wrapper only positions and animates: it declares no height cap and
@@ -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',
   /*
@@ -48,6 +48,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..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-[var(--container-sm)] flex-col items-center gap-[var(--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)
@@ -86,48 +84,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/eslint-plugin/token-checks.js b/packages/webkit/src/eslint-plugin/token-checks.js
index a35954e0a..066d5b4a0 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/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/eslint-plugin/token-checks.test.mjs b/packages/webkit/test/eslint-plugin/token-checks.test.mjs
index 76090c94d..f08e3c1d6 100644
--- a/packages/webkit/test/eslint-plugin/token-checks.test.mjs
+++ b/packages/webkit/test/eslint-plugin/token-checks.test.mjs
@@ -90,6 +90,54 @@ test('the one-level nesting limit is pinned', () => {
   assert.ok(!found.includes('zero-unit-in-calc'), 'zero-unit-in-calc cannot see this deep')
 })
 
+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', () => {
+  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'))