npm - @cytario/design - Versions diffs - 2.1.1 → 2.3.0 - Mend

@cytario/design 2.1.1 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.js CHANGED Viewed

@@ -12,46 +12,46 @@ import { twMerge } from "tailwind-merge";
 // src/components/_shared/styles.ts
 var variantStyles = {
   primary: [
-    "bg-[var(--color-action-primary)] text-[var(--color-text-inverse)]",
-    "hover:bg-[var(--color-action-primary-hover)]",
-    "pressed:bg-[var(--color-action-primary-active)]"
+    "bg-(--color-action-primary) text-(--color-text-inverse)",
+    "hover:bg-(--color-action-primary-hover)",
+    "pressed:bg-(--color-action-primary-active)"
   ].join(" "),
   secondary: [
-    "bg-transparent text-[var(--color-action-secondary)]",
-    "border border-[var(--color-border-brand)]",
-    "hover:bg-[var(--color-purple-50)]",
-    "pressed:bg-[var(--color-purple-100)]"
+    "bg-transparent text-(--color-action-secondary)",
+    "border border-(--color-border-brand)",
+    "hover:bg-purple-50",
+    "pressed:bg-purple-100"
   ].join(" "),
   ghost: [
-    "bg-transparent text-[var(--color-text-primary)]",
-    "hover:bg-[var(--color-surface-hover)]",
-    "pressed:bg-[var(--color-surface-pressed)]"
+    "bg-transparent text-(--color-text-primary)",
+    "hover:bg-(--color-surface-hover)",
+    "pressed:bg-(--color-surface-pressed)"
   ].join(" "),
   destructive: [
-    "bg-[var(--color-action-danger)] text-[var(--color-text-inverse)]",
-    "hover:bg-[var(--color-action-danger-hover)]",
-    "pressed:bg-[var(--color-action-danger-hover)]"
+    "bg-(--color-action-danger) text-(--color-text-inverse)",
+    "hover:bg-(--color-action-danger-hover)",
+    "pressed:bg-(--color-action-danger-hover)"
   ].join(" "),
   default: [
-    "bg-[var(--color-action-default)] text-[var(--color-text-inverse)]",
-    "hover:bg-[var(--color-action-default-hover)]",
-    "pressed:bg-[var(--color-slate-600)]"
+    "bg-(--color-action-default) text-(--color-text-inverse)",
+    "hover:bg-(--color-action-default-hover)",
+    "pressed:bg-slate-600"
   ].join(" "),
   success: [
-    "bg-[var(--color-action-success)] text-[var(--color-text-inverse)]",
-    "hover:bg-[var(--color-action-success-hover)]",
-    "pressed:bg-[var(--color-green-800)]"
+    "bg-(--color-action-success) text-(--color-text-inverse)",
+    "hover:bg-(--color-action-success-hover)",
+    "pressed:bg-green-800"
   ].join(" "),
   info: [
-    "bg-[var(--color-action-info)] text-[var(--color-text-inverse)]",
-    "hover:bg-[var(--color-action-info-hover)]",
-    "pressed:bg-[var(--color-slate-800)]"
+    "bg-(--color-action-info) text-(--color-text-inverse)",
+    "hover:bg-(--color-action-info-hover)",
+    "pressed:bg-slate-800"
   ].join(" "),
   neutral: [
-    "bg-[var(--color-surface-default)] text-[var(--color-text-primary)]",
-    "border border-[var(--color-border-default)]",
-    "hover:bg-[var(--color-surface-subtle)]",
-    "pressed:bg-[var(--color-surface-muted)]"
+    "bg-(--color-surface-default) text-(--color-text-primary)",
+    "border border-(--color-border-default)",
+    "hover:bg-(--color-surface-subtle)",
+    "pressed:bg-(--color-surface-muted)"
   ].join(" ")
 };
 var sizeStyles = {
@@ -156,13 +156,13 @@ var iconSizeMap = {
 function groupRadiusClass(position) {
   switch (position) {
     case "start":
-      return "rounded-l-[var(--border-radius-md)] rounded-r-none";
+      return "rounded-l-(--border-radius-md) rounded-r-none";
     case "middle":
       return "rounded-none";
     case "end":
-      return "rounded-r-[var(--border-radius-md)] rounded-l-none";
+      return "rounded-r-(--border-radius-md) rounded-l-none";
     default:
-      return "rounded-[var(--border-radius-md)]";
+      return "rounded-md";
   }
 }
 function Button({
@@ -177,10 +177,10 @@ function Button({
   ...props
 }) {
   const { inGroup, position } = useInputGroup();
-  const groupGhost = inGroup && variant === "ghost" ? "bg-[var(--color-surface-default)] text-[var(--color-text-secondary)] border border-[var(--color-border-default)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] hover:border-[var(--color-border-strong)] pressed:bg-[var(--color-surface-pressed)] pressed:text-[var(--color-text-primary)]" : "";
-  const radiusClass = inGroup ? groupRadiusClass(position) : "rounded-[var(--border-radius-md)]";
+  const groupGhost = inGroup && variant === "ghost" ? "bg-(--color-surface-default) text-(--color-text-secondary) border border-(--color-border-default) hover:bg-(--color-surface-hover) hover:text-(--color-text-primary) hover:border-(--color-border-strong) pressed:bg-(--color-surface-pressed) pressed:text-(--color-text-primary)" : "";
+  const radiusClass = inGroup ? groupRadiusClass(position) : "rounded-md";
   const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
-  const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2";
+  const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2";
   return /* @__PURE__ */ jsxs2(
     AriaButton,
     {
@@ -189,8 +189,8 @@ function Button({
       className: twMerge(
         "inline-flex items-center justify-center gap-2 shrink-0",
         radiusClass,
-        "font-[var(--font-weight-medium)]",
-        "leading-[var(--line-height-tight)]",
+        "font-medium",
+        "leading-tight",
         "outline-none transition-colors",
         focusRing,
         "disabled:opacity-50 disabled:pointer-events-none",
@@ -230,10 +230,10 @@ function Tooltip({
       {
         placement,
         className: [
-          "bg-[var(--color-surface-overlay)] backdrop-blur-sm",
-          "text-[var(--color-text-inverse)] text-sm",
+          "bg-(--color-surface-overlay) backdrop-blur-sm",
+          "text-(--color-text-inverse) text-sm",
           "px-3 py-1.5",
-          "rounded-[var(--border-radius-md)]",
+          "rounded-md",
           "max-w-xs",
           "entering:animate-in entering:fade-in entering:duration-150",
           "exiting:animate-out exiting:fade-out exiting:duration-100",
@@ -272,13 +272,13 @@ var iconSizeMap2 = {
 function groupRadiusClass2(position) {
   switch (position) {
     case "start":
-      return "rounded-l-[var(--border-radius-md)] rounded-r-none";
+      return "rounded-l-(--border-radius-md) rounded-r-none";
     case "middle":
       return "rounded-none";
     case "end":
-      return "rounded-r-[var(--border-radius-md)] rounded-l-none";
+      return "rounded-r-(--border-radius-md) rounded-l-none";
     default:
-      return "rounded-[var(--border-radius-md)]";
+      return "rounded-md";
   }
 }
 function IconButton({
@@ -294,10 +294,10 @@ function IconButton({
   ...props
 }) {
   const { inGroup, position } = useInputGroup();
-  const groupGhost = inGroup && variant === "ghost" ? "bg-[var(--color-surface-default)] text-[var(--color-text-secondary)] border border-[var(--color-border-default)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] hover:border-[var(--color-border-strong)] pressed:bg-[var(--color-surface-pressed)] pressed:text-[var(--color-text-primary)]" : "";
-  const radiusClass = inGroup ? groupRadiusClass2(position) : "rounded-[var(--border-radius-md)]";
+  const groupGhost = inGroup && variant === "ghost" ? "bg-(--color-surface-default) text-(--color-text-secondary) border border-(--color-border-default) hover:bg-(--color-surface-hover) hover:text-(--color-text-primary) hover:border-(--color-border-strong) pressed:bg-(--color-surface-pressed) pressed:text-(--color-text-primary)" : "";
+  const radiusClass = inGroup ? groupRadiusClass2(position) : "rounded-md";
   const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
-  const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2";
+  const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2";
   const button = /* @__PURE__ */ jsx5(
     AriaButton2,
     {
@@ -351,13 +351,13 @@ var alignClasses = {
 function groupRadiusClasses(position) {
   switch (position) {
     case "start":
-      return "rounded-l-[var(--border-radius-md)] rounded-r-none";
+      return "rounded-l-(--border-radius-md) rounded-r-none";
     case "middle":
       return "rounded-none";
     case "end":
-      return "rounded-r-[var(--border-radius-md)] rounded-l-none";
+      return "rounded-r-(--border-radius-md) rounded-l-none";
     default:
-      return "rounded-[var(--border-radius-md)]";
+      return "rounded-md";
   }
 }
 function Input({
@@ -376,8 +376,8 @@ function Input({
 }) {
   const isInvalid = !!errorMessage;
   const { inGroup, position } = useInputGroup();
-  const borderColor = isInvalid ? "border-[var(--color-border-danger)]" : "border-[var(--color-border-default)] hover:border-[var(--color-border-strong)]";
-  const radiusClass = inGroup ? groupRadiusClasses(position) : "rounded-[var(--border-radius-md)]";
+  const borderColor = isInvalid ? "border-(--color-border-danger)" : "border-(--color-border-default) hover:border-(--color-border-strong)";
+  const radiusClass = inGroup ? groupRadiusClasses(position) : "rounded-md";
   const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
   return /* @__PURE__ */ jsxs4(
     TextField,
@@ -388,7 +388,7 @@ function Input({
       isRequired,
       isInvalid,
       className: [
-        "flex flex-col gap-[var(--spacing-1)]",
+        "flex flex-col gap-1",
         inGroup ? "min-w-0 flex-1" : "",
         marginClass,
         className
@@ -398,9 +398,9 @@ function Input({
           Label,
           {
             className: [
-              "text-[length:var(--font-size-sm)]",
-              "font-[number:var(--font-weight-medium)]",
-              "text-[var(--color-text-primary)]"
+              "text-sm",
+              "font-medium",
+              "text-(--color-text-primary)"
             ].join(" "),
             children: [
               label,
@@ -408,7 +408,7 @@ function Input({
                 "span",
                 {
                   "aria-hidden": "true",
-                  className: "ml-0.5 text-[var(--color-text-danger)]",
+                  className: "ml-0.5 text-(--color-text-danger)",
                   children: "*"
                 }
               )
@@ -422,10 +422,10 @@ function Input({
               "flex items-center overflow-hidden",
               radiusClass,
               "border",
-              "bg-[var(--color-surface-default)]",
+              "bg-(--color-surface-default)",
               "outline-none transition-colors",
               borderColor,
-              "focus-within:ring-2 focus-within:ring-[var(--color-border-focus)] focus-within:border-[var(--color-border-focus)]",
+              "focus-within:ring-2 focus-within:ring-(--color-border-focus) focus-within:border-(--color-border-focus)",
               inGroup ? "focus-within:z-10" : "",
               isDisabled ? "opacity-50 pointer-events-none" : ""
             ].filter(Boolean).join(" "),
@@ -435,9 +435,9 @@ function Input({
                 {
                   className: [
                     "self-stretch flex items-center shrink-0 select-none",
-                    "bg-[var(--color-surface-subtle)]",
-                    "border-r border-r-[var(--color-border-default)]",
-                    "text-[var(--color-text-secondary)]",
+                    "bg-(--color-surface-subtle)",
+                    "border-r border-r-(--color-border-default)",
+                    "text-(--color-text-secondary)",
                     prefixSizeClasses[size]
                   ].join(" "),
                   children: prefix
@@ -451,8 +451,8 @@ function Input({
                     "w-full bg-transparent",
                     sizeClasses[size],
                     alignClasses[align],
-                    "text-[var(--color-text-primary)]",
-                    "placeholder:text-[var(--color-text-tertiary)]",
+                    "text-(--color-text-primary)",
+                    "placeholder:text-(--color-text-tertiary)",
                     "outline-none border-none"
                   ].join(" ")
                 }
@@ -469,12 +469,12 @@ function Input({
               alignClasses[align],
               radiusClass,
               "border",
-              "text-[var(--color-text-primary)]",
-              "bg-[var(--color-surface-default)]",
-              "placeholder:text-[var(--color-text-tertiary)]",
+              "text-(--color-text-primary)",
+              "bg-(--color-surface-default)",
+              "placeholder:text-(--color-text-tertiary)",
               "outline-none transition-colors",
               borderColor,
-              "focus:ring-2 focus:ring-[var(--color-border-focus)] focus:border-[var(--color-border-focus)]",
+              "focus:ring-2 focus:ring-(--color-border-focus) focus:border-(--color-border-focus)",
               inGroup ? "focus:z-10" : "",
               "disabled:opacity-50 disabled:pointer-events-none"
             ].join(" ")
@@ -484,7 +484,7 @@ function Input({
           Text,
           {
             slot: "description",
-            className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)]",
+            className: "text-sm text-(--color-text-secondary)",
             children: description
           }
         ),
@@ -492,7 +492,7 @@ function Input({
           Text,
           {
             slot: "errorMessage",
-            className: "text-[length:var(--font-size-sm)] text-[var(--color-text-danger)]",
+            className: "text-sm text-(--color-text-danger)",
             children: errorMessage
           }
         )
@@ -517,7 +517,7 @@ function ChevronDown() {
     "svg",
     {
       "aria-hidden": "true",
-      className: "h-4 w-4 text-[var(--color-text-secondary)]",
+      className: "h-4 w-4 text-(--color-text-secondary)",
       viewBox: "0 0 16 16",
       fill: "none",
       stroke: "currentColor",
@@ -533,7 +533,7 @@ function CheckIcon() {
     "svg",
     {
       "aria-hidden": "true",
-      className: "h-4 w-4 text-[var(--color-action-primary)]",
+      className: "h-4 w-4 text-(--color-action-primary)",
       viewBox: "0 0 16 16",
       fill: "none",
       stroke: "currentColor",
@@ -563,13 +563,13 @@ function Select({
       isDisabled,
       isRequired,
       isInvalid: hasError,
-      className: ["flex flex-col gap-[var(--spacing-1)]", className].filter(Boolean).join(" "),
+      className: ["flex flex-col gap-1", className].filter(Boolean).join(" "),
       children: [
         /* @__PURE__ */ jsxs5(
           Label2,
           {
             className: [
-              "text-[length:var(--font-size-sm)] font-[var(--font-weight-medium)] text-[var(--color-text-primary)]",
+              "text-sm font-medium text-(--color-text-primary)",
               hideLabel && "sr-only"
             ].filter(Boolean).join(" "),
             children: [
@@ -578,7 +578,7 @@ function Select({
                 "span",
                 {
                   "aria-hidden": "true",
-                  className: "ml-0.5 text-[var(--color-text-danger)]",
+                  className: "ml-0.5 text-(--color-text-danger)",
                   children: "*"
                 }
               )
@@ -590,29 +590,29 @@ function Select({
           {
             className: [
               "inline-flex items-center justify-between",
-              "w-full rounded-[var(--border-radius-md)] px-4 py-2",
+              "w-full rounded-md px-4 py-2",
               "text-base text-left",
               "border outline-none transition-colors",
-              hasError ? "border-[var(--color-border-danger)]" : "border-[var(--color-border-default)]",
-              "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
+              hasError ? "border-(--color-border-danger)" : "border-(--color-border-default)",
+              "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
               "disabled:opacity-50 disabled:pointer-events-none",
-              "bg-[var(--color-surface-default)]"
+              "bg-(--color-surface-default)"
             ].join(" "),
             children: [
-              /* @__PURE__ */ jsx7(SelectValue, { className: "truncate data-[placeholder]:text-[var(--color-text-tertiary)]", children: ({ selectedText }) => selectedText || placeholder }),
+              /* @__PURE__ */ jsx7(SelectValue, { className: "truncate data-[placeholder]:text-(--color-text-tertiary)", children: ({ selectedText }) => selectedText || placeholder }),
               /* @__PURE__ */ jsx7(ChevronDown, {})
             ]
           }
         ),
-        hasError && /* @__PURE__ */ jsx7("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-danger)]", children: errorMessage }),
+        hasError && /* @__PURE__ */ jsx7("span", { className: "text-sm text-(--color-text-danger)", children: errorMessage }),
         /* @__PURE__ */ jsx7(
           Popover,
           {
             className: [
-              "w-[var(--trigger-width)]",
-              "rounded-[var(--border-radius-md)]",
-              "border border-[var(--color-border-default)]",
-              "bg-[var(--color-surface-default)]",
+              "w-(--trigger-width)",
+              "rounded-md",
+              "border border-(--color-border-default)",
+              "bg-(--color-surface-default)",
               "shadow-lg",
               "overflow-auto",
               "entering:animate-in entering:fade-in entering:slide-in-from-top-1",
@@ -625,12 +625,12 @@ function Select({
                 textValue: item.name,
                 className: [
                   "flex items-center justify-between gap-2",
-                  "px-4 py-2 rounded-[var(--border-radius-sm)]",
-                  "text-base text-[var(--color-text-primary)]",
+                  "px-4 py-2 rounded-sm",
+                  "text-base text-(--color-text-primary)",
                   "cursor-pointer outline-none",
-                  "hover:bg-[var(--color-surface-muted)]",
-                  "focus:bg-[var(--color-surface-muted)]",
-                  "selected:text-[var(--color-action-primary)] selected:font-[var(--font-weight-medium)]"
+                  "hover:bg-(--color-surface-muted)",
+                  "focus:bg-(--color-surface-muted)",
+                  "selected:text-(--color-action-primary) selected:font-medium"
                 ].join(" "),
                 children: ({ isSelected }) => /* @__PURE__ */ jsxs5(Fragment, { children: [
                   /* @__PURE__ */ jsx7("span", { className: "truncate", children: item.name }),
@@ -665,7 +665,7 @@ function Table({ size = "comfortable", className, ...props }) {
     {
       ...props,
       className: [
-        "w-full border-collapse text-[var(--font-size-sm)] text-[var(--color-text-primary)]",
+        "w-full border-collapse text-(--font-size-sm) text-(--color-text-primary)",
         tableSizeClass[size],
         className
       ].filter(Boolean).join(" ")
@@ -681,14 +681,14 @@ function Column(props) {
     {
       ...props,
       className: [
-        "px-3 py-2 text-left font-[var(--font-weight-semibold)] text-[var(--color-text-secondary)]",
-        "border-b-2 border-[var(--color-border-default)]",
+        "px-3 py-2 text-left font-semibold text-(--color-text-secondary)",
+        "border-b-2 border-(--color-border-default)",
         "cursor-default select-none outline-none",
-        "focus-visible:outline-2 focus-visible:outline-[var(--color-border-focus)] focus-visible:outline-offset-[-2px]"
+        "focus-visible:outline-2 focus-visible:outline-(--color-border-focus) focus-visible:outline-offset-[-2px]"
       ].join(" "),
       children: ({ allowsSorting, sortDirection }) => /* @__PURE__ */ jsxs6("span", { className: "inline-flex items-center gap-1", children: [
         props.children,
-        allowsSorting && /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", className: "text-[var(--color-text-tertiary)]", children: sortDirection === "ascending" ? "\u25B2" : sortDirection === "descending" ? "\u25BC" : "\u25B4" })
+        allowsSorting && /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", className: "text-(--color-text-tertiary)", children: sortDirection === "ascending" ? "\u25B2" : sortDirection === "descending" ? "\u25BC" : "\u25B4" })
       ] })
     }
   );
@@ -702,11 +702,11 @@ function Row(props) {
     {
       ...props,
       className: [
-        "border-b border-[var(--color-border-default)]",
-        "even:bg-[var(--color-surface-subtle)]",
-        "hover:bg-[var(--color-surface-muted)]",
+        "border-b border-(--color-border-default)",
+        "even:bg-(--color-surface-subtle)",
+        "hover:bg-(--color-surface-muted)",
         "outline-none",
-        "focus-visible:outline-2 focus-visible:outline-[var(--color-border-focus)] focus-visible:outline-offset-[-2px]",
+        "focus-visible:outline-2 focus-visible:outline-(--color-border-focus) focus-visible:outline-offset-[-2px]",
         "transition-colors"
       ].join(" ")
     }
@@ -718,10 +718,10 @@ function Cell(props) {
     {
       ...props,
       className: [
-        "px-3 py-[var(--table-row-py)]",
-        "text-[var(--color-text-primary)]",
+        "px-3 py-(--table-row-py)",
+        "text-(--color-text-primary)",
         "outline-none",
-        "focus-visible:outline-2 focus-visible:outline-[var(--color-border-focus)] focus-visible:outline-offset-[-2px]"
+        "focus-visible:outline-2 focus-visible:outline-(--color-border-focus) focus-visible:outline-offset-[-2px]"
       ].join(" ")
     }
   );
@@ -758,7 +758,7 @@ function Dialog({
       onOpenChange,
       isDismissable,
       className: [
-        "fixed inset-0 z-50 bg-[var(--color-overlay-backdrop)] backdrop-blur-sm",
+        "fixed inset-0 z-50 bg-(--color-overlay-backdrop) backdrop-blur-sm",
         "flex items-center justify-center",
         "data-[entering]:animate-in data-[entering]:fade-in",
         "data-[exiting]:animate-out data-[exiting]:fade-out"
@@ -769,18 +769,18 @@ function Dialog({
           className: [
             "w-full mx-4",
             sizeStyles2[size],
-            "bg-[var(--color-surface-default)] rounded-[var(--border-radius-lg)] shadow-xl max-h-[85vh] flex flex-col",
+            "bg-(--color-surface-default) rounded-lg shadow-xl max-h-[85vh] flex flex-col",
             "data-[entering]:animate-in data-[entering]:zoom-in-95 data-[entering]:fade-in",
             "data-[exiting]:animate-out data-[exiting]:zoom-out-95 data-[exiting]:fade-out",
             className
           ].filter(Boolean).join(" "),
           children: /* @__PURE__ */ jsx9(AriaDialog, { className: "outline-none flex flex-col max-h-[85vh]", children: ({ close }) => /* @__PURE__ */ jsxs7(Fragment2, { children: [
-            /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between px-6 py-4 border-b border-[var(--color-border-default)]", children: [
+            /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between px-6 py-4 border-b border-(--color-border-default)", children: [
               /* @__PURE__ */ jsx9(
                 Heading,
                 {
                   slot: "title",
-                  className: "text-[length:var(--font-size-lg)] font-[number:var(--font-weight-semibold)] text-[var(--color-text-primary)]",
+                  className: "text-lg font-semibold text-(--color-text-primary)",
                   children: title
                 }
               ),
@@ -790,9 +790,9 @@ function Dialog({
                   type: "button",
                   onClick: close,
                   className: [
-                    "inline-flex items-center justify-center rounded-[var(--border-radius-sm)] p-1",
-                    "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-muted)]",
-                    "outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
+                    "inline-flex items-center justify-center rounded-sm p-1",
+                    "text-(--color-text-secondary) hover:text-(--color-text-primary) hover:bg-(--color-surface-muted)",
+                    "outline-none focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
                     "transition-colors"
                   ].join(" "),
                   "aria-label": "Close",
@@ -808,6 +808,9 @@ function Dialog({
   );
 }
+// src/components/Dialog/DialogFooter.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
 // src/components/Toast/Toast.tsx
 import {
   createContext as createContext2,
@@ -819,7 +822,7 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 import { CheckCircle, XCircle, Info, X as X2 } from "lucide-react";
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var ToastContext = createContext2(null);
 var toastCounter = 0;
 var defaultDuration = {
@@ -830,18 +833,18 @@ var defaultDuration = {
 var variantConfig = {
   success: {
     icon: CheckCircle,
-    containerClass: "bg-[var(--color-surface-success)] border-[var(--color-border-success)] text-[var(--color-text-success)]",
-    iconClass: "text-[var(--color-action-success)]"
+    containerClass: "bg-(--color-surface-success) border-(--color-border-success) text-(--color-text-success)",
+    iconClass: "text-(--color-action-success)"
   },
   error: {
     icon: XCircle,
-    containerClass: "bg-[var(--color-surface-danger)] border-[var(--color-border-danger)] text-[var(--color-text-danger)]",
-    iconClass: "text-[var(--color-action-danger)]"
+    containerClass: "bg-(--color-surface-danger) border-(--color-border-danger) text-(--color-text-danger)",
+    iconClass: "text-(--color-action-danger)"
   },
   info: {
     icon: Info,
-    containerClass: "bg-[var(--color-surface-info)] border-[var(--color-border-info)] text-[var(--color-text-info)]",
-    iconClass: "text-[var(--color-text-info)]"
+    containerClass: "bg-(--color-surface-info) border-(--color-border-info) text-(--color-text-info)",
+    iconClass: "text-(--color-text-info)"
   }
 };
 var PlacementContext = createContext2("bottom-right");
@@ -883,23 +886,23 @@ function ToastItem({
       role: "status",
       "aria-live": "polite",
       className: [
-        "flex items-start gap-[var(--spacing-3)] rounded-[var(--border-radius-lg)] border px-[var(--spacing-4)] py-[var(--spacing-3)] shadow-md",
+        "flex items-start gap-3 rounded-lg border px-4 py-3 shadow-md",
         "min-w-[320px] max-w-[420px]",
         "transition-all duration-200",
         isExiting ? exitAnimationByPlacement[placement] : enterAnimationByPlacement[placement],
         config.containerClass
       ].join(" "),
       children: [
-        /* @__PURE__ */ jsx10(IconComponent, { size: 20, className: ["shrink-0 mt-0.5", config.iconClass].join(" "), "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx10("p", { className: "flex-1 text-[length:var(--font-size-sm)] font-[number:var(--font-weight-medium)]", children: toast.message }),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11(IconComponent, { size: 20, className: ["shrink-0 mt-0.5", config.iconClass].join(" "), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx11("p", { className: "flex-1 text-sm font-medium", children: toast.message }),
+        /* @__PURE__ */ jsx11(
           "button",
           {
             type: "button",
             onClick: dismiss,
-            className: "shrink-0 rounded-[var(--border-radius-sm)] p-0.5 opacity-70 hover:opacity-100 transition-opacity outline-none focus-visible:ring-2 focus-visible:ring-current",
+            className: "shrink-0 rounded-sm p-0.5 opacity-70 hover:opacity-100 transition-opacity outline-none focus-visible:ring-2 focus-visible:ring-current",
             "aria-label": "Dismiss",
-            children: /* @__PURE__ */ jsx10(X2, { size: 16, "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx11(X2, { size: 16, "aria-hidden": "true" })
           }
         )
       ]
@@ -919,7 +922,7 @@ function ToastContainer({
 }) {
   if (toasts.length === 0) return null;
   return createPortal(
-    /* @__PURE__ */ jsx10(PlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsx10("div", { className: containerPositionStyles[placement], children: toasts.map((toast) => /* @__PURE__ */ jsx10(ToastItem, { toast, onRemove: removeToast }, toast.id)) }) }),
+    /* @__PURE__ */ jsx11(PlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsx11("div", { className: containerPositionStyles[placement], children: toasts.map((toast) => /* @__PURE__ */ jsx11(ToastItem, { toast, onRemove: removeToast }, toast.id)) }) }),
     document.body
   );
 }
@@ -952,7 +955,7 @@ function ToastProvider({ children, bridge, placement = "bottom-right" }) {
   }, [bridge, addToast]);
   return /* @__PURE__ */ jsxs8(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
     children,
-    /* @__PURE__ */ jsx10(ToastContainer, { toasts, removeToast, placement })
+    /* @__PURE__ */ jsx11(ToastContainer, { toasts, removeToast, placement })
   ] });
 }
 function useToast() {
@@ -968,7 +971,7 @@ function useToast() {
 }
 // src/components/EmptyState/EmptyState.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function EmptyState({
   icon,
   title,
@@ -980,14 +983,14 @@ function EmptyState({
     "div",
     {
       className: [
-        "flex flex-col items-center text-center py-[var(--spacing-12)] px-[var(--spacing-6)]",
+        "flex flex-col items-center text-center py-12 px-6",
         className
       ].filter(Boolean).join(" "),
       children: [
-        icon && /* @__PURE__ */ jsx11(Icon, { icon, size: "xl", className: "text-[var(--color-text-tertiary)]" }),
-        /* @__PURE__ */ jsx11("h3", { className: "text-[length:var(--font-size-lg)] font-[number:var(--font-weight-semibold)] text-[var(--color-text-primary)] mt-4", children: title }),
-        description && /* @__PURE__ */ jsx11("p", { className: "text-sm text-[var(--color-text-secondary)] mt-2 max-w-sm", children: description }),
-        action && /* @__PURE__ */ jsx11("div", { className: "mt-6", children: action })
+        icon && /* @__PURE__ */ jsx12(Icon, { icon, size: "xl", className: "text-(--color-text-tertiary)" }),
+        /* @__PURE__ */ jsx12("h3", { className: "text-lg font-semibold text-(--color-text-primary) mt-4", children: title }),
+        description && /* @__PURE__ */ jsx12("p", { className: "text-sm text-(--color-text-secondary) mt-2 max-w-sm", children: description }),
+        action && /* @__PURE__ */ jsx12("div", { className: "mt-6", children: action })
       ]
     }
   );
@@ -998,14 +1001,14 @@ import {
   Checkbox as AriaCheckbox
 } from "react-aria-components";
 import { Check } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 function Checkbox({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     AriaCheckbox,
     {
       ...props,
       className: [
-        "group flex items-center gap-2 text-[length:var(--font-size-sm)] text-[var(--color-text-primary)] cursor-pointer",
+        "group flex items-center gap-2 text-sm text-(--color-text-primary) cursor-pointer",
         "disabled:opacity-50 disabled:cursor-default",
         className
       ].filter(Boolean).join(" "),
@@ -1015,17 +1018,17 @@ function Checkbox({ children, className, ...props }) {
           {
             className: [
               "flex items-center justify-center w-6 h-6 shrink-0",
-              "rounded-[var(--border-radius-sm)] border transition-colors",
-              "group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-border-focus)] group-focus-visible:ring-offset-2",
-              isSelected || isIndeterminate ? "bg-[var(--color-action-primary)] border-[var(--color-action-primary)]" : "bg-[var(--color-surface-default)] border-[var(--color-border-default)] group-hover:border-[var(--color-border-strong)]"
+              "rounded-sm border transition-colors",
+              "group-focus-visible:ring-2 group-focus-visible:ring-(--color-border-focus) group-focus-visible:ring-offset-2",
+              isSelected || isIndeterminate ? "bg-(--color-action-primary) border-(--color-action-primary)" : "bg-(--color-surface-default) border-(--color-border-default) group-hover:border-(--color-border-strong)"
             ].join(" "),
             children: [
-              isSelected && /* @__PURE__ */ jsx12(Check, { className: "w-4 h-4 text-[var(--color-text-inverse)]", strokeWidth: 3 }),
-              isIndeterminate && /* @__PURE__ */ jsx12("div", { className: "w-3 h-0.5 bg-[var(--color-text-inverse)] rounded-full" })
+              isSelected && /* @__PURE__ */ jsx13(Check, { className: "w-4 h-4 text-(--color-text-inverse)", strokeWidth: 3 }),
+              isIndeterminate && /* @__PURE__ */ jsx13("div", { className: "w-3 h-0.5 bg-(--color-text-inverse) rounded-full" })
             ]
           }
         ),
-        children && /* @__PURE__ */ jsx12("span", { children })
+        children && /* @__PURE__ */ jsx13("span", { children })
       ] })
     }
   );
@@ -1035,11 +1038,11 @@ function Checkbox({ children, className, ...props }) {
 import {
   Switch as AriaSwitch
 } from "react-aria-components";
-import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var trackColorMap = {
-  primary: "bg-[var(--color-action-primary)]",
-  success: "bg-[var(--color-action-success)]",
-  destructive: "bg-[var(--color-action-danger)]"
+  primary: "bg-(--color-action-primary)",
+  success: "bg-(--color-action-success)",
+  destructive: "bg-(--color-action-danger)"
 };
 var presetColors = new Set(Object.keys(trackColorMap));
 function isPresetColor(color) {
@@ -1052,37 +1055,37 @@ function Switch({
   ...props
 }) {
   const isPreset = isPresetColor(color);
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     AriaSwitch,
     {
       ...props,
       className: [
-        "group flex items-center gap-2 text-[length:var(--font-size-sm)] text-[var(--color-text-primary)] cursor-pointer",
+        "group flex items-center gap-2 text-sm text-(--color-text-primary) cursor-pointer",
         "disabled:opacity-50 disabled:cursor-default",
         className
       ].filter(Boolean).join(" "),
       children: ({ isSelected }) => /* @__PURE__ */ jsxs11(Fragment4, { children: [
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           "div",
           {
             className: [
               "w-9 h-5 rounded-full transition-colors shrink-0 p-0.5",
-              "group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-border-focus)] group-focus-visible:ring-offset-2",
-              isSelected && isPreset ? trackColorMap[color] : !isSelected ? "bg-[var(--color-border-strong)]" : ""
+              "group-focus-visible:ring-2 group-focus-visible:ring-(--color-border-focus) group-focus-visible:ring-offset-2",
+              isSelected && isPreset ? trackColorMap[color] : !isSelected ? "bg-(--color-border-strong)" : ""
             ].join(" "),
             style: isSelected && !isPreset ? { backgroundColor: color } : void 0,
-            children: /* @__PURE__ */ jsx13(
+            children: /* @__PURE__ */ jsx14(
               "div",
               {
                 className: [
-                  "w-4 h-4 rounded-full bg-[var(--color-surface-default)] transition-transform shadow-sm",
+                  "w-4 h-4 rounded-full bg-(--color-surface-default) transition-transform shadow-sm",
                   isSelected ? "translate-x-4" : "translate-x-0"
                 ].join(" ")
               }
             )
           }
         ),
-        children && /* @__PURE__ */ jsx13("span", { children })
+        children && /* @__PURE__ */ jsx14("span", { children })
       ] })
     }
   );
@@ -1093,9 +1096,9 @@ import {
   RadioGroup as AriaRadioGroup,
   Radio as AriaRadio
 } from "react-aria-components";
-import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 function RadioGroup({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     AriaRadioGroup,
     {
       ...props,
@@ -1109,35 +1112,35 @@ function RadioGroup({ children, className, ...props }) {
   );
 }
 function Radio({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     AriaRadio,
     {
       ...props,
       className: [
-        "group flex items-center gap-2 text-[length:var(--font-size-sm)] text-[var(--color-text-primary)] cursor-pointer",
+        "group flex items-center gap-2 text-sm text-(--color-text-primary) cursor-pointer",
         "disabled:opacity-50 disabled:cursor-default",
         className
       ].filter(Boolean).join(" "),
       children: ({ isSelected }) => /* @__PURE__ */ jsxs12(Fragment5, { children: [
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(
           "div",
           {
             className: [
               "flex items-center justify-center w-5 h-5 shrink-0",
               "rounded-full border-2 transition-colors",
-              "group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-border-focus)] group-focus-visible:ring-offset-2",
-              isSelected ? "border-[var(--color-action-primary)]" : "border-[var(--color-border-default)] group-hover:border-[var(--color-border-strong)]"
+              "group-focus-visible:ring-2 group-focus-visible:ring-(--color-border-focus) group-focus-visible:ring-offset-2",
+              isSelected ? "border-(--color-action-primary)" : "border-(--color-border-default) group-hover:border-(--color-border-strong)"
             ].join(" "),
-            children: isSelected && /* @__PURE__ */ jsx14("div", { className: "w-2.5 h-2.5 rounded-full bg-[var(--color-action-primary)]" })
+            children: isSelected && /* @__PURE__ */ jsx15("div", { className: "w-2.5 h-2.5 rounded-full bg-(--color-action-primary)" })
           }
         ),
-        children && /* @__PURE__ */ jsx14("span", { children })
+        children && /* @__PURE__ */ jsx15("span", { children })
       ] })
     }
   );
 }
 function RadioButton({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     AriaRadio,
     {
       ...props,
@@ -1146,14 +1149,14 @@ function RadioButton({ children, className, ...props }) {
         "disabled:opacity-50 disabled:cursor-default",
         className
       ].filter(Boolean).join(" "),
-      children: ({ isSelected }) => /* @__PURE__ */ jsx14(
+      children: ({ isSelected }) => /* @__PURE__ */ jsx15(
         "div",
         {
           className: [
-            "px-4 py-2 text-[length:var(--font-size-sm)] font-[number:var(--font-weight-medium)]",
-            "rounded-[var(--border-radius-md)] border transition-colors text-center",
-            "group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-border-focus)] group-focus-visible:ring-offset-2",
-            isSelected ? "bg-[var(--color-action-primary)] border-[var(--color-action-primary)] text-[var(--color-text-inverse)]" : "bg-[var(--color-surface-default)] border-[var(--color-border-default)] text-[var(--color-text-primary)] hover:border-[var(--color-border-strong)]"
+            "px-4 py-2 text-sm font-medium",
+            "rounded-md border transition-colors text-center",
+            "group-focus-visible:ring-2 group-focus-visible:ring-(--color-border-focus) group-focus-visible:ring-offset-2",
+            isSelected ? "bg-(--color-action-primary) border-(--color-action-primary) text-(--color-text-inverse)" : "bg-(--color-surface-default) border-(--color-border-default) text-(--color-text-primary) hover:border-(--color-border-strong)"
           ].join(" "),
           children
         }
@@ -1166,25 +1169,25 @@ function RadioButton({ children, className, ...props }) {
 import {
   Label as AriaLabel
 } from "react-aria-components";
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 function Label3({ isRequired, children, className, ...props }) {
   return /* @__PURE__ */ jsxs13(
     AriaLabel,
     {
       ...props,
       className: [
-        "text-[length:var(--font-size-sm)]",
-        "font-[number:var(--font-weight-medium)]",
-        "text-[var(--color-text-primary)]",
+        "text-sm",
+        "font-medium",
+        "text-(--color-text-primary)",
         className
       ].filter(Boolean).join(" "),
       children: [
         children,
-        isRequired && /* @__PURE__ */ jsx15(
+        isRequired && /* @__PURE__ */ jsx16(
           "span",
           {
             "aria-hidden": "true",
-            className: "ml-0.5 text-[var(--color-text-danger)]",
+            className: "ml-0.5 text-(--color-text-danger)",
             children: "*"
           }
         )
@@ -1194,7 +1197,7 @@ function Label3({ isRequired, children, className, ...props }) {
 }
 // src/components/Field/Field.tsx
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 function getErrorMessage(error) {
   if (!error) return void 0;
   if (typeof error === "string") return error;
@@ -1212,36 +1215,36 @@ function Field({
   return /* @__PURE__ */ jsxs14(
     "div",
     {
-      className: ["flex flex-col gap-[var(--spacing-1)]", className].filter(Boolean).join(" "),
+      className: ["flex flex-col gap-1", className].filter(Boolean).join(" "),
       children: [
-        label && /* @__PURE__ */ jsx16(Label3, { isRequired, children: label }),
+        label && /* @__PURE__ */ jsx17(Label3, { isRequired, children: label }),
         children,
-        description && !errorMessage && /* @__PURE__ */ jsx16("p", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)]", children: description }),
-        errorMessage && /* @__PURE__ */ jsx16("p", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-danger)]", children: errorMessage })
+        description && !errorMessage && /* @__PURE__ */ jsx17("p", { className: "text-sm text-(--color-text-secondary)", children: description }),
+        errorMessage && /* @__PURE__ */ jsx17("p", { className: "text-sm text-(--color-text-danger)", children: errorMessage })
       ]
     }
   );
 }
 // src/components/Fieldset/Fieldset.tsx
-import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 function Fieldset({ legend, children, className }) {
   return /* @__PURE__ */ jsxs15(
     "fieldset",
     {
       className: [
-        "flex flex-col gap-[var(--spacing-8)]",
+        "flex flex-col gap-8",
         "border-none p-0 m-0",
         className
       ].filter(Boolean).join(" "),
       children: [
-        legend && /* @__PURE__ */ jsx17(
+        legend && /* @__PURE__ */ jsx18(
           "legend",
           {
             className: [
-              "text-[length:var(--font-size-lg)]",
-              "font-[number:var(--font-weight-semibold)]",
-              "text-[var(--color-text-primary)]",
+              "text-lg",
+              "font-semibold",
+              "text-(--color-text-primary)",
               "p-0"
             ].join(" "),
             children: legend
@@ -1255,18 +1258,18 @@ function Fieldset({ legend, children, className }) {
 // src/components/InputGroup/InputGroup.tsx
 import React from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function InputGroup({ children, className }) {
   const childArray = React.Children.toArray(children).filter(
     React.isValidElement
   );
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     "div",
     {
       className: ["flex items-stretch", className].filter(Boolean).join(" "),
       children: childArray.map((child, index) => {
         const position = childArray.length === 1 ? "standalone" : index === 0 ? "start" : index === childArray.length - 1 ? "end" : "middle";
-        return /* @__PURE__ */ jsx18(
+        return /* @__PURE__ */ jsx19(
           InputGroupContext.Provider,
           {
             value: { inGroup: true, position },
@@ -1280,32 +1283,32 @@ function InputGroup({ children, className }) {
 }
 // src/components/InputAddon/InputAddon.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function groupRadiusClass3(position) {
   switch (position) {
     case "start":
-      return "rounded-l-[var(--border-radius-md)] rounded-r-none";
+      return "rounded-l-(--border-radius-md) rounded-r-none";
     case "middle":
       return "rounded-none";
     case "end":
-      return "rounded-r-[var(--border-radius-md)] rounded-l-none";
+      return "rounded-r-(--border-radius-md) rounded-l-none";
     default:
-      return "rounded-[var(--border-radius-md)]";
+      return "rounded-md";
   }
 }
 function InputAddon({ children, className }) {
   const { inGroup, position } = useInputGroup();
-  const radiusClass = inGroup ? groupRadiusClass3(position) : "rounded-[var(--border-radius-md)]";
+  const radiusClass = inGroup ? groupRadiusClass3(position) : "rounded-md";
   const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     "div",
     {
       className: [
         "flex items-center self-stretch shrink-0 select-none",
         "px-3 py-2 text-base",
-        "bg-[var(--color-surface-subtle)]",
-        "text-[var(--color-text-secondary)]",
-        "border border-[var(--color-border-default)]",
+        "bg-(--color-surface-subtle)",
+        "text-(--color-text-secondary)",
+        "border border-(--color-border-default)",
         radiusClass,
         marginClass,
         className
@@ -1317,7 +1320,7 @@ function InputAddon({ children, className }) {
 // src/components/Heading/Heading.tsx
 import { twMerge as twMerge2 } from "tailwind-merge";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var defaultSizeMap = {
   h1: "2xl",
   h2: "xl",
@@ -1327,17 +1330,17 @@ var defaultSizeMap = {
   h6: "xs"
 };
 var sizeStyles3 = {
-  xs: "text-[length:var(--font-size-sm)]",
-  sm: "text-[length:var(--font-size-base)]",
-  md: "text-[length:var(--font-size-lg)]",
-  lg: "text-[length:var(--font-size-xl)]",
-  xl: "text-[length:var(--font-size-2xl)]",
-  "2xl": "text-[length:var(--font-size-3xl)]",
-  "3xl": "text-[length:var(--font-size-4xl)]"
+  xs: "text-sm",
+  sm: "text-base",
+  md: "text-lg",
+  lg: "text-xl",
+  xl: "text-2xl",
+  "2xl": "text-3xl",
+  "3xl": "text-4xl"
 };
 var weightStyles = {
-  semibold: "font-[number:var(--font-weight-semibold)]",
-  bold: "font-[number:var(--font-weight-bold)]"
+  semibold: "font-semibold",
+  bold: "font-bold"
 };
 function Heading2({
   as: Tag = "h2",
@@ -1347,12 +1350,12 @@ function Heading2({
   children
 }) {
   const resolvedSize = size ?? defaultSizeMap[Tag];
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     Tag,
     {
       className: twMerge2(
         weightStyles[weight],
-        "text-[var(--color-text-primary)]",
+        "text-(--color-text-primary)",
         sizeStyles3[resolvedSize],
         className
       ),
@@ -1361,7 +1364,7 @@ function Heading2({
   );
 }
 function H1(props) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     Heading2,
     {
       ...props,
@@ -1372,25 +1375,25 @@ function H1(props) {
   );
 }
 function H2(props) {
-  return /* @__PURE__ */ jsx20(Heading2, { ...props, as: "h2", size: props.size ?? "xl" });
+  return /* @__PURE__ */ jsx21(Heading2, { ...props, as: "h2", size: props.size ?? "xl" });
 }
 function H3(props) {
-  return /* @__PURE__ */ jsx20(Heading2, { ...props, as: "h3", size: props.size ?? "lg" });
+  return /* @__PURE__ */ jsx21(Heading2, { ...props, as: "h3", size: props.size ?? "lg" });
 }
 // src/components/Link/Link.tsx
 import {
   Link as AriaLink
 } from "react-aria-components";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var variantStyles2 = {
   default: [
-    "text-[var(--color-teal-700)] underline",
-    "hover:text-[var(--color-teal-800)]"
+    "text-teal-700 underline",
+    "hover:text-teal-800"
   ].join(" "),
   subtle: [
-    "text-[var(--color-text-secondary)] no-underline",
-    "hover:underline hover:text-[var(--color-text-primary)]"
+    "text-(--color-text-secondary) no-underline",
+    "hover:underline hover:text-(--color-text-primary)"
   ].join(" ")
 };
 function Link({
@@ -1398,13 +1401,13 @@ function Link({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     AriaLink,
     {
       ...props,
       className: [
         "outline-none transition-colors",
-        "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:rounded-sm",
+        "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 focus-visible:rounded-sm",
         variantStyles2[variant],
         className
       ].filter(Boolean).join(" ")
@@ -1419,20 +1422,20 @@ import {
   Link as Link2
 } from "react-aria-components";
 import { ChevronRight } from "lucide-react";
-import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 function Breadcrumbs({ items, className }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "nav",
     {
       "aria-label": "Breadcrumb",
       className,
-      children: /* @__PURE__ */ jsx22(
+      children: /* @__PURE__ */ jsx23(
         AriaBreadcrumbs,
         {
           className: "flex items-center gap-1 text-sm min-w-0",
           children: items.map((item, index) => {
             const isLast = index === items.length - 1;
-            return /* @__PURE__ */ jsx22(
+            return /* @__PURE__ */ jsx23(
               AriaBreadcrumb,
               {
                 id: item.id,
@@ -1440,19 +1443,19 @@ function Breadcrumbs({ items, className }) {
                   "flex items-center gap-1",
                   isLast ? "min-w-0" : "shrink-0"
                 ].join(" "),
-                children: isLast ? /* @__PURE__ */ jsx22("span", { className: "font-[number:var(--font-weight-medium)] text-[var(--color-text-primary)] truncate", children: item.label }) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
-                  /* @__PURE__ */ jsx22(
+                children: isLast ? /* @__PURE__ */ jsx23("span", { className: "font-medium text-(--color-text-primary) truncate", children: item.label }) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
+                  /* @__PURE__ */ jsx23(
                     Link2,
                     {
                       href: item.href,
-                      className: "whitespace-nowrap text-[var(--color-text-secondary)] outline-none transition-colors hover:text-[var(--color-text-primary)] focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:rounded-sm",
+                      className: "whitespace-nowrap text-(--color-text-secondary) outline-none transition-colors hover:text-(--color-text-primary) focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 focus-visible:rounded-sm",
                       children: item.label
                     }
                   ),
-                  /* @__PURE__ */ jsx22(
+                  /* @__PURE__ */ jsx23(
                     ChevronRight,
                     {
-                      className: "shrink-0 text-[var(--color-neutral-400)]",
+                      className: "shrink-0 text-neutral-400",
                       size: 16,
                       "aria-hidden": "true"
                     }
@@ -1473,7 +1476,7 @@ import {
   Link as AriaLink2
 } from "react-aria-components";
 import { twMerge as twMerge3 } from "tailwind-merge";
-import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 var iconSizeMap3 = {
   sm: "sm",
   md: "sm",
@@ -1494,19 +1497,19 @@ function ButtonLink({
       ...props,
       className: twMerge3(
         "inline-flex items-center justify-center gap-2",
-        "rounded-[var(--border-radius-md)]",
-        "font-[var(--font-weight-medium)]",
-        "leading-[var(--line-height-tight)]",
+        "rounded-md",
+        "font-medium",
+        "leading-tight",
         "outline-none transition-colors no-underline",
-        "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
+        "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
         variantStyles[variant],
         sizeStyles[size],
         className
       ),
       children: [
-        iconLeft && /* @__PURE__ */ jsx23(Icon, { icon: iconLeft, size: iconSizeMap3[size] }),
+        iconLeft && /* @__PURE__ */ jsx24(Icon, { icon: iconLeft, size: iconSizeMap3[size] }),
         children,
-        iconRight && /* @__PURE__ */ jsx23(Icon, { icon: iconRight, size: iconSizeMap3[size] })
+        iconRight && /* @__PURE__ */ jsx24(Icon, { icon: iconRight, size: iconSizeMap3[size] })
       ]
     }
   );
@@ -1526,25 +1529,25 @@ function IconButtonLink({
   className,
   ...props
 }) {
-  const link = /* @__PURE__ */ jsx23(
+  const link = /* @__PURE__ */ jsx24(
     AriaLink2,
     {
       ...props,
       "aria-label": ariaLabel,
       className: twMerge3(
         "inline-flex items-center justify-center",
-        "rounded-[var(--border-radius-md)]",
+        "rounded-md",
         "outline-none transition-colors no-underline",
-        "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
+        "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
         variantStyles[variant],
         squareSizeStyles2[size],
         className
       ),
-      children: /* @__PURE__ */ jsx23(Icon, { icon, size: iconSizeMap3[size] })
+      children: /* @__PURE__ */ jsx24(Icon, { icon, size: iconSizeMap3[size] })
     }
   );
   if (showTooltip) {
-    return /* @__PURE__ */ jsx23(Tooltip, { content: ariaLabel, placement: tooltipPlacement, children: link });
+    return /* @__PURE__ */ jsx24(Tooltip, { content: ariaLabel, placement: tooltipPlacement, children: link });
   }
   return link;
 }
@@ -1554,7 +1557,7 @@ import {
   ToggleButton as AriaToggleButton
 } from "react-aria-components";
 import { twMerge as twMerge4 } from "tailwind-merge";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var sizeStyles4 = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-4 py-2 text-base",
@@ -1568,30 +1571,30 @@ var squareSizeStyles3 = {
 var variantStyles3 = {
   default: {
     base: [
-      "bg-transparent text-[var(--color-text-primary)]",
-      "hover:bg-[var(--color-surface-hover)]",
-      "pressed:bg-[var(--color-surface-pressed)]"
+      "bg-transparent text-(--color-text-primary)",
+      "hover:bg-(--color-surface-hover)",
+      "pressed:bg-(--color-surface-pressed)"
     ].join(" "),
-    selected: "bg-[var(--color-surface-pressed)] text-[var(--color-text-primary)]"
+    selected: "bg-(--color-surface-pressed) text-(--color-text-primary)"
   },
   primary: {
     base: [
-      "bg-transparent text-[var(--color-text-primary)]",
-      "hover:bg-[var(--color-surface-hover)]",
-      "pressed:bg-[var(--color-surface-pressed)]"
+      "bg-transparent text-(--color-text-primary)",
+      "hover:bg-(--color-surface-hover)",
+      "pressed:bg-(--color-surface-pressed)"
     ].join(" "),
-    selected: "bg-[var(--color-action-primary-active)] text-[var(--color-text-inverse)]"
+    selected: "bg-(--color-action-primary-active) text-(--color-text-inverse)"
   },
   outlined: {
     base: [
-      "bg-[var(--color-surface-default)] text-[var(--color-text-primary)]",
-      "border border-[var(--color-border-default)]",
-      "hover:bg-[var(--color-surface-subtle)]",
-      "pressed:bg-[var(--color-surface-muted)]"
+      "bg-(--color-surface-default) text-(--color-text-primary)",
+      "border border-(--color-border-default)",
+      "hover:bg-(--color-surface-subtle)",
+      "pressed:bg-(--color-surface-muted)"
     ].join(" "),
     selected: [
-      "bg-[var(--color-neutral-800)] text-[var(--color-text-inverse)]",
-      "border border-[var(--color-neutral-800)]"
+      "bg-neutral-800 text-(--color-text-inverse)",
+      "border border-neutral-800"
     ].join(" ")
   }
 };
@@ -1603,17 +1606,17 @@ function ToggleButton({
   ...props
 }) {
   const styles = variantStyles3[variant];
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     AriaToggleButton,
     {
       ...props,
       className: ({ isSelected }) => twMerge4(
         "inline-flex items-center justify-center gap-2",
-        isSquare ? "rounded-none" : "rounded-[var(--border-radius-md)]",
-        "font-[var(--font-weight-medium)]",
-        "leading-[var(--line-height-tight)]",
+        isSquare ? "rounded-none" : "rounded-md",
+        "font-medium",
+        "leading-tight",
         "outline-none transition-colors",
-        "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
+        "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
         "disabled:opacity-50 disabled:pointer-events-none",
         isSquare ? squareSizeStyles3[size] : sizeStyles4[size],
         isSelected ? styles.selected : styles.base,
@@ -1630,7 +1633,7 @@ import {
   RadioGroup as AriaRadioGroup2,
   Radio as AriaRadio2
 } from "react-aria-components";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var ToggleButtonGroupContext = createContext3({
   size: "md"
 });
@@ -1650,13 +1653,13 @@ function ToggleButtonGroup({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx25(ToggleButtonGroupContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(ToggleButtonGroupContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx26(
     AriaRadioGroup2,
     {
       ...props,
       orientation: "horizontal",
       className: twMerge5(
-        "inline-flex items-center rounded-[var(--border-radius-lg)] border border-[var(--color-border-default)] bg-[var(--color-surface-muted)] p-0.5 gap-0.5",
+        "inline-flex items-center rounded-lg border border-(--color-border-default) bg-(--color-surface-muted) p-0.5 gap-0.5",
         className
       ),
       children
@@ -1670,24 +1673,24 @@ function ToggleButtonGroupItem({
   ...props
 }) {
   const { size } = useContext3(ToggleButtonGroupContext);
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     AriaRadio2,
     {
       ...props,
       className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge5(
         // Base layout
         "inline-flex items-center justify-center",
-        "rounded-[var(--border-radius-md)]",
-        "font-[var(--font-weight-medium)]",
+        "rounded-md",
+        "font-medium",
         "outline-none transition-colors cursor-pointer",
         // Focus ring
-        "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-1",
+        "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-1",
         // Disabled
         isDisabled && "opacity-50 pointer-events-none",
         // Size
         isIconOnly ? iconOnlySizeStyles[size] : sizeStyles5[size],
         // Selected state
-        isSelected ? "bg-[var(--color-surface-default)] text-[var(--color-text-primary)] shadow-sm font-[var(--font-weight-semibold)]" : isPressed ? "bg-[var(--color-surface-subtle)] text-[var(--color-text-primary)]" : isHovered ? "bg-[var(--color-surface-subtle)] text-[var(--color-text-primary)]" : "bg-transparent text-[var(--color-text-secondary)]",
+        isSelected ? "bg-(--color-surface-default) text-(--color-text-primary) shadow-sm font-semibold" : isPressed ? "bg-(--color-surface-subtle) text-(--color-text-primary)" : isHovered ? "bg-(--color-surface-subtle) text-(--color-text-primary)" : "bg-transparent text-(--color-text-secondary)",
         className
       ),
       children
@@ -1702,10 +1705,10 @@ import {
   MenuItem as AriaMenuItem,
   Popover as Popover2
 } from "react-aria-components";
-import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
 var popoverStyles = [
-  "bg-[var(--color-surface-default)] rounded-[var(--border-radius-md)]",
-  "shadow-lg border border-[var(--color-border-default)]",
+  "bg-(--color-surface-default) rounded-md",
+  "shadow-lg border border-(--color-border-default)",
   "py-1 min-w-48",
   "entering:animate-in entering:fade-in entering:zoom-in-95",
   "exiting:animate-out exiting:fade-out exiting:zoom-out-95"
@@ -1724,11 +1727,11 @@ function Menu({
   const selectionProps = selectionMode && selectionMode !== "none" ? { selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange } : {};
   return /* @__PURE__ */ jsxs18(MenuTrigger, { children: [
     children,
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx27(
       Popover2,
       {
         className: [popoverStyles, className].filter(Boolean).join(" "),
-        children: items ? /* @__PURE__ */ jsx26(
+        children: items ? /* @__PURE__ */ jsx27(
           AriaMenu,
           {
             items,
@@ -1749,20 +1752,20 @@ function Menu({
                 className: [
                   "flex items-center gap-2 px-3 py-2 text-sm outline-none cursor-default",
                   "transition-colors",
-                  "focus:bg-[var(--color-surface-muted)]",
-                  "hover:bg-[var(--color-surface-muted)]",
+                  "focus:bg-(--color-surface-muted)",
+                  "hover:bg-(--color-surface-muted)",
                   "disabled:opacity-50 disabled:pointer-events-none",
-                  item.isDanger ? "text-[var(--color-text-danger)]" : "text-[var(--color-text-primary)]"
+                  item.isDanger ? "text-(--color-text-danger)" : "text-(--color-text-primary)"
                 ].filter(Boolean).join(" "),
                 children: [
-                  item.icon && /* @__PURE__ */ jsx26(Icon, { icon: item.icon, size: "sm" }),
-                  /* @__PURE__ */ jsx26("span", { className: "flex-1", children: item.label }),
-                  item.endContent && /* @__PURE__ */ jsx26("span", { className: "ml-auto flex items-center", children: item.endContent })
+                  item.icon && /* @__PURE__ */ jsx27(Icon, { icon: item.icon, size: "sm" }),
+                  /* @__PURE__ */ jsx27("span", { className: "flex-1", children: item.label }),
+                  item.endContent && /* @__PURE__ */ jsx27("span", { className: "ml-auto flex items-center", children: item.endContent })
                 ]
               }
             )
           }
-        ) : /* @__PURE__ */ jsx26(
+        ) : /* @__PURE__ */ jsx27(
           AriaMenu,
           {
             onAction: (key) => onAction?.(key),
@@ -1778,7 +1781,7 @@ function Menu({
 // src/components/Menu/MenuItem.tsx
 import { MenuItem as AriaMenuItem2 } from "react-aria-components";
-import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
 function MenuItem({
   id,
   children,
@@ -1804,16 +1807,16 @@ function MenuItem({
       className: [
         "flex items-center gap-2 px-3 py-2 text-sm outline-none cursor-default",
         "transition-colors",
-        "focus:bg-[var(--color-surface-muted)]",
-        "hover:bg-[var(--color-surface-muted)]",
+        "focus:bg-(--color-surface-muted)",
+        "hover:bg-(--color-surface-muted)",
         "disabled:opacity-50 disabled:pointer-events-none",
-        isDanger ? "text-[var(--color-text-danger)]" : "text-[var(--color-text-primary)]",
+        isDanger ? "text-(--color-text-danger)" : "text-(--color-text-primary)",
         className
       ].filter(Boolean).join(" "),
       children: [
-        icon && /* @__PURE__ */ jsx27(Icon, { icon, size: "sm" }),
-        /* @__PURE__ */ jsx27("span", { className: "flex-1", children }),
-        endContent && /* @__PURE__ */ jsx27("span", { className: "ml-auto flex items-center", children: endContent })
+        icon && /* @__PURE__ */ jsx28(Icon, { icon, size: "sm" }),
+        /* @__PURE__ */ jsx28("span", { className: "flex-1", children }),
+        endContent && /* @__PURE__ */ jsx28("span", { className: "ml-auto flex items-center", children: endContent })
       ]
     }
   );
@@ -1822,7 +1825,7 @@ function MenuItem({
 // src/components/Menu/MenuCheckboxItem.tsx
 import { MenuItem as AriaMenuItem3 } from "react-aria-components";
 import { Check as Check2 } from "lucide-react";
-import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
 function MenuCheckboxItem({
   id,
   children,
@@ -1830,7 +1833,7 @@ function MenuCheckboxItem({
   isDisabled,
   className
 }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     AriaMenuItem3,
     {
       id,
@@ -1839,16 +1842,16 @@ function MenuCheckboxItem({
       className: ({ isSelected }) => [
         "flex items-center gap-2 px-3 py-2 text-sm outline-none cursor-default",
         "transition-colors",
-        "focus:bg-[var(--color-surface-muted)]",
-        "hover:bg-[var(--color-surface-muted)]",
+        "focus:bg-(--color-surface-muted)",
+        "hover:bg-(--color-surface-muted)",
         "disabled:opacity-50 disabled:pointer-events-none",
-        "text-[var(--color-text-primary)]",
-        isSelected ? "font-[number:var(--font-weight-medium)]" : "",
+        "text-(--color-text-primary)",
+        isSelected ? "font-medium" : "",
         className
       ].filter(Boolean).join(" "),
       children: ({ isSelected }) => /* @__PURE__ */ jsxs20(Fragment7, { children: [
-        /* @__PURE__ */ jsx28("span", { className: "flex items-center justify-center w-4 h-4 shrink-0", children: isSelected && /* @__PURE__ */ jsx28(Check2, { size: 14, className: "text-[var(--color-action-primary)]", "aria-hidden": "true" }) }),
-        /* @__PURE__ */ jsx28("span", { className: "flex-1", children })
+        /* @__PURE__ */ jsx29("span", { className: "flex items-center justify-center w-4 h-4 shrink-0", children: isSelected && /* @__PURE__ */ jsx29(Check2, { size: 14, className: "text-(--color-action-primary)", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx29("span", { className: "flex-1", children })
       ] })
     }
   );
@@ -1859,7 +1862,7 @@ import {
   MenuSection as AriaMenuSection,
   Header
 } from "react-aria-components";
-import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
 function MenuSection({
   header,
   children,
@@ -1867,13 +1870,13 @@ function MenuSection({
   className
 }) {
   return /* @__PURE__ */ jsxs21(AriaMenuSection, { className, "aria-label": ariaLabel, children: [
-    header && /* @__PURE__ */ jsx29(
+    header && /* @__PURE__ */ jsx30(
       Header,
       {
         className: [
           "px-3 py-1.5",
-          "text-[length:var(--font-size-xs)] font-[number:var(--font-weight-semibold)]",
-          "text-[var(--color-text-secondary)]",
+          "text-xs font-semibold",
+          "text-(--color-text-secondary)",
           "uppercase tracking-wider",
           "select-none"
         ].join(" "),
@@ -1886,20 +1889,20 @@ function MenuSection({
 // src/components/Menu/MenuHeader.tsx
 import { Header as Header2 } from "react-aria-components";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function MenuHeader({ children, className }) {
-  return /* @__PURE__ */ jsx30(Header2, { className, children });
+  return /* @__PURE__ */ jsx31(Header2, { className, children });
 }
 // src/components/Menu/MenuSeparator.tsx
 import { Separator } from "react-aria-components";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function MenuSeparator({ className }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     Separator,
     {
       className: [
-        "border-t border-[var(--color-border-default)] my-1",
+        "border-t border-(--color-border-default) my-1",
         className
       ].filter(Boolean).join(" ")
     }
@@ -1913,17 +1916,17 @@ import {
   Dialog as AriaDialog2,
   Button as AriaButton3
 } from "react-aria-components";
-import { Fragment as Fragment8, jsx as jsx32 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx33 } from "react/jsx-runtime";
 function Popover3({ children, isOpen, onOpenChange }) {
-  return /* @__PURE__ */ jsx32(DialogTrigger, { isOpen, onOpenChange, children });
+  return /* @__PURE__ */ jsx33(DialogTrigger, { isOpen, onOpenChange, children });
 }
 function PopoverTrigger({ children, className }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     AriaButton3,
     {
       className: [
         "inline-flex items-center bg-transparent border-none p-0 outline-none cursor-pointer",
-        "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:rounded-[var(--border-radius-sm)]",
+        "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:rounded-sm",
         className
       ].filter(Boolean).join(" "),
       children
@@ -1936,15 +1939,15 @@ function PopoverContent({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     AriaPopover,
     {
       placement,
       offset: offsetPx,
       className: [
         "z-50",
-        "bg-[var(--color-surface-default)] border border-[var(--color-border-default)]",
-        "rounded-[var(--border-radius-md)] shadow-lg",
+        "bg-(--color-surface-default) border border-(--color-border-default)",
+        "rounded-md shadow-lg",
         "entering:animate-in entering:fade-in entering:duration-150",
         "exiting:animate-out exiting:fade-out exiting:duration-100",
         "entering:placement-top:slide-in-from-bottom-1",
@@ -1953,7 +1956,7 @@ function PopoverContent({
         "entering:placement-right:slide-in-from-left-1",
         className
       ].filter(Boolean).join(" "),
-      children: /* @__PURE__ */ jsx32(AriaDialog2, { className: "outline-none", children: ({ close }) => /* @__PURE__ */ jsx32(Fragment8, { children: typeof children === "function" ? children({ close }) : children }) })
+      children: /* @__PURE__ */ jsx33(AriaDialog2, { className: "outline-none", children: ({ close }) => /* @__PURE__ */ jsx33(Fragment8, { children: typeof children === "function" ? children({ close }) : children }) })
     }
   );
 }
@@ -1967,7 +1970,7 @@ import {
   Tab as AriaTab,
   TabPanel as AriaTabPanel
 } from "react-aria-components";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var TabsContext = createContext4({
   variant: "underline",
   size: "md"
@@ -1985,7 +1988,7 @@ function Tabs({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx33(TabsContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(TabsContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx34(
     AriaTabs,
     {
       ...props,
@@ -2003,9 +2006,9 @@ function TabList({
   ...props
 }) {
   const { variant } = useContext4(TabsContext);
-  const baseStyles = variant === "unstyled" ? "flex items-center" : variant === "underline" ? "flex items-center border-b border-[var(--color-border-default)]" : "inline-flex items-center bg-[var(--color-surface-muted)] rounded-[var(--border-radius-lg)] p-1 gap-1";
-  const verticalStyles = variant === "unstyled" ? "flex-col" : variant === "underline" ? "flex-col border-b-0 border-r border-[var(--color-border-default)]" : "flex-col";
-  return /* @__PURE__ */ jsx33(
+  const baseStyles = variant === "unstyled" ? "flex items-center" : variant === "underline" ? "flex items-center border-b border-(--color-border-default)" : "inline-flex items-center bg-(--color-surface-muted) rounded-lg p-1 gap-1";
+  const verticalStyles = variant === "unstyled" ? "flex-col" : variant === "underline" ? "flex-col border-b-0 border-r border-(--color-border-default)" : "flex-col";
+  return /* @__PURE__ */ jsx34(
     AriaTabList,
     {
       ...props,
@@ -2019,7 +2022,7 @@ function TabList({
 }
 function Tab({ className, ...props }) {
   const { variant, size } = useContext4(TabsContext);
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     AriaTab,
     {
       ...props,
@@ -2027,7 +2030,7 @@ function Tab({ className, ...props }) {
         if (variant === "unstyled") {
           return twMerge6(
             "cursor-pointer outline-none",
-            "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
+            "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
             isDisabled ? "opacity-50 pointer-events-none" : "",
             className
           );
@@ -2035,9 +2038,9 @@ function Tab({ className, ...props }) {
         return twMerge6(
           // Base
           "cursor-pointer outline-none transition-colors",
-          "font-[var(--font-weight-medium)]",
+          "font-medium",
           // Focus ring
-          "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
+          "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
           // Disabled
           isDisabled ? "opacity-50 pointer-events-none" : "",
           // Size
@@ -2058,25 +2061,25 @@ function getTabVariantStyles(variant, state) {
   if (variant === "underline") {
     return [
       // Shape
-      "relative rounded-t-[var(--border-radius-sm)]",
+      "relative rounded-t-(--border-radius-sm)",
       // Color states
       state.isSelected ? [
-        "text-[var(--color-teal-700)] font-[var(--font-weight-semibold)]",
+        "text-teal-700 font-semibold",
         // Bottom indicator via pseudo-element
-        "after:absolute after:bottom-[-1px] after:left-0 after:right-0 after:h-0.5 after:bg-[var(--color-teal-600)]"
-      ].join(" ") : state.isPressed ? "text-[var(--color-text-primary)] bg-[var(--color-surface-muted)]" : state.isHovered ? "text-[var(--color-text-primary)] bg-[var(--color-surface-subtle)]" : "text-[var(--color-text-secondary)] bg-transparent"
+        "after:absolute after:bottom-[-1px] after:left-0 after:right-0 after:h-0.5 after:bg-teal-600"
+      ].join(" ") : state.isPressed ? "text-(--color-text-primary) bg-(--color-surface-muted)" : state.isHovered ? "text-(--color-text-primary) bg-(--color-surface-subtle)" : "text-(--color-text-secondary) bg-transparent"
     ];
   }
   return [
     // Shape
-    "rounded-[var(--border-radius-md)]",
+    "rounded-md",
     // Color states
-    state.isSelected ? "text-[var(--color-text-primary)] font-[var(--font-weight-semibold)] bg-[var(--color-surface-default)] shadow-sm" : state.isPressed ? "text-[var(--color-text-primary)] bg-[var(--color-surface-subtle)] shadow-none" : state.isHovered ? "text-[var(--color-text-primary)] bg-[var(--color-surface-pressed)]" : "text-[var(--color-text-secondary)] bg-transparent"
+    state.isSelected ? "text-(--color-text-primary) font-semibold bg-(--color-surface-default) shadow-sm" : state.isPressed ? "text-(--color-text-primary) bg-(--color-surface-subtle) shadow-none" : state.isHovered ? "text-(--color-text-primary) bg-(--color-surface-pressed)" : "text-(--color-text-secondary) bg-transparent"
   ];
 }
 function TabPanel({ className, ...props }) {
   const { variant } = useContext4(TabsContext);
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     AriaTabPanel,
     {
       ...props,
@@ -2101,7 +2104,7 @@ import { useCallback as useCallback2, useImperativeHandle, useRef as useRef2, us
 import { Tree as ArboristTree } from "react-arborist";
 import { ChevronRight as ChevronRight2, Folder, File } from "lucide-react";
 import { Check as Check3 } from "lucide-react";
-import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
 var rowHeightMap = {
   compact: 32,
   comfortable: 40
@@ -2116,7 +2119,8 @@ function NodeRenderer({
   selectionMode,
   size,
   onHover,
-  onHoverEnd
+  onHoverEnd,
+  onToggle
 }) {
   const data = node.data;
   const isCheckbox = selectionMode === "checkbox";
@@ -2132,12 +2136,12 @@ function NodeRenderer({
       className: [
         "relative flex items-center cursor-default select-none",
         isCompact ? "gap-0.5 px-2" : "gap-1 px-3",
-        "text-[length:var(--font-size-sm)] text-[var(--color-text-primary)]",
+        "text-sm text-(--color-text-primary)",
         "outline-none",
         // Full-width background via pseudo-element
         "before:absolute before:inset-y-0 before:left-[-100vw] before:right-0 before:-z-10 before:transition-colors",
-        isSelected ? "before:bg-[var(--color-surface-selected)] hover:before:bg-[var(--color-surface-selected-hover)] border-l-2 border-l-[var(--color-brand-accent)]" : "hover:before:bg-[var(--color-surface-hover)]",
-        node.isFocused ? "outline-2 outline-[var(--color-border-focus)] outline-offset-[-2px]" : ""
+        isSelected ? "before:bg-(--color-surface-selected) hover:before:bg-(--color-surface-selected-hover) border-l-2 border-l-(--color-brand-accent)" : "hover:before:bg-(--color-surface-hover)",
+        node.isFocused ? "outline-2 outline-(--color-border-focus) outline-offset-[-2px]" : ""
       ].filter(Boolean).join(" "),
       role: "treeitem",
       "aria-selected": isCheckbox ? isChecked : node.isSelected,
@@ -2159,25 +2163,26 @@ function NodeRenderer({
         }
       },
       children: [
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35(
           "button",
           {
             type: "button",
             className: [
               "flex items-center justify-center w-6 h-6 shrink-0",
-              "rounded-[var(--border-radius-sm)]",
-              "text-[var(--color-text-secondary)]",
-              "hover:text-[var(--color-text-primary)]",
+              "rounded-sm",
+              "text-(--color-text-secondary)",
+              "hover:text-(--color-text-primary)",
               "transition-transform",
               node.isInternal ? "visible" : "invisible"
             ].filter(Boolean).join(" "),
             onClick: (e) => {
               e.stopPropagation();
               node.toggle();
+              onToggle?.(node.data);
             },
             tabIndex: -1,
             "aria-label": node.isOpen ? "Collapse" : "Expand",
-            children: /* @__PURE__ */ jsx34(
+            children: /* @__PURE__ */ jsx35(
               ChevronRight2,
               {
                 size: 14,
@@ -2189,35 +2194,35 @@ function NodeRenderer({
             )
           }
         ),
-        isCheckbox && /* @__PURE__ */ jsx34(
+        isCheckbox && /* @__PURE__ */ jsx35(
           "div",
           {
             className: [
               "flex items-center justify-center w-5 h-5 shrink-0",
-              "rounded-[var(--border-radius-sm)] border transition-colors",
-              isChecked ? "bg-[var(--color-action-primary)] border-[var(--color-action-primary)]" : "bg-[var(--color-surface-default)] border-[var(--color-border-default)] hover:border-[var(--color-border-strong)]"
+              "rounded-sm border transition-colors",
+              isChecked ? "bg-(--color-action-primary) border-(--color-action-primary)" : "bg-(--color-surface-default) border-(--color-border-default) hover:border-(--color-border-strong)"
             ].join(" "),
             role: "checkbox",
             "aria-checked": isChecked,
             "aria-label": `Select ${data.name}`,
-            children: isChecked && /* @__PURE__ */ jsx34(
+            children: isChecked && /* @__PURE__ */ jsx35(
               Check3,
               {
-                className: "w-3 h-3 text-[var(--color-text-inverse)]",
+                className: "w-3 h-3 text-(--color-text-inverse)",
                 strokeWidth: 3
               }
             )
           }
         ),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35(
           IconComponent,
           {
             size: 16,
-            className: "shrink-0 text-[var(--color-text-secondary)]",
+            className: "shrink-0 text-(--color-text-secondary)",
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsx34("span", { className: "truncate", children: data.name })
+        /* @__PURE__ */ jsx35("span", { className: "truncate", children: data.name })
       ]
     }
   );
@@ -2230,6 +2235,7 @@ function Tree({
   selectedIds,
   onSelectionChange,
   onActivate,
+  onToggle,
   onHover,
   onHoverEnd,
   openByDefault = false,
@@ -2283,13 +2289,13 @@ function Tree({
   );
   const arboristSearchMatch = searchMatch ? (node, term) => searchMatch(node.data, term) : void 0;
   const selectionProp = selectionMode === "single" && selectedIds && selectedIds.size > 0 ? [...selectedIds][0] : void 0;
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     "div",
     {
       role: "tree",
       "aria-label": ariaLabel,
       className: ["outline-none overflow-hidden", className].filter(Boolean).join(" "),
-      children: /* @__PURE__ */ jsx34(
+      children: /* @__PURE__ */ jsx35(
         ArboristTree,
         {
           ref: internalRef,
@@ -2308,7 +2314,7 @@ function Tree({
           onSelect: handleSelect,
           onActivate: handleActivate,
           disableEdit: true,
-          children: (props) => /* @__PURE__ */ jsx34(
+          children: (props) => /* @__PURE__ */ jsx35(
             NodeRenderer,
             {
               ...props,
@@ -2317,7 +2323,8 @@ function Tree({
               selectionMode,
               size,
               onHover,
-              onHoverEnd
+              onHoverEnd,
+              onToggle
             }
           )
         }
@@ -2333,7 +2340,7 @@ import {
   ToggleButtonGroup as AriaToggleButtonGroup,
   ToggleButton as AriaToggleButton2
 } from "react-aria-components";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var SegmentedControlContext = createContext5({
   size: "md"
 });
@@ -2353,7 +2360,7 @@ function SegmentedControl({
   ...props
 }) {
   const isNoneMode = selectionMode === "none";
-  return /* @__PURE__ */ jsx35(SegmentedControlContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(SegmentedControlContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx36(
     AriaToggleButtonGroup,
     {
       ...props,
@@ -2362,7 +2369,7 @@ function SegmentedControl({
       defaultSelectedKeys: isNoneMode ? void 0 : defaultSelectedKeys,
       onSelectionChange: isNoneMode ? void 0 : onSelectionChange,
       className: twMerge7(
-        "inline-flex items-center rounded-[var(--border-radius-lg)] border border-[var(--color-border-default)] bg-[var(--color-surface-muted)] p-0.5 gap-0.5",
+        "inline-flex items-center rounded-lg border border-(--color-border-default) bg-(--color-surface-muted) p-0.5 gap-0.5",
         className
       ),
       children
@@ -2374,24 +2381,24 @@ function SegmentedControlItem({
   ...props
 }) {
   const { size } = useContext5(SegmentedControlContext);
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     AriaToggleButton2,
     {
       ...props,
       className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge7(
         // Base layout
         "inline-flex items-center justify-center",
-        "rounded-[var(--border-radius-md)]",
-        "font-[var(--font-weight-medium)]",
+        "rounded-md",
+        "font-medium",
         "outline-none transition-colors cursor-pointer",
         // Focus ring
-        "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-1",
+        "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-1",
         // Disabled
         isDisabled && "opacity-50 pointer-events-none",
         // Size
         sizeStyles7[size],
         // Selected state
-        isSelected ? "bg-[var(--color-surface-default)] text-[var(--color-text-primary)] shadow-sm font-[var(--font-weight-semibold)]" : isPressed ? "bg-[var(--color-surface-subtle)] text-[var(--color-text-primary)]" : isHovered ? "bg-[var(--color-surface-subtle)] text-[var(--color-text-primary)]" : "bg-transparent text-[var(--color-text-secondary)]",
+        isSelected ? "bg-(--color-surface-default) text-(--color-text-primary) shadow-sm font-semibold" : isPressed ? "bg-(--color-surface-subtle) text-(--color-text-primary)" : isHovered ? "bg-(--color-surface-subtle) text-(--color-text-primary)" : "bg-transparent text-(--color-text-secondary)",
         className
       )
     }
@@ -2408,7 +2415,7 @@ import {
   Info as Info2,
   Microscope
 } from "lucide-react";
-import { Fragment as Fragment9, jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
 function getFileIcon(type, extension) {
   if (type === "directory") return Folder2;
   const ext = (extension ?? "").toLowerCase();
@@ -2434,11 +2441,11 @@ function FileIcon({
   size = 16
 }) {
   const IconComponent = getFileIcon(type, extension);
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     IconComponent,
     {
       size,
-      className: "shrink-0 text-[var(--color-text-secondary)]"
+      className: "shrink-0 text-(--color-text-secondary)"
     }
   );
 }
@@ -2455,11 +2462,11 @@ function FileCard({
   className
 }) {
   const isInteractive = !!href || !!onPress;
-  const radius = compact ? "rounded-[var(--border-radius-md)]" : "rounded-[var(--border-radius-lg)]";
+  const radius = compact ? "rounded-md" : "rounded-lg";
   const IconComponent = getFileIcon(type, extension);
   const iconSize = compact ? 24 : 32;
-  const iconColor = type === "directory" ? "text-[var(--color-text-tertiary)]" : "text-[var(--color-text-secondary)]";
-  const thumbnailClass = compact ? "aspect-square rounded-t-[var(--border-radius-md)]" : "aspect-[4/3] rounded-t-[var(--border-radius-lg)]";
+  const iconColor = type === "directory" ? "text-(--color-text-tertiary)" : "text-(--color-text-secondary)";
+  const thumbnailClass = compact ? "aspect-square rounded-t-(--border-radius-md)" : "aspect-[4/3] rounded-t-(--border-radius-lg)";
   const handleInfoClick = useCallback3(
     (e) => {
       if (isInteractive) {
@@ -2480,26 +2487,26 @@ function FileCard({
     [onPress]
   );
   const cardContent = /* @__PURE__ */ jsxs23(Fragment9, { children: [
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37(
       "div",
       {
-        className: `shrink-0 overflow-hidden bg-[var(--color-neutral-900)] ${thumbnailClass}`,
-        children: children ? /* @__PURE__ */ jsx36("div", { className: "h-full w-full overflow-hidden", children }) : /* @__PURE__ */ jsx36("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx36(IconComponent, { size: iconSize, className: iconColor }) })
+        className: `shrink-0 overflow-hidden bg-neutral-900 ${thumbnailClass}`,
+        children: children ? /* @__PURE__ */ jsx37("div", { className: "h-full w-full overflow-hidden", children }) : /* @__PURE__ */ jsx37("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx37(IconComponent, { size: iconSize, className: iconColor }) })
       }
     ),
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37(
       "div",
       {
         className: [
-          "flex flex-col border-t border-[var(--color-border-default)]",
-          "bg-[var(--color-surface-default)]",
-          compact ? "px-2 py-1.5 rounded-b-[var(--border-radius-md)]" : "gap-0.5 px-3 py-2 rounded-b-[var(--border-radius-lg)]"
+          "flex flex-col border-t border-(--color-border-default)",
+          "bg-(--color-surface-default)",
+          compact ? "px-2 py-1.5 rounded-b-(--border-radius-md)" : "gap-0.5 px-3 py-2 rounded-b-(--border-radius-lg)"
         ].join(" "),
-        children: compact ? /* @__PURE__ */ jsx36("span", { className: "text-xs font-medium text-[var(--color-text-primary)] truncate", children: name }) : /* @__PURE__ */ jsxs23(Fragment9, { children: [
+        children: compact ? /* @__PURE__ */ jsx37("span", { className: "text-xs font-medium text-(--color-text-primary) truncate", children: name }) : /* @__PURE__ */ jsxs23(Fragment9, { children: [
           /* @__PURE__ */ jsxs23("span", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx36(FileIcon, { type, extension, size: 16 }),
-            /* @__PURE__ */ jsx36("span", { className: "min-w-0 flex-1 text-sm font-medium text-[var(--color-text-primary)] truncate", children: name }),
-            onInfo && /* @__PURE__ */ jsx36(
+            /* @__PURE__ */ jsx37(FileIcon, { type, extension, size: 16 }),
+            /* @__PURE__ */ jsx37("span", { className: "min-w-0 flex-1 text-sm font-medium text-(--color-text-primary) truncate", children: name }),
+            onInfo && /* @__PURE__ */ jsx37(
               "span",
               {
                 onClick: handleInfoClick,
@@ -2509,7 +2516,7 @@ function FileCard({
                   }
                 },
                 role: "presentation",
-                children: /* @__PURE__ */ jsx36(
+                children: /* @__PURE__ */ jsx37(
                   IconButton,
                   {
                     icon: Info2,
@@ -2523,7 +2530,7 @@ function FileCard({
               }
             )
           ] }),
-          size && /* @__PURE__ */ jsx36("span", { className: "text-xs text-[var(--color-text-secondary)] tabular-nums pl-[22px]", children: size })
+          size && /* @__PURE__ */ jsx37("span", { className: "text-xs text-(--color-text-secondary) tabular-nums pl-[22px]", children: size })
         ] })
       }
     )
@@ -2531,15 +2538,15 @@ function FileCard({
   const baseStyles = [
     "group flex flex-col overflow-hidden",
     radius,
-    "border border-[var(--color-border-default)]",
+    "border border-(--color-border-default)",
     "shadow-sm",
     "transition-all",
-    isInteractive && "hover:border-[var(--color-border-focus)] hover:shadow-md cursor-pointer",
-    isInteractive && "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 outline-none",
+    isInteractive && "hover:border-(--color-border-focus) hover:shadow-md cursor-pointer",
+    isInteractive && "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
     className
   ].filter(Boolean).join(" ");
   if (href) {
-    return /* @__PURE__ */ jsx36(
+    return /* @__PURE__ */ jsx37(
       "a",
       {
         href,
@@ -2550,7 +2557,7 @@ function FileCard({
     );
   }
   if (onPress) {
-    return /* @__PURE__ */ jsx36(
+    return /* @__PURE__ */ jsx37(
       "div",
       {
         role: "button",
@@ -2563,7 +2570,7 @@ function FileCard({
       }
     );
   }
-  return /* @__PURE__ */ jsx36("div", { className: baseStyles, children: cardContent });
+  return /* @__PURE__ */ jsx37("div", { className: baseStyles, children: cardContent });
 }
 // src/components/StorageConnectionCard/StorageConnectionCard.tsx
@@ -2573,7 +2580,7 @@ import { twMerge as twMerge10 } from "tailwind-merge";
 // src/components/Pill/Pill.tsx
 import { twMerge as twMerge8 } from "tailwind-merge";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var HASH_PALETTE = [
   "teal",
   // sky
@@ -2600,22 +2607,22 @@ function pillColorFromName(name) {
   return HASH_PALETTE[Math.abs(hash) % HASH_PALETTE.length];
 }
 var colorStyles = {
-  neutral: "bg-[var(--color-badge-neutral-bg)] text-[var(--color-badge-neutral-text)]",
-  purple: "bg-[var(--color-badge-purple-bg)] text-[var(--color-badge-purple-text)]",
-  teal: "bg-[var(--color-badge-teal-bg)] text-[var(--color-badge-teal-text)]",
-  rose: "bg-[var(--color-badge-rose-bg)] text-[var(--color-badge-rose-text)]",
-  slate: "bg-[var(--color-badge-slate-bg)] text-[var(--color-badge-slate-text)]",
-  green: "bg-[var(--color-badge-green-bg)] text-[var(--color-badge-green-text)]",
-  amber: "bg-[var(--color-badge-amber-bg)] text-[var(--color-badge-amber-text)]"
+  neutral: "bg-(--color-badge-neutral-bg) text-(--color-badge-neutral-text)",
+  purple: "bg-(--color-badge-purple-bg) text-(--color-badge-purple-text)",
+  teal: "bg-(--color-badge-teal-bg) text-(--color-badge-teal-text)",
+  rose: "bg-(--color-badge-rose-bg) text-(--color-badge-rose-text)",
+  slate: "bg-(--color-badge-slate-bg) text-(--color-badge-slate-text)",
+  green: "bg-(--color-badge-green-bg) text-(--color-badge-green-text)",
+  amber: "bg-(--color-badge-amber-bg) text-(--color-badge-amber-text)"
 };
 var dotColorStyles = {
-  neutral: "bg-[var(--color-badge-neutral-text)]",
-  purple: "bg-[var(--color-badge-purple-text)]",
-  teal: "bg-[var(--color-badge-teal-text)]",
-  rose: "bg-[var(--color-badge-rose-text)]",
-  slate: "bg-[var(--color-badge-slate-text)]",
-  green: "bg-[var(--color-badge-green-text)]",
-  amber: "bg-[var(--color-badge-amber-text)]"
+  neutral: "bg-(--color-badge-neutral-text)",
+  purple: "bg-(--color-badge-purple-text)",
+  teal: "bg-(--color-badge-teal-text)",
+  rose: "bg-(--color-badge-rose-text)",
+  slate: "bg-(--color-badge-slate-text)",
+  green: "bg-(--color-badge-green-text)",
+  amber: "bg-(--color-badge-amber-text)"
 };
 function resolveColor(color, name) {
   if (color && color !== "auto") return color;
@@ -2624,13 +2631,13 @@ function resolveColor(color, name) {
 }
 function Pill({ children, color, name, className }) {
   const resolved = resolveColor(color, name);
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     "span",
     {
       className: twMerge8(
         "inline-flex items-center rounded-full",
         "px-2 py-0.5",
-        "text-[length:var(--font-size-xs)] font-[number:var(--font-weight-medium)] leading-[var(--line-height-tight)]",
+        "text-xs font-medium leading-tight",
         colorStyles[resolved],
         className
       ),
@@ -2641,7 +2648,7 @@ function Pill({ children, color, name, className }) {
 // src/components/Pill/GroupPill.tsx
 import { twMerge as twMerge9 } from "tailwind-merge";
-import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
 function GroupPill({
   path,
   visibleCount = 3,
@@ -2663,7 +2670,7 @@ function GroupPill({
       children: [
         hiddenSegments.map((segment, index) => {
           const color = pillColorFromName(segment);
-          return /* @__PURE__ */ jsx38(
+          return /* @__PURE__ */ jsx39(
             "span",
             {
               className: twMerge9(
@@ -2676,18 +2683,18 @@ function GroupPill({
             `dot-${index}-${segment}`
           );
         }),
-        visibleSegments.map((segment, index) => /* @__PURE__ */ jsx38(Pill, { name: segment, children: segment }, `pill-${index}-${segment}`))
+        visibleSegments.map((segment, index) => /* @__PURE__ */ jsx39(Pill, { name: segment, children: segment }, `pill-${index}-${segment}`))
       ]
     }
   );
 }
 // src/components/StorageConnectionCard/StorageConnectionCard.tsx
-import { Fragment as Fragment10, jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
 var statusDotStyles = {
-  connected: "bg-[var(--color-status-success)]",
-  error: "border-2 border-[var(--color-status-danger)] bg-transparent",
-  loading: "bg-[var(--color-status-warning)] animate-pulse"
+  connected: "bg-(--color-status-success)",
+  error: "border-2 border-(--color-status-danger) bg-transparent",
+  loading: "bg-(--color-status-warning) animate-pulse"
 };
 var providerConfig = {
   aws: { label: "AWS", color: "purple" },
@@ -2699,7 +2706,7 @@ function ProviderBadge({ provider }) {
   const config = providerConfig[provider.toLowerCase()];
   const label = config?.label ?? provider;
   const color = config?.color ?? "neutral";
-  return /* @__PURE__ */ jsx39(Pill, { color, children: label });
+  return /* @__PURE__ */ jsx40(Pill, { color, children: label });
 }
 function PreviewArea({
   status = "connected",
@@ -2707,30 +2714,30 @@ function PreviewArea({
   children
 }) {
   if (status === "loading") {
-    return /* @__PURE__ */ jsx39("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx39(Spinner, { size: "lg", "aria-label": "Loading connection" }) });
+    return /* @__PURE__ */ jsx40("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx40(Spinner, { size: "lg", "aria-label": "Loading connection" }) });
   }
   if (status === "error") {
-    return /* @__PURE__ */ jsxs25("div", { className: "flex h-full flex-col items-center justify-center gap-2 bg-[var(--color-surface-danger)] px-4", children: [
-      /* @__PURE__ */ jsx39(
+    return /* @__PURE__ */ jsxs25("div", { className: "flex h-full flex-col items-center justify-center gap-2 bg-(--color-surface-danger) px-4", children: [
+      /* @__PURE__ */ jsx40(
         Icon,
         {
           icon: AlertCircle,
           size: "lg",
-          className: "text-[var(--color-text-danger)]"
+          className: "text-(--color-text-danger)"
         }
       ),
-      errorMessage && /* @__PURE__ */ jsx39("p", { className: "text-center text-xs text-[var(--color-text-danger)]", children: errorMessage })
+      errorMessage && /* @__PURE__ */ jsx40("p", { className: "text-center text-xs text-(--color-text-danger)", children: errorMessage })
     ] });
   }
   if (children) {
-    return /* @__PURE__ */ jsx39("div", { className: "h-full w-full overflow-hidden", children });
+    return /* @__PURE__ */ jsx40("div", { className: "h-full w-full overflow-hidden", children });
   }
-  return /* @__PURE__ */ jsx39("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx40(
     Icon,
     {
       icon: Database,
       size: "xl",
-      className: "text-[var(--color-text-secondary)]"
+      className: "text-(--color-text-secondary)"
     }
   ) });
 }
@@ -2768,10 +2775,10 @@ function StorageConnectionCard({
     [onPress]
   );
   const cardContent = /* @__PURE__ */ jsxs25(Fragment10, { children: [
-    /* @__PURE__ */ jsx39("div", { className: "aspect-[4/3] bg-[var(--color-neutral-900)] overflow-hidden rounded-t-[var(--border-radius-lg)]", children: /* @__PURE__ */ jsx39(PreviewArea, { status, errorMessage, children }) }),
-    /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-1.5 border-t border-[var(--color-border-default)] bg-[var(--color-surface-default)] px-3 py-2.5 rounded-b-[var(--border-radius-lg)]", children: [
+    /* @__PURE__ */ jsx40("div", { className: "aspect-[4/3] bg-neutral-900 overflow-hidden rounded-t-(--border-radius-lg)", children: /* @__PURE__ */ jsx40(PreviewArea, { status, errorMessage, children }) }),
+    /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-1.5 border-t border-(--color-border-default) bg-(--color-surface-default) px-3 py-2.5 rounded-b-(--border-radius-lg)", children: [
       /* @__PURE__ */ jsxs25("div", { className: "flex items-start gap-2", children: [
-        status && /* @__PURE__ */ jsx39(
+        status && /* @__PURE__ */ jsx40(
           "span",
           {
             className: twMerge10(
@@ -2781,8 +2788,8 @@ function StorageConnectionCard({
             "aria-label": `Status: ${status}`
           }
         ),
-        /* @__PURE__ */ jsx39("span", { className: "min-w-0 flex-1 line-clamp-2 text-sm font-medium text-[var(--color-text-primary)]", children: name }),
-        onInfo && /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx40("span", { className: "min-w-0 flex-1 line-clamp-2 text-sm font-medium text-(--color-text-primary)", children: name }),
+        onInfo && /* @__PURE__ */ jsx40(
           "span",
           {
             onClick: handleInfoPress,
@@ -2792,7 +2799,7 @@ function StorageConnectionCard({
               }
             },
             role: "presentation",
-            children: /* @__PURE__ */ jsx39(
+            children: /* @__PURE__ */ jsx40(
               IconButton,
               {
                 icon: Info3,
@@ -2807,9 +2814,9 @@ function StorageConnectionCard({
         )
       ] }),
       (provider || imageCount != null && (!status || status === "connected")) && /* @__PURE__ */ jsxs25("div", { className: twMerge10("flex items-center gap-2", status && "pl-4"), children: [
-        provider && /* @__PURE__ */ jsx39(ProviderBadge, { provider }),
-        provider && region && /* @__PURE__ */ jsx39("span", { className: "shrink-0 text-xs text-[var(--color-text-secondary)]", children: region }),
-        imageCount != null && (!status || status === "connected") && /* @__PURE__ */ jsxs25("span", { className: "ml-auto shrink-0 text-xs tabular-nums text-[var(--color-text-secondary)]", children: [
+        provider && /* @__PURE__ */ jsx40(ProviderBadge, { provider }),
+        provider && region && /* @__PURE__ */ jsx40("span", { className: "shrink-0 text-xs text-(--color-text-secondary)", children: region }),
+        imageCount != null && (!status || status === "connected") && /* @__PURE__ */ jsxs25("span", { className: "ml-auto shrink-0 text-xs tabular-nums text-(--color-text-secondary)", children: [
           imageCount,
           " ",
           imageCount === 1 ? "image" : "images"
@@ -2818,18 +2825,18 @@ function StorageConnectionCard({
     ] })
   ] });
   const baseStyles = twMerge10(
-    "flex flex-col overflow-hidden rounded-[var(--border-radius-lg)]",
-    "border border-[var(--color-border-default)]",
+    "flex flex-col overflow-hidden rounded-lg",
+    "border border-(--color-border-default)",
     "shadow-sm transition-all",
-    isInteractive && "hover:border-[var(--color-border-focus)] hover:shadow-md cursor-pointer",
-    isInteractive && "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 outline-none",
+    isInteractive && "hover:border-(--color-border-focus) hover:shadow-md cursor-pointer",
+    isInteractive && "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
     className
   );
   if (href) {
-    return /* @__PURE__ */ jsx39("a", { href, className: twMerge10(baseStyles, "no-underline"), children: cardContent });
+    return /* @__PURE__ */ jsx40("a", { href, className: twMerge10(baseStyles, "no-underline"), children: cardContent });
   }
   if (onPress) {
-    return /* @__PURE__ */ jsx39(
+    return /* @__PURE__ */ jsx40(
       "div",
       {
         role: "button",
@@ -2841,20 +2848,20 @@ function StorageConnectionCard({
       }
     );
   }
-  return /* @__PURE__ */ jsx39("div", { className: baseStyles, children: cardContent });
+  return /* @__PURE__ */ jsx40("div", { className: baseStyles, children: cardContent });
 }
 // src/components/Badge/Badge.tsx
 import { twMerge as twMerge11 } from "tailwind-merge";
-import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
 var variantStyles4 = {
-  neutral: "bg-[var(--color-badge-neutral-bg)] text-[var(--color-badge-neutral-text)]",
-  purple: "bg-[var(--color-badge-purple-bg)] text-[var(--color-badge-purple-text)]",
-  teal: "bg-[var(--color-badge-teal-bg)] text-[var(--color-badge-teal-text)]",
-  rose: "bg-[var(--color-badge-rose-bg)] text-[var(--color-badge-rose-text)]",
-  slate: "bg-[var(--color-badge-slate-bg)] text-[var(--color-badge-slate-text)]",
-  green: "bg-[var(--color-badge-green-bg)] text-[var(--color-badge-green-text)]",
-  amber: "bg-[var(--color-badge-amber-bg)] text-[var(--color-badge-amber-text)]"
+  neutral: "bg-(--color-badge-neutral-bg) text-(--color-badge-neutral-text)",
+  purple: "bg-(--color-badge-purple-bg) text-(--color-badge-purple-text)",
+  teal: "bg-(--color-badge-teal-bg) text-(--color-badge-teal-text)",
+  rose: "bg-(--color-badge-rose-bg) text-(--color-badge-rose-text)",
+  slate: "bg-(--color-badge-slate-bg) text-(--color-badge-slate-text)",
+  green: "bg-(--color-badge-green-bg) text-(--color-badge-green-text)",
+  amber: "bg-(--color-badge-amber-bg) text-(--color-badge-amber-text)"
 };
 var sizeStyles8 = {
   sm: "px-1.5 py-0.5",
@@ -2875,14 +2882,14 @@ function Badge({
     "span",
     {
       className: twMerge11(
-        "inline-flex items-center gap-1 rounded-[var(--border-radius-full)]",
-        "text-[length:var(--font-size-xs)] font-[number:var(--font-weight-medium)] leading-[var(--line-height-tight)]",
+        "inline-flex items-center gap-1 rounded-full",
+        "text-xs font-medium leading-tight",
         variantStyles4[variant],
         sizeStyles8[size],
         className
       ),
       children: [
-        IconComponent && /* @__PURE__ */ jsx40(IconComponent, { size: iconSizeMap4[size], "aria-hidden": "true" }),
+        IconComponent && /* @__PURE__ */ jsx41(IconComponent, { size: iconSizeMap4[size], "aria-hidden": "true" }),
         children
       ]
     }
@@ -2892,7 +2899,7 @@ function Badge({
 // src/components/Card/Card.tsx
 import { useCallback as useCallback5 } from "react";
 import { twMerge as twMerge12 } from "tailwind-merge";
-import { Fragment as Fragment11, jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
 var paddingStyles = {
   none: "p-0",
   sm: "p-3",
@@ -2911,9 +2918,9 @@ function Card({
 }) {
   const isInteractive = interactive || !!href || !!onPress;
   const containerClass = twMerge12(
-    "bg-[var(--color-surface-default)] border border-[var(--color-border-default)] rounded-[var(--border-radius-lg)] overflow-hidden shadow-sm",
-    isInteractive && "transition-all hover:shadow-md hover:border-[var(--color-border-focus)] cursor-pointer",
-    (href || onPress) && "block focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 outline-none",
+    "bg-(--color-surface-default) border border-(--color-border-default) rounded-lg overflow-hidden shadow-sm",
+    isInteractive && "transition-all hover:shadow-md hover:border-(--color-border-focus) cursor-pointer",
+    (href || onPress) && "block focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
     className
   );
   const handleKeyDown = useCallback5(
@@ -2926,22 +2933,22 @@ function Card({
     [onPress]
   );
   const content = /* @__PURE__ */ jsxs27(Fragment11, { children: [
-    header && /* @__PURE__ */ jsx41(
+    header && /* @__PURE__ */ jsx42(
       "div",
       {
         className: twMerge12(
-          "border-b border-[var(--color-border-default)]",
+          "border-b border-(--color-border-default)",
           paddingStyles[padding]
         ),
         children: header
       }
     ),
-    /* @__PURE__ */ jsx41("div", { className: paddingStyles[padding], children }),
-    footer && /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsx42("div", { className: paddingStyles[padding], children }),
+    footer && /* @__PURE__ */ jsx42(
       "div",
       {
         className: twMerge12(
-          "border-t border-[var(--color-border-default)]",
+          "border-t border-(--color-border-default)",
           paddingStyles[padding]
         ),
         children: footer
@@ -2949,10 +2956,10 @@ function Card({
     )
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx41("a", { href, className: containerClass, children: content });
+    return /* @__PURE__ */ jsx42("a", { href, className: containerClass, children: content });
   }
   if (onPress) {
-    return /* @__PURE__ */ jsx41(
+    return /* @__PURE__ */ jsx42(
       "div",
       {
         role: "button",
@@ -2964,13 +2971,13 @@ function Card({
       }
     );
   }
-  return /* @__PURE__ */ jsx41("div", { className: containerClass, children: content });
+  return /* @__PURE__ */ jsx42("div", { className: containerClass, children: content });
 }
 // src/components/DeltaIndicator/DeltaIndicator.tsx
 import { ArrowUp, ArrowDown, Minus } from "lucide-react";
 import { twMerge as twMerge13 } from "tailwind-merge";
-import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
 function getDirection(current, previous) {
   const diff = current - previous;
   if (diff > 0) return "increase";
@@ -2992,14 +2999,14 @@ function formatPercentage(current, previous) {
   return `${sign}${pct.toFixed(1)}%`;
 }
 var directionColors = {
-  increase: "text-[var(--color-delta-increase-text)]",
-  decrease: "text-[var(--color-delta-decrease-text)]",
-  flat: "text-[var(--color-delta-flat-text)]"
+  increase: "text-(--color-delta-increase-text)",
+  decrease: "text-(--color-delta-decrease-text)",
+  flat: "text-(--color-delta-flat-text)"
 };
 var reverseDirectionColors = {
-  increase: "text-[var(--color-delta-decrease-text)]",
-  decrease: "text-[var(--color-delta-increase-text)]",
-  flat: "text-[var(--color-delta-flat-text)]"
+  increase: "text-(--color-delta-decrease-text)",
+  decrease: "text-(--color-delta-increase-text)",
+  flat: "text-(--color-delta-flat-text)"
 };
 var directionIcons = {
   increase: ArrowUp,
@@ -3007,9 +3014,9 @@ var directionIcons = {
   flat: Minus
 };
 var directionBgColors = {
-  increase: "bg-[var(--color-delta-increase-bg)]",
-  decrease: "bg-[var(--color-delta-decrease-bg)]",
-  flat: "bg-[var(--color-delta-flat-bg)]"
+  increase: "bg-(--color-delta-increase-bg)",
+  decrease: "bg-(--color-delta-decrease-bg)",
+  flat: "bg-(--color-delta-flat-bg)"
 };
 function DeltaIndicator({
   current,
@@ -3027,12 +3034,12 @@ function DeltaIndicator({
       "span",
       {
         className: twMerge13(
-          "inline-flex items-center gap-1 font-[number:var(--font-weight-medium)]",
-          "text-[var(--color-text-tertiary)]",
+          "inline-flex items-center gap-1 font-medium",
+          "text-(--color-text-tertiary)",
           className
         ),
         children: [
-          label && /* @__PURE__ */ jsx42("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)] mr-1", children: label }),
+          label && /* @__PURE__ */ jsx43("span", { className: "text-sm text-(--color-text-secondary) mr-1", children: label }),
           unavailableText
         ]
       }
@@ -3066,18 +3073,18 @@ function DeltaIndicator({
     "span",
     {
       className: twMerge13(
-        "inline-flex items-center gap-1 font-[number:var(--font-weight-medium)]",
+        "inline-flex items-center gap-1 font-medium",
         colorStyles2,
         isPill && [
-          "rounded-[var(--border-radius-full)] px-2 py-0.5",
-          "text-[length:var(--font-size-xs)]",
+          "rounded-full px-2 py-0.5",
+          "text-xs",
           directionBgColors[direction]
         ],
         className
       ),
       children: [
-        label && /* @__PURE__ */ jsx42("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)] mr-1", children: label }),
-        /* @__PURE__ */ jsx42(IconComponent, { size: 14, "aria-hidden": true }),
+        label && /* @__PURE__ */ jsx43("span", { className: "text-sm text-(--color-text-secondary) mr-1", children: label }),
+        /* @__PURE__ */ jsx43(IconComponent, { size: 14, "aria-hidden": true }),
         valueText
       ]
     }
@@ -3086,13 +3093,13 @@ function DeltaIndicator({
 // src/components/ProgressBar/ProgressBar.tsx
 import { twMerge as twMerge14 } from "tailwind-merge";
-import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
 var fillStyles = {
-  brand: "bg-[var(--color-progress-fill)]",
-  success: "bg-[var(--color-progress-fill-success)]",
-  warning: "bg-[var(--color-progress-fill-warning)]",
-  danger: "bg-[var(--color-progress-fill-danger)]",
-  neutral: "bg-[var(--color-text-secondary)]"
+  brand: "bg-(--color-progress-fill)",
+  success: "bg-(--color-progress-fill-success)",
+  warning: "bg-(--color-progress-fill-warning)",
+  danger: "bg-(--color-progress-fill-danger)",
+  neutral: "bg-(--color-text-secondary)"
 };
 var sizeStyles9 = {
   sm: "h-1.5",
@@ -3111,10 +3118,10 @@ function ProgressBar({
   const clampedValue = Math.min(100, Math.max(0, value));
   return /* @__PURE__ */ jsxs29("div", { className: twMerge14("w-full", className), children: [
     (label || description || showValue) && /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__PURE__ */ jsx43("span", { className: "text-[length:var(--font-size-sm)] font-[number:var(--font-weight-medium)] text-[var(--color-text-primary)]", children: label }),
-      /* @__PURE__ */ jsx43("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)]", children: description ?? (showValue ? `${clampedValue}%` : null) })
+      /* @__PURE__ */ jsx44("span", { className: "text-sm font-medium text-(--color-text-primary)", children: label }),
+      /* @__PURE__ */ jsx44("span", { className: "text-sm text-(--color-text-secondary)", children: description ?? (showValue ? `${clampedValue}%` : null) })
     ] }),
-    /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx44(
       "div",
       {
         role: "progressbar",
@@ -3123,14 +3130,14 @@ function ProgressBar({
         "aria-valuemax": 100,
         "aria-label": label ?? "Progress",
         className: twMerge14(
-          "w-full rounded-[var(--border-radius-full)] bg-[var(--color-progress-track)]",
+          "w-full rounded-full bg-(--color-progress-track)",
           sizeStyles9[size]
         ),
-        children: /* @__PURE__ */ jsx43(
+        children: /* @__PURE__ */ jsx44(
           "div",
           {
             className: twMerge14(
-              "h-full rounded-[var(--border-radius-full)] transition-all duration-300",
+              "h-full rounded-full transition-all duration-300",
               fillStyles[variant]
             ),
             style: { width: `${clampedValue}%` }
@@ -3151,30 +3158,30 @@ import {
   X as X3
 } from "lucide-react";
 import { twMerge as twMerge15 } from "tailwind-merge";
-import { jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
 var variantConfig2 = {
   info: {
     icon: Info4,
-    containerClass: "bg-[var(--color-banner-info-bg)] border-[var(--color-banner-info-border)] text-[var(--color-banner-info-text)]",
-    iconClass: "text-[var(--color-banner-info-icon)]",
+    containerClass: "bg-(--color-banner-info-bg) border-(--color-banner-info-border) text-(--color-banner-info-text)",
+    iconClass: "text-(--color-banner-info-icon)",
     role: "status"
   },
   warning: {
     icon: AlertTriangle,
-    containerClass: "bg-[var(--color-banner-warning-bg)] border-[var(--color-banner-warning-border)] text-[var(--color-banner-warning-text)]",
-    iconClass: "text-[var(--color-banner-warning-icon)]",
+    containerClass: "bg-(--color-banner-warning-bg) border-(--color-banner-warning-border) text-(--color-banner-warning-text)",
+    iconClass: "text-(--color-banner-warning-icon)",
     role: "alert"
   },
   danger: {
     icon: AlertCircle2,
-    containerClass: "bg-[var(--color-banner-danger-bg)] border-[var(--color-banner-danger-border)] text-[var(--color-banner-danger-text)]",
-    iconClass: "text-[var(--color-banner-danger-icon)]",
+    containerClass: "bg-(--color-banner-danger-bg) border-(--color-banner-danger-border) text-(--color-banner-danger-text)",
+    iconClass: "text-(--color-banner-danger-icon)",
     role: "alert"
   },
   success: {
     icon: CheckCircle2,
-    containerClass: "bg-[var(--color-banner-success-bg)] border-[var(--color-banner-success-border)] text-[var(--color-banner-success-text)]",
-    iconClass: "text-[var(--color-banner-success-icon)]",
+    containerClass: "bg-(--color-banner-success-bg) border-(--color-banner-success-border) text-(--color-banner-success-text)",
+    iconClass: "text-(--color-banner-success-icon)",
     role: "status"
   }
 };
@@ -3200,13 +3207,13 @@ function Banner({
     {
       role: config.role,
       className: twMerge15(
-        "flex items-start gap-[var(--spacing-3)] rounded-[var(--border-radius-lg)] border px-[var(--spacing-4)] py-[var(--spacing-3)]",
-        "text-[length:var(--font-size-sm)]",
+        "flex items-start gap-3 rounded-lg border px-4 py-3",
+        "text-sm",
         config.containerClass,
         className
       ),
       children: [
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx45(
           IconComponent,
           {
             size: 20,
@@ -3215,20 +3222,20 @@ function Banner({
           }
         ),
         /* @__PURE__ */ jsxs30("div", { className: "flex-1", children: [
-          title && /* @__PURE__ */ jsxs30("span", { className: "font-[number:var(--font-weight-medium)]", children: [
+          title && /* @__PURE__ */ jsxs30("span", { className: "font-medium", children: [
             title,
             " \u2014 "
           ] }),
           children
         ] }),
-        dismissible && /* @__PURE__ */ jsx44(
+        dismissible && /* @__PURE__ */ jsx45(
           "button",
           {
             type: "button",
             onClick: handleDismiss,
-            className: "shrink-0 rounded-[var(--border-radius-sm)] p-0.5 opacity-70 hover:opacity-100 transition-opacity outline-none focus-visible:ring-2 focus-visible:ring-current",
+            className: "shrink-0 rounded-sm p-0.5 opacity-70 hover:opacity-100 transition-opacity outline-none focus-visible:ring-2 focus-visible:ring-current",
             "aria-label": "Dismiss",
-            children: /* @__PURE__ */ jsx44(X3, { size: 16, "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx45(X3, { size: 16, "aria-hidden": "true" })
           }
         )
       ]
@@ -3238,17 +3245,17 @@ function Banner({
 // src/components/MetricCard/MetricCard.tsx
 import { twMerge as twMerge16 } from "tailwind-merge";
-import { Fragment as Fragment12, jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
 var sizeConfig = {
   sm: {
     padding: "p-3",
-    labelClass: "text-[length:var(--font-size-xs)]",
-    valueClass: "text-[length:var(--font-size-xl)]"
+    labelClass: "text-xs",
+    valueClass: "text-xl"
   },
   md: {
     padding: "p-4",
-    labelClass: "text-[length:var(--font-size-sm)]",
-    valueClass: "text-[length:var(--font-size-2xl)]"
+    labelClass: "text-sm",
+    valueClass: "text-2xl"
   }
 };
 function MetricCard({
@@ -3261,34 +3268,34 @@ function MetricCard({
 }) {
   const config = sizeConfig[size];
   const containerClass = twMerge16(
-    "bg-[var(--color-surface-default)] border border-[var(--color-border-default)] rounded-[var(--border-radius-lg)] shadow-sm",
+    "bg-(--color-surface-default) border border-(--color-border-default) rounded-lg shadow-sm",
     config.padding,
-    href && "block transition-shadow hover:shadow-md hover:border-[var(--color-border-focus)] focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 outline-none",
+    href && "block transition-shadow hover:shadow-md hover:border-(--color-border-focus) focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
     className
   );
   const content = /* @__PURE__ */ jsxs31(Fragment12, { children: [
-    /* @__PURE__ */ jsx45("div", { className: twMerge16(config.labelClass, "text-[var(--color-text-secondary)]"), children: label }),
-    /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx46("div", { className: twMerge16(config.labelClass, "text-(--color-text-secondary)"), children: label }),
+    /* @__PURE__ */ jsx46(
       "div",
       {
         className: twMerge16(
           config.valueClass,
-          "font-[number:var(--font-weight-semibold)] text-[var(--color-text-primary)] mt-1 tabular-nums"
+          "font-semibold text-(--color-text-primary) mt-1 tabular-nums"
         ),
         children: value
       }
     ),
-    secondary && /* @__PURE__ */ jsx45("div", { className: "mt-1 text-sm", children: secondary })
+    secondary && /* @__PURE__ */ jsx46("div", { className: "mt-1 text-sm", children: secondary })
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx45("a", { href, className: containerClass, children: content });
+    return /* @__PURE__ */ jsx46("a", { href, className: containerClass, children: content });
   }
-  return /* @__PURE__ */ jsx45("div", { className: containerClass, children: content });
+  return /* @__PURE__ */ jsx46("div", { className: containerClass, children: content });
 }
 // src/components/SectionHeader/SectionHeader.tsx
 import { twMerge as twMerge17 } from "tailwind-merge";
-import { jsx as jsx46, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
 function SectionHeader({
   title,
   children,
@@ -3298,12 +3305,12 @@ function SectionHeader({
     "div",
     {
       className: twMerge17(
-        "flex flex-wrap items-center gap-[var(--spacing-3)] py-[var(--spacing-4)]",
+        "flex flex-wrap items-center gap-3 py-4",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx46(H2, { children: title }),
-        children && /* @__PURE__ */ jsx46("div", { className: "ml-auto flex flex-wrap items-center gap-[var(--spacing-2)]", children })
+        /* @__PURE__ */ jsx47(H2, { children: title }),
+        children && /* @__PURE__ */ jsx47("div", { className: "ml-auto flex flex-wrap items-center gap-2", children })
       ]
     }
   );
@@ -3311,7 +3318,7 @@ function SectionHeader({
 // src/components/FormWizard/FormWizard.tsx
 import { createContext as createContext6, useContext as useContext6, useCallback as useCallback6, useMemo } from "react";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var FormWizardContext = createContext6({
   currentStep: 0,
   totalSteps: 1,
@@ -3346,30 +3353,30 @@ function FormWizard({
     }),
     [currentStep, totalSteps, canGoBack, goBack, isLastStep]
   );
-  return /* @__PURE__ */ jsx47(FormWizardContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx48(FormWizardContext.Provider, { value, children });
 }
 // src/components/FormWizard/FormWizardProgress.tsx
-import { jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
 function CheckIcon2() {
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     "svg",
     {
       "aria-hidden": "true",
-      className: "h-4 w-4 text-[var(--color-text-inverse)]",
+      className: "h-4 w-4 text-(--color-text-inverse)",
       viewBox: "0 0 16 16",
       fill: "none",
       stroke: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx48("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
+      children: /* @__PURE__ */ jsx49("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
     }
   );
 }
 function FormWizardProgress({ labels }) {
   const { currentStep, totalSteps } = useFormWizard();
-  return /* @__PURE__ */ jsx48("nav", { "aria-label": "Form progress", children: /* @__PURE__ */ jsx48("ol", { className: "flex items-start", role: "list", children: labels.map((label, index) => {
+  return /* @__PURE__ */ jsx49("nav", { "aria-label": "Form progress", children: /* @__PURE__ */ jsx49("ol", { className: "flex items-start", role: "list", children: labels.map((label, index) => {
     const isCompleted = index < currentStep;
     const isCurrent = index === currentStep;
     const isFuture = index > currentStep;
@@ -3380,48 +3387,48 @@ function FormWizardProgress({ labels }) {
         "aria-current": isCurrent ? "step" : void 0,
         children: [
           /* @__PURE__ */ jsxs33("div", { className: "flex w-full items-center", children: [
-            index > 0 ? /* @__PURE__ */ jsx48(
+            index > 0 ? /* @__PURE__ */ jsx49(
               "div",
               {
                 "aria-hidden": "true",
                 className: [
                   "h-0.5 flex-1",
-                  index <= currentStep ? "bg-[var(--color-brand-primary)]" : "bg-[var(--color-border-default)]"
+                  index <= currentStep ? "bg-(--color-brand-primary)" : "bg-(--color-border-default)"
                 ].join(" ")
               }
-            ) : /* @__PURE__ */ jsx48("div", { className: "flex-1", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx48(
+            ) : /* @__PURE__ */ jsx49("div", { className: "flex-1", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx49(
               "div",
               {
                 className: [
                   "flex h-8 w-8 shrink-0 items-center justify-center rounded-full",
-                  "text-[length:var(--font-size-sm)] font-[number:var(--font-weight-medium)]",
+                  "text-sm font-medium",
                   "transition-colors",
-                  isCompleted ? "bg-[var(--color-brand-primary)] text-[var(--color-text-inverse)]" : "",
-                  isCurrent ? "border-2 border-[var(--color-brand-primary)] bg-[var(--color-surface-default)] text-[var(--color-brand-primary)]" : "",
-                  isFuture ? "border-2 border-[var(--color-border-default)] bg-[var(--color-surface-default)] text-[var(--color-text-tertiary)]" : ""
+                  isCompleted ? "bg-(--color-brand-primary) text-(--color-text-inverse)" : "",
+                  isCurrent ? "border-2 border-(--color-brand-primary) bg-(--color-surface-default) text-(--color-brand-primary)" : "",
+                  isFuture ? "border-2 border-(--color-border-default) bg-(--color-surface-default) text-(--color-text-tertiary)" : ""
                 ].join(" "),
                 "aria-hidden": "true",
-                children: isCompleted ? /* @__PURE__ */ jsx48(CheckIcon2, {}) : index + 1
+                children: isCompleted ? /* @__PURE__ */ jsx49(CheckIcon2, {}) : index + 1
               }
             ),
-            index < totalSteps - 1 ? /* @__PURE__ */ jsx48(
+            index < totalSteps - 1 ? /* @__PURE__ */ jsx49(
               "div",
               {
                 "aria-hidden": "true",
                 className: [
                   "h-0.5 flex-1",
-                  index < currentStep ? "bg-[var(--color-brand-primary)]" : "bg-[var(--color-border-default)]"
+                  index < currentStep ? "bg-(--color-brand-primary)" : "bg-(--color-border-default)"
                 ].join(" ")
               }
-            ) : /* @__PURE__ */ jsx48("div", { className: "flex-1", "aria-hidden": "true" })
+            ) : /* @__PURE__ */ jsx49("div", { className: "flex-1", "aria-hidden": "true" })
           ] }),
-          /* @__PURE__ */ jsx48(
+          /* @__PURE__ */ jsx49(
             "span",
             {
               className: [
-                "mt-[var(--spacing-2)] text-center text-[length:var(--font-size-sm)]",
-                isCurrent ? "font-[number:var(--font-weight-semibold)] text-[var(--color-text-primary)]" : "font-[number:var(--font-weight-regular)] text-[var(--color-text-secondary)]"
+                "mt-2 text-center text-sm",
+                isCurrent ? "font-semibold text-(--color-text-primary)" : "font-normal text-(--color-text-secondary)"
               ].join(" "),
               children: label
             }
@@ -3434,15 +3441,15 @@ function FormWizardProgress({ labels }) {
 }
 // src/components/FormWizard/FormWizardNav.tsx
-import { jsx as jsx49, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
 function FormWizardNav({
   onNext,
   isSubmitting = false,
   submitLabel = "Submit"
 }) {
   const { canGoBack, goBack, isLastStep } = useFormWizard();
-  return /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-end gap-[var(--spacing-3)]", children: [
-    canGoBack && /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-end gap-3", children: [
+    canGoBack && /* @__PURE__ */ jsx50(
       Button,
       {
         variant: "secondary",
@@ -3452,7 +3459,7 @@ function FormWizardNav({
         children: "Back"
       }
     ),
-    /* @__PURE__ */ jsx49(
+    /* @__PURE__ */ jsx50(
       Button,
       {
         variant: "primary",