@cytario/design 5.3.0 → 6.0.1

package/dist/index.js

@@ -18,46 +18,50 @@ var sizeStyles = {
 };
 var variantStyles = {
   primary: [
-    "bg-(--color-action-primary) text-(--color-text-inverse)",
-    "hover:bg-(--color-action-primary-hover)",
-    "pressed:bg-(--color-action-primary-active)"
+    "bg-primary text-primary-foreground",
+    "hover:bg-primary-hover",
+    "pressed:bg-primary-pressed"
   ].join(" "),
   secondary: [
-    "bg-transparent text-(--color-action-secondary)",
-    "border border-(--color-border-brand)",
-    "hover:bg-purple-50",
-    "pressed:bg-purple-100"
-  ].join(" "),
-  ghost: [
-    "bg-transparent text-(--color-text-primary)",
-    "hover:bg-(--color-surface-hover)",
-    "pressed:bg-(--color-surface-pressed)"
+    "bg-secondary text-secondary-foreground",
+    "hover:bg-secondary-hover",
+    "pressed:bg-secondary-pressed"
   ].join(" "),
   destructive: [
-    "bg-(--color-action-danger) text-(--color-text-inverse)",
-    "hover:bg-(--color-action-danger-hover)",
-    "pressed:bg-(--color-action-danger-hover)"
-  ].join(" "),
-  default: [
-    "bg-(--color-action-default) text-(--color-text-inverse)",
-    "hover:bg-(--color-action-default-hover)",
-    "pressed:bg-slate-600"
+    "bg-destructive text-destructive-foreground",
+    "hover:bg-destructive-hover",
+    "pressed:bg-destructive-pressed"
   ].join(" "),
   success: [
-    "bg-(--color-action-success) text-(--color-text-inverse)",
-    "hover:bg-(--color-action-success-hover)",
-    "pressed:bg-green-800"
+    "bg-success text-success-foreground",
+    "hover:bg-success-hover",
+    "pressed:bg-success-pressed"
+  ].join(" "),
+  warning: [
+    "bg-warning text-warning-foreground",
+    "hover:bg-warning-hover",
+    "pressed:bg-warning-pressed"
   ].join(" "),
   info: [
-    "bg-(--color-action-info) text-(--color-text-inverse)",
-    "hover:bg-(--color-action-info-hover)",
-    "pressed:bg-slate-800"
+    "bg-info text-info-foreground",
+    "hover:bg-info-hover",
+    "pressed:bg-info-pressed"
   ].join(" "),
   neutral: [
-    "bg-(--color-surface-default) text-(--color-text-primary)",
-    "border border-(--color-border-default)",
-    "hover:bg-(--color-surface-subtle)",
-    "pressed:bg-(--color-surface-muted)"
+    "bg-muted text-foreground",
+    "hover:bg-accent",
+    "pressed:bg-accent-pressed"
+  ].join(" "),
+  outline: [
+    "bg-transparent text-foreground",
+    "border border-border",
+    "hover:bg-muted",
+    "pressed:bg-accent-pressed"
+  ].join(" "),
+  ghost: [
+    "bg-transparent text-foreground",
+    "hover:bg-muted",
+    "pressed:bg-accent-pressed"
   ].join(" ")
 };
 
@@ -179,10 +183,10 @@ function Button({
   ...props
 }) {
   const { inGroup, position } = useInputGroup();
-  const groupGhost = inGroup && variant === "ghost" ? "bg-(--color-surface-default) text-(--color-text-secondary) border border-(--color-border-default) hover:bg-(--color-surface-hover) hover:text-(--color-text-primary) hover:border-(--color-border-strong) pressed:bg-(--color-surface-pressed) pressed:text-(--color-text-primary)" : "";
+  const groupGhost = inGroup && variant === "ghost" ? "bg-background text-muted-foreground border border-border hover:bg-accent hover:text-foreground hover:border-border pressed:bg-accent pressed:text-foreground" : "";
   const radiusClass = inGroup ? groupRadiusClass(position) : "rounded-md";
   const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
-  const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2";
+  const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
   return /* @__PURE__ */ jsxs2(
     AriaButton,
     {
@@ -231,8 +235,8 @@ var tooltipCx = [
   // Natural content width (capped at max-w-xs): being positioned near the
   // right viewport edge must shift the tooltip left, not squeeze its layout.
   "w-max max-w-xs",
-  "bg-(--color-surface-overlay) backdrop-blur-sm",
-  "text-(--color-text-inverse) text-sm",
+  "bg-overlay backdrop-blur-sm",
+  "text-primary-foreground text-sm",
   "pointer-events-none"
 ].join(" ");
 function Tooltip({ content, children }) {
@@ -435,7 +439,7 @@ function useOverflowDetection(ref) {
 // src/components/TruncatedText/TruncatedText.tsx
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var spanCx = "truncate overflow-hidden whitespace-nowrap block min-w-0 w-full";
-var copyCx = "hover:bg-(--color-surface-hover) transition-colors rounded cursor-pointer";
+var copyCx = "hover:bg-accent transition-colors rounded cursor-pointer";
 var leftStyle = { direction: "rtl", textAlign: "left" };
 var pinScroll = (e) => {
   if (e.currentTarget.scrollLeft !== 0) e.currentTarget.scrollLeft = 0;
@@ -451,7 +455,7 @@ var CopiedOverlay = () => /* @__PURE__ */ jsx5(
   {
     role: "status",
     "aria-live": "polite",
-    className: "absolute inset-0 flex items-center text-(--color-text-secondary) pointer-events-none",
+    className: "absolute inset-0 flex items-center text-muted-foreground pointer-events-none",
     children: "Copied"
   }
 );
@@ -585,10 +589,10 @@ function IconButton({
   ...props
 }) {
   const { inGroup, position } = useInputGroup();
-  const groupGhost = inGroup && variant === "ghost" ? "bg-(--color-surface-default) text-(--color-text-secondary) border border-(--color-border-default) hover:bg-(--color-surface-hover) hover:text-(--color-text-primary) hover:border-(--color-border-strong) pressed:bg-(--color-surface-pressed) pressed:text-(--color-text-primary)" : "";
+  const groupGhost = inGroup && variant === "ghost" ? "bg-background text-muted-foreground border border-border hover:bg-accent hover:text-foreground hover:border-border pressed:bg-accent pressed:text-foreground" : "";
   const radiusClass = inGroup ? groupRadiusClass2(position) : "rounded-md";
   const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
-  const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2";
+  const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
   const button = /* @__PURE__ */ jsx6(
     AriaButton2,
     {
@@ -637,7 +641,7 @@ function Label({ isRequired, children, className, ...props }) {
       className: [
         "text-sm",
         "font-medium",
-        "text-(--color-text-primary)",
+        "text-foreground",
         className
       ].filter(Boolean).join(" "),
       children: [
@@ -646,7 +650,7 @@ function Label({ isRequired, children, className, ...props }) {
           "span",
           {
             "aria-hidden": "true",
-            className: "ml-0.5 text-(--color-text-danger)",
+            className: "ml-0.5 text-destructive",
             children: "*"
           }
         )
@@ -692,7 +696,7 @@ function Input({
   const Field = FieldProp;
   const isInvalid = !!errorMessage;
   const { inGroup, position } = useInputGroup();
-  const borderColor = isInvalid ? "border-(--color-border-danger)" : "border-(--color-border-default) hover:border-(--color-border-strong)";
+  const borderColor = isInvalid ? "border-destructive-border" : "border-border hover:border-border";
   const radiusClass = inGroup ? groupRadiusClasses(position) : "rounded-md";
   const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
   return /* @__PURE__ */ jsxs6(
@@ -718,10 +722,10 @@ function Input({
               "flex items-center overflow-hidden",
               radiusClass,
               "border",
-              "bg-(--color-surface-default)",
+              "bg-background",
               "outline-none transition-colors",
               borderColor,
-              "focus-within:ring-2 focus-within:ring-(--color-border-focus) focus-within:border-(--color-border-focus)",
+              "focus-within:ring-2 focus-within:ring-ring focus-within:border-ring",
               inGroup && "focus-within:z-10",
               isDisabled && "opacity-50 pointer-events-none"
             ),
@@ -731,9 +735,9 @@ function Input({
                 {
                   className: twMerge2(
                     "self-stretch flex items-center shrink-0 select-none",
-                    "bg-(--color-surface-subtle)",
-                    "border-r border-r-(--color-border-default)",
-                    "text-(--color-text-secondary)",
+                    "bg-card",
+                    "border-r border-r-border",
+                    "text-muted-foreground",
                     sizeStyles[size]
                   ),
                   children: prefix
@@ -747,8 +751,8 @@ function Input({
                     "w-full bg-transparent",
                     sizeStyles[size],
                     alignClasses[align],
-                    "text-(--color-text-primary)",
-                    "placeholder:text-(--color-text-tertiary)",
+                    "text-foreground",
+                    "placeholder:text-muted-foreground",
                     "outline-none border-none"
                   )
                 }
@@ -765,12 +769,12 @@ function Input({
               alignClasses[align],
               radiusClass,
               "border",
-              "text-(--color-text-primary)",
-              "bg-(--color-surface-default)",
-              "placeholder:text-(--color-text-tertiary)",
+              "text-foreground",
+              "bg-background",
+              "placeholder:text-muted-foreground",
               "outline-none transition-colors",
               borderColor,
-              "focus:ring-2 focus:ring-(--color-border-focus) focus:border-(--color-border-focus)",
+              "focus:ring-2 focus:ring-ring focus:border-ring",
               inGroup && "focus:z-10",
               "disabled:opacity-50 disabled:pointer-events-none"
             )
@@ -780,7 +784,7 @@ function Input({
           Text,
           {
             slot: "description",
-            className: "text-sm text-(--color-text-secondary)",
+            className: "text-sm text-muted-foreground",
             children: description
           }
         ),
@@ -789,7 +793,7 @@ function Input({
           {
             slot: "errorMessage",
             role: "alert",
-            className: "text-sm text-(--color-text-danger)",
+            className: "text-sm text-destructive",
             children: errorMessage
           }
         )
@@ -845,12 +849,12 @@ function Select({
             w-full rounded-md
             text-left
             border outline-none transition-colors
-            focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2
+            focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
             cursor-pointer disabled:opacity-50 disabled:pointer-events-none
-            bg-(--color-surface-default)
+            bg-background
           `,
               sizeStyles[size],
-              hasError ? "border-(--color-border-danger)" : "border-(--color-border-default)"
+              hasError ? "border-destructive-border" : "border-border"
             ),
             children: [
               /* @__PURE__ */ jsx9(
@@ -858,7 +862,7 @@ function Select({
                 {
                   className: twMerge3(
                     renderItem ? "min-w-0" : "truncate",
-                    "data-placeholder:text-(--color-text-tertiary)"
+                    "data-placeholder:text-muted-foreground"
                   ),
                   children: ({ selectedItem, isPlaceholder }) => {
                     if (isPlaceholder) return placeholder;
@@ -872,7 +876,7 @@ function Select({
                 {
                   "aria-hidden": true,
                   className: twMerge3(
-                    "shrink-0 text-(--color-text-secondary)",
+                    "shrink-0 text-muted-foreground",
                     size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4"
                   )
                 }
@@ -880,13 +884,13 @@ function Select({
             ]
           }
         ),
-        description && /* @__PURE__ */ jsx9(Text2, { slot: "description", className: "text-sm text-(--color-text-secondary)", children: description }),
+        description && /* @__PURE__ */ jsx9(Text2, { slot: "description", className: "text-sm text-muted-foreground", children: description }),
         hasError && /* @__PURE__ */ jsx9(
           Text2,
           {
             slot: "errorMessage",
             role: "alert",
-            className: "text-sm text-(--color-text-danger)",
+            className: "text-sm text-destructive",
             children: errorMessage
           }
         ),
@@ -896,8 +900,8 @@ function Select({
             className: twMerge3(
               "w-(--trigger-width)",
               "rounded-md",
-              "border border-(--color-border-default)",
-              "bg-(--color-surface-default)",
+              "border border-border",
+              "bg-background",
               "shadow-lg",
               "overflow-auto",
               "entering:animate-in entering:fade-in",
@@ -912,17 +916,17 @@ function Select({
                   `
                   flex items-center justify-between gap-2
                   rounded-sm
-                  text-(--color-text-primary)
+                  text-foreground
                   cursor-pointer outline-none
-                  hover:bg-(--color-surface-muted)
-                  focus-visible:bg-(--color-surface-muted)
-                  selected:text-(--color-action-primary) selected:font-medium
+                  hover:bg-muted
+                  focus-visible:bg-muted
+                  selected:text-primary selected:font-medium
                 `,
                   sizeStyles[size]
                 ),
                 children: ({ isSelected }) => /* @__PURE__ */ jsxs7(Fragment, { children: [
                   /* @__PURE__ */ jsx9("span", { className: renderItem ? "min-w-0 flex-1" : "truncate", children: renderItem ? renderItem(item) : item.name }),
-                  isSelected && /* @__PURE__ */ jsx9(Check, { className: "h-4 w-4 shrink-0 text-(--color-action-primary)" })
+                  isSelected && /* @__PURE__ */ jsx9(Check, { className: "h-4 w-4 shrink-0 text-primary" })
                 ] })
               }
             ) })
@@ -953,7 +957,7 @@ function Table({ size = "comfortable", className, ...props }) {
     {
       ...props,
       className: [
-        "w-full border-collapse text-(--font-size-sm) text-(--color-text-primary)",
+        "w-full border-collapse text-(--font-size-sm) text-foreground",
         tableSizeClass[size],
         className
       ].filter(Boolean).join(" ")
@@ -969,14 +973,14 @@ function Column(props) {
     {
       ...props,
       className: [
-        "px-3 py-2 text-left font-semibold text-(--color-text-secondary)",
-        "border-b-2 border-(--color-border-default)",
+        "px-3 py-2 text-left font-semibold text-muted-foreground",
+        "border-b-2 border-border",
         "cursor-default select-none outline-none",
-        "focus-visible:outline-2 focus-visible:outline-(--color-border-focus) focus-visible:outline-offset-[-2px]"
+        "focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-[-2px]"
       ].join(" "),
       children: ({ allowsSorting, sortDirection }) => /* @__PURE__ */ jsxs8("span", { className: "inline-flex items-center gap-1", children: [
         props.children,
-        allowsSorting && /* @__PURE__ */ jsx10("span", { "aria-hidden": "true", className: "text-(--color-text-tertiary)", children: sortDirection === "ascending" ? "\u25B2" : sortDirection === "descending" ? "\u25BC" : "\u25B4" })
+        allowsSorting && /* @__PURE__ */ jsx10("span", { "aria-hidden": "true", className: "text-muted-foreground", children: sortDirection === "ascending" ? "\u25B2" : sortDirection === "descending" ? "\u25BC" : "\u25B4" })
       ] })
     }
   );
@@ -990,11 +994,11 @@ function Row(props) {
     {
       ...props,
       className: [
-        "border-b border-(--color-border-default)",
-        "even:bg-(--color-surface-subtle)",
-        "hover:bg-(--color-surface-muted)",
+        "border-b border-border",
+        "even:bg-card",
+        "hover:bg-muted",
         "outline-none",
-        "focus-visible:outline-2 focus-visible:outline-(--color-border-focus) focus-visible:outline-offset-[-2px]",
+        "focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-[-2px]",
         "transition-colors"
       ].join(" ")
     }
@@ -1007,9 +1011,9 @@ function Cell(props) {
       ...props,
       className: [
         "px-3 py-(--table-row-py)",
-        "text-(--color-text-primary)",
+        "text-foreground",
         "outline-none",
-        "focus-visible:outline-2 focus-visible:outline-(--color-border-focus) focus-visible:outline-offset-[-2px]"
+        "focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-[-2px]"
       ].join(" ")
     }
   );
@@ -1046,10 +1050,10 @@ function Dialog({
       onOpenChange,
       isDismissable,
       className: [
-        "fixed inset-0 z-50 bg-(--color-overlay-backdrop) backdrop-blur-sm",
+        "fixed inset-0 z-50 bg-backdrop backdrop-blur-sm",
         "flex items-center justify-center",
-        "data-[entering]:animate-in data-[entering]:fade-in",
-        "data-[exiting]:animate-out data-[exiting]:fade-out"
+        "entering:animate-in entering:fade-in",
+        "exiting:animate-out exiting:fade-out"
       ].join(" "),
       children: /* @__PURE__ */ jsx11(
         Modal,
@@ -1057,18 +1061,18 @@ function Dialog({
           className: [
             "w-full mx-4",
             sizeStyles2[size],
-            "bg-(--color-surface-default) rounded-lg shadow-xl max-h-[85vh] flex flex-col",
-            "data-[entering]:animate-in data-[entering]:zoom-in-95 data-[entering]:fade-in",
-            "data-[exiting]:animate-out data-[exiting]:zoom-out-95 data-[exiting]:fade-out",
+            "bg-background rounded-lg shadow-xl max-h-[85vh] flex flex-col",
+            "entering:animate-in entering:zoom-in-95 entering:fade-in",
+            "exiting:animate-out exiting:zoom-out-95 exiting:fade-out",
             className
           ].filter(Boolean).join(" "),
           children: /* @__PURE__ */ jsx11(AriaDialog, { className: "outline-none flex flex-col max-h-[85vh]", children: ({ close }) => /* @__PURE__ */ jsxs9(Fragment2, { children: [
-            /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between px-6 py-4 border-b border-(--color-border-default)", children: [
+            /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border", children: [
               /* @__PURE__ */ jsx11(
                 Heading,
                 {
                   slot: "title",
-                  className: "text-lg font-semibold text-(--color-text-primary)",
+                  className: "text-lg font-semibold text-foreground",
                   children: title
                 }
               ),
@@ -1079,8 +1083,8 @@ function Dialog({
                   onClick: close,
                   className: [
                     "inline-flex items-center justify-center rounded-sm p-1",
-                    "text-(--color-text-secondary) hover:text-(--color-text-primary) hover:bg-(--color-surface-muted)",
-                    "outline-none focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
+                    "text-muted-foreground hover:text-foreground hover:bg-muted",
+                    "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
                     "transition-colors"
                   ].join(" "),
                   "aria-label": "Close",
@@ -1121,18 +1125,18 @@ var defaultDuration = {
 var variantConfig = {
   success: {
     icon: CheckCircle,
-    containerClass: "bg-(--color-surface-success) border-(--color-border-success) text-(--color-text-success)",
-    iconClass: "text-(--color-action-success)"
+    containerClass: "bg-success-surface border-success-border text-success",
+    iconClass: "text-success"
   },
   error: {
     icon: XCircle,
-    containerClass: "bg-(--color-surface-danger) border-(--color-border-danger) text-(--color-text-danger)",
-    iconClass: "text-(--color-action-danger)"
+    containerClass: "bg-destructive-surface border-destructive-border text-destructive",
+    iconClass: "text-destructive"
   },
   info: {
     icon: Info,
-    containerClass: "bg-(--color-surface-info) border-(--color-border-info) text-(--color-text-info)",
-    iconClass: "text-(--color-text-info)"
+    containerClass: "bg-info-surface border-info-border text-info",
+    iconClass: "text-info"
   }
 };
 var PlacementContext = createContext2("bottom-right");
@@ -1275,9 +1279,9 @@ function EmptyState({
         className
       ].filter(Boolean).join(" "),
       children: [
-        icon && /* @__PURE__ */ jsx14(Icon, { icon, size: "xl", className: "text-(--color-text-tertiary)" }),
-        /* @__PURE__ */ jsx14("h3", { className: "text-lg font-semibold text-(--color-text-primary) mt-4", children: title }),
-        description && /* @__PURE__ */ jsx14("p", { className: "text-sm text-(--color-text-secondary) mt-2 max-w-sm", children: description }),
+        icon && /* @__PURE__ */ jsx14(Icon, { icon, size: "xl", className: "text-muted-foreground" }),
+        /* @__PURE__ */ jsx14("h3", { className: "text-lg font-semibold text-foreground mt-4", children: title }),
+        description && /* @__PURE__ */ jsx14("p", { className: "text-sm text-muted-foreground mt-2 max-w-sm", children: description }),
         action && /* @__PURE__ */ jsx14("div", { className: "mt-6", children: action })
       ]
     }
@@ -1296,7 +1300,7 @@ function Checkbox({ children, className, ...props }) {
     {
       ...props,
       className: [
-        "group flex items-center gap-2 text-sm text-(--color-text-primary) cursor-pointer",
+        "group flex items-center gap-2 text-sm text-foreground cursor-pointer",
         "disabled:opacity-50 disabled:cursor-default",
         className
       ].filter(Boolean).join(" "),
@@ -1307,12 +1311,12 @@ function Checkbox({ children, className, ...props }) {
             className: [
               "flex items-center justify-center w-6 h-6 shrink-0",
               "rounded-sm border transition-colors",
-              "group-focus-visible:ring-2 group-focus-visible:ring-(--color-border-focus) group-focus-visible:ring-offset-2",
-              isSelected || isIndeterminate ? "bg-(--color-action-primary) border-(--color-action-primary)" : "bg-(--color-surface-default) border-(--color-border-default) group-hover:border-(--color-border-strong)"
+              "group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2",
+              isSelected || isIndeterminate ? "bg-primary border-primary" : "bg-background border-border group-hover:border-border"
             ].join(" "),
             children: [
-              isSelected && /* @__PURE__ */ jsx15(Check2, { className: "w-4 h-4 text-(--color-text-inverse)", strokeWidth: 3 }),
-              isIndeterminate && /* @__PURE__ */ jsx15("div", { className: "w-3 h-0.5 bg-(--color-text-inverse) rounded-full" })
+              isSelected && /* @__PURE__ */ jsx15(Check2, { className: "w-4 h-4 text-primary-foreground", strokeWidth: 3 }),
+              isIndeterminate && /* @__PURE__ */ jsx15("div", { className: "w-3 h-0.5 bg-primary-foreground rounded-full" })
             ]
           }
         ),
@@ -1328,9 +1332,9 @@ import {
 } from "react-aria-components";
 import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 var trackColorMap = {
-  primary: "bg-(--color-action-primary)",
-  success: "bg-(--color-action-success)",
-  destructive: "bg-(--color-action-danger)"
+  primary: "bg-primary",
+  success: "bg-success",
+  destructive: "bg-destructive"
 };
 var presetColors = new Set(Object.keys(trackColorMap));
 function isPresetColor(color) {
@@ -1348,7 +1352,7 @@ function Switch({
     {
       ...props,
       className: [
-        "group flex items-center gap-2 text-sm text-(--color-text-primary) cursor-pointer",
+        "group flex items-center gap-2 text-sm text-foreground cursor-pointer",
         "disabled:opacity-50 disabled:cursor-default",
         className
       ].filter(Boolean).join(" "),
@@ -1358,15 +1362,15 @@ function Switch({
           {
             className: [
               "w-9 h-5 rounded-full transition-colors shrink-0 p-0.5",
-              "group-focus-visible:ring-2 group-focus-visible:ring-(--color-border-focus) group-focus-visible:ring-offset-2",
-              isSelected && isPreset ? trackColorMap[color] : !isSelected ? "bg-(--color-border-strong)" : ""
+              "group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2",
+              isSelected && isPreset ? trackColorMap[color] : !isSelected ? "bg-border" : ""
             ].join(" "),
             style: isSelected && !isPreset ? { backgroundColor: color } : void 0,
             children: /* @__PURE__ */ jsx16(
               "div",
               {
                 className: [
-                  "w-4 h-4 rounded-full bg-(--color-surface-default) transition-transform shadow-sm",
+                  "w-4 h-4 rounded-full bg-background transition-transform shadow-sm",
                   isSelected ? "translate-x-4" : "translate-x-0"
                 ].join(" ")
               }
@@ -1405,7 +1409,7 @@ function Radio({ children, className, ...props }) {
     {
       ...props,
       className: [
-        "group flex items-center gap-2 text-sm text-(--color-text-primary) cursor-pointer",
+        "group flex items-center gap-2 text-sm text-foreground cursor-pointer",
         "disabled:opacity-50 disabled:cursor-default",
         className
       ].filter(Boolean).join(" "),
@@ -1416,10 +1420,10 @@ function Radio({ children, className, ...props }) {
             className: [
               "flex items-center justify-center w-5 h-5 shrink-0",
               "rounded-full border-2 transition-colors",
-              "group-focus-visible:ring-2 group-focus-visible:ring-(--color-border-focus) group-focus-visible:ring-offset-2",
-              isSelected ? "border-(--color-action-primary)" : "border-(--color-border-default) group-hover:border-(--color-border-strong)"
+              "group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2",
+              isSelected ? "border-primary" : "border-border group-hover:border-border"
             ].join(" "),
-            children: isSelected && /* @__PURE__ */ jsx17("div", { className: "w-2.5 h-2.5 rounded-full bg-(--color-action-primary)" })
+            children: isSelected && /* @__PURE__ */ jsx17("div", { className: "w-2.5 h-2.5 rounded-full bg-primary" })
           }
         ),
         children && /* @__PURE__ */ jsx17("span", { children })
@@ -1443,8 +1447,8 @@ function RadioButton({ children, className, ...props }) {
           className: [
             "px-4 py-2 text-sm font-medium",
             "rounded-md border transition-colors text-center",
-            "group-focus-visible:ring-2 group-focus-visible:ring-(--color-border-focus) group-focus-visible:ring-offset-2",
-            isSelected ? "bg-(--color-action-primary) border-(--color-action-primary) text-(--color-text-inverse)" : "bg-(--color-surface-default) border-(--color-border-default) text-(--color-text-primary) hover:border-(--color-border-strong)"
+            "group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2",
+            isSelected ? "bg-primary border-primary text-primary-foreground" : "bg-background border-border text-foreground hover:border-border"
           ].join(" "),
           children
         }
@@ -1471,7 +1475,7 @@ function Fieldset({ legend, children, className }) {
             className: [
               "text-lg",
               "font-semibold",
-              "text-(--color-text-primary)",
+              "text-foreground",
               "p-0"
             ].join(" "),
             children: legend
@@ -1533,9 +1537,9 @@ function InputAddon({ children, className }) {
       className: [
         "flex items-center self-stretch shrink-0 select-none",
         "px-3 py-2 text-base",
-        "bg-(--color-surface-subtle)",
-        "text-(--color-text-secondary)",
-        "border border-(--color-border-default)",
+        "bg-card",
+        "text-muted-foreground",
+        "border border-border",
         radiusClass,
         marginClass,
         className
@@ -1582,7 +1586,7 @@ function Heading2({
     {
       className: twMerge4(
         weightStyles[weight],
-        "text-(--color-text-primary)",
+        "text-foreground",
         sizeStyles3[resolvedSize],
         className
       ),
@@ -1619,8 +1623,8 @@ var variantStyles2 = {
     "hover:text-teal-800"
   ].join(" "),
   subtle: [
-    "text-(--color-text-secondary) no-underline",
-    "hover:underline hover:text-(--color-text-primary)"
+    "text-muted-foreground no-underline",
+    "hover:underline hover:text-foreground"
   ].join(" ")
 };
 function Link({
@@ -1634,7 +1638,7 @@ function Link({
       ...props,
       className: [
         "outline-none transition-colors",
-        "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 focus-visible:rounded-sm",
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:rounded-sm",
         variantStyles2[variant],
         className
       ].filter(Boolean).join(" ")
@@ -1670,12 +1674,12 @@ function Breadcrumbs({ items, className }) {
                   "flex items-center gap-1",
                   isLast ? "min-w-0" : "shrink-0"
                 ].join(" "),
-                children: isLast ? /* @__PURE__ */ jsx23("span", { className: "font-medium text-(--color-text-primary) truncate", children: item.label }) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
+                children: isLast ? /* @__PURE__ */ jsx23("span", { className: "font-medium text-foreground truncate", children: item.label }) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
                   /* @__PURE__ */ jsx23(
                     Link2,
                     {
                       href: item.href,
-                      className: "whitespace-nowrap text-(--color-text-secondary) outline-none transition-colors hover:text-(--color-text-primary) focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 focus-visible:rounded-sm",
+                      className: "whitespace-nowrap text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:rounded-sm",
                       children: item.label
                     }
                   ),
@@ -1729,7 +1733,7 @@ function ButtonLink({
         "font-medium",
         "leading-tight",
         "outline-none transition-colors no-underline",
-        "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         variantStyles[variant],
         sizeStyles[size],
         className
@@ -1765,7 +1769,7 @@ function IconButtonLink({
         "inline-flex items-center justify-center cursor-pointer",
         "rounded-md",
         "outline-none transition-colors no-underline",
-        "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         variantStyles[variant],
         squareSizeStyles2[size],
         className
@@ -1794,29 +1798,29 @@ var squareSizeStyles3 = {
 var variantStyles3 = {
   default: {
     base: [
-      "bg-transparent text-(--color-text-primary)",
-      "hover:bg-(--color-surface-hover)",
-      "pressed:bg-(--color-surface-pressed)"
+      "bg-transparent text-foreground",
+      "hover:bg-accent",
+      "pressed:bg-accent"
     ].join(" "),
-    selected: "bg-(--color-surface-pressed) text-(--color-text-primary)"
+    selected: "bg-accent text-foreground"
   },
   primary: {
     base: [
-      "bg-transparent text-(--color-text-primary)",
-      "hover:bg-(--color-surface-hover)",
-      "pressed:bg-(--color-surface-pressed)"
+      "bg-transparent text-foreground",
+      "hover:bg-accent",
+      "pressed:bg-accent"
     ].join(" "),
-    selected: "bg-(--color-action-primary-active) text-(--color-text-inverse)"
+    selected: "bg-primary-pressed text-primary-foreground"
   },
   outlined: {
     base: [
-      "bg-(--color-surface-default) text-(--color-text-primary)",
-      "border border-(--color-border-default)",
-      "hover:bg-(--color-surface-subtle)",
-      "pressed:bg-(--color-surface-muted)"
+      "bg-background text-foreground",
+      "border border-border",
+      "hover:bg-card",
+      "pressed:bg-muted"
     ].join(" "),
     selected: [
-      "bg-neutral-800 text-(--color-text-inverse)",
+      "bg-neutral-800 text-primary-foreground",
       "border border-neutral-800"
     ].join(" ")
   }
@@ -1839,7 +1843,7 @@ function ToggleButton({
         "font-medium",
         "leading-tight",
         "outline-none transition-colors",
-        "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         "disabled:opacity-50 disabled:pointer-events-none",
         isSquare ? squareSizeStyles3[size] : sizeStyles[size],
         isSelected ? styles.selected : styles.base,
@@ -1882,7 +1886,7 @@ function ToggleButtonGroup({
       ...props,
       orientation: "horizontal",
       className: twMerge7(
-        "inline-flex items-center rounded-lg border border-(--color-border-default) bg-(--color-surface-muted) p-0.5 gap-0.5",
+        "inline-flex items-center rounded-lg border border-border bg-muted p-0.5 gap-0.5",
         className
       ),
       children
@@ -1907,13 +1911,13 @@ function ToggleButtonGroupItem({
         "font-medium",
         "outline-none transition-colors cursor-pointer",
         // Focus ring
-        "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-1",
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
         // Disabled
         isDisabled && "opacity-50 pointer-events-none",
         // Size
         isIconOnly ? iconOnlySizeStyles[size] : sizeStyles4[size],
         // Selected state
-        isSelected ? "bg-(--color-surface-default) text-(--color-text-primary) shadow-sm font-semibold" : isPressed ? "bg-(--color-surface-subtle) text-(--color-text-primary)" : isHovered ? "bg-(--color-surface-subtle) text-(--color-text-primary)" : "bg-transparent text-(--color-text-secondary)",
+        isSelected ? "bg-background text-foreground shadow-sm font-semibold" : isPressed ? "bg-card text-foreground" : isHovered ? "bg-card text-foreground" : "bg-transparent text-muted-foreground",
         className
       ),
       children
@@ -1930,8 +1934,8 @@ import {
 } from "react-aria-components";
 import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
 var popoverStyles = [
-  "bg-(--color-surface-default) rounded-md",
-  "shadow-lg border border-(--color-border-default)",
+  "bg-background rounded-md",
+  "shadow-lg border border-border",
   "py-1 min-w-48",
   "entering:animate-in entering:fade-in entering:zoom-in-95",
   "exiting:animate-out exiting:fade-out exiting:zoom-out-95"
@@ -1975,10 +1979,10 @@ function Menu({
                 className: [
                   "flex items-center gap-2 px-3 py-2 text-sm outline-none cursor-default",
                   "transition-colors",
-                  "focus:bg-(--color-surface-muted)",
-                  "hover:bg-(--color-surface-muted)",
+                  "focus:bg-muted",
+                  "hover:bg-muted",
                   "disabled:opacity-50 disabled:pointer-events-none",
-                  item.isDanger ? "text-(--color-text-danger)" : "text-(--color-text-primary)"
+                  item.isDanger ? "text-destructive" : "text-foreground"
                 ].filter(Boolean).join(" "),
                 children: [
                   item.icon && /* @__PURE__ */ jsx27(Icon, { icon: item.icon, size: "sm" }),
@@ -2030,10 +2034,10 @@ function MenuItem({
       className: [
         "flex items-center gap-2 px-3 py-2 text-sm outline-none cursor-default",
         "transition-colors",
-        "focus:bg-(--color-surface-muted)",
-        "hover:bg-(--color-surface-muted)",
+        "focus:bg-muted",
+        "hover:bg-muted",
         "disabled:opacity-50 disabled:pointer-events-none",
-        isDanger ? "text-(--color-text-danger)" : "text-(--color-text-primary)",
+        isDanger ? "text-destructive" : "text-foreground",
         className
       ].filter(Boolean).join(" "),
       children: [
@@ -2065,15 +2069,15 @@ function MenuCheckboxItem({
       className: ({ isSelected }) => [
         "flex items-center gap-2 px-3 py-2 text-sm outline-none cursor-default",
         "transition-colors",
-        "focus:bg-(--color-surface-muted)",
-        "hover:bg-(--color-surface-muted)",
+        "focus:bg-muted",
+        "hover:bg-muted",
         "disabled:opacity-50 disabled:pointer-events-none",
-        "text-(--color-text-primary)",
+        "text-foreground",
         isSelected ? "font-medium" : "",
         className
       ].filter(Boolean).join(" "),
       children: ({ isSelected }) => /* @__PURE__ */ jsxs20(Fragment7, { children: [
-        /* @__PURE__ */ jsx29("span", { className: "flex items-center justify-center w-4 h-4 shrink-0", children: isSelected && /* @__PURE__ */ jsx29(Check3, { size: 14, className: "text-(--color-action-primary)", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx29("span", { className: "flex items-center justify-center w-4 h-4 shrink-0", children: isSelected && /* @__PURE__ */ jsx29(Check3, { size: 14, className: "text-primary", "aria-hidden": "true" }) }),
         /* @__PURE__ */ jsx29("span", { className: "flex-1", children })
       ] })
     }
@@ -2099,7 +2103,7 @@ function MenuSection({
         className: [
           "px-3 py-1.5",
           "text-xs font-semibold",
-          "text-(--color-text-secondary)",
+          "text-muted-foreground",
           "uppercase tracking-wider",
           "select-none"
         ].join(" "),
@@ -2125,7 +2129,7 @@ function MenuSeparator({ className }) {
     Separator,
     {
       className: [
-        "border-t border-(--color-border-default) my-1",
+        "border-t border-border my-1",
         className
       ].filter(Boolean).join(" ")
     }
@@ -2146,7 +2150,7 @@ function Popover3({ children, isOpen, onOpenChange }) {
 function PopoverTrigger({ children, className }) {
   const cx = `
     inline-flex items-center bg-transparent border-none p-0 outline-none cursor-pointer
-    focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:rounded-sm
+    focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm
   `;
   return /* @__PURE__ */ jsx33(AriaButton3, { className: twMerge8(cx, className), children });
 }
@@ -2159,8 +2163,8 @@ function PopoverContent({
 }) {
   const cx = `
     z-50
-    bg-(--color-surface-default)
-    border border-(--color-border-default)
+    bg-background
+    border border-border
     rounded-md shadow-lg
     entering:animate-in entering:fade-in entering:duration-300
     exiting:animate-out exiting:fade-out exiting:duration-300
@@ -2226,8 +2230,8 @@ function TabList({
   ...props
 }) {
   const { variant } = useContext4(TabsContext);
-  const baseStyles = variant === "unstyled" ? "flex items-center" : variant === "underline" ? "flex items-center border-b border-(--color-border-default)" : "inline-flex items-center bg-(--color-surface-muted) rounded-lg p-1 gap-1";
-  const verticalStyles = variant === "unstyled" ? "flex-col" : variant === "underline" ? "flex-col border-b-0 border-r border-(--color-border-default)" : "flex-col";
+  const baseStyles = variant === "unstyled" ? "flex items-center" : variant === "underline" ? "flex items-center border-b border-border" : "inline-flex items-center bg-muted rounded-lg p-1 gap-1";
+  const verticalStyles = variant === "unstyled" ? "flex-col" : variant === "underline" ? "flex-col border-b-0 border-r border-border" : "flex-col";
   return /* @__PURE__ */ jsx34(
     AriaTabList,
     {
@@ -2250,7 +2254,7 @@ function Tab({ className, ...props }) {
         if (variant === "unstyled") {
           return twMerge9(
             "cursor-pointer outline-none",
-            "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
+            "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
             isDisabled ? "opacity-50 pointer-events-none" : "",
             className
           );
@@ -2260,7 +2264,7 @@ function Tab({ className, ...props }) {
           "cursor-pointer outline-none transition-colors",
           "font-medium",
           // Focus ring
-          "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           // Disabled
           isDisabled ? "opacity-50 pointer-events-none" : "",
           // Size
@@ -2287,14 +2291,14 @@ function getTabVariantStyles(variant, state) {
         "text-teal-700 font-semibold",
         // Bottom indicator via pseudo-element
         "after:absolute after:bottom-[-1px] after:left-0 after:right-0 after:h-0.5 after:bg-teal-600"
-      ].join(" ") : state.isPressed ? "text-(--color-text-primary) bg-(--color-surface-muted)" : state.isHovered ? "text-(--color-text-primary) bg-(--color-surface-subtle)" : "text-(--color-text-secondary) bg-transparent"
+      ].join(" ") : state.isPressed ? "text-foreground bg-muted" : state.isHovered ? "text-foreground bg-card" : "text-muted-foreground bg-transparent"
     ];
   }
   return [
     // Shape
     "rounded-md",
     // Color states
-    state.isSelected ? "text-(--color-text-primary) font-semibold bg-(--color-surface-default) shadow-sm" : state.isPressed ? "text-(--color-text-primary) bg-(--color-surface-subtle) shadow-none" : state.isHovered ? "text-(--color-text-primary) bg-(--color-surface-pressed)" : "text-(--color-text-secondary) bg-transparent"
+    state.isSelected ? "text-foreground font-semibold bg-background shadow-sm" : state.isPressed ? "text-foreground bg-card shadow-none" : state.isHovered ? "text-foreground bg-accent" : "text-muted-foreground bg-transparent"
   ];
 }
 function TabPanel({ className, ...props }) {
@@ -2355,7 +2359,7 @@ function SegmentedControl({
       defaultSelectedKeys: isNoneMode ? void 0 : defaultSelectedKeys,
       onSelectionChange: isNoneMode ? void 0 : onSelectionChange,
       className: twMerge10(
-        "inline-flex items-center rounded-lg border border-(--color-border-default) bg-(--color-surface-muted) p-0.5 gap-0.5",
+        "inline-flex items-center rounded-lg border border-border bg-muted p-0.5 gap-0.5",
         className
       ),
       children
@@ -2378,13 +2382,13 @@ function SegmentedControlItem({
         "font-medium",
         "outline-none transition-colors cursor-pointer",
         // Focus ring
-        "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-1",
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
         // Disabled
         isDisabled && "opacity-50 pointer-events-none",
         // Size
         sizeStyles6[size],
         // Selected state
-        isSelected ? "bg-(--color-surface-default) text-(--color-text-primary) shadow-sm font-semibold" : isPressed ? "bg-(--color-surface-subtle) text-(--color-text-primary)" : isHovered ? "bg-(--color-surface-subtle) text-(--color-text-primary)" : "bg-transparent text-(--color-text-secondary)",
+        isSelected ? "bg-background text-foreground shadow-sm font-semibold" : isPressed ? "bg-card text-foreground" : isHovered ? "bg-card text-foreground" : "bg-transparent text-muted-foreground",
         className
       )
     }
@@ -2458,9 +2462,9 @@ function Card({
 }) {
   const isInteractive = interactive || !!href || !!onPress;
   const containerClass = twMerge12(
-    "bg-(--color-surface-default) border border-(--color-border-default) rounded-lg overflow-hidden shadow-sm",
-    isInteractive && "transition-all hover:shadow-md hover:border-(--color-border-focus) cursor-pointer",
-    (href || onPress) && "block focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
+    "bg-background border border-border rounded-lg overflow-hidden shadow-sm",
+    isInteractive && "transition-all hover:shadow-md hover:border-ring cursor-pointer",
+    (href || onPress) && "block focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 outline-none",
     className
   );
   const handleKeyDown = useCallback3(
@@ -2477,7 +2481,7 @@ function Card({
       "div",
       {
         className: twMerge12(
-          "border-b border-(--color-border-default)",
+          "border-b border-border",
           paddingStyles[padding]
         ),
         children: header
@@ -2488,7 +2492,7 @@ function Card({
       "div",
       {
         className: twMerge12(
-          "border-t border-(--color-border-default)",
+          "border-t border-border",
           paddingStyles[padding]
         ),
         children: footer
@@ -2575,11 +2579,11 @@ function DeltaIndicator({
       {
         className: twMerge13(
           "inline-flex items-center gap-1 font-medium",
-          "text-(--color-text-tertiary)",
+          "text-muted-foreground",
           className
         ),
         children: [
-          label && /* @__PURE__ */ jsx38("span", { className: "text-sm text-(--color-text-secondary) mr-1", children: label }),
+          label && /* @__PURE__ */ jsx38("span", { className: "text-sm text-muted-foreground mr-1", children: label }),
           unavailableText
         ]
       }
@@ -2623,7 +2627,7 @@ function DeltaIndicator({
         className
       ),
       children: [
-        label && /* @__PURE__ */ jsx38("span", { className: "text-sm text-(--color-text-secondary) mr-1", children: label }),
+        label && /* @__PURE__ */ jsx38("span", { className: "text-sm text-muted-foreground mr-1", children: label }),
         /* @__PURE__ */ jsx38(IconComponent, { size: 14, "aria-hidden": true }),
         valueText
       ]
@@ -2639,7 +2643,7 @@ var fillStyles = {
   success: "bg-(--color-progress-fill-success)",
   warning: "bg-(--color-progress-fill-warning)",
   danger: "bg-(--color-progress-fill-danger)",
-  neutral: "bg-(--color-text-secondary)"
+  neutral: "bg-muted-foreground"
 };
 var sizeStyles8 = {
   sm: "h-1.5",
@@ -2658,8 +2662,8 @@ function ProgressBar({
   const clampedValue = Math.min(100, Math.max(0, value));
   return /* @__PURE__ */ jsxs25("div", { className: twMerge14("w-full", className), children: [
     (label || description || showValue) && /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__PURE__ */ jsx39("span", { className: "text-sm font-medium text-(--color-text-primary)", children: label }),
-      /* @__PURE__ */ jsx39("span", { className: "text-sm text-(--color-text-secondary)", children: description ?? (showValue ? `${clampedValue}%` : null) })
+      /* @__PURE__ */ jsx39("span", { className: "text-sm font-medium text-foreground", children: label }),
+      /* @__PURE__ */ jsx39("span", { className: "text-sm text-muted-foreground", children: description ?? (showValue ? `${clampedValue}%` : null) })
     ] }),
     /* @__PURE__ */ jsx39(
       "div",
@@ -2702,26 +2706,26 @@ import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
 var variantConfig2 = {
   info: {
     icon: Info2,
-    containerClass: "bg-(--color-banner-info-bg) border-(--color-banner-info-border) text-(--color-banner-info-text)",
-    iconClass: "text-(--color-banner-info-icon)",
+    containerClass: "bg-info-surface border-info-border text-info-surface-foreground",
+    iconClass: "text-info",
     role: "status"
   },
   warning: {
     icon: AlertTriangle,
-    containerClass: "bg-(--color-banner-warning-bg) border-(--color-banner-warning-border) text-(--color-banner-warning-text)",
-    iconClass: "text-(--color-banner-warning-icon)",
+    containerClass: "bg-warning-surface border-warning-border text-warning-surface-foreground",
+    iconClass: "text-warning",
     role: "alert"
   },
   danger: {
     icon: AlertCircle,
-    containerClass: "bg-(--color-banner-danger-bg) border-(--color-banner-danger-border) text-(--color-banner-danger-text)",
-    iconClass: "text-(--color-banner-danger-icon)",
+    containerClass: "bg-destructive-surface border-destructive-border text-destructive-surface-foreground",
+    iconClass: "text-destructive",
     role: "alert"
   },
   success: {
     icon: CheckCircle2,
-    containerClass: "bg-(--color-banner-success-bg) border-(--color-banner-success-border) text-(--color-banner-success-text)",
-    iconClass: "text-(--color-banner-success-icon)",
+    containerClass: "bg-success-surface border-success-border text-success-surface-foreground",
+    iconClass: "text-success",
     role: "status"
   }
 };
@@ -2808,19 +2812,19 @@ function MetricCard({
 }) {
   const config = sizeConfig[size];
   const containerClass = twMerge16(
-    "bg-(--color-surface-default) border border-(--color-border-default) rounded-lg shadow-sm",
+    "bg-background border border-border rounded-lg shadow-sm",
     config.padding,
-    href && "block transition-shadow hover:shadow-md hover:border-(--color-border-focus) focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
+    href && "block transition-shadow hover:shadow-md hover:border-ring focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 outline-none",
     className
   );
   const content = /* @__PURE__ */ jsxs27(Fragment9, { children: [
-    /* @__PURE__ */ jsx41("div", { className: twMerge16(config.labelClass, "text-(--color-text-secondary)"), children: label }),
+    /* @__PURE__ */ jsx41("div", { className: twMerge16(config.labelClass, "text-muted-foreground"), children: label }),
     /* @__PURE__ */ jsx41(
       "div",
       {
         className: twMerge16(
           config.valueClass,
-          "font-semibold text-(--color-text-primary) mt-1 tabular-nums"
+          "font-semibold text-foreground mt-1 tabular-nums"
         ),
         children: value
       }
@@ -2985,7 +2989,7 @@ function CheckIcon() {
     "svg",
     {
       "aria-hidden": "true",
-      className: "h-4 w-4 text-(--color-text-inverse)",
+      className: "h-4 w-4 text-primary-foreground",
       viewBox: "0 0 16 16",
       fill: "none",
       stroke: "currentColor",
@@ -3015,7 +3019,7 @@ function FormWizardProgress({ labels }) {
                 "aria-hidden": "true",
                 className: [
                   "h-0.5 flex-1",
-                  index <= currentStep ? "bg-(--color-surface-brand)" : "bg-(--color-border-default)"
+                  index <= currentStep ? "bg-primary" : "bg-border"
                 ].join(" ")
               }
             ) : /* @__PURE__ */ jsx46("div", { className: "flex-1", "aria-hidden": "true" }),
@@ -3026,9 +3030,9 @@ function FormWizardProgress({ labels }) {
                   "flex h-8 w-8 shrink-0 items-center justify-center rounded-full",
                   "text-sm font-medium",
                   "transition-colors",
-                  isCompleted ? "bg-(--color-surface-brand) text-(--color-text-inverse)" : "",
-                  isCurrent ? "border-2 border-(--color-border-brand) bg-(--color-surface-default) text-(--color-text-brand)" : "",
-                  isFuture ? "border-2 border-(--color-border-default) bg-(--color-surface-default) text-(--color-text-tertiary)" : ""
+                  isCompleted ? "bg-primary text-primary-foreground" : "",
+                  isCurrent ? "border-2 border-primary bg-background text-primary" : "",
+                  isFuture ? "border-2 border-border bg-background text-muted-foreground" : ""
                 ].join(" "),
                 "aria-hidden": "true",
                 children: isCompleted ? /* @__PURE__ */ jsx46(CheckIcon, {}) : index + 1
@@ -3040,7 +3044,7 @@ function FormWizardProgress({ labels }) {
                 "aria-hidden": "true",
                 className: [
                   "h-0.5 flex-1",
-                  index < currentStep ? "bg-(--color-surface-brand)" : "bg-(--color-border-default)"
+                  index < currentStep ? "bg-primary" : "bg-border"
                 ].join(" ")
               }
             ) : /* @__PURE__ */ jsx46("div", { className: "flex-1", "aria-hidden": "true" })
@@ -3050,7 +3054,7 @@ function FormWizardProgress({ labels }) {
             {
               className: [
                 "mt-2 text-center text-sm",
-                isCurrent ? "font-semibold text-(--color-text-primary)" : "font-normal text-(--color-text-secondary)"
+                isCurrent ? "font-semibold text-foreground" : "font-normal text-muted-foreground"
               ].join(" "),
               children: label
             }
@@ -3180,57 +3184,54 @@ var ColorAlphaBlack40 = "#00000066";
 var ColorAlphaBlack06 = "#0000000f";
 var ColorAlphaWhite10 = "#ffffff1a";
 var ColorAlphaWhite06 = "#ffffff0f";
-var ColorActionPrimary = "#5c2483";
-var ColorActionPrimaryHover = "#6b2695";
-var ColorActionPrimaryActive = "#4a1d6a";
-var ColorActionSecondary = "#5c2483";
-var ColorActionSecondaryHover = "#6b2695";
-var ColorActionDanger = "#e11d48";
-var ColorActionDangerHover = "#be123c";
-var ColorActionSuccess = "#16a34a";
-var ColorActionSuccessHover = "#15803d";
-var ColorActionInfo = "#2563eb";
-var ColorActionInfoHover = "#1d4ed8";
-var ColorActionDefault = "#1e293b";
-var ColorActionDefaultHover = "#334155";
-var ColorTextPrimary = "#0f172a";
-var ColorTextSecondary = "#475569";
-var ColorTextTertiary = "#94a3b8";
-var ColorTextInverse = "#ffffff";
-var ColorTextBrand = "#5c2483";
-var ColorTextAccent = "#35b7b8";
-var ColorTextDanger = "#e11d48";
-var ColorTextSuccess = "#16a34a";
-var ColorTextInfo = "#2563eb";
-var ColorTextWarning = "#d97706";
-var ColorSurfaceDefault = "#ffffff";
-var ColorSurfaceSubtle = "#f8fafc";
-var ColorSurfaceMuted = "#f1f5f9";
-var ColorSurfaceBrand = "#5c2483";
-var ColorSurfaceAccent = "#35b7b8";
-var ColorSurfaceDanger = "#fff1f2";
-var ColorSurfaceSuccess = "#f0fdf4";
-var ColorSurfaceWarning = "#fffbeb";
-var ColorSurfaceInfo = "#eff6ff";
-var ColorSurfaceOverlay = "#000000cc";
-var ColorSurfaceHover = "#0000000f";
-var ColorSurfacePressed = "#e2e8f0";
-var ColorSurfaceSelected = "#edf9f9";
-var ColorSurfaceSelectedHover = "#d0f0f0";
-var ColorBorderDefault = "#e2e8f0";
-var ColorBorderStrong = "#cbd5e1";
-var ColorBorderBrand = "#5c2483";
-var ColorBorderAccent = "#35b7b8";
-var ColorBorderFocus = "#35b7b8";
-var ColorBorderDanger = "#e11d48";
-var ColorBorderSuccess = "#16a34a";
-var ColorBorderInfo = "#60a5fa";
-var ColorBorderWarning = "#d97706";
-var ColorOverlayBackdrop = "#00000066";
-var ColorStatusSuccess = "#22c55e";
-var ColorStatusDanger = "#f43f5e";
-var ColorStatusWarning = "#d97706";
-var ColorStatusInfo = "#3b82f6";
+var ColorBackground = "#ffffff";
+var ColorForeground = "#0f172a";
+var ColorCard = "#f8fafc";
+var ColorMuted = "#f1f5f9";
+var ColorMutedForeground = "#475569";
+var ColorAccent = "#e2e8f0";
+var ColorAccentForeground = "#0f172a";
+var ColorAccentPressed = "#cbd5e1";
+var ColorBorder = "#e2e8f0";
+var ColorRing = "#35b7b8";
+var ColorOverlay = "#000000cc";
+var ColorBackdrop = "#00000066";
+var ColorPrimary = "#5c2483";
+var ColorPrimaryForeground = "#ffffff";
+var ColorPrimaryHover = "#4a1d6a";
+var ColorPrimaryPressed = "#3a1754";
+var ColorSecondary = "#6dd0d1";
+var ColorSecondaryForeground = "#0a2829";
+var ColorSecondaryHover = "#44c4c5";
+var ColorSecondaryPressed = "#35b7b8";
+var ColorDestructive = "#e11d48";
+var ColorDestructiveForeground = "#ffffff";
+var ColorDestructiveHover = "#be123c";
+var ColorDestructivePressed = "#9f1239";
+var ColorDestructiveSurface = "#fff1f2";
+var ColorDestructiveSurfaceForeground = "#be123c";
+var ColorDestructiveBorder = "#fecdd3";
+var ColorSuccess = "#15803d";
+var ColorSuccessForeground = "#ffffff";
+var ColorSuccessHover = "#166534";
+var ColorSuccessPressed = "#14532d";
+var ColorSuccessSurface = "#f0fdf4";
+var ColorSuccessSurfaceForeground = "#15803d";
+var ColorSuccessBorder = "#bbf7d0";
+var ColorWarning = "#f59e0b";
+var ColorWarningForeground = "#0f172a";
+var ColorWarningHover = "#fbbf24";
+var ColorWarningPressed = "#fcd34d";
+var ColorWarningSurface = "#fffbeb";
+var ColorWarningSurfaceForeground = "#92400e";
+var ColorWarningBorder = "#fde68a";
+var ColorInfo = "#2563eb";
+var ColorInfoForeground = "#ffffff";
+var ColorInfoHover = "#1d4ed8";
+var ColorInfoPressed = "#1e40af";
+var ColorInfoSurface = "#eff6ff";
+var ColorInfoSurfaceForeground = "#1d4ed8";
+var ColorInfoBorder = "#bfdbfe";
 var ColorDeltaIncreaseBg = "#fff1f2";
 var ColorDeltaIncreaseText = "#be123c";
 var ColorDeltaIncreaseIcon = "#f43f5e";
@@ -3245,22 +3246,6 @@ var ColorProgressFill = "#6b2695";
 var ColorProgressFillSuccess = "#22c55e";
 var ColorProgressFillWarning = "#f59e0b";
 var ColorProgressFillDanger = "#f43f5e";
-var ColorBannerInfoBg = "#eff6ff";
-var ColorBannerInfoText = "#1d4ed8";
-var ColorBannerInfoBorder = "#bfdbfe";
-var ColorBannerInfoIcon = "#3b82f6";
-var ColorBannerWarningBg = "#fffbeb";
-var ColorBannerWarningText = "#92400e";
-var ColorBannerWarningBorder = "#fde68a";
-var ColorBannerWarningIcon = "#f59e0b";
-var ColorBannerDangerBg = "#fff1f2";
-var ColorBannerDangerText = "#be123c";
-var ColorBannerDangerBorder = "#fecdd3";
-var ColorBannerDangerIcon = "#f43f5e";
-var ColorBannerSuccessBg = "#f0fdf4";
-var ColorBannerSuccessText = "#15803d";
-var ColorBannerSuccessBorder = "#bbf7d0";
-var ColorBannerSuccessIcon = "#22c55e";
 var ColorBadgePurpleBg = "#ead9f5";
 var ColorBadgePurpleText = "#5c2483";
 var ColorBadgeTealBg = "#d0f0f0";
@@ -3322,19 +3307,9 @@ export {
   Card,
   Cell,
   Checkbox,
-  ColorActionDanger,
-  ColorActionDangerHover,
-  ColorActionDefault,
-  ColorActionDefaultHover,
-  ColorActionInfo,
-  ColorActionInfoHover,
-  ColorActionPrimary,
-  ColorActionPrimaryActive,
-  ColorActionPrimaryHover,
-  ColorActionSecondary,
-  ColorActionSecondaryHover,
-  ColorActionSuccess,
-  ColorActionSuccessHover,
+  ColorAccent,
+  ColorAccentForeground,
+  ColorAccentPressed,
   ColorAlphaBlack06,
   ColorAlphaBlack40,
   ColorAlphaBlack60,
@@ -3352,6 +3327,8 @@ export {
   ColorAmber800,
   ColorAmber900,
   ColorAmber950,
+  ColorBackdrop,
+  ColorBackground,
   ColorBadgeAmberBg,
   ColorBadgeAmberText,
   ColorBadgeGreenBg,
@@ -3366,22 +3343,6 @@ export {
   ColorBadgeSlateText,
   ColorBadgeTealBg,
   ColorBadgeTealText,
-  ColorBannerDangerBg,
-  ColorBannerDangerBorder,
-  ColorBannerDangerIcon,
-  ColorBannerDangerText,
-  ColorBannerInfoBg,
-  ColorBannerInfoBorder,
-  ColorBannerInfoIcon,
-  ColorBannerInfoText,
-  ColorBannerSuccessBg,
-  ColorBannerSuccessBorder,
-  ColorBannerSuccessIcon,
-  ColorBannerSuccessText,
-  ColorBannerWarningBg,
-  ColorBannerWarningBorder,
-  ColorBannerWarningIcon,
-  ColorBannerWarningText,
   ColorBlack,
   ColorBlue100,
   ColorBlue200,
@@ -3394,15 +3355,8 @@ export {
   ColorBlue800,
   ColorBlue900,
   ColorBlue950,
-  ColorBorderAccent,
-  ColorBorderBrand,
-  ColorBorderDanger,
-  ColorBorderDefault,
-  ColorBorderFocus,
-  ColorBorderInfo,
-  ColorBorderStrong,
-  ColorBorderSuccess,
-  ColorBorderWarning,
+  ColorBorder,
+  ColorCard,
   ColorDeltaDecreaseBg,
   ColorDeltaDecreaseIcon,
   ColorDeltaDecreaseText,
@@ -3412,6 +3366,14 @@ export {
   ColorDeltaIncreaseBg,
   ColorDeltaIncreaseIcon,
   ColorDeltaIncreaseText,
+  ColorDestructive,
+  ColorDestructiveBorder,
+  ColorDestructiveForeground,
+  ColorDestructiveHover,
+  ColorDestructivePressed,
+  ColorDestructiveSurface,
+  ColorDestructiveSurfaceForeground,
+  ColorForeground,
   ColorGreen100,
   ColorGreen200,
   ColorGreen300,
@@ -3423,7 +3385,20 @@ export {
   ColorGreen800,
   ColorGreen900,
   ColorGreen950,
-  ColorOverlayBackdrop,
+  ColorInfo,
+  ColorInfoBorder,
+  ColorInfoForeground,
+  ColorInfoHover,
+  ColorInfoPressed,
+  ColorInfoSurface,
+  ColorInfoSurfaceForeground,
+  ColorMuted,
+  ColorMutedForeground,
+  ColorOverlay,
+  ColorPrimary,
+  ColorPrimaryForeground,
+  ColorPrimaryHover,
+  ColorPrimaryPressed,
   ColorProgressFill,
   ColorProgressFillDanger,
   ColorProgressFillSuccess,
@@ -3440,6 +3415,7 @@ export {
   ColorPurple800,
   ColorPurple900,
   ColorPurple950,
+  ColorRing,
   ColorRose100,
   ColorRose200,
   ColorRose300,
@@ -3451,6 +3427,10 @@ export {
   ColorRose800,
   ColorRose900,
   ColorRose950,
+  ColorSecondary,
+  ColorSecondaryForeground,
+  ColorSecondaryHover,
+  ColorSecondaryPressed,
   ColorSlate100,
   ColorSlate200,
   ColorSlate300,
@@ -3462,24 +3442,13 @@ export {
   ColorSlate800,
   ColorSlate900,
   ColorSlate950,
-  ColorStatusDanger,
-  ColorStatusInfo,
-  ColorStatusSuccess,
-  ColorStatusWarning,
-  ColorSurfaceAccent,
-  ColorSurfaceBrand,
-  ColorSurfaceDanger,
-  ColorSurfaceDefault,
-  ColorSurfaceHover,
-  ColorSurfaceInfo,
-  ColorSurfaceMuted,
-  ColorSurfaceOverlay,
-  ColorSurfacePressed,
-  ColorSurfaceSelected,
-  ColorSurfaceSelectedHover,
-  ColorSurfaceSubtle,
-  ColorSurfaceSuccess,
-  ColorSurfaceWarning,
+  ColorSuccess,
+  ColorSuccessBorder,
+  ColorSuccessForeground,
+  ColorSuccessHover,
+  ColorSuccessPressed,
+  ColorSuccessSurface,
+  ColorSuccessSurfaceForeground,
   ColorTeal100,
   ColorTeal200,
   ColorTeal300,
@@ -3491,16 +3460,13 @@ export {
   ColorTeal800,
   ColorTeal900,
   ColorTeal950,
-  ColorTextAccent,
-  ColorTextBrand,
-  ColorTextDanger,
-  ColorTextInfo,
-  ColorTextInverse,
-  ColorTextPrimary,
-  ColorTextSecondary,
-  ColorTextSuccess,
-  ColorTextTertiary,
-  ColorTextWarning,
+  ColorWarning,
+  ColorWarningBorder,
+  ColorWarningForeground,
+  ColorWarningHover,
+  ColorWarningPressed,
+  ColorWarningSurface,
+  ColorWarningSurfaceForeground,
   ColorWhite,
   Column,
   DeltaIndicator,