npm - @almadar/ui - Versions diffs - 2.25.4 → 2.26.0 - Mend

@almadar/ui 2.25.4 → 2.26.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 (18) hide show

package/dist/avl/index.cjs +43 -43
package/dist/avl/index.js +43 -43
package/dist/components/index.cjs +860 -860
package/dist/components/index.js +860 -860
package/dist/components/organisms/game/three/index.cjs +41 -41
package/dist/components/organisms/game/three/index.js +41 -41
package/dist/docs/index.cjs +142 -142
package/dist/docs/index.js +142 -142
package/dist/illustrations/index.cjs +17 -17
package/dist/illustrations/index.js +17 -17
package/dist/marketing/index.cjs +167 -167
package/dist/marketing/index.js +167 -167
package/dist/providers/index.cjs +178 -178
package/dist/providers/index.js +178 -178
package/dist/runtime/index.cjs +802 -802
package/dist/runtime/index.js +802 -802
package/package.json +1 -1
package/tailwind-preset.cjs +30 -188

package/dist/runtime/index.cjs CHANGED Viewed

@@ -1543,28 +1543,28 @@ var marginYStyles = {
 };
 var bgStyles = {
   transparent: "bg-transparent",
-  primary: "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-  secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
-  muted: "bg-[var(--color-muted)] text-[var(--color-foreground)]",
-  accent: "bg-[var(--color-accent)] text-[var(--color-accent-foreground)]",
-  surface: "bg-[var(--color-card)]",
-  overlay: "bg-[var(--color-card)]/80 backdrop-blur-sm"
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  muted: "bg-muted text-foreground",
+  accent: "bg-accent text-accent-foreground",
+  surface: "bg-card",
+  overlay: "bg-card/80 backdrop-blur-sm"
 };
 var roundedStyles = {
   none: "rounded-none",
-  sm: "rounded-[var(--radius-sm)]",
-  md: "rounded-[var(--radius-md)]",
-  lg: "rounded-[var(--radius-lg)]",
-  xl: "rounded-[var(--radius-xl)]",
-  "2xl": "rounded-[var(--radius-xl)]",
-  full: "rounded-[var(--radius-full)]"
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-xl",
+  full: "rounded-full"
 };
 var shadowStyles = {
   none: "shadow-none",
-  sm: "shadow-[var(--shadow-sm)]",
-  md: "shadow-[var(--shadow-main)]",
-  lg: "shadow-[var(--shadow-lg)]",
-  xl: "shadow-[var(--shadow-lg)]"
+  sm: "shadow-sm",
+  md: "shadow",
+  lg: "shadow-lg",
+  xl: "shadow-lg"
 };
 var displayStyles = {
   block: "block",
@@ -1652,7 +1652,7 @@ var Box = React114__namespace.default.forwardRef(
           // Background
           bgStyles[bg],
           // Border - uses theme variables
-          border && "border-[length:var(--border-width)] border-[var(--color-border)]",
+          border && "border-[length:var(--border-width)] border-border",
           // Rounded
           roundedStyles[rounded],
           // Shadow
@@ -1681,30 +1681,30 @@ var Box = React114__namespace.default.forwardRef(
 );
 Box.displayName = "Box";
 var variantStyles = {
-  h1: "text-4xl font-bold tracking-tight text-[var(--color-foreground)]",
-  h2: "text-3xl font-bold tracking-tight text-[var(--color-foreground)]",
-  h3: "text-2xl font-bold text-[var(--color-foreground)]",
-  h4: "text-xl font-bold text-[var(--color-foreground)]",
-  h5: "text-lg font-bold text-[var(--color-foreground)]",
-  h6: "text-base font-bold text-[var(--color-foreground)]",
-  heading: "text-2xl font-bold text-[var(--color-foreground)]",
-  subheading: "text-lg font-semibold text-[var(--color-foreground)]",
-  body1: "text-base font-normal text-[var(--color-foreground)]",
-  body2: "text-sm font-normal text-[var(--color-foreground)]",
-  body: "text-base font-normal text-[var(--color-foreground)]",
-  caption: "text-xs font-normal text-[var(--color-muted-foreground)]",
-  overline: "text-xs uppercase tracking-wide font-bold text-[var(--color-muted-foreground)]",
-  small: "text-sm font-normal text-[var(--color-foreground)]",
-  large: "text-lg font-medium text-[var(--color-foreground)]",
-  label: "text-sm font-medium text-[var(--color-foreground)]"
+  h1: "text-4xl font-bold tracking-tight text-foreground",
+  h2: "text-3xl font-bold tracking-tight text-foreground",
+  h3: "text-2xl font-bold text-foreground",
+  h4: "text-xl font-bold text-foreground",
+  h5: "text-lg font-bold text-foreground",
+  h6: "text-base font-bold text-foreground",
+  heading: "text-2xl font-bold text-foreground",
+  subheading: "text-lg font-semibold text-foreground",
+  body1: "text-base font-normal text-foreground",
+  body2: "text-sm font-normal text-foreground",
+  body: "text-base font-normal text-foreground",
+  caption: "text-xs font-normal text-muted-foreground",
+  overline: "text-xs uppercase tracking-wide font-bold text-muted-foreground",
+  small: "text-sm font-normal text-foreground",
+  large: "text-lg font-medium text-foreground",
+  label: "text-sm font-medium text-foreground"
 };
 var colorStyles = {
-  primary: "text-[var(--color-foreground)]",
-  secondary: "text-[var(--color-muted-foreground)]",
-  muted: "text-[var(--color-muted-foreground)]",
-  error: "text-[var(--color-error)]",
-  success: "text-[var(--color-success)]",
-  warning: "text-[var(--color-warning)]",
+  primary: "text-foreground",
+  secondary: "text-muted-foreground",
+  muted: "text-muted-foreground",
+  error: "text-error",
+  success: "text-success",
+  warning: "text-warning",
   inherit: "text-inherit"
 };
 var weightStyles = {
@@ -2393,7 +2393,7 @@ var Modal = ({
                 isDragging.current = false;
                 setDragY(0);
               },
-              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-1 rounded-full bg-[var(--color-border)]" })
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-1 rounded-full bg-border" })
             }
           ),
           (title || showCloseButton) && /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2401,7 +2401,7 @@ var Modal = ({
             {
               className: cn(
                 "px-6 py-4 flex items-center justify-between",
-                "border-b-[length:var(--border-width)] border-[var(--color-border)]"
+                "border-b-[length:var(--border-width)] border-border"
               ),
               children: [
                 title && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", as: "h2", id: "modal-title", children: title }),
@@ -2412,8 +2412,8 @@ var Modal = ({
                     onClick: handleClose,
                     "data-event": "CLOSE",
                     className: cn(
-                      "p-1 transition-colors rounded-[var(--radius-sm)]",
-                      "hover:bg-[var(--color-muted)]"
+                      "p-1 transition-colors rounded-sm",
+                      "hover:bg-muted"
                     ),
                     "aria-label": "Close modal",
                     children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: LucideIcons.X, size: "md" })
@@ -2427,8 +2427,8 @@ var Modal = ({
             "div",
             {
               className: cn(
-                "px-6 py-4 bg-[var(--color-muted)]",
-                "border-t-[length:var(--border-width)] border-[var(--color-border)]"
+                "px-6 py-4 bg-muted",
+                "border-t-[length:var(--border-width)] border-border"
               ),
               children: footer
             }
@@ -2549,7 +2549,7 @@ var Drawer = ({
             {
               className: cn(
                 "px-6 py-4 flex items-center justify-between shrink-0",
-                "border-b-[length:var(--border-width)] border-[var(--color-border)]"
+                "border-b-[length:var(--border-width)] border-border"
               ),
               children: [
                 title && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", as: "h2", id: "drawer-title", children: title }),
@@ -2559,8 +2559,8 @@ var Drawer = ({
                     type: "button",
                     onClick: handleClose,
                     className: cn(
-                      "p-1 transition-colors rounded-[var(--radius-sm)]",
-                      "hover:bg-[var(--color-muted)]",
+                      "p-1 transition-colors rounded-sm",
+                      "hover:bg-muted",
                       !title && "ml-auto"
                     ),
                     "aria-label": "Close drawer",
@@ -2575,8 +2575,8 @@ var Drawer = ({
             "div",
             {
               className: cn(
-                "px-6 py-4 shrink-0 bg-[var(--color-muted)]",
-                "border-t-[length:var(--border-width)] border-[var(--color-border)]"
+                "px-6 py-4 shrink-0 bg-muted",
+                "border-t-[length:var(--border-width)] border-border"
               ),
               children: footer
             }
@@ -2613,49 +2613,49 @@ var Drawer = ({
 Drawer.displayName = "Drawer";
 var variantStyles2 = {
   primary: [
-    "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
+    "bg-primary text-primary-foreground",
     "border-none",
-    "shadow-[var(--shadow-sm)]",
-    "hover:bg-[var(--color-primary-hover)] hover:shadow-[var(--shadow-hover)]",
-    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
+    "shadow-sm",
+    "hover:bg-primary-hover hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
   ].join(" "),
   secondary: [
-    "bg-transparent text-[var(--color-accent)]",
-    "border border-[var(--color-accent)]",
-    "hover:bg-[var(--color-accent)] hover:text-white hover:border-[var(--color-accent)]",
+    "bg-transparent text-accent",
+    "border border-accent",
+    "hover:bg-accent hover:text-white hover:border-accent",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   ghost: [
-    "bg-transparent text-[var(--color-muted-foreground)]",
-    "hover:text-[var(--color-foreground)] hover:bg-[var(--color-muted)]",
+    "bg-transparent text-muted-foreground",
+    "hover:text-foreground hover:bg-muted",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   danger: [
-    "bg-[var(--color-surface)] text-[var(--color-error)]",
-    "border-[length:var(--border-width)] border-[var(--color-error)]",
-    "shadow-[var(--shadow-sm)]",
-    "hover:bg-[var(--color-error)] hover:text-[var(--color-error-foreground)] hover:shadow-[var(--shadow-hover)]",
-    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
+    "bg-surface text-error",
+    "border-[length:var(--border-width)] border-error",
+    "shadow-sm",
+    "hover:bg-error hover:text-error-foreground hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
   ].join(" "),
   success: [
-    "bg-[var(--color-surface)] text-[var(--color-success)]",
-    "border-[length:var(--border-width)] border-[var(--color-success)]",
-    "shadow-[var(--shadow-sm)]",
-    "hover:bg-[var(--color-success)] hover:text-[var(--color-success-foreground)] hover:shadow-[var(--shadow-hover)]",
-    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
+    "bg-surface text-success",
+    "border-[length:var(--border-width)] border-success",
+    "shadow-sm",
+    "hover:bg-success hover:text-success-foreground hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
   ].join(" "),
   warning: [
-    "bg-[var(--color-surface)] text-[var(--color-warning)]",
-    "border-[length:var(--border-width)] border-[var(--color-warning)]",
-    "shadow-[var(--shadow-sm)]",
-    "hover:bg-[var(--color-warning)] hover:text-[var(--color-warning-foreground)] hover:shadow-[var(--shadow-hover)]",
-    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
+    "bg-surface text-warning",
+    "border-[length:var(--border-width)] border-warning",
+    "shadow-sm",
+    "hover:bg-warning hover:text-warning-foreground hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
   ].join(" "),
   // "default" is an alias for secondary
   default: [
-    "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
-    "border-[length:var(--border-width-thin)] border-[var(--color-border)]",
-    "hover:bg-[var(--color-secondary-hover)]",
+    "bg-secondary text-secondary-foreground",
+    "border-[length:var(--border-width-thin)] border-border",
+    "hover:bg-secondary-hover",
     "active:scale-[var(--active-scale)]"
   ].join(" ")
 };
@@ -2726,10 +2726,10 @@ var Button = React114__namespace.default.forwardRef(
         className: cn(
           "inline-flex items-center justify-center gap-2",
           "font-[var(--font-weight-medium)]",
-          "rounded-[var(--radius-sm)]",
+          "rounded-sm",
           "cursor-pointer",
           "transition-all duration-[var(--transition-normal)]",
-          "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-[var(--color-ring)] focus:ring-offset-[length:var(--focus-ring-offset)]",
+          "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-offset-[length:var(--focus-ring-offset)]",
           "disabled:opacity-50 disabled:cursor-not-allowed",
           variantStyles2[variant],
           sizeStyles2[size],
@@ -2750,34 +2750,34 @@ var Button = React114__namespace.default.forwardRef(
 Button.displayName = "Button";
 var variantStyles3 = {
   default: [
-    "bg-[var(--color-muted)] text-[var(--color-foreground)]",
-    "border-[length:var(--border-width-thin)] border-[var(--color-border)]"
+    "bg-muted text-foreground",
+    "border-[length:var(--border-width-thin)] border-border"
   ].join(" "),
-  primary: "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-  secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
   success: [
-    "bg-[var(--color-surface)] text-[var(--color-success)]",
-    "border-[length:var(--border-width)] border-[var(--color-success)]"
+    "bg-surface text-success",
+    "border-[length:var(--border-width)] border-success"
   ].join(" "),
   warning: [
-    "bg-[var(--color-surface)] text-[var(--color-warning)]",
-    "border-[length:var(--border-width)] border-[var(--color-warning)]"
+    "bg-surface text-warning",
+    "border-[length:var(--border-width)] border-warning"
   ].join(" "),
   danger: [
-    "bg-[var(--color-surface)] text-[var(--color-error)]",
-    "border-[length:var(--border-width)] border-[var(--color-error)]"
+    "bg-surface text-error",
+    "border-[length:var(--border-width)] border-error"
   ].join(" "),
   error: [
-    "bg-[var(--color-surface)] text-[var(--color-error)]",
-    "border-[length:var(--border-width)] border-[var(--color-error)]"
+    "bg-surface text-error",
+    "border-[length:var(--border-width)] border-error"
   ].join(" "),
   info: [
-    "bg-[var(--color-surface)] text-[var(--color-info)]",
-    "border-[length:var(--border-width)] border-[var(--color-info)]"
+    "bg-surface text-info",
+    "border-[length:var(--border-width)] border-info"
   ].join(" "),
   neutral: [
-    "bg-[var(--color-muted)] text-[var(--color-muted-foreground)]",
-    "border-[length:var(--border-width-thin)] border-[var(--color-border)]"
+    "bg-muted text-muted-foreground",
+    "border-[length:var(--border-width-thin)] border-border"
   ].join(" ")
 };
 var sizeStyles3 = {
@@ -2797,7 +2797,7 @@ var Badge = React114__namespace.default.forwardRef(
       {
         ref,
         className: cn(
-          "inline-flex items-center gap-1 font-bold rounded-[var(--radius-sm)]",
+          "inline-flex items-center gap-1 font-bold rounded-sm",
           variantStyles3[variant],
           sizeStyles3[size],
           className
@@ -2813,10 +2813,10 @@ var Badge = React114__namespace.default.forwardRef(
 );
 Badge.displayName = "Badge";
 var variantClasses = {
-  success: "bg-[var(--color-card)] border-[length:var(--border-width)] border-[var(--color-success)]",
-  error: "bg-[var(--color-card)] border-[length:var(--border-width)] border-[var(--color-error)]",
-  info: "bg-[var(--color-card)] border-[length:var(--border-width)] border-[var(--color-info)]",
-  warning: "bg-[var(--color-card)] border-[length:var(--border-width)] border-[var(--color-warning)]"
+  success: "bg-card border-[length:var(--border-width)] border-success",
+  error: "bg-card border-[length:var(--border-width)] border-error",
+  info: "bg-card border-[length:var(--border-width)] border-info",
+  warning: "bg-card border-[length:var(--border-width)] border-warning"
 };
 var iconMap = {
   success: LucideIcons.CheckCircle,
@@ -2825,10 +2825,10 @@ var iconMap = {
   warning: LucideIcons.AlertTriangle
 };
 var iconColors = {
-  success: "text-[var(--color-success)]",
-  error: "text-[var(--color-error)]",
-  info: "text-[var(--color-info)]",
-  warning: "text-[var(--color-warning)]"
+  success: "text-success",
+  error: "text-error",
+  info: "text-info",
+  warning: "text-warning"
 };
 var Toast = ({
   variant = "info",
@@ -2866,8 +2866,8 @@ var Toast = ({
     "div",
     {
       className: cn(
-        "border-l-4 p-4 shadow-[var(--shadow-main)] min-w-[300px] max-w-md",
-        "rounded-[var(--radius-sm)]",
+        "border-l-4 p-4 shadow min-w-[300px] max-w-md",
+        "rounded-sm",
         variantClasses[variant],
         className
       ),
@@ -2894,9 +2894,9 @@ var Toast = ({
               type: "button",
               onClick: handleDismiss,
               className: cn(
-                "flex-shrink-0 p-1 transition-colors rounded-[var(--radius-sm)]",
-                "hover:bg-[var(--color-muted)]",
-                "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)] focus:ring-offset-2"
+                "flex-shrink-0 p-1 transition-colors rounded-sm",
+                "hover:bg-muted",
+                "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
               ),
               "aria-label": "Dismiss toast",
               children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: LucideIcons.X, size: "sm" })
@@ -2929,21 +2929,21 @@ var Input = React114__namespace.default.forwardRef(
     const resolvedLeftIcon = leftIcon || IconComponent && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: "h-4 w-4" });
     const showClearButton = clearable && value && String(value).length > 0;
     const baseClassName = cn(
-      "block w-full rounded-[var(--radius-sm)] transition-all duration-[var(--transition-fast)]",
-      "border-[length:var(--border-width-thin)] border-[var(--color-border)]",
+      "block w-full rounded-sm transition-all duration-[var(--transition-fast)]",
+      "border-[length:var(--border-width-thin)] border-border",
       "px-3 py-2 text-sm",
-      "bg-[var(--color-card)] hover:bg-[var(--color-muted)] focus:bg-[var(--color-card)]",
-      "text-[var(--color-foreground)] placeholder:text-[var(--color-muted-foreground)]",
-      "focus:outline-none focus:ring-1 focus:ring-[var(--color-ring)] focus:border-[var(--color-ring)]",
-      "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-[var(--color-muted)]",
-      error ? "border-[var(--color-error)] focus:border-[var(--color-error)] focus:ring-[var(--color-error)]" : "",
+      "bg-card hover:bg-muted focus:bg-card",
+      "text-foreground placeholder:text-muted-foreground",
+      "focus:outline-none focus:ring-1 focus:ring-ring focus:border-ring",
+      "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-muted",
+      error ? "border-error focus:border-error focus:ring-error" : "",
       resolvedLeftIcon && "pl-10",
       (rightIcon || showClearButton) && "pr-10",
       className
     );
     if (type === "select") {
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-        resolvedLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-[var(--color-muted-foreground)]", children: resolvedLeftIcon }),
+        resolvedLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-muted-foreground", children: resolvedLeftIcon }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "select",
           {
@@ -2958,7 +2958,7 @@ var Input = React114__namespace.default.forwardRef(
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-[var(--color-muted-foreground)]", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { className: "h-4 w-4" }) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { className: "h-4 w-4" }) })
       ] });
     }
     if (type === "textarea") {
@@ -2983,9 +2983,9 @@ var Input = React114__namespace.default.forwardRef(
           checked: props.checked,
           onChange,
           className: cn(
-            "h-4 w-4 rounded-[var(--radius-sm)]",
-            "border-[var(--color-border)]",
-            "text-[var(--color-primary)] focus:ring-[var(--color-ring)]",
+            "h-4 w-4 rounded-sm",
+            "border-border",
+            "text-primary focus:ring-ring",
             "disabled:opacity-50 disabled:cursor-not-allowed",
             className
           ),
@@ -2994,7 +2994,7 @@ var Input = React114__namespace.default.forwardRef(
       );
     }
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-      resolvedLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-[var(--color-muted-foreground)]", children: resolvedLeftIcon }),
+      resolvedLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-muted-foreground", children: resolvedLeftIcon }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -3011,11 +3011,11 @@ var Input = React114__namespace.default.forwardRef(
         {
           type: "button",
           onClick: onClear,
-          className: "absolute inset-y-0 right-0 pr-3 flex items-center text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]",
+          className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground hover:text-foreground",
           children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "h-4 w-4" })
         }
       ),
-      rightIcon && !showClearButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center text-[var(--color-muted-foreground)]", children: rightIcon })
+      rightIcon && !showClearButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground", children: rightIcon })
     ] });
   }
 );
@@ -3027,13 +3027,13 @@ var Label = React114__namespace.default.forwardRef(
       {
         ref,
         className: cn(
-          "block text-sm font-bold text-[var(--color-foreground)]",
+          "block text-sm font-bold text-foreground",
           className
         ),
         ...props,
         children: [
           children,
-          required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--color-error)] ml-1", children: "*" })
+          required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-error ml-1", children: "*" })
         ]
       }
     );
@@ -3047,14 +3047,14 @@ var Textarea = React114__namespace.default.forwardRef(
       {
         ref,
         className: cn(
-          "block w-full border-[length:var(--border-width)] shadow-[var(--shadow-sm)]",
-          "px-3 py-2 text-sm text-[var(--color-foreground)]",
-          "bg-[var(--color-card)]",
+          "block w-full border-[length:var(--border-width)] shadow-sm",
+          "px-3 py-2 text-sm text-foreground",
+          "bg-card",
           "placeholder:text-[var(--color-placeholder)]",
-          "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-[var(--color-ring)]",
-          "disabled:bg-[var(--color-muted)] disabled:text-[var(--color-muted-foreground)] disabled:cursor-not-allowed",
+          "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-ring",
+          "disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed",
           "resize-y min-h-[80px]",
-          error ? "border-[var(--color-error)] focus:border-[var(--color-error)]" : "border-[var(--color-border)] focus:border-[var(--color-primary)]",
+          error ? "border-error focus:border-error" : "border-border focus:border-primary",
           className
         ),
         ...props
@@ -3071,12 +3071,12 @@ var Select = React114__namespace.default.forwardRef(
         {
           ref,
           className: cn(
-            "block w-full border-[length:var(--border-width)] shadow-[var(--shadow-sm)] appearance-none",
-            "px-3 py-2 pr-10 text-sm text-[var(--color-foreground)] font-medium",
-            "bg-[var(--color-card)]",
-            "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-[var(--color-ring)]",
-            "disabled:bg-[var(--color-muted)] disabled:text-[var(--color-muted-foreground)] disabled:cursor-not-allowed",
-            error ? "border-[var(--color-error)] focus:border-[var(--color-error)]" : "border-[var(--color-border)] focus:border-[var(--color-primary)]",
+            "block w-full border-[length:var(--border-width)] shadow-sm appearance-none",
+            "px-3 py-2 pr-10 text-sm text-foreground font-medium",
+            "bg-card",
+            "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-ring",
+            "disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed",
+            error ? "border-error focus:border-error" : "border-border focus:border-primary",
             className
           ),
           ...props,
@@ -3094,7 +3094,7 @@ var Select = React114__namespace.default.forwardRef(
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { className: "h-4 w-4 text-[var(--color-foreground)]" }) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { className: "h-4 w-4 text-foreground" }) })
     ] });
   }
 );
@@ -3110,9 +3110,9 @@ var Checkbox = React114__namespace.default.forwardRef(
           type: "checkbox",
           id: inputId,
           className: cn(
-            "peer h-4 w-4 border-[length:var(--border-width)] border-[var(--color-border)]",
-            "accent-[var(--color-primary)] focus:ring-[var(--color-ring)] focus:ring-offset-0",
-            "bg-[var(--color-card)] checked:bg-[var(--color-primary)]",
+            "peer h-4 w-4 border-[length:var(--border-width)] border-border",
+            "accent-primary focus:ring-ring focus:ring-offset-0",
+            "bg-card checked:bg-primary",
             "disabled:opacity-50 disabled:cursor-not-allowed",
             className
           ),
@@ -3123,7 +3123,7 @@ var Checkbox = React114__namespace.default.forwardRef(
         "label",
         {
           htmlFor: inputId,
-          className: "ml-2 text-sm text-[var(--color-foreground)] font-medium cursor-pointer select-none",
+          className: "ml-2 text-sm text-foreground font-medium cursor-pointer select-none",
           children: label
         }
       )
@@ -3133,34 +3133,34 @@ var Checkbox = React114__namespace.default.forwardRef(
 Checkbox.displayName = "Checkbox";
 var variantStyles4 = {
   default: [
-    "bg-[var(--color-card)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-[var(--shadow-sm)]",
+    "bg-card",
+    "border-[length:var(--border-width)] border-border",
+    "shadow-sm",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
+    "hover:shadow-lg hover:-translate-y-0.5"
   ].join(" "),
   bordered: [
-    "bg-[var(--color-card)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-[var(--shadow-sm)]",
+    "bg-card",
+    "border-[length:var(--border-width)] border-border",
+    "shadow-sm",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
+    "hover:shadow-lg hover:-translate-y-0.5"
   ].join(" "),
   elevated: [
-    "bg-[var(--color-card)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-[var(--shadow-main)]",
+    "bg-card",
+    "border-[length:var(--border-width)] border-border",
+    "shadow",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
+    "hover:shadow-lg hover:-translate-y-0.5"
   ].join(" "),
   // Interactive variant with theme-specific hover effects
   interactive: [
-    "bg-[var(--color-card)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-[var(--shadow-main)]",
+    "bg-card",
+    "border-[length:var(--border-width)] border-border",
+    "shadow",
     "cursor-pointer",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-[var(--shadow-hover)]"
+    "hover:shadow-lg"
   ].join(" ")
 };
 var paddingStyles2 = {
@@ -3171,9 +3171,9 @@ var paddingStyles2 = {
 };
 var shadowStyles2 = {
   none: "shadow-none",
-  sm: "shadow-[var(--shadow-sm)]",
-  md: "shadow-[var(--shadow-main)]",
-  lg: "shadow-[var(--shadow-lg)]"
+  sm: "shadow-sm",
+  md: "shadow",
+  lg: "shadow-lg"
 };
 var Card = React114__namespace.default.forwardRef(
   ({
@@ -3191,7 +3191,7 @@ var Card = React114__namespace.default.forwardRef(
       {
         ref,
         className: cn(
-          "rounded-[var(--radius-md)]",
+          "rounded-md",
           "transition-all duration-[var(--transition-normal)]",
           variantStyles4[variant],
           paddingStyles2[padding],
@@ -3201,8 +3201,8 @@ var Card = React114__namespace.default.forwardRef(
         ...props,
         children: [
           (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
-            title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg text-[var(--color-card-foreground)] font-[var(--font-weight-bold)]", children: title }),
-            subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[var(--color-muted-foreground)] mt-1", children: subtitle })
+            title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg text-card-foreground font-[var(--font-weight-bold)]", children: title }),
+            subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-1", children: subtitle })
           ] }),
           children
         ]
@@ -3218,7 +3218,7 @@ var CardTitle = React114__namespace.default.forwardRef(({ className, ...props },
   {
     ref,
     className: cn(
-      "text-lg text-[var(--color-card-foreground)]",
+      "text-lg text-card-foreground",
       "font-[var(--font-weight-bold)]",
       className
     ),
@@ -3251,7 +3251,7 @@ var Spinner = React114__namespace.default.forwardRef(
       "div",
       {
         ref,
-        className: cn("text-[var(--color-foreground)]", className),
+        className: cn("text-foreground", className),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: cn("animate-spin", sizeStyles4[size]) })
       }
@@ -3281,10 +3281,10 @@ var statusSizeClasses = {
   xl: "w-4 h-4"
 };
 var statusClasses = {
-  online: "bg-[var(--color-success)]",
-  offline: "bg-[var(--color-muted-foreground)]",
-  away: "bg-[var(--color-warning)]",
-  busy: "bg-[var(--color-error)]"
+  online: "bg-success",
+  offline: "bg-muted-foreground",
+  away: "bg-warning",
+  busy: "bg-error"
 };
 var badgeSizeClasses = {
   xs: "w-3 h-3 text-[8px]",
@@ -3319,7 +3319,7 @@ var Avatar = ({
   const hasImage = !!src;
   const hasInitials = !!initials;
   const hasIcon = !!Icon3;
-  const getInitialsBackground = () => "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]";
+  const getInitialsBackground = () => "bg-primary text-primary-foreground";
   const isClickable = action || onClick;
   const handleClick = () => {
     if (action) {
@@ -3333,7 +3333,7 @@ var Avatar = ({
       {
         className: cn(
           "relative inline-flex items-center justify-center",
-          "bg-[var(--color-muted)] border-[length:var(--border-width)] border-[var(--color-border)]",
+          "bg-muted border-[length:var(--border-width)] border-border",
           "overflow-hidden",
           sizeClasses3[size],
           isClickable && "cursor-pointer hover:bg-[var(--color-surface-hover)] transition-colors",
@@ -3366,7 +3366,7 @@ var Avatar = ({
           Icon3,
           {
             className: cn(
-              "text-[var(--color-foreground)]",
+              "text-foreground",
               iconSizeClasses[size]
             )
           }
@@ -3374,7 +3374,7 @@ var Avatar = ({
           LucideIcons.User,
           {
             className: cn(
-              "text-[var(--color-foreground)]",
+              "text-foreground",
               iconSizeClasses[size]
             )
           }
@@ -3385,7 +3385,7 @@ var Avatar = ({
       "div",
       {
         className: cn(
-          "absolute bottom-0 right-0 border-2 border-[var(--color-card)]",
+          "absolute bottom-0 right-0 border-2 border-card",
           statusClasses[status],
           statusSizeClasses[size]
         ),
@@ -3397,8 +3397,8 @@ var Avatar = ({
       {
         className: cn(
           "absolute -top-1 -right-1 flex items-center justify-center",
-          "bg-[var(--color-primary)] text-[var(--color-primary-foreground)] font-bold",
-          "border-2 border-[var(--color-card)]",
+          "bg-primary text-primary-foreground font-bold",
+          "border-2 border-card",
           badgeSizeClasses[size]
         ),
         "aria-label": `Badge: ${badge}`,
@@ -3454,7 +3454,7 @@ var Divider = ({
       "div",
       {
         className: cn(
-          "w-0 h-full border-l border-[var(--color-border)]",
+          "w-0 h-full border-l border-border",
           variantStyles5[variant],
           className
         ),
@@ -3475,17 +3475,17 @@ var Divider = ({
             "div",
             {
               className: cn(
-                "flex-1 h-0 border-t border-[var(--color-border)]",
+                "flex-1 h-0 border-t border-border",
                 variantStyles5[variant]
               )
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-[var(--color-foreground)] font-bold uppercase tracking-wide", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground font-bold uppercase tracking-wide", children: label }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: cn(
-                "flex-1 h-0 border-t border-[var(--color-border)]",
+                "flex-1 h-0 border-t border-border",
                 variantStyles5[variant]
               )
             }
@@ -3498,7 +3498,7 @@ var Divider = ({
     "div",
     {
       className: cn(
-        "w-full h-0 border-t border-[var(--color-border)] my-4",
+        "w-full h-0 border-t border-border my-4",
         variantStyles5[variant],
         className
       ),
@@ -3509,11 +3509,11 @@ var Divider = ({
 };
 Divider.displayName = "Divider";
 var colorClasses = {
-  default: "bg-[var(--color-primary)]",
-  primary: "bg-[var(--color-primary)]",
-  success: "bg-[var(--color-success)]",
-  warning: "bg-[var(--color-warning)]",
-  danger: "bg-[var(--color-error)]"
+  default: "bg-primary",
+  primary: "bg-primary",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-error"
 };
 var circularSizeClasses = {
   sm: "w-16 h-16",
@@ -3539,13 +3539,13 @@ var ProgressBar = ({
   if (progressType === "linear") {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", className), children: [
       label && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold text-[var(--color-foreground)]", children: label }),
-        effectiveShowPercentage && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-[var(--color-foreground)] font-medium", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold text-foreground", children: label }),
+        effectiveShowPercentage && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-foreground font-medium", children: [
           Math.round(percentage),
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-2 bg-[var(--color-muted)] border border-[var(--color-border)] overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-2 bg-muted border border-border overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           className: cn(
@@ -3589,7 +3589,7 @@ var ProgressBar = ({
                     stroke: "currentColor",
                     strokeWidth: "8",
                     fill: "none",
-                    className: "text-[var(--color-muted)]"
+                    className: "text-muted"
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -3613,7 +3613,7 @@ var ProgressBar = ({
               ]
             }
           ),
-          effectiveShowPercentage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-bold text-[var(--color-foreground)]", children: [
+          effectiveShowPercentage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-bold text-foreground", children: [
             Math.round(percentage),
             "%"
           ] }) })
@@ -3627,8 +3627,8 @@ var ProgressBar = ({
     const partialStep = value % stepValue / stepValue;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", className), children: [
       label && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-[var(--color-foreground)]", children: label }),
-        effectiveShowPercentage && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-[var(--color-muted-foreground)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-foreground", children: label }),
+        effectiveShowPercentage && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground", children: [
           Math.round(percentage),
           "%"
         ] })
@@ -3639,7 +3639,7 @@ var ProgressBar = ({
         return /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "flex-1 h-2 bg-[var(--color-muted)] border border-[var(--color-border)] overflow-hidden",
+            className: "flex-1 h-2 bg-muted border border-border overflow-hidden",
             children: /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
@@ -3710,8 +3710,8 @@ var Radio = React114__namespace.default.forwardRef(
                 "flex items-center justify-center",
                 "border-[length:var(--border-width)] transition-all cursor-pointer",
                 sizeClasses6[size],
-                hasError ? "border-[var(--color-error)] peer-focus:ring-[var(--color-error)]/20" : "border-[var(--color-border)] peer-focus:ring-[var(--color-ring)]/20",
-                checked ? hasError ? "border-[var(--color-error)]" : "border-[var(--color-primary)] bg-[var(--color-primary)]" : "",
+                hasError ? "border-error peer-focus:ring-error/20" : "border-border peer-focus:ring-ring/20",
+                checked ? hasError ? "border-error" : "border-primary bg-primary" : "",
                 "peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-offset-2",
                 disabled && "opacity-50 cursor-not-allowed",
                 !disabled && "hover:border-[var(--color-border-hover)]"
@@ -3722,7 +3722,7 @@ var Radio = React114__namespace.default.forwardRef(
                   className: cn(
                     "transition-all",
                     dotSizeClasses[size],
-                    hasError ? "bg-[var(--color-error)]" : "bg-[var(--color-primary-foreground)]"
+                    hasError ? "bg-error" : "bg-primary-foreground"
                   )
                 }
               )
@@ -3735,7 +3735,7 @@ var Radio = React114__namespace.default.forwardRef(
             htmlFor: radioId,
             className: cn(
               "block text-sm font-medium cursor-pointer select-none",
-              hasError ? "text-[var(--color-error)]" : "text-[var(--color-foreground)]",
+              hasError ? "text-error" : "text-foreground",
               disabled && "opacity-50 cursor-not-allowed"
             ),
             children: label
@@ -3747,7 +3747,7 @@ var Radio = React114__namespace.default.forwardRef(
           "p",
           {
             id: `${radioId}-error`,
-            className: "text-sm text-[var(--color-error)] font-medium",
+            className: "text-sm text-error font-medium",
             role: "alert",
             children: error
           }
@@ -3756,7 +3756,7 @@ var Radio = React114__namespace.default.forwardRef(
           "p",
           {
             id: `${radioId}-helper`,
-            className: "text-sm text-[var(--color-muted-foreground)]",
+            className: "text-sm text-muted-foreground",
             children: helperText
           }
         )
@@ -3966,14 +3966,14 @@ var TextHighlight = ({
   const typeStyles2 = {
     question: cn(
       // Blue border for questions
-      "bg-[var(--color-card)] border-b-2 border-primary-600",
-      "hover:bg-[var(--color-muted)]",
+      "bg-card border-b-2 border-primary-600",
+      "hover:bg-muted",
       isActive && "bg-primary-100 ring-2 ring-primary-600"
     ),
     note: cn(
       // Yellow border for notes
-      "bg-[var(--color-card)] border-b-2 border-amber-500",
-      "hover:bg-[var(--color-muted)]",
+      "bg-card border-b-2 border-amber-500",
+      "hover:bg-muted",
       isActive && "bg-amber-100 ring-2 ring-amber-500"
     )
   };
@@ -4034,9 +4034,9 @@ var ThemeToggle = ({
       onClick: toggleMode,
       className: cn(
         "inline-flex items-center justify-center gap-2",
-        "text-[var(--color-foreground)]",
-        "hover:bg-[var(--color-muted)] border-[length:var(--border-width)] border-transparent hover:border-[var(--color-border)]",
-        "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)] focus:ring-offset-2",
+        "text-foreground",
+        "hover:bg-muted border-[length:var(--border-width)] border-transparent hover:border-border",
+        "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
         "transition-colors duration-200",
         sizeClasses4[size],
         className
@@ -4047,12 +4047,12 @@ var ThemeToggle = ({
         isDark ? /* @__PURE__ */ jsxRuntime.jsx(
           LucideIcons.Sun,
           {
-            className: cn(iconSizes[size], "text-[var(--color-foreground)]")
+            className: cn(iconSizes[size], "text-foreground")
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx(
           LucideIcons.Moon,
           {
-            className: cn(iconSizes[size], "text-[var(--color-foreground)]")
+            className: cn(iconSizes[size], "text-foreground")
           }
         ),
         showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: isDark ? "Light" : "Dark" })
@@ -4133,10 +4133,10 @@ var positionStyles2 = {
   right: "left-full top-1/2 -translate-y-1/2 ml-2"
 };
 var arrowStyles = {
-  top: "top-full left-1/2 -translate-x-1/2 border-t-[var(--color-foreground)] border-l-transparent border-r-transparent border-b-transparent",
-  bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-[var(--color-foreground)] border-l-transparent border-r-transparent border-t-transparent",
-  left: "left-full top-1/2 -translate-y-1/2 border-l-[var(--color-foreground)] border-t-transparent border-b-transparent border-r-transparent",
-  right: "right-full top-1/2 -translate-y-1/2 border-r-[var(--color-foreground)] border-t-transparent border-b-transparent border-l-transparent"
+  top: "top-full left-1/2 -translate-x-1/2 border-t-foreground border-l-transparent border-r-transparent border-b-transparent",
+  bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-foreground border-l-transparent border-r-transparent border-t-transparent",
+  left: "left-full top-1/2 -translate-y-1/2 border-l-foreground border-t-transparent border-b-transparent border-r-transparent",
+  right: "right-full top-1/2 -translate-y-1/2 border-r-foreground border-t-transparent border-b-transparent border-l-transparent"
 };
 var LawReferenceTooltip = ({
   reference,
@@ -4180,7 +4180,7 @@ var LawReferenceTooltip = ({
             shadow: "lg",
             position: "absolute",
             className: cn(
-              "z-50 w-64 bg-[var(--color-foreground)] text-[var(--color-background)]",
+              "z-50 w-64 bg-foreground text-background",
               positionStyles2[position]
             ),
             role: "tooltip",
@@ -4203,17 +4203,17 @@ var LawReferenceTooltip = ({
                   Typography,
                   {
                     variant: "caption",
-                    className: "text-[var(--color-muted-foreground)]",
+                    className: "text-muted-foreground",
                     children: reference.lawName
                   }
                 ),
                 reference.clause && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Divider, { className: "border-[var(--color-border)]" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Divider, { className: "border-border" }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     Typography,
                     {
                       variant: "caption",
-                      className: "text-[var(--color-background)] leading-relaxed",
+                      className: "text-background leading-relaxed",
                       children: reference.clause
                     }
                   )
@@ -4263,7 +4263,7 @@ function DayCell({
     Box,
     {
       className: cn(
-        "p-2 text-center cursor-pointer hover:bg-[var(--color-muted)] transition-colors",
+        "p-2 text-center cursor-pointer hover:bg-muted transition-colors",
         isToday && "bg-blue-500/10",
         className
       ),
@@ -4275,7 +4275,7 @@ function DayCell({
             variant: "small",
             className: cn(
               "font-medium",
-              isToday ? "text-blue-600" : "text-[var(--color-muted-foreground)]"
+              isToday ? "text-blue-600" : "text-muted-foreground"
             ),
             children: dayAbbr
           }
@@ -4311,8 +4311,8 @@ function TimeSlotCell({
     Box,
     {
       className: cn(
-        "p-1 min-h-[60px] cursor-pointer hover:bg-[var(--color-muted)] transition-colors",
-        isOccupied && "bg-[var(--color-muted)]/30",
+        "p-1 min-h-[60px] cursor-pointer hover:bg-muted transition-colors",
+        isOccupied && "bg-muted/30",
         className
       ),
       onClick: handleClick,
@@ -4322,20 +4322,20 @@ function TimeSlotCell({
 }
 TimeSlotCell.displayName = "TimeSlotCell";
 var statusColors = {
-  online: "bg-[var(--color-success)]",
-  offline: "bg-[var(--color-muted-foreground)]",
-  away: "bg-[var(--color-warning)]",
-  busy: "bg-[var(--color-error)]",
-  warning: "bg-[var(--color-warning)]",
-  critical: "bg-[var(--color-error)]"
+  online: "bg-success",
+  offline: "bg-muted-foreground",
+  away: "bg-warning",
+  busy: "bg-error",
+  warning: "bg-warning",
+  critical: "bg-error"
 };
 var pulseRingColors = {
-  online: "ring-[var(--color-success)]",
-  offline: "ring-[var(--color-muted-foreground)]",
-  away: "ring-[var(--color-warning)]",
-  busy: "ring-[var(--color-error)]",
-  warning: "ring-[var(--color-warning)]",
-  critical: "ring-[var(--color-error)]"
+  online: "ring-success",
+  offline: "ring-muted-foreground",
+  away: "ring-warning",
+  busy: "ring-error",
+  warning: "ring-warning",
+  critical: "ring-error"
 };
 var sizeStyles5 = {
   sm: "w-2 h-2",
@@ -4379,10 +4379,10 @@ function resolveDirection(value, direction) {
   return value > 0 ? "up" : "down";
 }
 function resolveColor(dir, invert) {
-  if (dir === "flat") return "text-[var(--color-muted-foreground)]";
+  if (dir === "flat") return "text-muted-foreground";
   const isPositive = dir === "up";
   const isGood = invert ? !isPositive : isPositive;
-  return isGood ? "text-[var(--color-success)]" : "text-[var(--color-error)]";
+  return isGood ? "text-success" : "text-error";
 }
 var iconMap2 = {
   up: LucideIcons.TrendingUp,
@@ -4500,7 +4500,7 @@ var RangeSlider = React114__namespace.default.forwardRef(
               "div",
               {
                 className: cn(
-                  "absolute inset-x-0 rounded-full bg-[var(--color-muted)]",
+                  "absolute inset-x-0 rounded-full bg-muted",
                   trackSizes[size]
                 ),
                 style: { top: "50%", transform: "translateY(-50%)" }
@@ -4510,7 +4510,7 @@ var RangeSlider = React114__namespace.default.forwardRef(
               "div",
               {
                 className: cn(
-                  "absolute rounded-full bg-[var(--color-muted-foreground)] opacity-30",
+                  "absolute rounded-full bg-muted-foreground opacity-30",
                   trackSizes[size]
                 ),
                 style: {
@@ -4525,7 +4525,7 @@ var RangeSlider = React114__namespace.default.forwardRef(
               "div",
               {
                 className: cn(
-                  "absolute rounded-full bg-[var(--color-primary)]",
+                  "absolute rounded-full bg-primary",
                   trackSizes[size]
                 ),
                 style: {
@@ -4587,9 +4587,9 @@ var RangeSlider = React114__namespace.default.forwardRef(
               "div",
               {
                 className: cn(
-                  "absolute rounded-full bg-[var(--color-primary-foreground)]",
-                  "border-2 border-[var(--color-primary)]",
-                  "shadow-[var(--shadow-sm)]",
+                  "absolute rounded-full bg-primary-foreground",
+                  "border-2 border-primary",
+                  "shadow-sm",
                   "pointer-events-none",
                   "transition-transform duration-100",
                   isDragging && "scale-110",
@@ -4607,7 +4607,7 @@ var RangeSlider = React114__namespace.default.forwardRef(
               {
                 className: cn(
                   "absolute -top-8 px-2 py-0.5 rounded",
-                  "bg-[var(--color-foreground)] text-[var(--color-background)]",
+                  "bg-foreground text-background",
                   "text-xs font-medium whitespace-nowrap",
                   "pointer-events-none"
                 ),
@@ -4624,7 +4624,7 @@ var RangeSlider = React114__namespace.default.forwardRef(
             return /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: "absolute w-px h-1.5 bg-[var(--color-muted-foreground)]",
+                className: "absolute w-px h-1.5 bg-muted-foreground",
                 style: { left: `${tickPercent}%` }
               },
               i
@@ -4877,7 +4877,7 @@ var TypewriterText = ({
     !isComplete && /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
-        className: "inline-block w-[2px] h-[1em] bg-[var(--color-foreground)] ml-[1px] align-text-bottom animate-pulse",
+        className: "inline-block w-[2px] h-[1em] bg-foreground ml-[1px] align-text-bottom animate-pulse",
         "aria-hidden": "true"
       }
     )
@@ -4886,8 +4886,8 @@ var TypewriterText = ({
 TypewriterText.displayName = "TypewriterText";
 var backgroundClasses = {
   default: "",
-  alt: "bg-[var(--color-surface)]",
-  dark: "bg-[var(--color-foreground)] text-[var(--color-background)]",
+  alt: "bg-surface",
+  dark: "bg-foreground text-background",
   gradient: [
     "bg-gradient-to-b",
     "from-[var(--color-primary)]/5",
@@ -5991,9 +5991,9 @@ var ErrorState = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mb-4 rounded-[var(--radius-full)] bg-[var(--color-error)]/10 p-3", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.AlertCircle, { className: "h-8 w-8 text-[var(--color-error)]" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-medium text-[var(--color-foreground)]", children: resolvedTitle }),
-        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "mt-1 text-[var(--color-muted-foreground)] max-w-sm", children: resolvedMessage }),
+        /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mb-4 rounded-full bg-error/10 p-3", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.AlertCircle, { className: "h-8 w-8 text-error" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-medium text-foreground", children: resolvedTitle }),
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "mt-1 text-muted-foreground max-w-sm", children: resolvedMessage }),
         (onRetry || retryEvent) && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", className: "mt-4", onClick: handleRetry, children: t("error.retry") })
       ]
     }
@@ -6041,7 +6041,7 @@ var ErrorBoundary = class extends React114__namespace.default.Component {
   }
 };
 __publicField(ErrorBoundary, "displayName", "ErrorBoundary");
-var pulseClass = "animate-pulse bg-[var(--color-muted)]/60 rounded";
+var pulseClass = "animate-pulse bg-muted/60 rounded";
 function SkeletonLine({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn(pulseClass, "h-4", className) });
 }
@@ -6055,20 +6055,20 @@ function HeaderSkeleton({ className }) {
       /* @__PURE__ */ jsxRuntime.jsx(SkeletonLine, { className: "w-64" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-9 w-24 rounded-[var(--radius-md)]" }),
-      /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-9 w-32 rounded-[var(--radius-md)]" })
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-9 w-24 rounded-md" }),
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-9 w-32 rounded-md" })
     ] })
   ] });
 }
 function TableSkeleton({ rows = 5, columns = 4, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", className: cn("border border-[var(--color-border)] rounded-[var(--radius-lg)] overflow-hidden", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(HStack, { className: "px-4 py-3 bg-[var(--color-muted)]/30 border-b border-[var(--color-border)]", children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-4 flex-1 mx-2" }, i)) }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", className: cn("border border-border rounded-lg overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(HStack, { className: "px-4 py-3 bg-muted/30 border-b border-border", children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-4 flex-1 mx-2" }, i)) }),
     Array.from({ length: rows }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(
       HStack,
       {
         className: cn(
           "px-4 py-3",
-          rowIdx < rows - 1 && "border-b border-[var(--color-border)]"
+          rowIdx < rows - 1 && "border-b border-border"
         ),
         children: Array.from({ length: columns }).map((_2, colIdx) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonLine, { className: "flex-1 mx-2" }, colIdx))
       },
@@ -6081,11 +6081,11 @@ function FormSkeleton({ fields = 4, className }) {
     /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-6 w-40" }),
     Array.from({ length: fields }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
       /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-4 w-24" }),
-      /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-10 w-full rounded-[var(--radius-md)]" })
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-10 w-full rounded-md" })
     ] }, i)),
     /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", className: "justify-end pt-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-10 w-20 rounded-[var(--radius-md)]" }),
-      /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-10 w-24 rounded-[var(--radius-md)]" })
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-10 w-20 rounded-md" }),
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-10 w-24 rounded-md" })
     ] })
   ] });
 }
@@ -6095,7 +6095,7 @@ function CardSkeleton({ className }) {
     {
       gap: "md",
       className: cn(
-        "p-5 border border-[var(--color-border)] rounded-[var(--radius-lg)]",
+        "p-5 border border-border rounded-lg",
         className
       ),
       children: [
@@ -6225,16 +6225,16 @@ function isPortalSlot(slot) {
 }
 React114.createContext(null);
 var variantBorderClasses = {
-  info: "border-[var(--color-info)]",
-  success: "border-[var(--color-success)]",
-  warning: "border-[var(--color-warning)]",
-  error: "border-[var(--color-error)]"
+  info: "border-info",
+  success: "border-success",
+  warning: "border-warning",
+  error: "border-error"
 };
 var variantIconColors = {
-  info: "text-[var(--color-info)]",
-  success: "text-[var(--color-success)]",
-  warning: "text-[var(--color-warning)]",
-  error: "text-[var(--color-error)]"
+  info: "text-info",
+  success: "text-success",
+  warning: "text-warning",
+  error: "text-error"
 };
 var iconMap3 = {
   info: LucideIcons.Info,
@@ -6291,8 +6291,8 @@ var Alert = ({
             type: "button",
             onClick: handleDismiss,
             className: cn(
-              "flex-shrink-0 p-1 transition-colors rounded-[var(--radius-sm)]",
-              "hover:bg-[var(--color-muted)]"
+              "flex-shrink-0 p-1 transition-colors rounded-sm",
+              "hover:bg-muted"
             ),
             "aria-label": "Dismiss alert",
             children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: LucideIcons.X, size: "sm" })
@@ -6310,10 +6310,10 @@ var positionClasses = {
   right: "left-full top-1/2 -translate-y-1/2 ml-2"
 };
 var arrowClasses = {
-  top: "top-full left-1/2 -translate-x-1/2 border-t-[var(--color-primary)] border-l-transparent border-r-transparent border-b-transparent",
-  bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-[var(--color-primary)] border-l-transparent border-r-transparent border-t-transparent",
-  left: "left-full top-1/2 -translate-y-1/2 border-l-[var(--color-primary)] border-t-transparent border-b-transparent border-r-transparent",
-  right: "right-full top-1/2 -translate-y-1/2 border-r-[var(--color-primary)] border-t-transparent border-b-transparent border-l-transparent"
+  top: "top-full left-1/2 -translate-x-1/2 border-t-primary border-l-transparent border-r-transparent border-b-transparent",
+  bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-primary border-l-transparent border-r-transparent border-t-transparent",
+  left: "left-full top-1/2 -translate-y-1/2 border-l-primary border-t-transparent border-b-transparent border-r-transparent",
+  right: "right-full top-1/2 -translate-y-1/2 border-r-primary border-t-transparent border-b-transparent border-l-transparent"
 };
 var Tooltip = ({
   content,
@@ -6377,8 +6377,8 @@ var Tooltip = ({
       ref: tooltipRef,
       className: cn(
         "fixed z-50 px-3 py-2 max-w-xs",
-        "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-        "shadow-[var(--shadow-sm)] rounded-[var(--radius-sm)]",
+        "bg-primary text-primary-foreground",
+        "shadow-sm rounded-sm",
         "text-sm pointer-events-none",
         "break-words whitespace-normal",
         "h-auto min-h-fit",
@@ -6392,7 +6392,7 @@ var Tooltip = ({
       },
       role: "tooltip",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full break-words whitespace-normal h-auto", children: typeof content === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-[var(--color-primary-foreground)] break-words whitespace-normal", children: content }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "break-words whitespace-normal", children: content }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full break-words whitespace-normal h-auto", children: typeof content === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-primary-foreground break-words whitespace-normal", children: content }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "break-words whitespace-normal", children: content }) }),
         showArrow && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -6493,7 +6493,7 @@ var Popover = ({
         ref: popoverRef,
         className: cn(
           "fixed z-50 p-4",
-          "bg-[var(--color-card)] border-2 border-[var(--color-border)] shadow-[var(--shadow-lg)]",
+          "bg-card border-2 border-border shadow-lg",
           positionClasses2[position],
           className
         ),
@@ -6591,10 +6591,10 @@ var Menu = ({
     }
   );
   const menuContainerStyles = cn(
-    "bg-[var(--color-card)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-[var(--shadow-main)]",
-    "rounded-[var(--radius-sm)]",
+    "bg-card",
+    "border-[length:var(--border-width)] border-border",
+    "shadow",
+    "rounded-sm",
     "min-w-[200px] py-1"
   );
   const renderMenuItem = (item, hasSubMenu, index) => {
@@ -6611,11 +6611,11 @@ var Menu = ({
         className: cn(
           "w-full flex items-center justify-between gap-3 px-4 py-2 text-left",
           "text-sm transition-colors",
-          "hover:bg-[var(--color-muted)]",
-          "focus:outline-none focus:bg-[var(--color-muted)]",
+          "hover:bg-muted",
+          "focus:outline-none focus:bg-muted",
           "disabled:opacity-50 disabled:cursor-not-allowed",
           item.disabled && "cursor-not-allowed",
-          isDanger && "text-[var(--color-error)] hover:bg-[var(--color-error)]/10"
+          isDanger && "text-error hover:bg-error/10"
         ),
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [
           item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: item.icon, size: "sm", className: "flex-shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: item.icon, size: "sm", className: "flex-shrink-0" })),
@@ -6740,7 +6740,7 @@ var Accordion = ({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", className), children: normalizedItems.map((item, index) => {
     const isOpen = openItemsSet.has(item.id);
     const isDisabled = item.disabled;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: index > 0 ? "mt-2" : "", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-2 border-[var(--color-border)] overflow-hidden", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: index > 0 ? "mt-2" : "", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-2 border-border overflow-hidden", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
@@ -6749,12 +6749,12 @@ var Accordion = ({
           disabled: isDisabled,
           className: cn(
             "w-full flex items-center justify-between px-4 py-3",
-            "bg-[var(--color-card)]",
-            "hover:bg-[var(--color-muted)]",
+            "bg-card",
+            "hover:bg-muted",
             "transition-colors duration-200",
-            "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)] focus:ring-inset",
+            "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-inset",
             "disabled:opacity-50 disabled:cursor-not-allowed",
-            isOpen && "bg-[var(--color-muted)] font-bold"
+            isOpen && "bg-muted font-bold"
           ),
           "aria-expanded": isOpen,
           "aria-controls": `accordion-content-${item.id}`,
@@ -6778,7 +6778,7 @@ var Accordion = ({
         "div",
         {
           id: `accordion-content-${item.id}`,
-          className: "px-4 py-3 bg-[var(--color-card)] border-t-2 border-[var(--color-border)]",
+          className: "px-4 py-3 bg-card border-t-2 border-border",
           children: item.content
         }
       )
@@ -6931,7 +6931,7 @@ var FloatingActionButton = ({
         size: "lg",
         icon: resolvedAction.icon,
         onClick: resolvedAction.onClick,
-        className: "rounded-[var(--radius-full)] shadow-[var(--shadow-lg)]",
+        className: "rounded-full shadow-lg",
         "aria-label": resolvedAction.label || "Action",
         children: resolvedAction.label && /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "sr-only", children: resolvedAction.label })
       }
@@ -6976,7 +6976,7 @@ var FloatingActionButton = ({
                     transitionDelay: `${index * 50}ms`
                   },
                   children: [
-                    position.includes("right") && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-[var(--color-foreground)] dark:text-[var(--color-foreground)] bg-[var(--color-card)] dark:bg-[var(--color-card)] px-2 py-1 rounded shadow-[var(--shadow-sm)] whitespace-nowrap", children: actionItem.label }),
+                    position.includes("right") && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-foreground dark:text-foreground bg-card dark:bg-card px-2 py-1 rounded shadow-sm whitespace-nowrap", children: actionItem.label }),
                     /* @__PURE__ */ jsxRuntime.jsx(
                       Button,
                       {
@@ -6988,12 +6988,12 @@ var FloatingActionButton = ({
                           if (actionItem.event) eventBus.emit(`UI:${actionItem.event}`, { actionId: actionItem.id });
                           actionItem.onClick?.();
                         },
-                        className: "rounded-[var(--radius-full)] shadow-[var(--shadow-lg)]",
+                        className: "rounded-full shadow-lg",
                         "aria-label": actionItem.label,
                         children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "sr-only", children: actionItem.label })
                       }
                     ),
-                    position.includes("left") && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-[var(--color-foreground)] dark:text-[var(--color-foreground)] bg-[var(--color-card)] dark:bg-[var(--color-card)] px-2 py-1 rounded shadow-[var(--shadow-sm)] whitespace-nowrap", children: actionItem.label })
+                    position.includes("left") && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-foreground dark:text-foreground bg-card dark:bg-card px-2 py-1 rounded shadow-sm whitespace-nowrap", children: actionItem.label })
                   ]
                 },
                 actionItem.id
@@ -7007,7 +7007,7 @@ var FloatingActionButton = ({
               size: "lg",
               icon: isExpanded ? LucideIcons.X : LucideIcons.Plus,
               onClick: handleMainClick,
-              className: "rounded-[var(--radius-full)] shadow-[var(--shadow-lg)] transition-all duration-300",
+              className: "rounded-full shadow-lg transition-all duration-300",
               "aria-label": isExpanded ? "Close actions" : "Open actions",
               "aria-expanded": isExpanded,
               children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "sr-only", children: isExpanded ? t("common.close") : t("common.open") })
@@ -7777,7 +7777,7 @@ var AuthLayout = ({
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute inset-0 bg-gradient-to-br from-primary-600/90 to-primary-800/90" }),
           /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "relative z-10", children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Link, { to: "/", className: "flex items-center gap-3", children: [
-            logo || /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-10 h-10 bg-white/20 rounded-[var(--radius-xl)] flex items-center justify-center backdrop-blur", children: /* @__PURE__ */ jsxRuntime.jsx(
+            logo || /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur", children: /* @__PURE__ */ jsxRuntime.jsx(
               Typography,
               {
                 variant: "body1",
@@ -7814,7 +7814,7 @@ var AuthLayout = ({
                 children: "Sign in to access your dashboard and manage your account."
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "mt-12 p-6 bg-white/10 rounded-[var(--radius-xl)] backdrop-blur", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "mt-12 p-6 bg-white/10 rounded-xl backdrop-blur", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 Typography,
                 {
@@ -7824,7 +7824,7 @@ var AuthLayout = ({
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs(HStack, { className: "mt-4", gap: "sm", align: "center", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-10 h-10 bg-white/20 rounded-[var(--radius-full)]" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-10 h-10 bg-white/20 rounded-full" }),
                 /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     Typography,
@@ -7846,8 +7846,8 @@ var AuthLayout = ({
               ] })
             ] })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute -bottom-32 -right-32 w-96 h-96 bg-white/5 rounded-[var(--radius-full)]" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute -top-16 -right-16 w-64 h-64 bg-white/5 rounded-[var(--radius-full)]" })
+          /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute -bottom-32 -right-32 w-96 h-96 bg-white/5 rounded-full" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute -top-16 -right-16 w-64 h-64 bg-white/5 rounded-full" })
         ]
       }
     ),
@@ -7856,11 +7856,11 @@ var AuthLayout = ({
       {
         className: cn(
           "flex-1 flex items-center justify-center p-6 sm:p-12",
-          "bg-[var(--color-background)]"
+          "bg-background"
         ),
         children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "w-full max-w-md", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "lg:hidden mb-8 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Link, { to: "/", className: "inline-flex items-center gap-3", children: [
-            logo || /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-12 h-12 bg-primary-600 rounded-[var(--radius-xl)] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+            logo || /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-12 h-12 bg-primary-600 rounded-xl flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
               Typography,
               {
                 variant: "body1",
@@ -7872,7 +7872,7 @@ var AuthLayout = ({
               Typography,
               {
                 variant: "body1",
-                className: "text-2xl font-bold text-[var(--color-foreground)]",
+                className: "text-2xl font-bold text-foreground",
                 children: appName
               }
             )
@@ -7901,13 +7901,13 @@ var LoadingState = ({
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "lg" }),
-        title && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "mt-4 text-lg font-semibold text-[var(--color-foreground)]", children: title }),
+        title && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "mt-4 text-lg font-semibold text-foreground", children: title }),
         /* @__PURE__ */ jsxRuntime.jsx(
           Typography,
           {
             variant: "small",
             className: cn(
-              "text-[var(--color-muted-foreground)]",
+              "text-muted-foreground",
               title ? "mt-2" : "mt-4"
             ),
             children: displayMessage
@@ -9042,7 +9042,7 @@ function BattleBoard({
     ]
   );
   const shakeStyle = isShaking ? { animation: "battle-shake 0.3s ease-in-out" } : {};
-  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { className: cn("battle-board relative min-h-[600px] bg-[var(--color-background)]", className), gap: "none", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { className: cn("battle-board relative min-h-[600px] bg-background", className), gap: "none", children: [
     /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
                 @keyframes battle-shake {
                     0%, 100% { transform: translate(0, 0); }
@@ -9341,7 +9341,7 @@ var MarkdownContent = React114__namespace.default.memo(
                   "blockquote",
                   {
                     ...props,
-                    className: "border-l-4 border-blue-500 pl-4 italic text-[var(--color-foreground)] my-4",
+                    className: "border-l-4 border-blue-500 pl-4 italic text-foreground my-4",
                     children
                   }
                 );
@@ -9416,7 +9416,7 @@ var CodeBlock = React114__namespace.default.memo(
                 variant: "ghost",
                 size: "sm",
                 onClick: handleCopy,
-                className: "opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity text-[var(--color-muted-foreground)] hover:text-white",
+                className: "opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity text-muted-foreground hover:text-white",
                 "aria-label": "Copy code",
                 children: copied ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Check, { size: 16, className: "text-green-400" }) : /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Copy, { size: 16 })
               }
@@ -9493,10 +9493,10 @@ function Card2({
     "div",
     {
       className: `
-        bg-[var(--color-card)]
-        border border-[var(--color-border)]
-        rounded-[var(--radius-md)] shadow-[var(--shadow-sm)]
-        ${isClickable ? "cursor-pointer hover:shadow-[var(--shadow-hover)] transition-shadow" : ""}
+        bg-card
+        border border-border
+        rounded-md shadow-sm
+        ${isClickable ? "cursor-pointer hover:shadow-lg transition-shadow" : ""}
         ${className}
       `,
       onClick: isClickable ? handleClick : void 0,
@@ -9520,11 +9520,11 @@ function Card2({
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
           (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3", children: [
-            title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-[var(--color-card-foreground)]", children: title }),
-            subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[var(--color-muted-foreground)] mt-1", children: subtitle })
+            title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-card-foreground", children: title }),
+            subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-1", children: subtitle })
           ] }),
-          children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[var(--color-card-foreground)]", children }),
-          actions && actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 mt-4 pt-4 border-t border-[var(--color-border)]", children: actions.map((action2, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-card-foreground", children }),
+          actions && actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 mt-4 pt-4 border-t border-border", children: actions.map((action2, index) => /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               onClick: (e) => {
@@ -9534,9 +9534,9 @@ function Card2({
               },
               disabled: action2.disabled,
               className: `
-                  px-3 py-1.5 text-sm font-medium rounded-[var(--radius-sm)]
+                  px-3 py-1.5 text-sm font-medium rounded-sm
                   transition-colors
-                  ${action2.variant === "primary" ? "bg-[var(--color-primary)] text-[var(--color-primary-foreground)] hover:bg-[var(--color-primary-hover)] disabled:opacity-50" : action2.variant === "danger" ? "bg-[var(--color-error)] text-[var(--color-error-foreground)] hover:opacity-90 disabled:opacity-50" : "bg-[var(--color-muted)] text-[var(--color-foreground)] hover:bg-[var(--color-surface-hover)]"}
+                  ${action2.variant === "primary" ? "bg-primary text-primary-foreground hover:bg-primary-hover disabled:opacity-50" : action2.variant === "danger" ? "bg-error text-error-foreground hover:opacity-90 disabled:opacity-50" : "bg-muted text-foreground hover:bg-[var(--color-surface-hover)]"}
                   disabled:cursor-not-allowed
                 `,
               children: action2.label
@@ -9561,7 +9561,7 @@ var QuizBlock = ({
       /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: LucideIcons.HelpCircle, size: "sm", className: "text-blue-500 mt-0.5 shrink-0" }),
       /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", className: "font-medium", children: question })
     ] }),
-    revealed ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "pl-7 pt-2 border-t border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", className: "text-[var(--color-muted-foreground)]", children: answer }) }) : null,
+    revealed ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "pl-7 pt-2 border-t border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", className: "text-muted-foreground", children: answer }) }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(
       Button,
       {
@@ -11199,7 +11199,7 @@ var BookCoverPage = ({
             Typography,
             {
               variant: "h2",
-              className: "text-xl text-[var(--color-muted-foreground)]",
+              className: "text-xl text-muted-foreground",
               children: subtitle
             }
           ),
@@ -11207,7 +11207,7 @@ var BookCoverPage = ({
             Typography,
             {
               variant: "body",
-              className: "text-[var(--color-muted-foreground)] mt-4",
+              className: "text-muted-foreground mt-4",
               children: author
             }
           )
@@ -11243,7 +11243,7 @@ var BookNavBar = ({
     Box,
     {
       className: cn(
-        "sticky bottom-0 bg-[var(--color-background)] border-t border-[var(--color-border)] print:hidden z-10",
+        "sticky bottom-0 bg-background border-t border-border print:hidden z-10",
         className
       ),
       style: { direction },
@@ -11275,7 +11275,7 @@ var BookNavBar = ({
             Typography,
             {
               variant: "caption",
-              className: "text-center block truncate text-[var(--color-muted-foreground)]",
+              className: "text-center block truncate text-muted-foreground",
               children: chapterTitle
             }
           ),
@@ -11409,15 +11409,15 @@ var EmptyState = ({
           Box,
           {
             className: cn(
-              "mb-4 rounded-[var(--radius-full)] p-3",
-              isDestructive ? "bg-[var(--color-error)]/10" : isSuccess ? "bg-[var(--color-success)]/10" : "bg-[var(--color-muted)]"
+              "mb-4 rounded-full p-3",
+              isDestructive ? "bg-error/10" : isSuccess ? "bg-success/10" : "bg-muted"
             ),
             children: /* @__PURE__ */ jsxRuntime.jsx(
               Icon3,
               {
                 className: cn(
                   "h-8 w-8",
-                  isDestructive ? "text-[var(--color-error)]" : isSuccess ? "text-[var(--color-success)]" : "text-[var(--color-muted-foreground)]"
+                  isDestructive ? "text-error" : isSuccess ? "text-success" : "text-muted-foreground"
                 )
               }
             )
@@ -11429,12 +11429,12 @@ var EmptyState = ({
             variant: "h3",
             className: cn(
               "text-lg font-medium",
-              isDestructive ? "text-[var(--color-error)]" : isSuccess ? "text-[var(--color-success)]" : "text-[var(--color-foreground)]"
+              isDestructive ? "text-error" : isSuccess ? "text-success" : "text-foreground"
             ),
             children: displayText
           }
         ),
-        description && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "mt-1 text-[var(--color-muted-foreground)] max-w-sm", children: description }),
+        description && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "mt-1 text-muted-foreground max-w-sm", children: description }),
         actionLabel && (onAction || actionEvent) && /* @__PURE__ */ jsxRuntime.jsx(
           Button,
           {
@@ -11583,7 +11583,7 @@ var BookViewer = ({
   const currentChapterId = currentPage >= 2 ? chapters[currentPage - 2]?.id : void 0;
   const currentChapterTitle = currentPage >= 2 ? chapters[currentPage - 2]?.title : void 0;
   if (!book) return /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { message: t("book.noData") });
-  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { className: cn("relative h-full overflow-hidden bg-[var(--color-background)]", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { className: cn("relative h-full overflow-hidden bg-background", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       Box,
       {
@@ -11921,7 +11921,7 @@ var Breadcrumb = ({
               href: item.href || item.path,
               className: cn(
                 "flex items-center gap-1.5 transition-colors",
-                isLast ? "text-[var(--color-foreground)] font-bold" : "text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]"
+                isLast ? "text-foreground font-bold" : "text-muted-foreground hover:text-foreground"
               ),
               "aria-current": isLast ? "page" : void 0,
               children: [
@@ -11946,8 +11946,8 @@ var Breadcrumb = ({
               },
               className: cn(
                 "flex items-center gap-1.5 transition-colors",
-                "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)] focus:ring-offset-2",
-                isLast ? "text-[var(--color-foreground)] font-bold cursor-default" : "text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]"
+                "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                isLast ? "text-foreground font-bold cursor-default" : "text-muted-foreground hover:text-foreground"
               ),
               "aria-current": isLast ? "page" : void 0,
               disabled: isLast,
@@ -11969,7 +11969,7 @@ var Breadcrumb = ({
             {
               icon: separator,
               size: "sm",
-              className: "text-[var(--color-muted-foreground)]"
+              className: "text-muted-foreground"
             }
           )
         ] }, index);
@@ -12047,13 +12047,13 @@ function BuilderBoard({
         backgroundPosition: "center"
       },
       children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "lg", className: "p-4", children: [
-        entity.headerImage && !headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 rounded-lg bg-gradient-to-br from-[var(--color-muted)] to-[var(--color-accent)] opacity-60" }) : null,
+        entity.headerImage && !headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 rounded-lg bg-gradient-to-br from-muted to-accent opacity-60" }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", weight: "bold", children: entity.title }),
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", children: entity.description })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "bold", className: "uppercase tracking-wider text-[var(--color-muted-foreground)]", children: t("builder.components") }),
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "bold", className: "uppercase tracking-wider text-muted-foreground", children: t("builder.components") }),
           /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", className: "flex-wrap", children: [
             availableComponents.map((comp) => /* @__PURE__ */ jsxRuntime.jsxs(
               Button,
@@ -12072,11 +12072,11 @@ function BuilderBoard({
               },
               comp.id
             )),
-            availableComponents.length === 0 && !submitted && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-[var(--color-muted-foreground)]", children: t("builder.allPlaced") })
+            availableComponents.length === 0 && !submitted && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-muted-foreground", children: t("builder.allPlaced") })
           ] })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "bold", className: "uppercase tracking-wider text-[var(--color-muted-foreground)]", children: t("builder.blueprint") }),
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "bold", className: "uppercase tracking-wider text-muted-foreground", children: t("builder.blueprint") }),
           /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "sm", children: slots.map((slot) => {
             const placedComp = placements[slot.id] ? getComponentById(placements[slot.id]) : null;
             const result = results.find((r) => r.slot.id === slot.id);
@@ -12085,12 +12085,12 @@ function BuilderBoard({
               {
                 gap: "sm",
                 align: "center",
-                className: `p-3 border-2 rounded ${result ? result.correct ? "border-green-500" : "border-red-500" : selectedComponent ? "border-dashed border-[var(--color-foreground)] cursor-pointer" : "border-[var(--color-border)]"}`,
+                className: `p-3 border-2 rounded ${result ? result.correct ? "border-green-500" : "border-red-500" : selectedComponent ? "border-dashed border-foreground cursor-pointer" : "border-border"}`,
                 onClick: () => handlePlaceComponent(slot.id),
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", className: "flex-1", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", weight: "medium", children: slot.label }),
-                    slot.description && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-[var(--color-muted-foreground)]", children: slot.description })
+                    slot.description && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-muted-foreground", children: slot.description })
                   ] }),
                   placedComp ? /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs(Badge, { size: "sm", onClick: () => handleRemoveFromSlot(slot.id), children: [
@@ -12101,7 +12101,7 @@ function BuilderBoard({
                       placedComp.label
                     ] }),
                     result && /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: result.correct ? LucideIcons.CheckCircle : LucideIcons.XCircle, size: "sm", className: result.correct ? "text-green-600" : "text-red-600" })
-                  ] }) : /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-[var(--color-muted-foreground)]", children: t("builder.empty") })
+                  ] }) : /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-muted-foreground", children: t("builder.empty") })
                 ]
               },
               slot.id
@@ -12350,7 +12350,7 @@ function CalendarGrid({
         onPointerCancel: swipe.onPointerCancel
       } : {},
       children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "min-w-[800px]", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "grid grid-cols-8 border-b border-[var(--color-border)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "grid grid-cols-8 border-b border-border", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-2" }),
           weekDays.map((day) => {
             const isToday = day.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
@@ -12358,7 +12358,7 @@ function CalendarGrid({
             return /* @__PURE__ */ jsxRuntime.jsxs(
               Box,
               {
-                className: "border-l border-[var(--color-border)]",
+                className: "border-l border-border",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     DayCell,
@@ -12378,13 +12378,13 @@ function CalendarGrid({
         /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "max-h-[500px] overflow-y-auto", children: resolvedTimeSlots.map((time) => /* @__PURE__ */ jsxRuntime.jsxs(
           Box,
           {
-            className: "grid grid-cols-8 border-b border-[var(--color-border)]",
+            className: "grid grid-cols-8 border-b border-border",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-2 text-right pr-3", children: /* @__PURE__ */ jsxRuntime.jsx(
                 Typography,
                 {
                   variant: "small",
-                  className: "text-[var(--color-muted-foreground)]",
+                  className: "text-muted-foreground",
                   children: time
                 }
               ) }),
@@ -12400,7 +12400,7 @@ function CalendarGrid({
                     isOccupied: slotEvents.length > 0,
                     onClick: () => handleSlotClick(day, time),
                     className: cn(
-                      "border-l border-[var(--color-border)]",
+                      "border-l border-border",
                       isToday && "bg-blue-50/30"
                     ),
                     ...longPressEvent ? {
@@ -13951,16 +13951,16 @@ var CardGrid = ({
       return children;
     }
     if (isLoading) {
-      return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "col-span-full text-center py-8 text-[var(--color-muted-foreground)]", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", color: "secondary", children: "Loading items..." }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "col-span-full text-center py-8 text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", color: "secondary", children: "Loading items..." }) });
     }
     if (error) {
-      return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "col-span-full text-center py-8 text-[var(--color-error)]", children: /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "body", color: "error", children: [
+      return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "col-span-full text-center py-8 text-error", children: /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "body", color: "error", children: [
         "Error loading items: ",
         error.message
       ] }) });
     }
     if (normalizedData.length === 0) {
-      return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "col-span-full text-center py-12 text-[var(--color-muted-foreground)]", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", color: "secondary", children: t("empty.noItems") || "No items found" }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "col-span-full text-center py-12 text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", color: "secondary", children: t("empty.noItems") || "No items found" }) });
     }
     return normalizedData.map((item, index) => {
       const itemData = item;
@@ -13972,9 +13972,9 @@ var CardGrid = ({
         {
           "data-entity-row": true,
           className: cn(
-            "bg-[var(--color-card)] rounded-[var(--radius-lg)] border border-[var(--color-border)]",
-            "shadow-[var(--shadow-sm)] hover:shadow-[var(--shadow-hover)]",
-            "cursor-pointer hover:border-[var(--color-primary)] transition-all",
+            "bg-card rounded-lg border border-border",
+            "shadow-sm hover:shadow-lg",
+            "cursor-pointer hover:border-primary transition-all",
             "flex flex-col"
           ),
           action: "VIEW",
@@ -13983,7 +13983,7 @@ var CardGrid = ({
             imageField && (() => {
               const imgUrl = getNestedValue(itemData, imageField);
               if (!imgUrl || typeof imgUrl !== "string") return null;
-              return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full aspect-video overflow-hidden rounded-t-[var(--radius-lg)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+              return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full aspect-video overflow-hidden rounded-t-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
                 "img",
                 {
                   src: imgUrl,
@@ -14005,7 +14005,7 @@ var CardGrid = ({
                   size: "sm",
                   onClick: handleActionClick(action, itemData),
                   "data-testid": action.event ? `action-${action.event}` : void 0,
-                  className: "text-[var(--color-error)] hover:bg-[var(--color-error)]/10 px-2",
+                  className: "text-error hover:bg-error/10 px-2",
                   children: action.label
                 },
                 actionIdx
@@ -14028,7 +14028,7 @@ var CardGrid = ({
                 /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-right truncate max-w-[60%]", children: displayValue })
               ] }, field);
             }) }) }),
-            primaryActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "px-4 py-3 mt-auto border-t border-[var(--color-border)]", children: /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "sm", className: "justify-end", children: primaryActions.map((action, actionIdx) => /* @__PURE__ */ jsxRuntime.jsx(
+            primaryActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "px-4 py-3 mt-auto border-t border-border", children: /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "sm", className: "justify-end", children: primaryActions.map((action, actionIdx) => /* @__PURE__ */ jsxRuntime.jsx(
               Button,
               {
                 variant: action.variant === "primary" ? "primary" : "ghost",
@@ -14246,10 +14246,10 @@ var Carousel = ({
             "aria-label": "Previous slide",
             className: cn(
               "rounded-full",
-              "bg-[var(--color-surface)]/80",
+              "bg-surface/80",
               "backdrop-blur-sm",
-              "shadow-[var(--shadow-sm)]",
-              "hover:bg-[var(--color-surface)]"
+              "shadow-sm",
+              "hover:bg-surface"
             ),
             children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronLeft, { className: "w-5 h-5" })
           }
@@ -14270,10 +14270,10 @@ var Carousel = ({
             "aria-label": "Next slide",
             className: cn(
               "rounded-full",
-              "bg-[var(--color-surface)]/80",
+              "bg-surface/80",
               "backdrop-blur-sm",
-              "shadow-[var(--shadow-sm)]",
-              "hover:bg-[var(--color-surface)]"
+              "shadow-sm",
+              "hover:bg-surface"
             ),
             children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronRight, { className: "w-5 h-5" })
           }
@@ -14391,7 +14391,7 @@ function CastleBoard({
     }),
     [hoveredTile, hoveredFeature, hoveredUnit, selectedFeature, clearSelection, tileToScreen, scale]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("castle-board min-h-screen flex flex-col bg-[var(--color-background)]", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("castle-board min-h-screen flex flex-col bg-background", className), children: [
     header && header(ctx),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 overflow-hidden", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-auto p-4 relative", children: [
@@ -14414,7 +14414,7 @@ function CastleBoard({
         ),
         overlay && overlay(ctx)
       ] }),
-      sidePanel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-96 shrink-0 border-l border-[var(--color-border)] bg-[var(--color-surface)] overflow-y-auto", children: sidePanel(ctx) })
+      sidePanel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-96 shrink-0 border-l border-border bg-surface overflow-y-auto", children: sidePanel(ctx) })
     ] }),
     footer && footer(ctx)
   ] });
@@ -14459,7 +14459,7 @@ var BarChart = ({ data, height, showValues }) => {
         Box,
         {
           className: cn(
-            "w-full rounded-t-[var(--radius-sm)] transition-all duration-500 ease-out min-h-[4px]"
+            "w-full rounded-t-sm transition-all duration-500 ease-out min-h-[4px]"
           ),
           style: {
             height: `${barHeight}%`,
@@ -14547,7 +14547,7 @@ var PieChart = ({ data, height, showValues, donut = false }) => {
       /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
-          className: "w-3 h-3 rounded-[var(--radius-sm)] flex-shrink-0",
+          className: "w-3 h-3 rounded-sm flex-shrink-0",
           style: { backgroundColor: seg.color }
         }
       ),
@@ -14685,7 +14685,7 @@ var Chart = ({
       /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
-          className: "w-3 h-3 rounded-[var(--radius-full)] flex-shrink-0",
+          className: "w-3 h-3 rounded-full flex-shrink-0",
           style: { backgroundColor: s.color || CHART_COLORS[idx % CHART_COLORS.length] }
         }
       ),
@@ -14712,7 +14712,7 @@ var ChartLegend = ({
         }
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-[var(--color-muted-foreground)]", children: item.label })
+    /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground", children: item.label })
   ] }, item.label)) });
 };
 ChartLegend.displayName = "ChartLegend";
@@ -14781,13 +14781,13 @@ function ClassifierBoard({
         backgroundPosition: "center"
       },
       children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "lg", className: "p-4", children: [
-        entity.headerImage && !headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 rounded-lg bg-gradient-to-br from-[var(--color-muted)] to-[var(--color-accent)] opacity-60" }) : null,
+        entity.headerImage && !headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 rounded-lg bg-gradient-to-br from-muted to-accent opacity-60" }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", weight: "bold", children: entity.title }),
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", children: entity.description })
         ] }) }),
         unassignedItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "bold", className: "uppercase tracking-wider text-[var(--color-muted-foreground)]", children: t("classifier.itemsToSort") }),
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "bold", className: "uppercase tracking-wider text-muted-foreground", children: t("classifier.itemsToSort") }),
           /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "sm", className: "flex-wrap", children: unassignedItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(Badge, { size: "md", className: "cursor-pointer", children: [
             item.iconUrl && /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.iconUrl, alt: "", className: "w-4 h-4 object-contain inline-block" }),
             item.label
@@ -14837,7 +14837,7 @@ function ClassifierBoard({
         submitted && /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", align: "center", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: allCorrect ? LucideIcons.CheckCircle : LucideIcons.XCircle, size: "lg", className: allCorrect ? "text-green-600" : "text-red-600" }),
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", weight: "bold", children: allCorrect ? entity.successMessage ?? t("classifier.allCorrect") : `${correctCount}/${items.length} ${t("classifier.correct")}` }),
-          !allCorrect && entity.failMessage && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", className: "text-[var(--color-muted-foreground)]", children: entity.failMessage })
+          !allCorrect && entity.failMessage && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", className: "text-muted-foreground", children: entity.failMessage })
         ] }) }),
         showHint && entity.hint && /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4 border-l-4 border-l-yellow-500", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", children: entity.hint }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", justify: "center", children: [
@@ -14939,17 +14939,17 @@ var Tabs = ({
   const variantClasses2 = {
     default: [
       "border-b-[length:var(--border-width)] border-transparent",
-      "hover:border-[var(--color-muted-foreground)]",
-      "data-[active=true]:border-[var(--color-primary)]"
+      "hover:border-muted-foreground",
+      "data-[active=true]:border-primary"
     ].join(" "),
     pills: [
-      "rounded-[var(--radius-sm)]",
-      "data-[active=true]:bg-[var(--color-primary)]",
-      "data-[active=true]:text-[var(--color-primary-foreground)]"
+      "rounded-sm",
+      "data-[active=true]:bg-primary",
+      "data-[active=true]:text-primary-foreground"
     ].join(" "),
     underline: [
       "border-b-[length:var(--border-width)] border-transparent",
-      "data-[active=true]:border-[var(--color-primary)]"
+      "data-[active=true]:border-primary"
     ].join(" ")
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn("w-full", className), children: [
@@ -14959,8 +14959,8 @@ var Tabs = ({
         role: "tablist",
         className: cn(
           "flex",
-          orientation === "horizontal" ? "flex-row border-b-[length:var(--border-width)] border-[var(--color-border)]" : "flex-col border-r-[length:var(--border-width)] border-[var(--color-border)]",
-          variant === "pills" && "gap-1 p-1 bg-[var(--color-muted)] border-0 rounded-[var(--radius-md)]",
+          orientation === "horizontal" ? "flex-row border-b-[length:var(--border-width)] border-border" : "flex-col border-r-[length:var(--border-width)] border-border",
+          variant === "pills" && "gap-1 p-1 bg-muted border-0 rounded-md",
           variant === "underline" && orientation === "vertical" && "border-b-0"
         ),
         children: safeItems.map((item, index) => {
@@ -14982,10 +14982,10 @@ var Tabs = ({
               "data-active": isActive,
               className: cn(
                 "flex items-center gap-2 px-4 py-2 text-sm font-medium transition-all",
-                "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)] focus:ring-offset-2",
+                "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
                 isDisabled && "opacity-50 cursor-not-allowed",
                 variantClasses2[variant],
-                isActive ? variant === "pills" ? "text-[var(--color-primary-foreground)] font-bold" : "text-[var(--color-foreground)] font-bold" : "text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]"
+                isActive ? variant === "pills" ? "text-primary-foreground font-bold" : "text-foreground font-bold" : "text-muted-foreground hover:text-foreground"
               ),
               children: [
                 item.icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: item.icon, size: "sm" }),
@@ -15034,19 +15034,19 @@ function generateDiff(oldVal, newVal) {
 }
 var DIFF_STYLES = {
   add: {
-    bg: "bg-[var(--color-success)]/10",
+    bg: "bg-success/10",
     prefix: "+",
-    text: "text-[var(--color-success)]"
+    text: "text-success"
   },
   remove: {
-    bg: "bg-[var(--color-error)]/10",
+    bg: "bg-error/10",
     prefix: "-",
-    text: "text-[var(--color-error)]"
+    text: "text-error"
   },
   context: {
     bg: "",
     prefix: " ",
-    text: "text-[var(--color-foreground)]"
+    text: "text-foreground"
   }
 };
 var CodeViewer = ({
@@ -15130,7 +15130,7 @@ var CodeViewer = ({
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("overflow-hidden", className), children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", children: [
-    tabItems && tabItems.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "border-b border-[var(--color-border)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+    tabItems && tabItems.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "border-b border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
       Tabs,
       {
         tabs: tabItems,
@@ -15147,10 +15147,10 @@ var CodeViewer = ({
         gap: "sm",
         align: "center",
         justify: "between",
-        className: "px-4 py-2 border-b border-[var(--color-border)] bg-[var(--color-muted)]/30",
+        className: "px-4 py-2 border-b border-border bg-muted/30",
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", align: "center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: mode === "diff" ? LucideIcons.FileText : LucideIcons.Code, size: "sm", className: "text-[var(--color-muted-foreground)]" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: mode === "diff" ? LucideIcons.FileText : LucideIcons.Code, size: "sm", className: "text-muted-foreground" }),
             title && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "truncate", children: title }),
             activeLanguage && activeLanguage !== "text" && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", children: activeLanguage })
           ] }),
@@ -15162,7 +15162,7 @@ var CodeViewer = ({
                 size: "sm",
                 icon: LucideIcons.WrapText,
                 onClick: () => setWrap(!wrap),
-                className: cn(wrap && "text-[var(--color-primary)]")
+                className: cn(wrap && "text-primary")
               }
             ),
             showCopy && /* @__PURE__ */ jsxRuntime.jsx(
@@ -15172,7 +15172,7 @@ var CodeViewer = ({
                 size: "sm",
                 icon: copied ? LucideIcons.Check : LucideIcons.Copy,
                 onClick: handleCopy,
-                className: cn(copied && "text-[var(--color-success)]")
+                className: cn(copied && "text-success")
               }
             ),
             actions?.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -15192,7 +15192,7 @@ var CodeViewer = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       Box,
       {
-        className: "overflow-auto bg-[var(--color-muted)]/20",
+        className: "overflow-auto bg-muted/20",
         style: { maxHeight },
         children: diffLines ? (
           /* Diff mode */
@@ -15227,7 +15227,7 @@ var CodeViewer = ({
           }) })
         ) : (
           /* Code mode */
-          /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "none", className: "font-mono text-xs", children: lines.map((line, idx) => /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "none", align: "start", className: "px-4 py-0.5 hover:bg-[var(--color-muted)]/50", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "none", className: "font-mono text-xs", children: lines.map((line, idx) => /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "none", align: "start", className: "px-4 py-0.5 hover:bg-muted/50", children: [
             showLineNumbers && /* @__PURE__ */ jsxRuntime.jsx(
               Typography,
               {
@@ -15299,7 +15299,7 @@ function CombatLog({
   const safeEvents = events2 ?? [];
   const visibleEvents = safeEvents.slice(-maxVisible);
   return /* @__PURE__ */ jsxRuntime.jsxs(Card, { variant: "default", className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Box, { padding: "sm", border: true, className: "border-b-2 border-x-0 border-t-0 border-[var(--color-border)]", children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { display: "flex", className: "items-center justify-between", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Box, { padding: "sm", border: true, className: "border-b-2 border-x-0 border-t-0 border-border", children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { display: "flex", className: "items-center justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", className: "font-bold", children: title }),
       /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "neutral", size: "sm", children: [
         safeEvents.length,
@@ -15316,7 +15316,7 @@ function CombatLog({
           display: "flex",
           padding: "xs",
           rounded: "sm",
-          className: cn("items-start gap-2 hover:bg-[var(--color-muted)] transition-colors", eventType === "death" && "opacity-60"),
+          className: cn("items-start gap-2 hover:bg-muted transition-colors", eventType === "death" && "opacity-60"),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("flex-shrink-0 mt-0.5", colorClass), children: /* @__PURE__ */ jsxRuntime.jsx(EventIcon, { className: "h-4 w-4" }) }),
             /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex-1 min-w-0", children: [
@@ -15338,26 +15338,26 @@ CombatLog.displayName = "CombatLog";
 var variantConfig = {
   danger: {
     icon: LucideIcons.Trash2,
-    iconBg: "bg-[var(--color-error)]",
-    iconColor: "text-[var(--color-error-foreground)]",
+    iconBg: "bg-error",
+    iconColor: "text-error-foreground",
     confirmVariant: "primary"
   },
   warning: {
     icon: LucideIcons.AlertTriangle,
-    iconBg: "bg-[var(--color-warning)]",
-    iconColor: "text-[var(--color-warning-foreground)]",
+    iconBg: "bg-warning",
+    iconColor: "text-warning-foreground",
     confirmVariant: "primary"
   },
   info: {
     icon: LucideIcons.Check,
-    iconBg: "bg-[var(--color-info)]",
-    iconColor: "text-[var(--color-info-foreground)]",
+    iconBg: "bg-info",
+    iconColor: "text-info-foreground",
     confirmVariant: "primary"
   },
   default: {
     icon: LucideIcons.Check,
-    iconBg: "bg-[var(--color-primary)]",
-    iconColor: "text-[var(--color-primary-foreground)]",
+    iconBg: "bg-primary",
+    iconColor: "text-primary-foreground",
     confirmVariant: "primary"
   }
 };
@@ -15428,7 +15428,7 @@ var ConfirmDialog = ({
             Typography,
             {
               variant: "body2",
-              className: "text-[var(--color-muted-foreground)]",
+              className: "text-muted-foreground",
               children: resolvedMessage
             }
           ) : resolvedMessage
@@ -15506,7 +15506,7 @@ function CounterStandard({
       Typography,
       {
         variant: "h2",
-        className: "text-[var(--color-muted-foreground)]",
+        className: "text-muted-foreground",
         children: title
       }
     ),
@@ -15573,7 +15573,7 @@ function CounterFull({
       Typography,
       {
         variant: "h2",
-        className: "text-[var(--color-muted-foreground)]",
+        className: "text-muted-foreground",
         children: title
       }
     ),
@@ -15778,7 +15778,7 @@ function CustomPattern({
       {
         className: cn(
           classes,
-          "p-4 border border-dashed border-[var(--color-error)]/50 text-[var(--color-error)]"
+          "p-4 border border-dashed border-error/50 text-error"
         ),
         children: [
           "Unknown component: ",
@@ -16036,7 +16036,7 @@ var DashboardGrid = ({
         Box,
         {
           className: cn(
-            "border-2 border-[var(--color-border)] bg-[var(--color-card)]",
+            "border-2 border-border bg-card",
             colSpanStyles[cell.colSpan ?? 1],
             rowSpanStyles[cell.rowSpan ?? 1]
           ),
@@ -16066,11 +16066,11 @@ var DashboardLayout = ({
   const user = userProp || (null);
   const { t } = useTranslate();
   const handleSignOut = onSignOutProp || authSignOut;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "min-h-screen bg-[var(--color-background)] dark:bg-[var(--color-background)]", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "min-h-screen bg-background dark:bg-background", children: [
     sidebarOpen && /* @__PURE__ */ jsxRuntime.jsx(
       Box,
       {
-        className: "fixed inset-0 bg-[var(--color-foreground)]/50 dark:bg-[var(--color-foreground)]/70 z-20 lg:hidden",
+        className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20 lg:hidden",
         onClick: () => setSidebarOpen(false)
       }
     ),
@@ -16079,7 +16079,7 @@ var DashboardLayout = ({
       {
         as: "aside",
         className: cn(
-          "fixed inset-y-0 left-0 z-30 w-64 bg-[var(--color-card)] dark:bg-[var(--color-card)] border-r border-[var(--color-border)] dark:border-[var(--color-border)]",
+          "fixed inset-y-0 left-0 z-30 w-64 bg-card dark:bg-card border-r border-border dark:border-border",
           "transform transition-transform duration-200 ease-in-out lg:translate-x-0",
           sidebarOpen ? "translate-x-0" : "-translate-x-full"
         ),
@@ -16089,10 +16089,10 @@ var DashboardLayout = ({
             {
               align: "center",
               justify: "between",
-              className: "h-16 px-4 border-b border-[var(--color-border)] dark:border-[var(--color-border)]",
+              className: "h-16 px-4 border-b border-border dark:border-border",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Link, { to: "/", className: "flex items-center gap-2", children: [
-                  logo || /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-8 h-8 bg-primary-600 rounded-[var(--radius-lg)] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  logo || /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
                     Typography,
                     {
                       variant: "small",
@@ -16105,7 +16105,7 @@ var DashboardLayout = ({
                     Typography,
                     {
                       variant: "label",
-                      className: "font-semibold text-[var(--color-foreground)] dark:text-[var(--color-foreground)]",
+                      className: "font-semibold text-foreground dark:text-foreground",
                       as: "span",
                       children: appName
                     }
@@ -16115,7 +16115,7 @@ var DashboardLayout = ({
                   Button,
                   {
                     variant: "ghost",
-                    className: "lg:hidden p-2 rounded-[var(--radius-md)] hover:bg-[var(--color-muted)] dark:hover:bg-[var(--color-muted)] text-[var(--color-muted-foreground)] dark:text-[var(--color-muted-foreground)]",
+                    className: "lg:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground",
                     onClick: () => setSidebarOpen(false),
                     children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "h-5 w-5" })
                   }
@@ -16139,11 +16139,11 @@ var DashboardLayout = ({
               ))
             }
           ),
-          sidebarFooter || /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-4 border-t border-[var(--color-border)] dark:border-[var(--color-border)]", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          sidebarFooter || /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-4 border-t border-border dark:border-border", children: /* @__PURE__ */ jsxRuntime.jsxs(
             reactRouterDom.Link,
             {
               to: "/settings",
-              className: "flex items-center gap-3 px-3 py-2 text-sm text-[var(--color-muted-foreground)] dark:text-[var(--color-muted-foreground)] rounded-[var(--radius-lg)] hover:bg-[var(--color-muted)] dark:hover:bg-[var(--color-muted)]",
+              className: "flex items-center gap-3 px-3 py-2 text-sm text-muted-foreground dark:text-muted-foreground rounded-lg hover:bg-muted dark:hover:bg-muted",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Settings, { className: "h-5 w-5" }),
                 t("common.settings")
@@ -16158,7 +16158,7 @@ var DashboardLayout = ({
         Box,
         {
           as: "header",
-          className: "sticky top-0 z-20 h-16 bg-[var(--color-card)] dark:bg-[var(--color-card)] border-b border-[var(--color-border)] dark:border-[var(--color-border)]",
+          className: "sticky top-0 z-20 h-16 bg-card dark:bg-card border-b border-border dark:border-border",
           children: /* @__PURE__ */ jsxRuntime.jsxs(
             HStack,
             {
@@ -16170,14 +16170,14 @@ var DashboardLayout = ({
                   Button,
                   {
                     variant: "ghost",
-                    className: "lg:hidden p-2 rounded-[var(--radius-md)] hover:bg-[var(--color-muted)] dark:hover:bg-[var(--color-muted)] text-[var(--color-muted-foreground)] dark:text-[var(--color-muted-foreground)] touch-manipulation min-h-[44px] min-w-[44px] flex items-center justify-center",
+                    className: "lg:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground touch-manipulation min-h-[44px] min-w-[44px] flex items-center justify-center",
                     onClick: () => setSidebarOpen(true),
                     "aria-label": "Open sidebar",
                     children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Menu, { className: "h-5 w-5" })
                   }
                 ),
                 showSearch && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "hidden sm:block flex-1 max-w-md", children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "relative", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--color-muted-foreground)] dark:text-[var(--color-muted-foreground)]" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground dark:text-muted-foreground" }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     Input,
                     {
@@ -16194,14 +16194,14 @@ var DashboardLayout = ({
                     Button,
                     {
                       variant: "ghost",
-                      className: "relative p-2 rounded-[var(--radius-full)] hover:bg-[var(--color-muted)] dark:hover:bg-[var(--color-muted)]",
+                      className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
                       children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Bell, { className: "h-5 w-5 text-[var(--color-muted-foreground)] dark:text-[var(--color-muted-foreground)]" }),
+                        /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Bell, { className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
                         /* @__PURE__ */ jsxRuntime.jsx(
                           Box,
                           {
                             as: "span",
-                            className: "absolute top-1 right-1 w-2 h-2 bg-[var(--color-error)] rounded-[var(--radius-full)]"
+                            className: "absolute top-1 right-1 w-2 h-2 bg-error rounded-full"
                           }
                         )
                       ]
@@ -16212,7 +16212,7 @@ var DashboardLayout = ({
                       Button,
                       {
                         variant: "ghost",
-                        className: "flex items-center gap-2 p-2 rounded-[var(--radius-lg)] hover:bg-[var(--color-muted)] dark:hover:bg-[var(--color-muted)]",
+                        className: "flex items-center gap-2 p-2 rounded-lg hover:bg-muted dark:hover:bg-muted",
                         onClick: () => setUserMenuOpen(!userMenuOpen),
                         children: [
                           /* @__PURE__ */ jsxRuntime.jsx(
@@ -16228,12 +16228,12 @@ var DashboardLayout = ({
                             Typography,
                             {
                               variant: "small",
-                              className: "hidden sm:block text-sm font-medium text-[var(--color-foreground)] dark:text-[var(--color-foreground)]",
+                              className: "hidden sm:block text-sm font-medium text-foreground dark:text-foreground",
                               as: "span",
                               children: user.name
                             }
                           ),
-                          /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { className: "hidden sm:block h-4 w-4 text-[var(--color-muted-foreground)] dark:text-[var(--color-muted-foreground)]" })
+                          /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { className: "hidden sm:block h-4 w-4 text-muted-foreground dark:text-muted-foreground" })
                         ]
                       }
                     ),
@@ -16245,13 +16245,13 @@ var DashboardLayout = ({
                           onClick: () => setUserMenuOpen(false)
                         }
                       ),
-                      /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "absolute right-0 mt-2 w-48 bg-[var(--color-card)] dark:bg-[var(--color-card)] rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)] border border-[var(--color-border)] dark:border-[var(--color-border)] py-1 z-30", children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "px-4 py-2 border-b border-[var(--color-border)] dark:border-[var(--color-border)]", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "absolute right-0 mt-2 w-48 bg-card dark:bg-card rounded-lg shadow-lg border border-border dark:border-border py-1 z-30", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "px-4 py-2 border-b border-border dark:border-border", children: [
                           /* @__PURE__ */ jsxRuntime.jsx(
                             Typography,
                             {
                               variant: "small",
-                              className: "text-sm font-medium text-[var(--color-foreground)] dark:text-[var(--color-foreground)]",
+                              className: "text-sm font-medium text-foreground dark:text-foreground",
                               as: "p",
                               children: user.name
                             }
@@ -16260,7 +16260,7 @@ var DashboardLayout = ({
                             Typography,
                             {
                               variant: "caption",
-                              className: "text-xs text-[var(--color-muted-foreground)] dark:text-[var(--color-muted-foreground)]",
+                              className: "text-xs text-muted-foreground dark:text-muted-foreground",
                               as: "p",
                               children: user.email
                             }
@@ -16270,7 +16270,7 @@ var DashboardLayout = ({
                           reactRouterDom.Link,
                           {
                             to: "/settings",
-                            className: "flex items-center gap-2 px-4 py-2 text-sm text-[var(--color-foreground)] dark:text-[var(--color-foreground)] hover:bg-[var(--color-muted)] dark:hover:bg-[var(--color-muted)]",
+                            className: "flex items-center gap-2 px-4 py-2 text-sm text-foreground dark:text-foreground hover:bg-muted dark:hover:bg-muted",
                             children: [
                               /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Settings, { className: "h-4 w-4" }),
                               t("common.settings")
@@ -16285,7 +16285,7 @@ var DashboardLayout = ({
                               setUserMenuOpen(false);
                               handleSignOut?.();
                             },
-                            className: "w-full flex items-center gap-2 px-4 py-2 text-sm text-[var(--color-error)] dark:text-[var(--color-error)] hover:bg-[var(--color-error)]/10 dark:hover:bg-[var(--color-error)]/20",
+                            className: "w-full flex items-center gap-2 px-4 py-2 text-sm text-error dark:text-error hover:bg-error/10 dark:hover:bg-error/20",
                             children: [
                               /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.LogOut, { className: "h-4 w-4" }),
                               t("auth.signOut")
@@ -16313,15 +16313,15 @@ var NavLink = ({
   const isActive = currentPath === item.href || currentPath.startsWith(item.href + "/");
   const iconClassName = cn(
     "h-5 w-5",
-    isActive ? "text-[var(--color-primary-foreground)]" : "text-[var(--color-muted-foreground)]"
+    isActive ? "text-primary-foreground" : "text-muted-foreground"
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactRouterDom.Link,
     {
       to: item.href,
       className: cn(
-        "flex items-center gap-3 px-3 py-2 rounded-[var(--radius-lg)] text-sm font-medium transition-colors",
-        isActive ? "bg-[var(--color-primary)] text-[var(--color-primary-foreground)] shadow-[var(--shadow-sm)]" : "text-[var(--color-muted-foreground)] hover:bg-[var(--color-muted)] hover:text-[var(--color-foreground)]"
+        "flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors",
+        isActive ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground"
       ),
       children: [
         item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: item.icon, className: iconClassName }) : /* @__PURE__ */ jsxRuntime.jsx(item.icon, { className: iconClassName })),
@@ -16464,14 +16464,14 @@ var DataGrid = ({
   const allSelected = allIds.length > 0 && allIds.every((id) => selectedIds.has(id));
   const someSelected = selectedIds.size > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
-    selectable && someSelected && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", className: "items-center px-2 py-2 bg-[var(--color-muted)] rounded-[var(--radius-sm)]", children: [
+    selectable && someSelected && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", className: "items-center px-2 py-2 bg-muted rounded-sm", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
           type: "checkbox",
           checked: allSelected,
           onChange: toggleAll,
-          className: "w-4 h-4 accent-[var(--color-primary)]",
+          className: "w-4 h-4 accent-primary",
           "aria-label": "Select all"
         }
       ),
@@ -16497,12 +16497,12 @@ var DataGrid = ({
                 "data-entity-row": true,
                 "data-entity-id": id,
                 className: cn(
-                  "bg-[var(--color-card)] rounded-[var(--radius-lg)]",
-                  "border border-[var(--color-border)]",
-                  "shadow-[var(--shadow-sm)] hover:shadow-[var(--shadow-hover)]",
-                  "hover:border-[var(--color-primary)] transition-all",
+                  "bg-card rounded-lg",
+                  "border border-border",
+                  "shadow-sm hover:shadow-lg",
+                  "hover:border-primary transition-all",
                   "p-4",
-                  isSelected && "ring-2 ring-[var(--color-primary)] border-[var(--color-primary)]"
+                  isSelected && "ring-2 ring-primary border-primary"
                 ),
                 children: children(itemData, index)
               },
@@ -16516,18 +16516,18 @@ var DataGrid = ({
               "data-entity-row": true,
               "data-entity-id": id,
               className: cn(
-                "bg-[var(--color-card)] rounded-[var(--radius-lg)]",
-                "border border-[var(--color-border)]",
-                "shadow-[var(--shadow-sm)] hover:shadow-[var(--shadow-hover)]",
-                "hover:border-[var(--color-primary)] transition-all",
+                "bg-card rounded-lg",
+                "border border-border",
+                "shadow-sm hover:shadow-lg",
+                "hover:border-primary transition-all",
                 "flex flex-col",
-                isSelected && "ring-2 ring-[var(--color-primary)] border-[var(--color-primary)]"
+                isSelected && "ring-2 ring-primary border-primary"
               ),
               children: [
                 imageField && (() => {
                   const imgUrl = getNestedValue(itemData, imageField);
                   if (!imgUrl || typeof imgUrl !== "string") return null;
-                  return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full aspect-video overflow-hidden rounded-t-[var(--radius-lg)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full aspect-video overflow-hidden rounded-t-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
                     "img",
                     {
                       src: imgUrl,
@@ -16545,13 +16545,13 @@ var DataGrid = ({
                       checked: isSelected,
                       onChange: () => toggleSelection(id),
                       onClick: (e) => e.stopPropagation(),
-                      className: "w-4 h-4 mt-1 flex-shrink-0 accent-[var(--color-primary)]",
+                      className: "w-4 h-4 mt-1 flex-shrink-0 accent-primary",
                       "aria-label": `Select ${titleValue !== void 0 ? String(titleValue) : "item"}`
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", className: "flex-1 min-w-0", children: [
                     titleValue !== void 0 && titleValue !== null && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "items-center", children: [
-                      titleField?.icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: titleField.icon, size: "sm", className: "text-[var(--color-primary)] flex-shrink-0" }),
+                      titleField?.icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: titleField.icon, size: "sm", className: "text-primary flex-shrink-0" }),
                       /* @__PURE__ */ jsxRuntime.jsx(
                         Typography,
                         {
@@ -16577,7 +16577,7 @@ var DataGrid = ({
                       size: "sm",
                       onClick: handleActionClick(action, itemData),
                       "data-testid": `action-${action.event}`,
-                      className: "text-[var(--color-error)] hover:bg-[var(--color-error)]/10 px-2",
+                      className: "text-error hover:bg-error/10 px-2",
                       children: [
                         action.icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: action.icon, size: "xs" }),
                         action.label
@@ -16592,7 +16592,7 @@ var DataGrid = ({
                   if (field.format === "boolean") {
                     return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", className: "justify-between items-center", children: [
                       /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "items-center", children: [
-                        field.icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: field.icon, size: "xs", className: "text-[var(--color-muted-foreground)]" }),
+                        field.icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: field.icon, size: "xs", className: "text-muted-foreground" }),
                         /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "secondary", children: field.label ?? fieldLabel2(field.name) })
                       ] }),
                       /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: value ? "success" : "neutral", children: value ? t("common.yes") || "Yes" : t("common.no") || "No" })
@@ -16600,7 +16600,7 @@ var DataGrid = ({
                   }
                   return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", className: "justify-between items-center", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "items-center", children: [
-                      field.icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: field.icon, size: "xs", className: "text-[var(--color-muted-foreground)]" }),
+                      field.icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: field.icon, size: "xs", className: "text-muted-foreground" }),
                       /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "secondary", children: field.label ?? fieldLabel2(field.name) })
                     ] }),
                     /* @__PURE__ */ jsxRuntime.jsx(
@@ -16613,7 +16613,7 @@ var DataGrid = ({
                     )
                   ] }, field.name);
                 }) }) }),
-                primaryActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "px-4 py-3 mt-auto border-t border-[var(--color-border)]", children: /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "sm", className: "justify-end", children: primaryActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+                primaryActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "px-4 py-3 mt-auto border-t border-border", children: /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "sm", className: "justify-end", children: primaryActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
                   Button,
                   {
                     variant: action.variant === "primary" ? "primary" : "ghost",
@@ -16793,7 +16793,7 @@ var DataList = ({
               {
                 className: cn(
                   "max-w-[75%] px-4 py-2",
-                  isSent ? "bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-2xl rounded-br-sm" : "bg-[var(--color-muted)] text-[var(--color-foreground)] rounded-2xl rounded-bl-sm"
+                  isSent ? "bg-primary text-primary-foreground rounded-2xl rounded-br-sm" : "bg-muted text-foreground rounded-2xl rounded-bl-sm"
                 ),
                 children: [
                   !isSent && senderField && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "font-semibold mb-0.5", children: sender }),
@@ -16804,7 +16804,7 @@ var DataList = ({
                       variant: "caption",
                       className: cn(
                         "mt-1 text-[0.65rem]",
-                        isSent ? "opacity-70" : "text-[var(--color-muted-foreground)]"
+                        isSent ? "opacity-70" : "text-muted-foreground"
                       ),
                       children: formatDate3(timestamp)
                     }
@@ -16831,8 +16831,8 @@ var DataList = ({
             className: cn(
               "group flex items-center gap-4 transition-all duration-200",
               isCompact ? "px-4 py-2" : "px-6 py-4",
-              "hover:bg-[var(--color-muted)]/80",
-              !isCard && !isCompact && "rounded-[var(--radius-lg)] border border-transparent hover:border-[var(--color-border)]"
+              "hover:bg-muted/80",
+              !isCard && !isCompact && "rounded-lg border border-transparent hover:border-border"
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 min-w-0", children: children(itemData, index) }),
@@ -16852,7 +16852,7 @@ var DataList = ({
                       onClick: handleActionClick(action, itemData),
                       "data-testid": `action-${action.event}`,
                       className: cn(
-                        action.variant === "danger" && "text-[var(--color-error)] hover:bg-[var(--color-error)]/10"
+                        action.variant === "danger" && "text-error hover:bg-error/10"
                       ),
                       children: [
                         action.icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
@@ -16866,7 +16866,7 @@ var DataList = ({
             ]
           }
         ),
-        isCard && !isLast && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mx-6 border-b border-[var(--color-border)]/40" })
+        isCard && !isLast && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mx-6 border-b border-border/40" })
       ] }, id2);
     }
     const id = itemData.id || String(index);
@@ -16878,8 +16878,8 @@ var DataList = ({
           className: cn(
             "group flex items-center gap-4 transition-all duration-200",
             isCompact ? "px-4 py-2" : "px-6 py-4",
-            "hover:bg-[var(--color-muted)]/80",
-            !isCard && !isCompact && "rounded-[var(--radius-lg)] border border-transparent hover:border-[var(--color-border)]"
+            "hover:bg-muted/80",
+            !isCard && !isCompact && "rounded-lg border border-transparent hover:border-border"
           ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex-1 min-w-0", children: [
@@ -16889,7 +16889,7 @@ var DataList = ({
                   {
                     name: titleField.icon,
                     size: isCompact ? "xs" : "sm",
-                    className: "text-[var(--color-primary)] flex-shrink-0"
+                    className: "text-primary flex-shrink-0"
                   }
                 ),
                 titleValue !== void 0 && titleValue !== null && /* @__PURE__ */ jsxRuntime.jsx(
@@ -16913,7 +16913,7 @@ var DataList = ({
                 const value = getNestedValue(itemData, field.name);
                 if (value === void 0 || value === null || value === "") return null;
                 return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "items-center", children: [
-                  field.icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: field.icon, size: "xs", className: "text-[var(--color-muted-foreground)]" }),
+                  field.icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: field.icon, size: "xs", className: "text-muted-foreground" }),
                   /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", color: "secondary", children: [
                     field.label ?? fieldLabel3(field.name),
                     ":"
@@ -16926,7 +16926,7 @@ var DataList = ({
                 if (typeof value !== "number") return null;
                 return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "mt-2 max-w-xs", children: [
                   /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "items-center mb-1", children: [
-                    field.icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: field.icon, size: "xs", className: "text-[var(--color-muted-foreground)]" }),
+                    field.icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: field.icon, size: "xs", className: "text-muted-foreground" }),
                     /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "secondary", children: field.label ?? fieldLabel3(field.name) })
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { value, max: 100 })
@@ -16949,7 +16949,7 @@ var DataList = ({
                     onClick: handleActionClick(action, itemData),
                     "data-testid": `action-${action.event}`,
                     className: cn(
-                      action.variant === "danger" && "text-[var(--color-error)] hover:bg-[var(--color-error)]/10"
+                      action.variant === "danger" && "text-error hover:bg-error/10"
                     ),
                     children: [
                       action.icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
@@ -16963,14 +16963,14 @@ var DataList = ({
           ]
         }
       ),
-      isCard && !isLast && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mx-6 border-b border-[var(--color-border)]/40" })
+      isCard && !isLast && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mx-6 border-b border-border/40" })
     ] }, id);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Box,
     {
       className: cn(
-        isCard && "bg-[var(--color-card)] rounded-[var(--radius-xl)] border border-[var(--color-border)] shadow-[var(--shadow-lg)] overflow-hidden",
+        isCard && "bg-card rounded-xl border border-border shadow-lg overflow-hidden",
         !isCard && gapClass,
         className
       ),
@@ -17091,9 +17091,9 @@ var FilterGroup = ({
   const activeFilterCount = Object.keys(selectedValues).length;
   if (variant === "pills") {
     return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "center", className: cn("flex-wrap", className), children: [
-      showIcon && /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Filter, { className: "h-4 w-4 text-[var(--color-muted-foreground)]" }),
+      showIcon && /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Filter, { className: "h-4 w-4 text-muted-foreground" }),
       filters.map((filter) => /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-[var(--font-weight-medium)] text-[var(--color-muted-foreground)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-[var(--font-weight-medium)] text-muted-foreground", children: [
           filter.label,
           ":"
         ] }),
@@ -17101,7 +17101,7 @@ var FilterGroup = ({
           HStack,
           {
             gap: "none",
-            className: "rounded-[var(--radius-sm)] overflow-hidden border-[length:var(--border-width)] border-[var(--color-border)]",
+            className: "rounded-sm overflow-hidden border-[length:var(--border-width)] border-border",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
@@ -17110,7 +17110,7 @@ var FilterGroup = ({
                   onClick: () => handleFilterSelect(filter.field, null),
                   className: cn(
                     "px-3 py-1.5 text-sm font-[var(--font-weight-medium)] transition-all duration-[var(--transition-fast)]",
-                    !selectedValues[filter.field] ? "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]" : "bg-[var(--color-card)] text-[var(--color-muted-foreground)] hover:bg-[var(--color-muted)]"
+                    !selectedValues[filter.field] ? "bg-primary text-primary-foreground" : "bg-card text-muted-foreground hover:bg-muted"
                   ),
                   children: "All"
                 }
@@ -17122,8 +17122,8 @@ var FilterGroup = ({
                   onClick: () => handleFilterSelect(filter.field, option),
                   className: cn(
                     "px-3 py-1.5 text-sm font-[var(--font-weight-medium)] transition-all duration-[var(--transition-fast)]",
-                    "border-l-[length:var(--border-width)] border-[var(--color-border)]",
-                    selectedValues[filter.field] === option ? "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]" : "bg-[var(--color-card)] text-[var(--color-muted-foreground)] hover:bg-[var(--color-muted)]"
+                    "border-l-[length:var(--border-width)] border-border",
+                    selectedValues[filter.field] === option ? "bg-primary text-primary-foreground" : "bg-card text-muted-foreground hover:bg-muted"
                   ),
                   children: option
                 },
@@ -17147,12 +17147,12 @@ var FilterGroup = ({
   }
   if (variant === "vertical") {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-4", className), children: [
-      showIcon && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-[var(--color-muted-foreground)]", children: [
+      showIcon && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
         /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Filter, { className: "h-4 w-4" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-[var(--font-weight-bold)] uppercase tracking-wide", children: "Filters" })
       ] }),
       filters.map((filter) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-[var(--font-weight-bold)] text-[var(--color-muted-foreground)] uppercase tracking-wide", children: filter.label }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-[var(--font-weight-bold)] text-muted-foreground uppercase tracking-wide", children: filter.label }),
         resolveFilterType(filter) === "date" ? /* @__PURE__ */ jsxRuntime.jsx(
           Input,
           {
@@ -17221,7 +17221,7 @@ var FilterGroup = ({
   }
   if (variant === "compact") {
     return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", align: "center", className: cn("flex-wrap", className), children: [
-      showIcon && /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Filter, { className: "h-4 w-4 text-[var(--color-muted-foreground)]" }),
+      showIcon && /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Filter, { className: "h-4 w-4 text-muted-foreground" }),
       filters.map((filter) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-[120px]", children: resolveFilterType(filter) === "date" ? /* @__PURE__ */ jsxRuntime.jsx(
         Input,
         {
@@ -17245,7 +17245,7 @@ var FilterGroup = ({
             className: "text-sm min-w-[100px]"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--color-muted-foreground)]", children: "-" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "-" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           Input,
           {
@@ -17301,9 +17301,9 @@ var FilterGroup = ({
     "div",
     {
       className: cn(
-        "p-4 rounded-[var(--radius-md)]",
-        "bg-[var(--color-card)]",
-        "border-[length:var(--border-width)] border-[var(--color-border)]",
+        "p-4 rounded-md",
+        "bg-card",
+        "border-[length:var(--border-width)] border-border",
         className
       ),
       children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "center", className: "flex-wrap", children: [
@@ -17312,7 +17312,7 @@ var FilterGroup = ({
           {
             gap: "xs",
             align: "center",
-            className: "text-[var(--color-muted-foreground)]",
+            className: "text-muted-foreground",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Filter, { className: "h-4 w-4" }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-[var(--font-weight-bold)] uppercase tracking-wide", children: "Filters" })
@@ -17320,7 +17320,7 @@ var FilterGroup = ({
           }
         ),
         filters.map((filter) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-[var(--font-weight-bold)] text-[var(--color-muted-foreground)] uppercase tracking-wide", children: filter.label }),
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-[var(--font-weight-bold)] text-muted-foreground uppercase tracking-wide", children: filter.label }),
           resolveFilterType(filter) === "date" ? /* @__PURE__ */ jsxRuntime.jsx(
             Input,
             {
@@ -17347,7 +17347,7 @@ var FilterGroup = ({
                 className: "min-w-[130px]"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--color-muted-foreground)]", children: "-" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "-" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               Input,
               {
@@ -17493,8 +17493,8 @@ var InputGroup = ({
         {
           className: cn(
             "flex items-center justify-center px-3",
-            "bg-[var(--color-muted)] dark:bg-[var(--color-muted)]",
-            "border border-[var(--color-border)] dark:border-[var(--color-border)]",
+            "bg-muted dark:bg-muted",
+            "border border-border dark:border-border",
             position === "left" ? "rounded-l-lg border-r-0" : "rounded-r-lg border-l-0"
           ),
           children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: addon, size: "sm" })
@@ -17506,9 +17506,9 @@ var InputGroup = ({
       {
         className: cn(
           "flex items-center justify-center px-3",
-          "bg-[var(--color-muted)] dark:bg-[var(--color-muted)]",
-          "border border-[var(--color-border)] dark:border-[var(--color-border)]",
-          "text-[var(--color-foreground)] dark:text-[var(--color-foreground)]",
+          "bg-muted dark:bg-muted",
+          "border border-border dark:border-border",
+          "text-foreground dark:text-foreground",
           position === "left" ? "rounded-l-lg border-r-0" : "rounded-r-lg border-l-0"
         ),
         children: typeof addon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", children: addon }) : addon
@@ -17674,7 +17674,7 @@ var RelationSelect = ({
             {
               variant: "body",
               className: cn(
-                !selectedOption && "text-[var(--color-muted-foreground)]"
+                !selectedOption && "text-muted-foreground"
               ),
               children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "sm" }),
@@ -17687,16 +17687,16 @@ var RelationSelect = ({
               Box,
               {
                 as: "button",
-                className: "p-0.5 hover:bg-[var(--color-muted)] rounded cursor-pointer",
+                className: "p-0.5 hover:bg-muted rounded cursor-pointer",
                 onClick: handleClear,
-                children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "h-4 w-4 text-[var(--color-muted-foreground)]" })
+                children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "h-4 w-4 text-muted-foreground" })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
               LucideIcons.ChevronDown,
               {
                 className: cn(
-                  "h-4 w-4 text-[var(--color-muted-foreground)] transition-transform",
+                  "h-4 w-4 text-muted-foreground transition-transform",
                   isOpen && "transform rotate-180"
                 )
               }
@@ -17715,7 +17715,7 @@ var RelationSelect = ({
         shadow: "lg",
         className: "z-50 w-full mt-1",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Box, { padding: "sm", className: "border-b border-[var(--color-border)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(Box, { padding: "sm", className: "border-b border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
             Input,
             {
               ref: searchInputRef,
@@ -17744,7 +17744,7 @@ var RelationSelect = ({
               paddingX: "sm",
               paddingY: "sm",
               className: cn(
-                "text-left text-sm hover:bg-[var(--color-muted)] focus:outline-none focus:bg-[var(--color-muted)]",
+                "text-left text-sm hover:bg-muted focus:outline-none focus:bg-muted",
                 option.value === value && "bg-primary-50 text-primary-700",
                 option.disabled && "opacity-50 cursor-not-allowed"
               ),
@@ -17883,8 +17883,8 @@ var SidePanel = ({
       {
         className: cn(
           "fixed top-16 lg:top-0 bottom-0 z-[60]",
-          "bg-[var(--color-card)]",
-          "border-l-2 border-[var(--color-border)]",
+          "bg-card",
+          "border-l-2 border-border",
           position === "left" && "border-l-0 border-r-2",
           "flex flex-col",
           "transition-transform duration-300 ease-in-out",
@@ -17893,7 +17893,7 @@ var SidePanel = ({
           className
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-4 border-b-2 border-[var(--color-border)] sticky top-0 bg-[var(--color-card)] z-10", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-4 border-b-2 border-border sticky top-0 bg-card z-10", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h6", children: title }),
             /* @__PURE__ */ jsxRuntime.jsx(
               Button,
@@ -17937,7 +17937,7 @@ var WizardProgress = ({
     {
       border: true,
       className: cn(
-        "border-b-2 border-x-0 border-t-0 border-[var(--color-border)]",
+        "border-b-2 border-x-0 border-t-0 border-border",
         compact ? "px-4 py-2" : "px-6 py-4",
         className
       ),
@@ -17952,11 +17952,11 @@ var WizardProgress = ({
               disabled: !isCompleted || !allowNavigation,
               className: cn(
                 "flex items-center justify-center text-sm font-bold transition-colors",
-                "border-2 border-[var(--color-border)]",
+                "border-2 border-border",
                 compact ? "w-6 h-6" : "w-8 h-8",
-                isActive && "bg-[var(--color-foreground)] text-[var(--color-background)]",
-                isCompleted && "bg-[var(--color-foreground)] text-[var(--color-background)] cursor-pointer hover:bg-[var(--color-muted-foreground)]",
-                !isActive && !isCompleted && "bg-[var(--color-card)] text-[var(--color-foreground)]"
+                isActive && "bg-foreground text-background",
+                isCompleted && "bg-foreground text-background cursor-pointer hover:bg-muted-foreground",
+                !isActive && !isCompleted && "bg-card text-foreground"
               ),
               children: isCompleted ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: LucideIcons.Check, size: "sm" }) : index + 1
             }
@@ -17966,7 +17966,7 @@ var WizardProgress = ({
             {
               className: cn(
                 "hidden md:block",
-                isActive ? "text-[var(--color-foreground)] font-bold" : "text-[var(--color-muted-foreground)]"
+                isActive ? "text-foreground font-bold" : "text-muted-foreground"
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 Typography,
@@ -17983,7 +17983,7 @@ var WizardProgress = ({
             {
               className: cn(
                 "flex-1 h-0.5",
-                index < currentStep ? "bg-[var(--color-foreground)]" : "bg-[var(--color-muted)]"
+                index < currentStep ? "bg-foreground" : "bg-muted"
               )
             }
           )
@@ -18055,7 +18055,7 @@ var WizardNavigation = ({
     {
       border: true,
       className: cn(
-        "border-t-2 border-x-0 border-b-0 border-[var(--color-border)] flex justify-between items-center",
+        "border-t-2 border-x-0 border-b-0 border-border flex justify-between items-center",
         compact ? "px-4 py-2" : "px-6 py-4",
         className
       ),
@@ -18154,7 +18154,7 @@ var RepeatableFormSection = ({
         {
           justify: "between",
           align: "center",
-          className: "pb-2 border-b border-[var(--color-border)]",
+          className: "pb-2 border-b border-border",
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "sm", align: "center", children: item.addedInState && /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", color: "muted", children: [
               "Added in:",
@@ -18174,7 +18174,7 @@ var RepeatableFormSection = ({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", align: "start", children: [
-        allowReorder && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "pt-2 cursor-move text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "grip-vertical", size: "md" }) }),
+        allowReorder && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "pt-2 cursor-move text-muted-foreground hover:text-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "grip-vertical", size: "md" }) }),
         /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1", children: renderItem(item, index) }),
         canRemove && /* @__PURE__ */ jsxRuntime.jsx(
           Button,
@@ -18182,7 +18182,7 @@ var RepeatableFormSection = ({
             variant: "ghost",
             size: "sm",
             onClick: () => handleRemove(item.id, index),
-            className: "text-[var(--color-error)] hover:text-[var(--color-error)] hover:bg-[var(--color-error)]/10",
+            className: "text-error hover:text-error hover:bg-error/10",
             children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "trash-2", size: "sm" })
           }
         )
@@ -18225,15 +18225,15 @@ var ViolationAlert = ({
     actionType: "measure"
   };
   const effectiveSeverity = severity ?? (resolvedViolation.actionType === "measure" ? "warning" : "error");
-  const bgColor = effectiveSeverity === "warning" ? "bg-[var(--color-warning)]/10 border-[var(--color-warning)]/30" : "bg-[var(--color-error)]/10 border-[var(--color-error)]/30";
-  const textColor = effectiveSeverity === "warning" ? "text-[var(--color-warning)]" : "text-[var(--color-error)]";
-  const iconColor = effectiveSeverity === "warning" ? "text-[var(--color-warning)]" : "text-[var(--color-error)]";
+  const bgColor = effectiveSeverity === "warning" ? "bg-warning/10 border-warning/30" : "bg-error/10 border-error/30";
+  const textColor = effectiveSeverity === "warning" ? "text-warning" : "text-error";
+  const iconColor = effectiveSeverity === "warning" ? "text-warning" : "text-error";
   if (compact) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       Box,
       {
         className: cn(
-          "px-3 py-2 rounded-[var(--radius-md)] border",
+          "px-3 py-2 rounded-md border",
           bgColor,
           className
         ),
@@ -18280,7 +18280,7 @@ var ViolationAlert = ({
     Box,
     {
       className: cn(
-        "p-4 rounded-[var(--radius-lg)] border",
+        "p-4 rounded-lg border",
         bgColor,
         className
       ),
@@ -18328,7 +18328,7 @@ var ViolationAlert = ({
           {
             className: cn(
               "pt-2 border-t",
-              effectiveSeverity === "warning" ? "border-[var(--color-warning)]/30" : "border-[var(--color-error)]/30"
+              effectiveSeverity === "warning" ? "border-warning/30" : "border-error/30"
             ),
             children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", children: [
               resolvedViolation.adminAction && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
@@ -18409,7 +18409,7 @@ var FormSectionHeader = ({
     Box,
     {
       className: cn(
-        "px-4 py-3 bg-[var(--color-muted)] rounded-t-lg",
+        "px-4 py-3 bg-muted rounded-t-lg",
         isClickable && "cursor-pointer hover:bg-[var(--color-surface-hover)] transition-colors",
         className
       ),
@@ -18421,7 +18421,7 @@ var FormSectionHeader = ({
             {
               name: icon,
               size: "md",
-              className: "text-[var(--color-muted-foreground)]"
+              className: "text-muted-foreground"
             }
           ),
           statusIcon && /* @__PURE__ */ jsxRuntime.jsx(
@@ -18429,7 +18429,7 @@ var FormSectionHeader = ({
             {
               name: statusIcon,
               size: "md",
-              className: hasErrors ? "text-[var(--color-error)]" : "text-[var(--color-success)]"
+              className: hasErrors ? "text-error" : "text-success"
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
@@ -18445,7 +18445,7 @@ var FormSectionHeader = ({
               name: "chevron-down",
               size: "md",
               className: cn(
-                "text-[var(--color-muted-foreground)] transition-transform",
+                "text-muted-foreground transition-transform",
                 isCollapsed && "-rotate-90"
               )
             }
@@ -18563,7 +18563,7 @@ var LineChart2 = ({
     return `${linePath} L ${last.x} ${bottom} L ${first.x} ${bottom} Z`;
   }, [linePath, points, height, showArea]);
   if (safeData.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("flex items-center justify-center text-[var(--color-muted-foreground)]", className), style: { width, height }, children: "No data" });
+    return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("flex items-center justify-center text-muted-foreground", className), style: { width, height }, children: "No data" });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn(className), children: /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -20455,13 +20455,13 @@ var GraphView = ({
     [onNodeClick]
   );
   if (nodes.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("flex items-center justify-center", className), style: { width: w, height: h }, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "text-[var(--color-muted-foreground)] text-sm", children: "No graph data" }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("flex items-center justify-center", className), style: { width: w, height: h }, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "text-muted-foreground text-sm", children: "No graph data" }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
     Box,
     {
       ref: containerRef,
-      className: cn("relative overflow-hidden rounded-lg border border-[var(--color-border)] bg-[var(--color-card)]", className),
+      className: cn("relative overflow-hidden rounded-lg border border-border bg-card", className),
       style: { width: propWidth ?? "100%", height: h },
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "svg",
@@ -20646,9 +20646,9 @@ var NumberStepper = ({
     {
       className: cn(
         "inline-flex items-center",
-        "rounded-[var(--radius-sm)]",
-        "border-[length:var(--border-width)] border-[var(--color-border)]",
-        "bg-[var(--color-surface)]",
+        "rounded-sm",
+        "border-[length:var(--border-width)] border-border",
+        "bg-surface",
         disabled && "opacity-50 cursor-not-allowed",
         className
       ),
@@ -20668,13 +20668,13 @@ var NumberStepper = ({
             disabled: disabled || isAtMin,
             className: cn(
               "inline-flex items-center justify-center",
-              "rounded-l-[var(--radius-sm)]",
-              "text-[var(--color-foreground)]",
-              "hover:bg-[var(--color-muted)]",
-              "active:bg-[var(--color-muted)]",
+              "rounded-l-sm",
+              "text-foreground",
+              "hover:bg-muted",
+              "active:bg-muted",
               "transition-colors duration-100",
               "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-              "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-[var(--color-ring)] focus:ring-inset",
+              "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-inset",
               styles.button
             ),
             "aria-label": "Decrease",
@@ -20686,8 +20686,8 @@ var NumberStepper = ({
           {
             className: cn(
               "text-center font-medium tabular-nums",
-              "text-[var(--color-foreground)]",
-              "border-x-[length:var(--border-width)] border-[var(--color-border)]",
+              "text-foreground",
+              "border-x-[length:var(--border-width)] border-border",
               "px-1 select-none",
               styles.text
             ),
@@ -20709,13 +20709,13 @@ var NumberStepper = ({
             disabled: disabled || isAtMax,
             className: cn(
               "inline-flex items-center justify-center",
-              "rounded-r-[var(--radius-sm)]",
-              "text-[var(--color-foreground)]",
-              "hover:bg-[var(--color-muted)]",
-              "active:bg-[var(--color-muted)]",
+              "rounded-r-sm",
+              "text-foreground",
+              "hover:bg-muted",
+              "active:bg-muted",
               "transition-colors duration-100",
               "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-              "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-[var(--color-ring)] focus:ring-inset",
+              "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-inset",
               styles.button
             ),
             "aria-label": "Increase",
@@ -20826,7 +20826,7 @@ var StarRating = ({
                 {
                   className: cn(
                     styles.star,
-                    "text-[var(--color-muted)]",
+                    "text-muted",
                     "transition-colors duration-100"
                   ),
                   strokeWidth: 1.5
@@ -20838,7 +20838,7 @@ var StarRating = ({
                   className: cn(
                     styles.star,
                     "absolute inset-0",
-                    "text-[var(--color-warning)] fill-[var(--color-warning)]",
+                    "text-warning fill-warning",
                     "transition-colors duration-100"
                   ),
                   strokeWidth: 1.5,
@@ -20979,14 +20979,14 @@ var UploadDropZone = ({
     {
       className: cn(
         "relative flex flex-col items-center justify-center",
-        "p-8 rounded-[var(--radius-sm)]",
+        "p-8 rounded-sm",
         "border-2 border-dashed",
         "transition-colors duration-150",
         "cursor-pointer",
-        isDragOver ? "border-[var(--color-primary)] bg-[var(--color-primary)] bg-opacity-5" : "border-[var(--color-border)] bg-[var(--color-surface)]",
-        error && "border-[var(--color-error)]",
+        isDragOver ? "border-primary bg-primary bg-opacity-5" : "border-border bg-surface",
+        error && "border-error",
         disabled && "opacity-50 cursor-not-allowed",
-        "hover:border-[var(--color-primary)] hover:bg-[var(--color-muted)]",
+        "hover:border-primary hover:bg-muted",
         className
       ),
       onDragOver: handleDragOver,
@@ -21016,7 +21016,7 @@ var UploadDropZone = ({
             "aria-hidden": "true"
           }
         ),
-        error ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: LucideIcons.FileWarning, size: "lg", className: "text-[var(--color-error)] mb-2" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: LucideIcons.Upload, size: "lg", className: "text-[var(--color-muted-foreground)] mb-2" }),
+        error ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: LucideIcons.FileWarning, size: "lg", className: "text-error mb-2" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: LucideIcons.Upload, size: "lg", className: "text-muted-foreground mb-2" }),
         /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body1", className: "text-center font-medium mb-1", children: isDragOver ? "Drop files here" : label }),
         error ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "error", className: "text-center", children: error }) : /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "muted", className: "text-center", children: description ?? defaultDescription })
       ]
@@ -21232,20 +21232,20 @@ function formatValue3(value, format, max) {
   return formatted;
 }
 var variantColor = {
-  default: "text-[var(--color-foreground)]",
-  primary: "text-[var(--color-primary)]",
-  success: "text-[var(--color-success)]",
-  warning: "text-[var(--color-warning)]",
-  error: "text-[var(--color-error)]",
-  info: "text-[var(--color-info)]"
+  default: "text-foreground",
+  primary: "text-primary",
+  success: "text-success",
+  warning: "text-warning",
+  error: "text-error",
+  info: "text-info"
 };
 var StatDisplay = ({
   label,
   value,
   max,
   icon: iconProp,
-  iconBg = "bg-[var(--color-muted)]",
-  iconColor = "text-[var(--color-foreground)]",
+  iconBg = "bg-muted",
+  iconColor = "text-foreground",
   format,
   size = "md",
   variant = "default",
@@ -21264,8 +21264,8 @@ var StatDisplay = ({
   }
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn(padSizes[size], className), children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", className: "animate-pulse", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "h-3 bg-[var(--color-muted)] rounded w-16" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "h-6 bg-[var(--color-muted)] rounded w-12" })
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "h-3 bg-muted rounded w-16" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "h-6 bg-muted rounded w-12" })
     ] }) });
   }
   if (compact) {
@@ -21281,7 +21281,7 @@ var StatDisplay = ({
       /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "overline", color: "secondary", children: label }),
       /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue })
     ] }),
-    (ResolvedIcon || typeof iconProp !== "string" && iconProp) && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("p-3 rounded-[var(--radius-md)]", iconBg), children: ResolvedIcon ? /* @__PURE__ */ jsxRuntime.jsx(ResolvedIcon, { className: cn(iconSizes2[size], iconColor) }) : iconProp })
+    (ResolvedIcon || typeof iconProp !== "string" && iconProp) && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("p-3 rounded-md", iconBg), children: ResolvedIcon ? /* @__PURE__ */ jsxRuntime.jsx(ResolvedIcon, { className: cn(iconSizes2[size], iconColor) }) : iconProp })
   ] }) });
 };
 StatDisplay.displayName = "StatDisplay";
@@ -21439,8 +21439,8 @@ var Meter = ({
           Box,
           {
             className: cn(
-              "h-2 flex-1 rounded-[var(--radius-sm)] transition-all duration-300",
-              !isActive && "bg-[var(--color-muted)]"
+              "h-2 flex-1 rounded-sm transition-all duration-300",
+              !isActive && "bg-muted"
             ),
             style: isActive ? { backgroundColor: segColor } : void 0
           },
@@ -21455,10 +21455,10 @@ var Meter = ({
       label && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "secondary", weight: "medium", children: label }),
       showValue && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "bold", className: "tabular-nums", children: displayValue })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-3 bg-[var(--color-muted)] rounded-[var(--radius-full)] overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-3 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
       Box,
       {
-        className: "h-full rounded-[var(--radius-full)] transition-all duration-500 ease-out",
+        className: "h-full rounded-full transition-all duration-500 ease-out",
         style: {
           width: `${percentage}%`,
           backgroundColor: activeColor
@@ -21644,7 +21644,7 @@ var SwipeableRow = ({
               transition: isSwiping ? "none" : "transform 200ms ease-out"
             },
             className: cn(
-              "relative bg-[var(--color-surface)]",
+              "relative bg-surface",
               "select-none"
             ),
             onPointerDown: handlePointerDown,
@@ -21708,8 +21708,8 @@ function SortableListInner({
       {
         className: cn(
           "flex items-center justify-center",
-          "text-[var(--color-muted-foreground)]",
-          "hover:text-[var(--color-foreground)]",
+          "text-muted-foreground",
+          "hover:text-foreground",
           "transition-colors duration-100",
           "px-1"
         ),
@@ -21727,7 +21727,7 @@ function SortableListInner({
           showDropIndicator && /* @__PURE__ */ jsxRuntime.jsx(
             Box,
             {
-              className: "h-0.5 bg-[var(--color-primary)] rounded-full",
+              className: "h-0.5 bg-primary rounded-full",
               style: { margin: "0 8px" }
             }
           ),
@@ -21831,7 +21831,7 @@ var PullToRefresh = ({
               {
                 size: pullProgress >= 0.5 ? "md" : "sm",
                 className: cn(
-                  "text-[var(--color-primary)]",
+                  "text-primary",
                   isRefreshing && "animate-spin"
                 )
               }
@@ -22035,14 +22035,14 @@ function DataTable({
     Box,
     {
       className: cn(
-        "bg-[var(--color-card)] border-2 border-[var(--color-border)] rounded-none overflow-hidden",
+        "bg-card border-2 border-border rounded-none overflow-hidden",
         className
       ),
       children: [
-        (searchable || bulkActions || headerActions) && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { className: "px-4 py-3 border-b-2 border-[var(--color-border)] flex-col sm:flex-row items-stretch sm:items-center justify-between gap-4", children: [
+        (searchable || bulkActions || headerActions) && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { className: "px-4 py-3 border-b-2 border-border flex-col sm:flex-row items-stretch sm:items-center justify-between gap-4", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(HStack, { className: "flex-col sm:flex-row items-stretch sm:items-center gap-3", children: [
             searchable && /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "relative", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--color-muted-foreground)]" }),
+              /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 Input,
                 {
@@ -22054,12 +22054,12 @@ function DataTable({
                 }
               )
             ] }),
-            bulkActions && selectedIds.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { className: "items-center gap-2 pl-0 sm:pl-3 border-l-0 sm:border-l border-[var(--color-border)]", children: [
+            bulkActions && selectedIds.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { className: "items-center gap-2 pl-0 sm:pl-3 border-l-0 sm:border-l border-border", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 Typography,
                 {
                   variant: "small",
-                  className: "text-[var(--color-muted-foreground)] whitespace-nowrap",
+                  className: "text-muted-foreground whitespace-nowrap",
                   children: t("table.bulk.selected", {
                     count: String(selectedIds.length)
                   })
@@ -22081,7 +22081,7 @@ function DataTable({
           /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex sm:ml-auto", children: headerActions })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-[var(--color-table-header)] border-b-2 border-[var(--color-border)]", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-[var(--color-table-header)] border-b-2 border-border", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
             selectable && /* @__PURE__ */ jsxRuntime.jsx("th", { className: "w-12 px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(
               Checkbox,
               {
@@ -22095,7 +22095,7 @@ function DataTable({
               {
                 "data-column": String(col.key),
                 className: cn(
-                  "px-4 py-3 text-left text-xs font-bold text-[var(--color-foreground)] uppercase tracking-wider whitespace-nowrap",
+                  "px-4 py-3 text-left text-xs font-bold text-foreground uppercase tracking-wider whitespace-nowrap",
                   col.sortable && "cursor-pointer select-none hover:bg-[var(--color-table-row-hover)]"
                 ),
                 style: { width: col.width },
@@ -22120,7 +22120,7 @@ function DataTable({
                   Typography,
                   {
                     variant: "small",
-                    className: "text-[var(--color-muted-foreground)]",
+                    className: "text-muted-foreground",
                     children: t("common.loading")
                   }
                 )
@@ -22130,7 +22130,7 @@ function DataTable({
             "td",
             {
               colSpan: normalizedColumns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0),
-              className: "px-4 py-12 text-center text-[var(--color-error)]",
+              className: "px-4 py-12 text-center text-error",
               children: [
                 t("error.generic") + ": ",
                 error.message
@@ -22158,7 +22158,7 @@ function DataTable({
               "data-entity-row": true,
               className: cn(
                 "border-b border-[var(--color-table-border)] last:border-0 hover:bg-[var(--color-table-row-hover)] transition-colors",
-                selectedIds.includes(row.id) && "bg-[var(--color-primary)]/10 font-medium",
+                selectedIds.includes(row.id) && "bg-primary/10 font-medium",
                 isRowClickable && "cursor-pointer"
               ),
               onClick: () => isRowClickable && handleRowClick(row),
@@ -22179,7 +22179,7 @@ function DataTable({
                     "td",
                     {
                       "data-column": String(col.key),
-                      className: "px-4 py-3 text-sm text-[var(--color-foreground)] whitespace-nowrap sm:whitespace-normal",
+                      className: "px-4 py-3 text-sm text-foreground whitespace-nowrap sm:whitespace-normal",
                       children: col.render ? col.render(cellValue, row, rowIndex) : (() => {
                         const boolVal = asBooleanValue2(cellValue);
                         if (boolVal !== null) {
@@ -22196,14 +22196,14 @@ function DataTable({
                     Button,
                     {
                       variant: "ghost",
-                      className: "p-1 rounded hover:bg-[var(--color-muted)]",
+                      className: "p-1 rounded hover:bg-muted",
                       onClick: (e) => {
                         e.stopPropagation();
                         setOpenActionMenu(
                           openActionMenu === row.id ? null : row.id
                         );
                       },
-                      children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.MoreHorizontal, { className: "h-4 w-4 text-[var(--color-muted-foreground)]" })
+                      children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.MoreHorizontal, { className: "h-4 w-4 text-muted-foreground" })
                     }
                   ),
                   openActionMenu === row.id && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -22217,7 +22217,7 @@ function DataTable({
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntime.jsx(VStack, { className: "absolute right-0 mt-1 w-48 bg-[var(--color-card)] rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)] border border-[var(--color-border)] py-1 z-50", children: (rowActions ?? []).filter(
+                    /* @__PURE__ */ jsxRuntime.jsx(VStack, { className: "absolute right-0 mt-1 w-48 bg-card rounded-lg shadow-lg border border-border py-1 z-50", children: (rowActions ?? []).filter(
                       (action) => !action.show || action.show(row)
                     ).map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
                       Button,
@@ -22227,7 +22227,7 @@ function DataTable({
                         "data-testid": action.event ? `action-${action.event}` : void 0,
                         className: cn(
                           "w-full flex items-center gap-2 px-4 py-2 text-sm",
-                          action.variant === "danger" ? "text-[var(--color-error)] hover:bg-[var(--color-error)]/10" : "text-[var(--color-foreground)] hover:bg-[var(--color-muted)]"
+                          action.variant === "danger" ? "text-error hover:bg-error/10" : "text-foreground hover:bg-muted"
                         ),
                         onClick: (e) => {
                           e.stopPropagation();
@@ -22248,7 +22248,7 @@ function DataTable({
             row.id
           )) })
         ] }) }),
-        totalCount !== void 0 && totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "px-4 py-3 border-t-2 border-[var(--color-border)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+        totalCount !== void 0 && totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "px-4 py-3 border-t-2 border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
           Pagination,
           {
             currentPage,
@@ -22322,14 +22322,14 @@ function DebuggerBoard({
         backgroundPosition: "center"
       },
       children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "lg", className: "p-4", children: [
-        entity.headerImage && !headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 rounded-lg bg-gradient-to-br from-[var(--color-muted)] to-[var(--color-accent)] opacity-60" }) : null,
+        entity.headerImage && !headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 rounded-lg bg-gradient-to-br from-muted to-accent opacity-60" }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: LucideIcons.Bug, size: "sm" }),
             /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", weight: "bold", children: entity.title })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", children: entity.description }),
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-[var(--color-muted-foreground)]", children: t("debugger.findBugs", { count: String(entity.bugCount) }) })
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-muted-foreground", children: t("debugger.findBugs", { count: String(entity.bugCount) }) })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "none", children: lines.map((line, i) => {
           const isFlagged = flaggedLines.has(line.id);
@@ -22346,10 +22346,10 @@ function DebuggerBoard({
             {
               gap: "none",
               align: "stretch",
-              className: `border-b border-[var(--color-border)] cursor-pointer hover:bg-[var(--color-muted)] ${lineStyle}`,
+              className: `border-b border-border cursor-pointer hover:bg-muted ${lineStyle}`,
               onClick: () => toggleLine(line.id),
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-10 flex-shrink-0 flex items-center justify-center border-r border-[var(--color-border)] text-[var(--color-muted-foreground)]", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", children: i + 1 }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-10 flex-shrink-0 flex items-center justify-center border-r border-border text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", children: i + 1 }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 px-3 py-1.5 font-mono text-sm whitespace-pre", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", className: "font-mono text-sm", children: line.content }) }),
                 /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "w-8 flex-shrink-0 flex items-center justify-center", children: [
                   isFlagged && /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: LucideIcons.Bug, size: "xs", className: "text-red-600" }),
@@ -22373,7 +22373,7 @@ function DebuggerBoard({
             ),
             /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", children: [
               /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", weight: "bold", className: "font-mono", children: line.content.trim() }),
-              line.explanation && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-[var(--color-muted-foreground)]", children: line.explanation })
+              line.explanation && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-muted-foreground", children: line.explanation })
             ] })
           ] }, line.id))
         ] }) }),
@@ -22457,7 +22457,7 @@ function renderRichFieldValue(value, fieldName, fieldType) {
           {
             src: str,
             alt: formatFieldLabel(fieldName),
-            className: "max-w-full max-h-64 rounded-[var(--radius-md)] object-contain",
+            className: "max-w-full max-h-64 rounded-md object-contain",
             loading: "lazy"
           }
         ) });
@@ -22468,7 +22468,7 @@ function renderRichFieldValue(value, fieldName, fieldType) {
     case "richtext":
       return /* @__PURE__ */ jsxRuntime.jsx(React114.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", className: "break-words", children: str }), children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "prose prose-sm max-w-none dark:prose-invert", children: /* @__PURE__ */ jsxRuntime.jsx(ReactMarkdown2, { children: str }) }) });
     case "code":
-      return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mt-1 rounded-[var(--radius-md)] bg-[var(--color-muted)] p-3 overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-sm font-mono whitespace-pre-wrap break-words m-0", children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: str }) }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mt-1 rounded-md bg-muted p-3 overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-sm font-mono whitespace-pre-wrap break-words m-0", children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: str }) }) });
     case "html":
       return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mt-1 prose prose-sm max-w-none dark:prose-invert break-words", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", children: str }) });
     case "date":
@@ -22790,7 +22790,7 @@ var DetailPanel = ({
           {
             icon: field.icon,
             size: "md",
-            className: "text-[var(--color-muted-foreground)] mt-1"
+            className: "text-muted-foreground mt-1"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", flex: true, className: "min-w-0", children: [
@@ -22816,7 +22816,7 @@ var DetailPanel = ({
     Box,
     {
       className: cn(
-        slideOver && "fixed inset-y-0 right-0 w-full max-w-2xl bg-[var(--color-card)] shadow-[var(--shadow-lg)] z-50 overflow-y-auto p-6",
+        slideOver && "fixed inset-y-0 right-0 w-full max-w-2xl bg-card shadow-lg z-50 overflow-y-auto p-6",
         className
       ),
       children: content
@@ -22948,7 +22948,7 @@ var DocumentViewer = ({
     );
   };
   return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("overflow-hidden", className), children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", children: [
-    tabItems && tabItems.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "border-b border-[var(--color-border)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+    tabItems && tabItems.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "border-b border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
       Tabs,
       {
         tabs: tabItems,
@@ -22965,10 +22965,10 @@ var DocumentViewer = ({
         gap: "sm",
         align: "center",
         justify: "between",
-        className: "px-4 py-2 border-b border-[var(--color-border)] bg-[var(--color-muted)]/30",
+        className: "px-4 py-2 border-b border-border bg-muted/30",
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", align: "center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: LucideIcons.FileText, size: "sm", className: "text-[var(--color-muted-foreground)]" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: LucideIcons.FileText, size: "sm", className: "text-muted-foreground" }),
             title && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "truncate max-w-[200px]", children: title })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
@@ -22979,7 +22979,7 @@ var DocumentViewer = ({
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", icon: LucideIcons.ZoomIn, onClick: handleZoomIn }),
             totalPages && totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-px h-4 bg-[var(--color-border)] mx-1" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-px h-4 bg-border mx-1" }),
               /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", icon: LucideIcons.ChevronLeft, onClick: handlePagePrev, disabled: currentPage <= 1 }),
               /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", color: "secondary", className: "tabular-nums", children: [
                 currentPage,
@@ -22988,7 +22988,7 @@ var DocumentViewer = ({
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", icon: LucideIcons.ChevronRight, onClick: handlePageNext, disabled: currentPage >= totalPages })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-px h-4 bg-[var(--color-border)] mx-1" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-px h-4 bg-border mx-1" }),
             showDownload && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", icon: LucideIcons.Download, onClick: handleDownload }),
             showPrint && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", icon: LucideIcons.Printer, onClick: handlePrint }),
             actions?.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -23005,7 +23005,7 @@ var DocumentViewer = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full overflow-hidden bg-[var(--color-muted)]/20", children: renderContent() })
+    /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full overflow-hidden bg-muted/20", children: renderContent() })
   ] }) });
 };
 DocumentViewer.displayName = "DocumentViewer";
@@ -23549,7 +23549,7 @@ function EventHandlerBoard({
         backgroundPosition: "center"
       },
       children: [
-        entity.headerImage && !headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 rounded-lg bg-gradient-to-br from-[var(--color-muted)] to-[var(--color-accent)] opacity-60" }) : null,
+        entity.headerImage && !headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 rounded-lg bg-gradient-to-br from-muted to-accent opacity-60" }) : null,
         /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: "text-foreground", children: entity.title }),
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", className: "text-muted-foreground", children: entity.description }),
@@ -23936,8 +23936,8 @@ var Form = ({
           Box,
           {
             className: cn(
-              "px-4 py-3 bg-[var(--color-muted)] flex items-center justify-between",
-              section.collapsible && "cursor-pointer hover:bg-[var(--color-muted)]/80"
+              "px-4 py-3 bg-muted flex items-center justify-between",
+              section.collapsible && "cursor-pointer hover:bg-muted/80"
             ),
             onClick: section.collapsible ? () => toggleSection(section.id) : void 0,
             children: [
@@ -23948,7 +23948,7 @@ var Form = ({
                   name: "chevron-down",
                   size: "md",
                   className: cn(
-                    "text-[var(--color-muted-foreground)] transition-transform",
+                    "text-muted-foreground transition-transform",
                     isCollapsed && "rotate-180"
                   )
                 }
@@ -24598,7 +24598,7 @@ var GameTemplate = ({
             {
               padding: "md",
               border: true,
-              className: "border-b-2 border-x-0 border-t-0 border-[var(--color-border)] flex items-center justify-between",
+              className: "border-b-2 border-x-0 border-t-0 border-border flex items-center justify-between",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", children: title }),
                 controls && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", align: "center", children: [
@@ -24640,7 +24640,7 @@ var GameTemplate = ({
             {
               position: "relative",
               fullWidth: true,
-              className: "flex-1 bg-[var(--color-muted)]",
+              className: "flex-1 bg-muted",
               children: [
                 children,
                 hud && /* @__PURE__ */ jsxRuntime.jsx(
@@ -24662,14 +24662,14 @@ var GameTemplate = ({
             border: true,
             shadow: "sm",
             overflow: "auto",
-            className: "w-full lg:w-80 lg:border-l-2 lg:border-t-0 border-t-2 border-[var(--color-border)]",
+            className: "w-full lg:w-80 lg:border-l-2 lg:border-t-0 border-t-2 border-border",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 Box,
                 {
                   padding: "md",
                   border: true,
-                  className: "border-b-2 border-x-0 border-t-0 border-[var(--color-border)]",
+                  className: "border-b-2 border-x-0 border-t-0 border-border",
                   children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h6", children: "Debug Panel" })
                 }
               ),
@@ -24697,7 +24697,7 @@ var GenericAppTemplate = ({
       {
         padding: "md",
         border: true,
-        className: "border-b-2 border-x-0 border-t-0 border-[var(--color-border)] flex items-center justify-between flex-shrink-0",
+        className: "border-b-2 border-x-0 border-t-0 border-border flex items-center justify-between flex-shrink-0",
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", children: title }),
@@ -24714,7 +24714,7 @@ var GenericAppTemplate = ({
         padding: "md",
         border: true,
         bg: "muted",
-        className: "border-t-2 border-x-0 border-b-0 border-[var(--color-border)] flex-shrink-0",
+        className: "border-t-2 border-x-0 border-b-0 border-border flex-shrink-0",
         children: footer
       }
     )
@@ -24962,7 +24962,7 @@ var GraphCanvas = ({
         gap: "sm",
         align: "center",
         justify: "between",
-        className: "px-4 py-2 border-b border-[var(--color-border)]",
+        className: "px-4 py-2 border-b border-border",
         children: [
           title && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h6", weight: "semibold", children: title }),
           /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
@@ -24985,7 +24985,7 @@ var GraphCanvas = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full bg-[var(--color-background)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full bg-background", children: /* @__PURE__ */ jsxRuntime.jsx(
       "canvas",
       {
         ref: canvasRef,
@@ -25009,11 +25009,11 @@ var GraphCanvas = ({
         }
       }
     ) }),
-    groups.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "md", className: "px-4 py-2 border-t border-[var(--color-border)]", wrap: true, children: groups.map((group, idx) => /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
+    groups.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "md", className: "px-4 py-2 border-t border-border", wrap: true, children: groups.map((group, idx) => /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
-          className: "w-3 h-3 rounded-[var(--radius-full)] flex-shrink-0",
+          className: "w-3 h-3 rounded-full flex-shrink-0",
           style: { backgroundColor: GROUP_COLORS2[idx % GROUP_COLORS2.length] }
         }
       ),
@@ -25050,8 +25050,8 @@ var Header = ({
     {
       as: "header",
       className: cn(
-        "h-16 border-b border-[var(--color-border)]",
-        "flex items-center px-4 justify-between bg-[var(--color-card)]",
+        "h-16 border-b border-border",
+        "flex items-center px-4 justify-between bg-card",
         sticky && "sticky top-0 z-50",
         variant === "mobile" && "lg:hidden",
         className
@@ -25063,7 +25063,7 @@ var Header = ({
             {
               variant: "ghost",
               onClick: onMenuToggle,
-              className: "p-2 -ml-2 text-[var(--color-foreground)] hover:bg-[var(--color-muted)] transition-colors",
+              className: "p-2 -ml-2 text-foreground hover:bg-muted transition-colors",
               "aria-label": isMenuOpen ? "Close menu" : "Open menu",
               children: isMenuOpen ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { size: 24 }) : /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Menu, { size: 24 })
             }
@@ -25084,7 +25084,7 @@ var Header = ({
                   Typography,
                   {
                     variant: "h5",
-                    className: "text-lg font-bold text-[var(--color-foreground)]",
+                    className: "text-lg font-bold text-foreground",
                     children: brandName
                   }
                 )
@@ -25103,8 +25103,8 @@ var Header = ({
                 variant: "ghost",
                 onClick: item.onClick,
                 className: cn(
-                  "flex items-center gap-2 px-3 py-2 rounded-[var(--radius-lg)] transition-colors",
-                  item.active ? "bg-[var(--color-primary)]/10 text-[var(--color-primary)]" : "text-[var(--color-muted-foreground)] hover:bg-[var(--color-muted)] hover:text-[var(--color-foreground)]"
+                  "flex items-center gap-2 px-3 py-2 rounded-lg transition-colors",
+                  item.active ? "bg-primary/10 text-primary" : "text-muted-foreground hover:bg-muted hover:text-foreground"
                 ),
                 children: [
                   item.icon && /* @__PURE__ */ jsxRuntime.jsx(item.icon, { size: 18 }),
@@ -25125,9 +25125,9 @@ var Header = ({
               variant: "ghost",
               onClick: onUserClick,
               className: cn(
-                "w-8 h-8 rounded-[var(--radius-full)] bg-[var(--color-primary)]/10 flex items-center justify-center",
-                "text-[var(--color-primary)] font-bold text-xs",
-                "hover:ring-2 hover:ring-[var(--color-ring)] transition-all",
+                "w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center",
+                "text-primary font-bold text-xs",
+                "hover:ring-2 hover:ring-ring transition-all",
                 onUserClick && "cursor-pointer"
               ),
               children: userAvatar?.src ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -25152,52 +25152,52 @@ function normalizeFields2(fields) {
 }
 var STATUS_STYLES2 = {
   complete: {
-    bg: "bg-[var(--color-success)]/10",
-    text: "text-[var(--color-success)]",
-    dot: "bg-[var(--color-success)] ring-4 ring-[var(--color-success)]/20",
-    border: "border-[var(--color-success)]/30"
+    bg: "bg-success/10",
+    text: "text-success",
+    dot: "bg-success ring-4 ring-success/20",
+    border: "border-success/30"
   },
   active: {
-    bg: "bg-[var(--color-info)]/10",
-    text: "text-[var(--color-info)]",
-    dot: "bg-[var(--color-info)] ring-4 ring-[var(--color-info)]/20",
-    border: "border-[var(--color-info)]/30"
+    bg: "bg-info/10",
+    text: "text-info",
+    dot: "bg-info ring-4 ring-info/20",
+    border: "border-info/30"
   },
   pending: {
-    bg: "bg-[var(--color-warning)]/10",
-    text: "text-[var(--color-warning)]",
-    dot: "bg-[var(--color-warning)] ring-4 ring-[var(--color-warning)]/20",
-    border: "border-[var(--color-warning)]/30"
+    bg: "bg-warning/10",
+    text: "text-warning",
+    dot: "bg-warning ring-4 ring-warning/20",
+    border: "border-warning/30"
   },
   blocked: {
-    bg: "bg-[var(--color-error)]/10",
-    text: "text-[var(--color-error)]",
-    dot: "bg-[var(--color-error)] ring-4 ring-[var(--color-error)]/20",
-    border: "border-[var(--color-error)]/30"
+    bg: "bg-error/10",
+    text: "text-error",
+    dot: "bg-error ring-4 ring-error/20",
+    border: "border-error/30"
   },
   high: {
-    bg: "bg-[var(--color-warning)]/10",
-    text: "text-[var(--color-warning)]",
-    dot: "bg-[var(--color-warning)] ring-4 ring-[var(--color-warning)]/20",
-    border: "border-[var(--color-warning)]/30"
+    bg: "bg-warning/10",
+    text: "text-warning",
+    dot: "bg-warning ring-4 ring-warning/20",
+    border: "border-warning/30"
   },
   medium: {
-    bg: "bg-[var(--color-accent)]/10",
-    text: "text-[var(--color-accent)]",
-    dot: "bg-[var(--color-accent)] ring-4 ring-[var(--color-accent)]/20",
-    border: "border-[var(--color-accent)]/30"
+    bg: "bg-accent/10",
+    text: "text-accent",
+    dot: "bg-accent ring-4 ring-accent/20",
+    border: "border-accent/30"
   },
   low: {
-    bg: "bg-[var(--color-muted)]",
-    text: "text-[var(--color-muted-foreground)]",
-    dot: "bg-[var(--color-muted-foreground)] ring-4 ring-[var(--color-muted-foreground)]/20",
-    border: "border-[var(--color-border)]"
+    bg: "bg-muted",
+    text: "text-muted-foreground",
+    dot: "bg-muted-foreground ring-4 ring-muted-foreground/20",
+    border: "border-border"
   },
   default: {
-    bg: "bg-[var(--color-muted)]",
-    text: "text-[var(--color-muted-foreground)]",
-    dot: "bg-[var(--color-muted-foreground)] ring-4 ring-[var(--color-muted-foreground)]/20",
-    border: "border-[var(--color-border)]"
+    bg: "bg-muted",
+    text: "text-muted-foreground",
+    dot: "bg-muted-foreground ring-4 ring-muted-foreground/20",
+    border: "border-border"
   }
 };
 function getStatusStyle(fieldName, value) {
@@ -25257,8 +25257,8 @@ var StatusBadge = ({
     {
       as: "span",
       className: cn(
-        "inline-flex items-center gap-2 px-2.5 py-1 rounded-[var(--radius-full)] text-xs font-semibold tracking-wide",
-        "border shadow-[var(--shadow-sm)] backdrop-blur-sm transition-colors",
+        "inline-flex items-center gap-2 px-2.5 py-1 rounded-full text-xs font-semibold tracking-wide",
+        "border shadow-sm backdrop-blur-sm transition-colors",
         style.bg,
         style.text,
         style.border
@@ -25269,7 +25269,7 @@ var StatusBadge = ({
           {
             as: "span",
             className: cn(
-              "w-1.5 h-1.5 rounded-[var(--radius-full)] shadow-[var(--shadow-sm)]",
+              "w-1.5 h-1.5 rounded-full shadow-sm",
               style.dot
             )
           }
@@ -25282,12 +25282,12 @@ var StatusBadge = ({
 var ProgressIndicator = ({ value }) => {
   const clampedValue = Math.min(100, Math.max(0, value));
   return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center gap-2 min-w-[100px]", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 h-1.5 bg-[var(--color-muted)] rounded-[var(--radius-full)] overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 h-1.5 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
       Box,
       {
         className: cn(
-          "h-full rounded-[var(--radius-full)] transition-all duration-500",
-          clampedValue >= 100 ? "bg-[var(--color-success)]" : clampedValue >= 70 ? "bg-[var(--color-info)]" : clampedValue >= 40 ? "bg-[var(--color-warning)]" : "bg-[var(--color-muted-foreground)]"
+          "h-full rounded-full transition-all duration-500",
+          clampedValue >= 100 ? "bg-success" : clampedValue >= 70 ? "bg-info" : clampedValue >= 40 ? "bg-warning" : "bg-muted-foreground"
         ),
         style: { width: `${clampedValue}%` }
       }
@@ -25296,7 +25296,7 @@ var ProgressIndicator = ({ value }) => {
       Typography,
       {
         as: "span",
-        className: "text-xs font-medium text-[var(--color-muted-foreground)] tabular-nums w-8 text-right",
+        className: "text-xs font-medium text-muted-foreground tabular-nums w-8 text-right",
         children: [
           clampedValue,
           "%"
@@ -25460,9 +25460,9 @@ var List2 = ({
             "transition-all duration-300 ease-out",
             hasExplicitClick && "cursor-pointer",
             // Hover state
-            "hover:bg-[var(--color-muted)]/80",
+            "hover:bg-muted/80",
             // Selected state
-            isSelected && "bg-[var(--color-primary)]/10 shadow-inner",
+            isSelected && "bg-primary/10 shadow-inner",
             item.disabled && "opacity-50 cursor-not-allowed grayscale"
           ),
           action: rowAction,
@@ -25481,7 +25481,7 @@ var List2 = ({
                     onChange: (e) => handleSelect(item.id, e.target.checked),
                     className: cn(
                       "transition-transform active:scale-95",
-                      isSelected ? "border-[var(--color-primary)] bg-[var(--color-primary)]" : "border-[var(--color-border)]"
+                      isSelected ? "border-primary bg-primary" : "border-border"
                     )
                   }
                 )
@@ -25494,9 +25494,9 @@ var List2 = ({
                   {
                     as: "h3",
                     className: cn(
-                      "text-[15px] font-semibold text-[var(--color-foreground)] truncate flex-1",
+                      "text-[15px] font-semibold text-foreground truncate flex-1",
                       "tracking-tight leading-snug",
-                      item.completed && "line-through text-[var(--color-muted-foreground)]"
+                      item.completed && "line-through text-muted-foreground"
                     ),
                     children: item.title || "Untitled"
                   }
@@ -25518,7 +25518,7 @@ var List2 = ({
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(HStack, { className: "flex items-center gap-6 text-[13px] font-medium text-[var(--color-muted-foreground)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(HStack, { className: "flex items-center gap-6 text-[13px] font-medium text-muted-foreground", children: [
                 dateFields.slice(0, 1).map((field) => {
                   const value = item._fields?.[field];
                   if (!value) return null;
@@ -25526,7 +25526,7 @@ var List2 = ({
                     Typography,
                     {
                       as: "span",
-                      className: "flex items-center gap-2 text-[var(--color-muted-foreground)] group-hover:text-[var(--color-foreground)] transition-colors",
+                      className: "flex items-center gap-2 text-muted-foreground group-hover:text-foreground transition-colors",
                       children: [
                         /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Calendar, { className: "w-3.5 h-3.5" }),
                         /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", children: formatValue4(value, field) })
@@ -25542,13 +25542,13 @@ var List2 = ({
                     Typography,
                     {
                       as: "span",
-                      className: "truncate flex items-center gap-1.5 text-[var(--color-muted-foreground)]",
+                      className: "truncate flex items-center gap-1.5 text-muted-foreground",
                       children: [
                         /* @__PURE__ */ jsxRuntime.jsxs(Typography, { as: "span", className: "opacity-75", children: [
                           formatFieldLabel2(field),
                           ":"
                         ] }),
-                        /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "text-[var(--color-foreground)]", children: formatValue4(value, field) })
+                        /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "text-foreground", children: formatValue4(value, field) })
                       ]
                     },
                     field
@@ -25571,9 +25571,9 @@ var List2 = ({
                       variant: "ghost",
                       action: editAction.event,
                       className: cn(
-                        "p-2 rounded-[var(--radius-lg)] transition-all duration-200",
-                        "hover:bg-[var(--color-primary)]/10 hover:text-[var(--color-primary)]",
-                        "text-[var(--color-muted-foreground)]",
+                        "p-2 rounded-lg transition-all duration-200",
+                        "hover:bg-primary/10 hover:text-primary",
+                        "text-muted-foreground",
                         "active:scale-95"
                       ),
                       title: editAction.label,
@@ -25587,9 +25587,9 @@ var List2 = ({
                       variant: "ghost",
                       action: viewAction.event,
                       className: cn(
-                        "p-2 rounded-[var(--radius-lg)] transition-all duration-200",
-                        "hover:bg-[var(--color-muted)] hover:text-[var(--color-foreground)]",
-                        "text-[var(--color-muted-foreground)]",
+                        "p-2 rounded-lg transition-all duration-200",
+                        "hover:bg-muted hover:text-foreground",
+                        "text-muted-foreground",
                         "active:scale-95"
                       ),
                       title: viewAction.label,
@@ -25609,9 +25609,9 @@ var List2 = ({
                           {
                             variant: "ghost",
                             className: cn(
-                              "p-2 rounded-[var(--radius-lg)] transition-all duration-200",
-                              "hover:bg-[var(--color-muted)] hover:shadow-[var(--shadow-sm)]",
-                              "text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]",
+                              "p-2 rounded-lg transition-all duration-200",
+                              "hover:bg-muted hover:shadow-sm",
+                              "text-muted-foreground hover:text-foreground",
                               "active:scale-95"
                             ),
                             children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.MoreHorizontal, { className: "w-4 h-4" })
@@ -25622,14 +25622,14 @@ var List2 = ({
                       }
                     ) : null;
                   })(),
-                  hasExplicitClick && /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronRight, { className: "w-4 h-4 text-[var(--color-muted-foreground)]/50 group-hover:text-[var(--color-muted-foreground)] group-hover:translate-x-0.5 transition-all" })
+                  hasExplicitClick && /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronRight, { className: "w-4 h-4 text-muted-foreground/50 group-hover:text-muted-foreground group-hover:translate-x-0.5 transition-all" })
                 ]
               }
             )
           ]
         }
       ),
-      !isLast && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "ml-[calc(1.5rem)] mr-6 border-b border-[var(--color-border)]/40" })
+      !isLast && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "ml-[calc(1.5rem)] mr-6 border-b border-border/40" })
     ] }, item.id);
   };
   if (safeItems.length === 0) {
@@ -25648,11 +25648,11 @@ var List2 = ({
     {
       className: cn(
         // Container with refined styling
-        "bg-[var(--color-card)] backdrop-blur-sm",
-        "rounded-[var(--radius-xl)]",
+        "bg-card backdrop-blur-sm",
+        "rounded-xl",
         // Increased rounding
-        "border border-[var(--color-border)]",
-        "shadow-[var(--shadow-lg)]",
+        "border border-border",
+        "shadow-lg",
         // Softer, improved shadow
         "overflow-hidden",
         className
@@ -25664,11 +25664,11 @@ var List2 = ({
   );
 };
 List2.displayName = "List";
-var DefaultEmptyDetail = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full border-2 border-dashed border-[var(--color-border)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+var DefaultEmptyDetail = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full border-2 border-dashed border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
   Typography,
   {
     variant: "body2",
-    className: "text-[var(--color-muted-foreground)]",
+    className: "text-muted-foreground",
     children: "Select an item to view details"
   }
 ) });
@@ -25696,7 +25696,7 @@ var MasterDetail = ({
           "div",
           {
             className: cn(
-              "border-r-2 border-[var(--color-border)] overflow-auto",
+              "border-r-2 border-border overflow-auto",
               masterClassName
             ),
             children: master
@@ -25832,9 +25832,9 @@ var MediaGallery = ({
               Box,
               {
                 className: cn(
-                  "group relative overflow-hidden rounded-[var(--radius-md)] cursor-pointer",
+                  "group relative overflow-hidden rounded-md cursor-pointer",
                   "border-2 transition-all duration-200",
-                  isSelected ? "border-[var(--color-primary)] ring-2 ring-[var(--color-primary)]/30" : "border-transparent hover:border-[var(--color-border)]",
+                  isSelected ? "border-primary ring-2 ring-primary/30" : "border-transparent hover:border-border",
                   ASPECT_CLASSES[aspectRatio]
                 ),
                 onClick: () => handleItemClick(item),
@@ -25852,7 +25852,7 @@ var MediaGallery = ({
                     Box,
                     {
                       className: cn(
-                        "absolute inset-0 bg-[var(--color-foreground)]/0 group-hover:bg-[var(--color-foreground)]/20",
+                        "absolute inset-0 bg-foreground/0 group-hover:bg-foreground/20",
                         "transition-colors duration-200 flex items-center justify-center"
                       ),
                       children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -25866,7 +25866,7 @@ var MediaGallery = ({
                     }
                   ),
                   item.caption && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/60 to-transparent", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-white truncate", children: item.caption }) }),
-                  selectable && isSelected && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute top-2 right-2 w-5 h-5 rounded-[var(--radius-full)] bg-[var(--color-primary)] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-white text-[10px]", children: "\u2713" }) })
+                  selectable && isSelected && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute top-2 right-2 w-5 h-5 rounded-full bg-primary flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-white text-[10px]", children: "\u2713" }) })
                 ]
               },
               item.id
@@ -25878,7 +25878,7 @@ var MediaGallery = ({
     lightboxItem && /* @__PURE__ */ jsxRuntime.jsx(
       Box,
       {
-        className: "fixed inset-0 z-50 bg-[var(--color-background)]/80 backdrop-blur-sm flex items-center justify-center",
+        className: "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm flex items-center justify-center",
         action: "LIGHTBOX_CLOSE",
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           VStack,
@@ -25903,7 +25903,7 @@ var MediaGallery = ({
                 {
                   src: lightboxItem.src,
                   alt: lightboxItem.alt || lightboxItem.caption || "",
-                  className: "max-w-full max-h-[80vh] object-contain rounded-[var(--radius-md)]"
+                  className: "max-w-full max-h-[80vh] object-contain rounded-md"
                 }
               ),
               lightboxItem.caption && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", className: "text-white mt-3 text-center", children: lightboxItem.caption })
@@ -26094,7 +26094,7 @@ function NegotiatorBoard({
         backgroundPosition: "center"
       },
       children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "lg", className: "p-4", children: [
-        entity.headerImage && !headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 rounded-lg bg-gradient-to-br from-[var(--color-muted)] to-[var(--color-accent)] opacity-60" }) : null,
+        entity.headerImage && !headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 rounded-lg bg-gradient-to-br from-muted to-accent opacity-60" }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", weight: "bold", children: entity.title }),
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", children: entity.description }),
@@ -26109,16 +26109,16 @@ function NegotiatorBoard({
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", justify: "center", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4 flex-1 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", align: "center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-[var(--color-muted-foreground)]", children: t("negotiator.you") }),
+            /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-muted-foreground", children: t("negotiator.you") }),
             /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", weight: "bold", children: playerTotal })
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4 flex-1 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", align: "center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-[var(--color-muted-foreground)]", children: t("negotiator.opponent") }),
+            /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-muted-foreground", children: t("negotiator.opponent") }),
             /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", weight: "bold", children: opponentTotal })
           ] }) })
         ] }),
         !isComplete && /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "bold", className: "uppercase tracking-wider text-[var(--color-muted-foreground)]", children: t("negotiator.chooseAction") }),
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "bold", className: "uppercase tracking-wider text-muted-foreground", children: t("negotiator.chooseAction") }),
           /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "sm", justify: "center", className: "flex-wrap", children: actions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(
             Button,
             {
@@ -26130,21 +26130,21 @@ function NegotiatorBoard({
           )) })
         ] }) }),
         history.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "bold", className: "uppercase tracking-wider text-[var(--color-muted-foreground)]", children: t("negotiator.history") }),
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "bold", className: "uppercase tracking-wider text-muted-foreground", children: t("negotiator.history") }),
           history.map((round) => /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", align: "center", className: "text-sm", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(Badge, { size: "sm", children: [
               "R",
               round.round
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", children: getActionLabel(round.playerAction) }),
-            /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-[var(--color-muted-foreground)]", children: "vs" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-muted-foreground", children: "vs" }),
             /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", children: getActionLabel(round.opponentAction) }),
             /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: LucideIcons.ArrowRight, size: "xs" }),
             /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", weight: "bold", className: "text-green-600", children: [
               "+",
               round.playerPayoff
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", className: "text-[var(--color-muted-foreground)]", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", className: "text-muted-foreground", children: [
               "/ +",
               round.opponentPayoff
             ] })
@@ -26153,7 +26153,7 @@ function NegotiatorBoard({
         isComplete && /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", align: "center", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: LucideIcons.CheckCircle, size: "lg", className: won ? "text-green-600" : "text-red-600" }),
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", weight: "bold", children: won ? entity.successMessage ?? t("negotiator.success") : entity.failMessage ?? t("negotiator.failed") }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", className: "text-[var(--color-muted-foreground)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", className: "text-muted-foreground", children: [
             t("negotiator.finalScore"),
             ": ",
             playerTotal,
@@ -26343,7 +26343,7 @@ var DumbbellOrbital = ({
         config.hasNode && /* @__PURE__ */ jsxRuntime.jsx(
           Box,
           {
-            className: "absolute rounded-[var(--radius-full)] bg-[var(--color-foreground)]",
+            className: "absolute rounded-full bg-foreground",
             style: {
               width: size * 0.06,
               height: size * 0.06,
@@ -26404,7 +26404,7 @@ var CloverleafOrbital = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           Box,
           {
-            className: "absolute rounded-[var(--radius-full)] bg-[var(--color-foreground)]",
+            className: "absolute rounded-full bg-foreground",
             style: {
               width: size * 0.08,
               height: size * 0.08,
@@ -26525,7 +26525,7 @@ var OrbitalVisualization = ({
           }
         ),
         showLabel && /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "mt-4 text-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", className: "text-lg font-semibold text-[var(--color-foreground)]", children: config.name }),
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", className: "text-lg font-semibold text-foreground", children: config.name }),
           /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", color: "muted", children: [
             "Complexity: ",
             complexity,
@@ -26579,11 +26579,11 @@ var PageHeader = ({
     }
   };
   const statusColors2 = {
-    default: "bg-[var(--color-muted)] text-[var(--color-foreground)]",
-    success: "bg-[var(--color-success)]/10 text-[var(--color-success)]",
-    warning: "bg-[var(--color-warning)]/10 text-[var(--color-warning)]",
-    danger: "bg-[var(--color-error)]/10 text-[var(--color-error)]",
-    info: "bg-[var(--color-info)]/10 text-[var(--color-info)]"
+    default: "bg-muted text-foreground",
+    success: "bg-success/10 text-success",
+    warning: "bg-warning/10 text-warning",
+    danger: "bg-error/10 text-error",
+    info: "bg-info/10 text-info"
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn("mb-6", className), children: [
     breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "nav", className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "ol", className: "flex items-center gap-2 text-sm", children: breadcrumbs.map((crumb, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React114__namespace.default.Fragment, { children: [
@@ -26592,10 +26592,10 @@ var PageHeader = ({
         "a",
         {
           href: crumb.href,
-          className: "text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]",
+          className: "text-muted-foreground hover:text-foreground",
           children: crumb.label
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-[var(--color-foreground)] font-medium", children: crumb.label })
+      ) : /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-foreground font-medium", children: crumb.label })
     ] }, idx)) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-start justify-between gap-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-start gap-4", children: [
@@ -26604,19 +26604,19 @@ var PageHeader = ({
           {
             variant: "ghost",
             onClick: handleBack,
-            className: "mt-1 p-2 rounded-[var(--radius-lg)]",
-            children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ArrowLeft, { className: "h-5 w-5 text-[var(--color-muted-foreground)]" })
+            className: "mt-1 p-2 rounded-lg",
+            children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ArrowLeft, { className: "h-5 w-5 text-muted-foreground" })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h1", className: "text-2xl font-bold text-[var(--color-foreground)]", children: title != null ? String(title) : "" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h1", className: "text-2xl font-bold text-foreground", children: title != null ? String(title) : "" }),
             status && /* @__PURE__ */ jsxRuntime.jsx(
               Typography,
               {
                 variant: "small",
                 className: cn(
-                  "px-2.5 py-1 rounded-[var(--radius-full)] text-xs font-medium",
+                  "px-2.5 py-1 rounded-full text-xs font-medium",
                   statusColors2[status.variant || "default"]
                 ),
                 children: status.label
@@ -26641,14 +26641,14 @@ var PageHeader = ({
         `action-${idx}`
       )) })
     ] }),
-    tabs && tabs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mt-6 border-b border-[var(--color-border)]", children: /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "nav", className: "flex gap-6", children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
+    tabs && tabs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mt-6 border-b border-border", children: /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "nav", className: "flex gap-6", children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
       Button,
       {
         variant: "ghost",
         onClick: () => onTabChange?.(tab.value),
         className: cn(
           "pb-3 text-sm font-bold border-b-2 transition-colors rounded-none",
-          activeTab === tab.value ? "border-[var(--color-primary)] text-[var(--color-foreground)]" : "border-transparent text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] hover:border-[var(--color-border)]"
+          activeTab === tab.value ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground hover:border-border"
         ),
         children: [
           tab.label,
@@ -26657,8 +26657,8 @@ var PageHeader = ({
             {
               variant: "small",
               className: cn(
-                "ml-2 px-2 py-0.5 rounded-[var(--radius-full)] text-xs",
-                activeTab === tab.value ? "bg-[var(--color-primary)]/10 text-[var(--color-primary)]" : "bg-[var(--color-muted)] text-[var(--color-muted-foreground)]"
+                "ml-2 px-2 py-0.5 rounded-full text-xs",
+                activeTab === tab.value ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
               ),
               children: tab.count
             }
@@ -27817,16 +27817,16 @@ var paddingStyles4 = {
 var variantStyles8 = {
   default: "",
   card: [
-    "bg-[var(--color-card)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-[var(--shadow-main)]",
-    "rounded-[var(--radius-md)]"
+    "bg-card",
+    "border-[length:var(--border-width)] border-border",
+    "shadow",
+    "rounded-md"
   ].join(" "),
   bordered: [
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "rounded-[var(--radius-md)]"
+    "border-[length:var(--border-width)] border-border",
+    "rounded-md"
   ].join(" "),
-  filled: "bg-[var(--color-muted)] rounded-[var(--radius-md)]"
+  filled: "bg-muted rounded-md"
 };
 var Section = ({
   title,
@@ -27857,7 +27857,7 @@ var Section = ({
           {
             className: cn(
               "flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2 sm:gap-4",
-              divider && "pb-4 mb-4 border-b-[length:var(--border-width)] border-[var(--color-border)]",
+              divider && "pb-4 mb-4 border-b-[length:var(--border-width)] border-border",
               !divider && "mb-4",
               headerClassName
             ),
@@ -27867,7 +27867,7 @@ var Section = ({
                   Typography,
                   {
                     variant: "h4",
-                    className: "text-[var(--color-foreground)] font-semibold",
+                    className: "text-foreground font-semibold",
                     children: title
                   }
                 ),
@@ -28292,7 +28292,7 @@ function SequencerBoard({
         backgroundPosition: "center"
       },
       children: [
-        entity.headerImage && !headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 rounded-lg bg-gradient-to-br from-[var(--color-muted)] to-[var(--color-accent)] opacity-60" }) : null,
+        entity.headerImage && !headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 rounded-lg bg-gradient-to-br from-muted to-accent opacity-60" }) : null,
         /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: "text-foreground", children: entity.title }),
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", className: "text-muted-foreground", children: entity.description })
@@ -28364,15 +28364,15 @@ var SidebarNavItem = ({ item, collapsed }) => {
       onClick: item.onClick,
       className: cn(
         "w-full flex items-center gap-3 px-3 py-2.5 transition-all duration-[var(--transition-fast)] group relative",
-        "rounded-[var(--radius-sm)] border-[length:var(--border-width-thin)] border-transparent",
+        "rounded-sm border-[length:var(--border-width-thin)] border-transparent",
         isActive ? [
-          "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-          "font-medium shadow-[var(--shadow-sm)]",
-          "border-[var(--color-primary)] translate-x-1 -translate-y-0.5"
+          "bg-primary text-primary-foreground",
+          "font-medium shadow-sm",
+          "border-primary translate-x-1 -translate-y-0.5"
         ].join(" ") : [
-          "text-[var(--color-foreground)]",
-          "hover:bg-[var(--color-muted)] hover:border-[var(--color-border)]",
-          "active:bg-[var(--color-primary)] active:text-[var(--color-primary-foreground)]"
+          "text-foreground",
+          "hover:bg-muted hover:border-border",
+          "active:bg-primary active:text-primary-foreground"
         ].join(" ")
       ),
       title: collapsed ? item.label : void 0,
@@ -28383,7 +28383,7 @@ var SidebarNavItem = ({ item, collapsed }) => {
             size: 20,
             className: cn(
               "min-w-[20px] flex-shrink-0",
-              isActive && "text-[var(--color-primary-foreground)]"
+              isActive && "text-primary-foreground"
             )
           }
         ),
@@ -28392,9 +28392,9 @@ var SidebarNavItem = ({ item, collapsed }) => {
         collapsed && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn(
           "absolute left-full ml-2 px-2 py-1 text-xs opacity-0 group-hover:opacity-100",
           "pointer-events-none whitespace-nowrap z-50 transition-opacity",
-          "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-          "border-[length:var(--border-width-thin)] border-[var(--color-border)]",
-          "rounded-[var(--radius-sm)]"
+          "bg-primary text-primary-foreground",
+          "border-[length:var(--border-width-thin)] border-border",
+          "rounded-sm"
         ), children: item.label })
       ]
     }
@@ -28445,13 +28445,13 @@ var Sidebar = ({
       as: "aside",
       className: cn(
         "flex flex-col h-full",
-        "bg-[var(--color-card)] border-r border-[var(--color-border)]",
+        "bg-card border-r border-border",
         "transition-all duration-300 ease-in-out",
         collapsed ? "w-20" : "w-64",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "h-16 flex items-center justify-between px-4 border-b border-[var(--color-border)] flex-shrink-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "h-16 flex items-center justify-between px-4 border-b border-border flex-shrink-0", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             Box,
             {
@@ -28461,8 +28461,8 @@ var Sidebar = ({
               ),
               onClick: handleLogoClick,
               children: [
-                logo ? typeof logo === "string" ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: brandName, className: "h-8 w-8" }) : logo : logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: brandName, className: "h-8 w-8" }) : /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "h-8 w-8 bg-[var(--color-primary)] flex items-center justify-center rounded-[var(--radius-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-[var(--color-primary-foreground)] font-bold text-sm", children: "K" }) }),
-                !collapsed && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", className: "text-xl font-bold text-[var(--color-foreground)]", children: brandName })
+                logo ? typeof logo === "string" ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: brandName, className: "h-8 w-8" }) : logo : logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: brandName, className: "h-8 w-8" }) : /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "h-8 w-8 bg-primary flex items-center justify-center rounded-sm", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-primary-foreground font-bold text-sm", children: "K" }) }),
+                !collapsed && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", className: "text-xl font-bold text-foreground", children: brandName })
               ]
             }
           ),
@@ -28472,8 +28472,8 @@ var Sidebar = ({
               variant: "ghost",
               onClick: handleToggle,
               className: cn(
-                "p-1.5 hover:bg-[var(--color-muted)] text-[var(--color-foreground)] hidden lg:block",
-                "rounded-[var(--radius-sm)]",
+                "p-1.5 hover:bg-muted text-foreground hidden lg:block",
+                "rounded-sm",
                 collapsed && "mx-auto"
               ),
               title: collapsed ? t("sidebar.expand") : t("sidebar.collapse"),
@@ -28485,7 +28485,7 @@ var Sidebar = ({
             {
               variant: "ghost",
               onClick: handleClose,
-              className: "p-1.5 hover:bg-[var(--color-muted)] text-[var(--color-foreground)] lg:hidden rounded-[var(--radius-sm)]",
+              className: "p-1.5 hover:bg-muted text-foreground lg:hidden rounded-sm",
               "aria-label": t("sidebar.close"),
               children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { size: 18 })
             }
@@ -28499,7 +28499,7 @@ var Sidebar = ({
           },
           item.id
         )) }),
-        (footerContent || userSection) && /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "p-3 border-t border-[var(--color-border)] space-y-1 flex-shrink-0", children: [
+        (footerContent || userSection) && /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "p-3 border-t border-border space-y-1 flex-shrink-0", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn(
             "flex items-center",
             collapsed ? "justify-center flex-col gap-4" : "justify-between px-2"
@@ -28512,7 +28512,7 @@ var Sidebar = ({
             {
               variant: "ghost",
               onClick: handleToggle,
-              className: "w-full flex justify-center p-2 mt-2 text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] lg:hidden",
+              className: "w-full flex justify-center p-2 mt-2 text-muted-foreground hover:text-foreground lg:hidden",
               children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronRight, { size: 20 })
             }
           )
@@ -28646,8 +28646,8 @@ var SignaturePad = ({
       Box,
       {
         className: cn(
-          "w-full rounded-[var(--radius-md)] border border-[var(--color-border)]",
-          "bg-[var(--color-background)]",
+          "w-full rounded-md border border-border",
+          "bg-background",
           readOnly && "opacity-60 cursor-not-allowed",
           !readOnly && "cursor-crosshair"
         ),
@@ -29091,13 +29091,13 @@ function SimulatorBoard({
         backgroundPosition: "center"
       },
       children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "lg", className: "p-4", children: [
-        entity.headerImage && !headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 rounded-lg bg-gradient-to-br from-[var(--color-muted)] to-[var(--color-accent)] opacity-60" }) : null,
+        entity.headerImage && !headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 rounded-lg bg-gradient-to-br from-muted to-accent opacity-60" }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", weight: "bold", children: entity.title }),
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", children: entity.description })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "md", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "bold", className: "uppercase tracking-wider text-[var(--color-muted-foreground)]", children: t("simulator.parameters") }),
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "bold", className: "uppercase tracking-wider text-muted-foreground", children: t("simulator.parameters") }),
           parameters.map((param) => /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "between", align: "center", children: [
               /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", weight: "medium", children: param.label }),
@@ -29117,16 +29117,16 @@ function SimulatorBoard({
                 value: values[param.id],
                 onChange: (e) => handleParameterChange(param.id, Number(e.target.value)),
                 disabled: submitted,
-                className: "w-full accent-[var(--color-foreground)]"
+                className: "w-full accent-foreground"
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "between", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", className: "text-[var(--color-muted-foreground)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", className: "text-muted-foreground", children: [
                 param.min,
                 " ",
                 param.unit
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", className: "text-[var(--color-muted-foreground)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", className: "text-muted-foreground", children: [
                 param.max,
                 " ",
                 param.unit
@@ -29135,7 +29135,7 @@ function SimulatorBoard({
           ] }, param.id))
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", align: "center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "bold", className: "uppercase tracking-wider text-[var(--color-muted-foreground)]", children: entity.outputLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "bold", className: "uppercase tracking-wider text-muted-foreground", children: entity.outputLabel }),
           /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "h3", weight: "bold", children: [
             output.toFixed(2),
             " ",
@@ -29145,7 +29145,7 @@ function SimulatorBoard({
             /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: isCorrect ? LucideIcons.CheckCircle : LucideIcons.XCircle, size: "sm", className: isCorrect ? "text-green-600" : "text-red-600" }),
             /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", className: isCorrect ? "text-green-600" : "text-red-600", children: isCorrect ? entity.successMessage ?? t("simulator.correct") : entity.failMessage ?? t("simulator.incorrect") })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", className: "text-[var(--color-muted-foreground)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", className: "text-muted-foreground", children: [
             t("simulator.target"),
             ": ",
             targetValue,
@@ -29310,8 +29310,8 @@ var SplitPane = ({
           {
             onMouseDown: handleMouseDown,
             className: cn(
-              "flex-shrink-0 bg-[var(--color-border)] transition-colors",
-              isHorizontal ? "w-1 cursor-col-resize hover:w-1.5 hover:bg-[var(--color-muted-foreground)]" : "h-1 cursor-row-resize hover:h-1.5 hover:bg-[var(--color-muted-foreground)]"
+              "flex-shrink-0 bg-border transition-colors",
+              isHorizontal ? "w-1 cursor-col-resize hover:w-1.5 hover:bg-muted-foreground" : "h-1 cursor-row-resize hover:h-1.5 hover:bg-muted-foreground"
             )
           }
         ),
@@ -29331,8 +29331,8 @@ var StatCard = ({
   trendDirection: manualDirection,
   invertTrend = false,
   icon: iconProp,
-  iconBg = "bg-[var(--color-muted)]",
-  iconColor = "text-[var(--color-foreground)]",
+  iconBg = "bg-muted",
+  iconColor = "text-foreground",
   subtitle,
   action,
   className,
@@ -29420,8 +29420,8 @@ var StatCard = ({
           className: cn("grid gap-4", className),
           style: { gridTemplateColumns: `repeat(${schemaStats.length}, 1fr)` },
           children: schemaStats.map((_, idx) => /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", className: "animate-pulse", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "h-3 bg-[var(--color-muted)] rounded w-16" }),
-            /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "h-6 bg-[var(--color-muted)] rounded w-12" })
+            /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "h-3 bg-muted rounded w-16" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "h-6 bg-muted rounded w-12" })
           ] }) }, idx))
         }
       );
@@ -29452,9 +29452,9 @@ var StatCard = ({
   }
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("p-6", className), children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", className: "animate-pulse", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "h-4 bg-[var(--color-muted)] rounded w-24" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "h-8 bg-[var(--color-muted)] rounded w-32" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "h-4 bg-[var(--color-muted)] rounded w-20" })
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "h-4 bg-muted rounded w-24" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "h-8 bg-muted rounded w-32" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "h-4 bg-muted rounded w-20" })
     ] }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cn("p-6", className), children: [
@@ -29470,7 +29470,7 @@ var StatCard = ({
               gap: "none",
               className: cn(
                 "gap-0.5 text-sm font-bold",
-                isPositive ? "text-[var(--color-success)]" : trendDirection === "neutral" ? "text-[var(--color-muted-foreground)]" : "text-[var(--color-error)]"
+                isPositive ? "text-success" : trendDirection === "neutral" ? "text-muted-foreground" : "text-error"
               ),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(TrendIcon, { className: "h-4 w-4" }),
@@ -29520,7 +29520,7 @@ var StatCard = ({
       {
         variant: "ghost",
         onClick: handleActionClick,
-        className: "mt-4 text-sm font-bold text-[var(--color-foreground)] hover:underline",
+        className: "mt-4 text-sm font-bold text-foreground hover:underline",
         "data-testid": action.event ? `action-${action.event}` : void 0,
         children: [
           action.label,
@@ -29846,7 +29846,7 @@ function StateArchitectBoard({
         backgroundPosition: "center"
       },
       children: [
-        entity.headerImage && !headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 rounded-lg bg-gradient-to-br from-[var(--color-muted)] to-[var(--color-accent)] opacity-60" }) : null,
+        entity.headerImage && !headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full h-32 rounded-lg bg-gradient-to-br from-muted to-accent opacity-60" }) : null,
         /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: "text-foreground", children: entity.title }),
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", className: "text-muted-foreground", children: entity.description }),
@@ -30017,7 +30017,7 @@ var TabbedContainer = ({
     [controlledActiveTab, onTabChange]
   );
   const activeTabDef = safeTabs.find((tab) => tab.id === activeTab);
-  const activeContent = activeTabDef?.content || (activeTabDef?.sectionId ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 text-[var(--color-muted-foreground)]", children: [
+  const activeContent = activeTabDef?.content || (activeTabDef?.sectionId ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 text-muted-foreground", children: [
     "Section: ",
     activeTabDef.sectionId
   ] }) : null);
@@ -30037,7 +30037,7 @@ var TabbedContainer = ({
             role: "tablist",
             className: cn(
               "flex flex-shrink-0",
-              isVertical ? "flex-col border-r-2 border-[var(--color-border)]" : "flex-row border-b-2 border-[var(--color-border)]"
+              isVertical ? "flex-col border-r-2 border-border" : "flex-row border-b-2 border-border"
             ),
             children: safeTabs.map((tab) => {
               const isActive = tab.id === activeTab;
@@ -30053,9 +30053,9 @@ var TabbedContainer = ({
                   onClick: () => !isDisabled && handleTabChange(tab.id),
                   className: cn(
                     "flex items-center gap-2 px-4 py-3 text-sm font-medium transition-colors",
-                    "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)] focus:ring-offset-2",
+                    "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
                     "disabled:opacity-50 disabled:cursor-not-allowed",
-                    isActive ? "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]" : "bg-[var(--color-card)] text-[var(--color-foreground)] hover:bg-[var(--color-muted)]",
+                    isActive ? "bg-primary text-primary-foreground" : "bg-card text-foreground hover:bg-muted",
                     isVertical ? "justify-start" : "justify-center"
                   ),
                   children: [
@@ -30073,7 +30073,7 @@ var TabbedContainer = ({
                       {
                         className: cn(
                           "px-1.5 py-0.5 text-xs font-medium rounded",
-                          isActive ? "bg-[var(--color-primary-foreground)] text-[var(--color-primary)]" : "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]"
+                          isActive ? "bg-primary-foreground text-primary" : "bg-primary text-primary-foreground"
                         ),
                         children: tab.badge
                       }
@@ -30195,7 +30195,7 @@ var Table = ({
           "th",
           {
             className: cn(
-              "px-4 py-3 text-left text-xs font-bold text-[var(--color-foreground)] uppercase tracking-wider bg-[var(--color-table-header)]",
+              "px-4 py-3 text-left text-xs font-bold text-foreground uppercase tracking-wider bg-[var(--color-table-header)]",
               sortable && column.sortable && "cursor-pointer hover:bg-[var(--color-table-row-hover)]"
             ),
             style: { width: column.width },
@@ -30284,23 +30284,23 @@ var Table = ({
 Table.displayName = "Table";
 var STATUS_STYLES3 = {
   complete: {
-    dotColor: "text-[var(--color-success)]",
-    lineColor: "bg-[var(--color-success)]",
+    dotColor: "text-success",
+    lineColor: "bg-success",
     icon: LucideIcons.CheckCircle2
   },
   active: {
-    dotColor: "text-[var(--color-primary)]",
-    lineColor: "bg-[var(--color-primary)]",
+    dotColor: "text-primary",
+    lineColor: "bg-primary",
     icon: LucideIcons.Clock
   },
   pending: {
-    dotColor: "text-[var(--color-muted-foreground)]",
-    lineColor: "bg-[var(--color-border)]",
+    dotColor: "text-muted-foreground",
+    lineColor: "bg-border",
     icon: LucideIcons.Circle
   },
   error: {
-    dotColor: "text-[var(--color-error)]",
-    lineColor: "bg-[var(--color-error)]",
+    dotColor: "text-error",
+    lineColor: "bg-error",
     icon: LucideIcons.AlertCircle
   }
 };
@@ -30380,7 +30380,7 @@ var Timeline = ({
             {
               icon: ItemIcon,
               size: "sm",
-              className: cn(style.dotColor, "z-10 bg-[var(--color-card)]")
+              className: cn(style.dotColor, "z-10 bg-card")
             }
           ),
           !isLast && /* @__PURE__ */ jsxRuntime.jsx(
@@ -30685,7 +30685,7 @@ var WizardContainer = ({
       {
         border: true,
         className: cn(
-          "border-b-2 border-x-0 border-t-0 border-[var(--color-border)]",
+          "border-b-2 border-x-0 border-t-0 border-border",
           compact ? "px-4 py-2" : "px-6 py-4"
         ),
         children: /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "sm", align: "center", className: "flex-wrap", children: steps.map((step, index) => {
@@ -30701,10 +30701,10 @@ var WizardContainer = ({
                 disabled: !isCompleted || !allowBack,
                 className: cn(
                   "w-8 h-8 flex items-center justify-center text-sm font-bold transition-colors",
-                  "border-2 border-[var(--color-border)]",
-                  isActive && "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-                  isCompleted && "bg-[var(--color-primary)] text-[var(--color-primary-foreground)] cursor-pointer hover:bg-[var(--color-primary-hover)]",
-                  !isActive && !isCompleted && "bg-[var(--color-card)] text-[var(--color-foreground)]"
+                  "border-2 border-border",
+                  isActive && "bg-primary text-primary-foreground",
+                  isCompleted && "bg-primary text-primary-foreground cursor-pointer hover:bg-primary-hover",
+                  !isActive && !isCompleted && "bg-card text-foreground"
                 ),
                 children: isCompleted ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: LucideIcons.Check, size: "sm" }) : index + 1
               }
@@ -30714,7 +30714,7 @@ var WizardContainer = ({
               {
                 className: cn(
                   "hidden md:block",
-                  isActive ? "text-[var(--color-foreground)] font-bold" : "text-[var(--color-muted-foreground)]"
+                  isActive ? "text-foreground font-bold" : "text-muted-foreground"
                 ),
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   Typography,
@@ -30731,7 +30731,7 @@ var WizardContainer = ({
               {
                 className: cn(
                   "flex-1 h-0.5",
-                  index < currentStep ? "bg-[var(--color-primary)]" : "bg-[var(--color-border)]"
+                  index < currentStep ? "bg-primary" : "bg-border"
                 )
               }
             )
@@ -30745,14 +30745,14 @@ var WizardContainer = ({
         paddingX: "lg",
         paddingY: "md",
         border: true,
-        className: "border-b-2 border-x-0 border-t-0 border-[var(--color-border)]",
+        className: "border-b-2 border-x-0 border-t-0 border-border",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", as: "h2", children: currentStepData.title ?? currentStepData.name ?? `Step ${currentStep + 1}` }),
           currentStepData.description && /* @__PURE__ */ jsxRuntime.jsx(
             Typography,
             {
               variant: "body2",
-              className: "text-[var(--color-muted-foreground)] mt-1",
+              className: "text-muted-foreground mt-1",
               children: currentStepData.description
             }
           )
@@ -30765,7 +30765,7 @@ var WizardContainer = ({
       {
         border: true,
         className: cn(
-          "border-t-2 border-x-0 border-b-0 border-[var(--color-border)] flex justify-between",
+          "border-t-2 border-x-0 border-b-0 border-border flex justify-between",
           compact ? "px-4 py-2" : "px-6 py-4"
         ),
         children: [
@@ -30785,7 +30785,7 @@ var WizardContainer = ({
             Typography,
             {
               variant: "caption",
-              className: "text-[var(--color-muted-foreground)]",
+              className: "text-muted-foreground",
               children: t("wizard.stepOf", { current: String(currentStep + 1), total: String(steps.length) })
             }
           ) }),
@@ -30994,7 +30994,7 @@ function WorldMapBoard({
   if (isLoading || !resolved) {
     return /* @__PURE__ */ jsxRuntime.jsx(LoadingState, { message: "Loading map..." });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { className: cn("world-map-board min-h-screen bg-[var(--color-background)]", className), gap: "none", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { className: cn("world-map-board min-h-screen bg-background", className), gap: "none", children: [
     header && header(ctx),
     /* @__PURE__ */ jsxRuntime.jsxs(HStack, { className: "flex-1 overflow-hidden", gap: "none", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Stack, { className: "flex-1 overflow-auto p-4 relative", children: [
@@ -31025,7 +31025,7 @@ function WorldMapBoard({
         ),
         overlay && overlay(ctx)
       ] }),
-      sidePanel && /* @__PURE__ */ jsxRuntime.jsx(Stack, { className: "w-80 shrink-0 border-l border-[var(--color-border)] bg-[var(--color-surface)] overflow-y-auto p-4", children: sidePanel(ctx) })
+      sidePanel && /* @__PURE__ */ jsxRuntime.jsx(Stack, { className: "w-80 shrink-0 border-l border-border bg-surface overflow-y-auto p-4", children: sidePanel(ctx) })
     ] }),
     footer && footer(ctx)
   ] });
@@ -31425,13 +31425,13 @@ function renderContainedPortal(slot, content, onDismiss) {
               className: "pointer-events-auto max-w-[calc(100%-2rem)] max-h-full overflow-auto flex flex-col",
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-[var(--color-border)]", children: [
+                content.props.title ? /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     Box,
                     {
                       as: "button",
-                      className: "text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] cursor-pointer",
+                      className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
                       children: "\u2715"
                     }
@@ -31459,13 +31459,13 @@ function renderContainedPortal(slot, content, onDismiss) {
               ),
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-[var(--color-border)]", children: [
+                content.props.title ? /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     Box,
                     {
                       as: "button",
-                      className: "text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] cursor-pointer",
+                      className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
                       children: "\u2715"
                     }
@@ -31491,7 +31491,7 @@ function renderContainedPortal(slot, content, onDismiss) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
-          className: "absolute inset-0 z-50 bg-[var(--color-foreground)]/50 flex items-center justify-center overflow-auto",
+          className: "absolute inset-0 z-50 bg-foreground/50 flex items-center justify-center overflow-auto",
           onClick: onDismiss,
           children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "max-h-full overflow-auto", onClick: (e) => e.stopPropagation(), children: slotContent })
         }
@@ -31722,7 +31722,7 @@ function SlotPortal({
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
-          className: "fixed inset-0 z-50 bg-[var(--color-foreground)]/50 flex items-center justify-center",
+          className: "fixed inset-0 z-50 bg-foreground/50 flex items-center justify-center",
           onClick: onDismiss,
           children: /* @__PURE__ */ jsxRuntime.jsx(Box, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss }) })
         }
@@ -31824,7 +31824,7 @@ function SlotContentRenderer({
       className: "slot-content",
       "data-pattern": content.pattern,
       "data-id": content.id,
-      children: content.props.children ?? /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "p-4 text-sm text-[var(--color-muted-foreground)] border border-dashed border-[var(--color-border)] rounded", children: [
+      children: content.props.children ?? /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "p-4 text-sm text-muted-foreground border border-dashed border-border rounded", children: [
         "Unknown pattern: ",
         content.pattern,
         content.sourceTrait && /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "ml-2", children: [