@polastack/design-system 0.1.0 → 0.1.2

package/dist/index.js

@@ -262,14 +262,14 @@ import * as React3 from "react";
 import { cva } from "class-variance-authority";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[--color-ring] focus-visible:ring-offset-2 ring-offset-[--color-ring-offset] disabled:pointer-events-none disabled:opacity-50 touch:min-h-[--touch-target-min]",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)] disabled:pointer-events-none disabled:opacity-50 touch:min-h-[--touch-target-min]",
   {
     variants: {
       variant: {
         default: "bg-primary-500 text-white hover:bg-primary-600 active:bg-primary-700",
         destructive: "bg-error-500 text-white hover:bg-error-600 active:bg-error-700",
-        outline: "border border-[--color-border-input] bg-[--color-surface-raised] text-[--color-on-surface] hover:bg-[--color-surface-sunken] active:bg-[--color-surface-muted]",
-        ghost: "text-[--color-on-surface] hover:bg-[--color-surface-muted] active:bg-neutral-200 dark:active:bg-neutral-700",
+        outline: "border border-[var(--color-border-input)] bg-[var(--color-surface-raised)] text-[var(--color-on-surface)] hover:bg-[var(--color-surface-sunken)] active:bg-[var(--color-surface-muted)]",
+        ghost: "text-[var(--color-on-surface)] hover:bg-[var(--color-surface-muted)] active:bg-neutral-200 dark:active:bg-neutral-700",
         link: "text-primary-500 underline-offset-4 hover:underline"
       },
       size: {
@@ -311,7 +311,7 @@ var badgeVariants = cva2(
         warning: "bg-warning-100 text-warning-700 dark:bg-warning-950 dark:text-warning-300",
         error: "bg-error-100 text-error-700 dark:bg-error-950 dark:text-error-300",
         info: "bg-info-100 text-info-700 dark:bg-info-950 dark:text-info-300",
-        outline: "border border-[--color-border-input] text-[--color-on-surface-secondary]"
+        outline: "border border-[var(--color-border-input)] text-[var(--color-on-surface-secondary)]"
       }
     },
     defaultVariants: {
@@ -399,7 +399,7 @@ var AvatarFallback = React5.forwardRef(({ className, ...props }, ref) => {
     {
       ref,
       className: cn(
-        "flex h-full w-full items-center justify-center rounded-full bg-[--color-surface-muted] font-medium text-[--color-on-surface-secondary]",
+        "flex h-full w-full items-center justify-center rounded-full bg-[var(--color-surface-muted)] font-medium text-[var(--color-on-surface-secondary)]",
         className
       ),
       ...props
@@ -419,7 +419,7 @@ var Separator = React6.forwardRef(
       role: decorative ? "none" : "separator",
       "aria-orientation": decorative ? void 0 : orientation,
       className: cn(
-        "shrink-0 bg-[--color-border]",
+        "shrink-0 bg-[var(--color-border)]",
         orientation === "horizontal" ? "h-px w-full" : "w-px self-stretch",
         className
       ),
@@ -438,7 +438,7 @@ var Skeleton = React7.forwardRef(
     {
       ref,
       "aria-hidden": "true",
-      className: cn("animate-pulse rounded-md bg-[--color-skeleton]", className),
+      className: cn("animate-pulse rounded-md bg-[var(--color-skeleton)]", className),
       ...props
     }
   )
@@ -506,7 +506,7 @@ var Card = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ j
   {
     ref,
     className: cn(
-      "rounded-xl border border-[--color-border] bg-[--color-surface-raised] shadow-sm",
+      "rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-raised)] shadow-sm",
       className
     ),
     ...props
@@ -535,7 +535,7 @@ var CardDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__
   "p",
   {
     ref,
-    className: cn("text-sm text-[--color-on-surface-muted]", className),
+    className: cn("text-sm text-[var(--color-on-surface-muted)]", className),
     ...props
   }
 ));
@@ -565,7 +565,7 @@ var TooltipContent = React10.forwardRef(({ className, sideOffset = 4, ...props }
     ref,
     sideOffset,
     className: cn(
-      "z-tooltip overflow-hidden rounded-md bg-[--color-tooltip-bg] px-3 py-1.5 text-xs text-[--color-tooltip-text] shadow-md",
+      "z-tooltip overflow-hidden rounded-md bg-[var(--color-tooltip-bg)] px-3 py-1.5 text-xs text-[var(--color-tooltip-text)] shadow-md",
       "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
       "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       "touch:hidden",
@@ -599,7 +599,7 @@ var toastVariants = cva5(
   {
     variants: {
       variant: {
-        default: "border-[--color-border] bg-[--color-surface-raised] text-[--color-on-surface]",
+        default: "border-[var(--color-border)] bg-[var(--color-surface-raised)] text-[var(--color-on-surface)]",
         success: "border-success-200 bg-success-50 text-success-900 dark:border-success-800 dark:bg-success-950 dark:text-success-200",
         error: "border-error-200 bg-error-50 text-error-900 dark:border-error-800 dark:bg-error-950 dark:text-error-200"
       }
@@ -623,7 +623,7 @@ var ToastAction = React11.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-[--color-border] bg-transparent px-3 text-xs font-medium transition-colors hover:bg-[--color-surface-muted] focus:outline-none focus:ring-2 focus:ring-[--color-ring] focus:ring-offset-2 ring-offset-[--color-ring-offset] disabled:pointer-events-none disabled:opacity-50",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-[var(--color-border)] bg-transparent px-3 text-xs font-medium transition-colors hover:bg-[var(--color-surface-muted)] focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)] focus:ring-offset-2 ring-offset-[var(--color-ring-offset)] disabled:pointer-events-none disabled:opacity-50",
       className
     ),
     ...props
@@ -635,7 +635,7 @@ var ToastClose = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE
   {
     ref,
     className: cn(
-      "absolute right-2 top-2 rounded-md p-1 text-[--color-on-surface-muted] opacity-0 transition-opacity hover:text-[--color-on-surface] focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100",
+      "absolute right-2 top-2 rounded-md p-1 text-[var(--color-on-surface-muted)] opacity-0 transition-opacity hover:text-[var(--color-on-surface)] focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100",
       className
     ),
     "toast-close": "",
@@ -794,7 +794,7 @@ var Label = React13.forwardRef(({ className, required, children, ...props }, ref
   {
     ref,
     className: cn(
-      "text-sm font-medium text-[--color-on-surface] peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      "text-sm font-medium text-[var(--color-on-surface)] peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
       className
     ),
     ...props,
@@ -811,7 +811,7 @@ import * as React14 from "react";
 import { cva as cva6 } from "class-variance-authority";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var inputVariants = cva6(
-  "flex w-full rounded-md border border-[--color-border-input] bg-[--color-surface-raised] px-3 text-[--color-on-surface] transition-colors duration-fast file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[--color-on-surface-muted] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[--color-ring] focus-visible:ring-offset-2 ring-offset-[--color-ring-offset] disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-error-500 aria-[invalid=true]:focus-visible:ring-error-500 touch:min-h-[--touch-target-min]",
+  "flex w-full rounded-md border border-[var(--color-border-input)] bg-[var(--color-surface-raised)] px-3 text-[var(--color-on-surface)] transition-colors duration-fast file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[var(--color-on-surface-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)] disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-error-500 aria-[invalid=true]:focus-visible:ring-error-500 touch:min-h-[--touch-target-min]",
   {
     variants: {
       size: {
@@ -843,7 +843,7 @@ import * as React15 from "react";
 import { cva as cva7 } from "class-variance-authority";
 import { jsx as jsx14 } from "react/jsx-runtime";
 var textareaVariants = cva7(
-  "flex w-full resize-y rounded-md border border-[--color-border-input] bg-[--color-surface-raised] px-3 py-2 text-[--color-on-surface] transition-colors duration-fast placeholder:text-[--color-on-surface-muted] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[--color-ring] focus-visible:ring-offset-2 ring-offset-[--color-ring-offset] disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-error-500 aria-[invalid=true]:focus-visible:ring-error-500",
+  "flex w-full resize-y rounded-md border border-[var(--color-border-input)] bg-[var(--color-surface-raised)] px-3 py-2 text-[var(--color-on-surface)] transition-colors duration-fast placeholder:text-[var(--color-on-surface-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)] disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-error-500 aria-[invalid=true]:focus-visible:ring-error-500",
   {
     variants: {
       size: {
@@ -878,8 +878,8 @@ var Checkbox = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-[--color-border-input] transition-colors duration-fast",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[--color-ring] focus-visible:ring-offset-2 ring-offset-[--color-ring-offset]",
+      "peer h-4 w-4 shrink-0 rounded-sm border border-[var(--color-border-input)] transition-colors duration-fast",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)]",
       "disabled:cursor-not-allowed disabled:opacity-50",
       "data-[state=checked]:border-primary-500 data-[state=checked]:bg-primary-500 data-[state=checked]:text-white",
       "data-[state=indeterminate]:border-primary-500 data-[state=indeterminate]:bg-primary-500 data-[state=indeterminate]:text-white",
@@ -935,8 +935,8 @@ var RadioGroupItem = React17.forwardRef(({ className, ...props }, ref) => /* @__
   {
     ref,
     className: cn(
-      "aspect-square h-4 w-4 rounded-full border border-[--color-border-input] transition-colors duration-fast",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[--color-ring] focus-visible:ring-offset-2 ring-offset-[--color-ring-offset]",
+      "aspect-square h-4 w-4 rounded-full border border-[var(--color-border-input)] transition-colors duration-fast",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)]",
       "disabled:cursor-not-allowed disabled:opacity-50",
       "data-[state=checked]:border-primary-500",
       "touch:min-h-[--touch-target-min] touch:min-w-[--touch-target-min]",
@@ -964,7 +964,7 @@ import * as SwitchPrimitive from "@radix-ui/react-switch";
 import { cva as cva8 } from "class-variance-authority";
 import { jsx as jsx17 } from "react/jsx-runtime";
 var switchVariants = cva8(
-  "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[--color-ring] focus-visible:ring-offset-2 ring-offset-[--color-ring-offset] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-500 data-[state=unchecked]:bg-neutral-300 dark:data-[state=unchecked]:bg-neutral-600 touch:min-h-[--touch-target-min]",
+  "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-500 data-[state=unchecked]:bg-neutral-300 dark:data-[state=unchecked]:bg-neutral-600 touch:min-h-[--touch-target-min]",
   {
     variants: {
       size: {
@@ -1016,9 +1016,9 @@ var SelectTrigger = React19.forwardRef(({ className, children, ...props }, ref)
   {
     ref,
     className: cn(
-      "flex h-9 w-full items-center justify-between rounded-md border border-[--color-border-input] bg-[--color-surface-raised] px-3 text-sm text-[--color-on-surface] transition-colors duration-fast",
-      "placeholder:text-[--color-on-surface-muted]",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[--color-ring] focus-visible:ring-offset-2 ring-offset-[--color-ring-offset]",
+      "flex h-9 w-full items-center justify-between rounded-md border border-[var(--color-border-input)] bg-[var(--color-surface-raised)] px-3 text-sm text-[var(--color-on-surface)] transition-colors duration-fast",
+      "placeholder:text-[var(--color-on-surface-muted)]",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)]",
       "disabled:cursor-not-allowed disabled:opacity-50",
       "aria-[invalid=true]:border-error-500 aria-[invalid=true]:focus-visible:ring-error-500",
       "touch:min-h-[--touch-target-min]",
@@ -1051,7 +1051,7 @@ var SelectContent = React19.forwardRef(({ className, children, position = "poppe
   {
     ref,
     className: cn(
-      "relative z-popover max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-[--color-border] bg-[--color-surface-raised] shadow-md",
+      "relative z-popover max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-[var(--color-border)] bg-[var(--color-surface-raised)] shadow-md",
       "animate-in fade-in-0 zoom-in-95",
       "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
       "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
@@ -1079,7 +1079,7 @@ var SelectItem = React19.forwardRef(({ className, children, ...props }, ref) =>
     ref,
     className: cn(
       "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
-      "focus:bg-[--color-surface-muted]",
+      "focus:bg-[var(--color-surface-muted)]",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
@@ -1108,7 +1108,7 @@ var SelectLabel = React19.forwardRef(({ className, ...props }, ref) => /* @__PUR
   SelectPrimitive.Label,
   {
     ref,
-    className: cn("px-2 py-1.5 text-xs font-medium text-[--color-on-surface-muted]", className),
+    className: cn("px-2 py-1.5 text-xs font-medium text-[var(--color-on-surface-muted)]", className),
     ...props
   }
 ));
@@ -1117,7 +1117,7 @@ var SelectSeparator = React19.forwardRef(({ className, ...props }, ref) => /* @_
   SelectPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-[--color-border]", className),
+    className: cn("-mx-1 my-1 h-px bg-[var(--color-border)]", className),
     ...props
   }
 ));
@@ -1128,7 +1128,7 @@ import * as React20 from "react";
 import { cva as cva9 } from "class-variance-authority";
 import { jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
 var numberInputVariants = cva9(
-  "flex w-full rounded-md border border-[--color-border-input] bg-[--color-surface-raised] text-[--color-on-surface] transition-colors duration-fast focus-within:ring-2 focus-within:ring-[--color-ring] focus-within:ring-offset-2 ring-offset-[--color-ring-offset] aria-[invalid=true]:border-error-500 aria-[invalid=true]:focus-within:ring-error-500",
+  "flex w-full rounded-md border border-[var(--color-border-input)] bg-[var(--color-surface-raised)] text-[var(--color-on-surface)] transition-colors duration-fast focus-within:ring-2 focus-within:ring-[var(--color-ring)] focus-within:ring-offset-2 ring-offset-[var(--color-ring-offset)] aria-[invalid=true]:border-error-500 aria-[invalid=true]:focus-within:ring-error-500",
   {
     variants: {
       size: {
@@ -1250,7 +1250,7 @@ var NumberInput = React20.forwardRef(
               ...props
             }
           ),
-          !readOnly && !disabled && /* @__PURE__ */ jsxs6("div", { className: "flex flex-col border-l border-[--color-border-input]", children: [
+          !readOnly && !disabled && /* @__PURE__ */ jsxs6("div", { className: "flex flex-col border-l border-[var(--color-border-input)]", children: [
             /* @__PURE__ */ jsx19(
               "button",
               {
@@ -1258,7 +1258,7 @@ var NumberInput = React20.forwardRef(
                 tabIndex: -1,
                 onClick: increment,
                 disabled: max != null && parseFloat(displayValue) >= max,
-                className: "flex flex-1 items-center justify-center px-1.5 text-[--color-on-surface-muted] hover:bg-[--color-surface-muted] disabled:opacity-30",
+                className: "flex flex-1 items-center justify-center px-1.5 text-[var(--color-on-surface-muted)] hover:bg-[var(--color-surface-muted)] disabled:opacity-30",
                 "aria-label": "Increment",
                 children: /* @__PURE__ */ jsx19(
                   "svg",
@@ -1283,7 +1283,7 @@ var NumberInput = React20.forwardRef(
                 tabIndex: -1,
                 onClick: decrement,
                 disabled: min != null && parseFloat(displayValue) <= min,
-                className: "flex flex-1 items-center justify-center border-t border-[--color-border-input] px-1.5 text-[--color-on-surface-muted] hover:bg-[--color-surface-muted] disabled:opacity-30",
+                className: "flex flex-1 items-center justify-center border-t border-[var(--color-border-input)] px-1.5 text-[var(--color-on-surface-muted)] hover:bg-[var(--color-surface-muted)] disabled:opacity-30",
                 "aria-label": "Decrement",
                 children: /* @__PURE__ */ jsx19(
                   "svg",
@@ -1358,7 +1358,7 @@ var Combobox = React22.forwardRef(
           "aria-expanded": open,
           disabled,
           className: cn(
-            "flex h-9 w-full items-center justify-between rounded-md border border-[--color-border-input] bg-[--color-surface-raised] px-3 text-sm text-[--color-on-surface] transition-colors duration-fast",
+            "flex h-9 w-full items-center justify-between rounded-md border border-[var(--color-border-input)] bg-[var(--color-surface-raised)] px-3 text-sm text-[var(--color-on-surface)] transition-colors duration-fast",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2",
             "disabled:cursor-not-allowed disabled:opacity-50",
             "aria-[invalid=true]:border-error-500 aria-[invalid=true]:focus-visible:ring-error-500",
@@ -1367,7 +1367,7 @@ var Combobox = React22.forwardRef(
           ),
           ...props,
           children: [
-            /* @__PURE__ */ jsx21("span", { className: cn(!selectedOption && "text-[--color-on-surface-muted]"), children: selectedOption?.label ?? placeholder }),
+            /* @__PURE__ */ jsx21("span", { className: cn(!selectedOption && "text-[var(--color-on-surface-muted)]"), children: selectedOption?.label ?? placeholder }),
             /* @__PURE__ */ jsxs7(
               "svg",
               {
@@ -1392,7 +1392,7 @@ var Combobox = React22.forwardRef(
       /* @__PURE__ */ jsx21(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx21(
         PopoverPrimitive.Content,
         {
-          className: "z-popover w-[var(--radix-popover-trigger-width)] rounded-md border border-[--color-border] bg-[--color-surface-raised] p-0 shadow-md animate-in fade-in-0 zoom-in-95",
+          className: "z-popover w-[var(--radix-popover-trigger-width)] rounded-md border border-[var(--color-border)] bg-[var(--color-surface-raised)] p-0 shadow-md animate-in fade-in-0 zoom-in-95",
           sideOffset: 4,
           align: "start",
           children: /* @__PURE__ */ jsxs7(Command, { shouldFilter: true, children: [
@@ -1402,11 +1402,11 @@ var Combobox = React22.forwardRef(
                 value: search,
                 onValueChange: setSearch,
                 placeholder: searchPlaceholder,
-                className: "flex h-9 w-full border-b border-[--color-border] bg-transparent px-3 text-sm outline-none placeholder:text-[--color-on-surface-muted]"
+                className: "flex h-9 w-full border-b border-[var(--color-border)] bg-transparent px-3 text-sm outline-none placeholder:text-[var(--color-on-surface-muted)]"
               }
             ),
             /* @__PURE__ */ jsxs7(Command.List, { className: "max-h-60 overflow-auto p-1", children: [
-              /* @__PURE__ */ jsx21(Command.Empty, { className: "px-2 py-6 text-center text-sm text-[--color-on-surface-muted]", children: emptyMessage }),
+              /* @__PURE__ */ jsx21(Command.Empty, { className: "px-2 py-6 text-center text-sm text-[var(--color-on-surface-muted)]", children: emptyMessage }),
               options.map((option) => /* @__PURE__ */ jsxs7(
                 Command.Item,
                 {
@@ -1421,7 +1421,7 @@ var Combobox = React22.forwardRef(
                   },
                   className: cn(
                     "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
-                    "data-[selected=true]:bg-[--color-surface-muted]",
+                    "data-[selected=true]:bg-[var(--color-surface-muted)]",
                     "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"
                   ),
                   children: [
@@ -1511,7 +1511,7 @@ var FormDescription = React23.forwardRef(({ className, ...props }, ref) => {
     {
       ref,
       id: descriptionId,
-      className: cn("text-xs text-[--color-on-surface-muted]", className),
+      className: cn("text-xs text-[var(--color-on-surface-muted)]", className),
       ...props
     }
   );
@@ -1763,8 +1763,8 @@ var FormSection = React25.forwardRef(({ className, title, description, children,
     className: cn("space-y-4 border-0 p-0", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx24("legend", { className: "text-sm font-semibold text-[--color-on-surface]", children: title }),
-      description && /* @__PURE__ */ jsx24("p", { className: "-mt-2 text-xs text-[--color-on-surface-muted]", children: description }),
+      /* @__PURE__ */ jsx24("legend", { className: "text-sm font-semibold text-[var(--color-on-surface)]", children: title }),
+      description && /* @__PURE__ */ jsx24("p", { className: "-mt-2 text-xs text-[var(--color-on-surface-muted)]", children: description }),
       children
     ]
   }
@@ -1782,7 +1782,7 @@ var FormActions = React25.forwardRef(
     {
       ref,
       className: cn(
-        "flex items-center gap-3 pt-4 border-t border-[--color-border]",
+        "flex items-center gap-3 pt-4 border-t border-[var(--color-border)]",
         alignClasses[align],
         className
       ),
@@ -1804,8 +1804,8 @@ var tabsListVariants = cva11(
   {
     variants: {
       variant: {
-        default: "rounded-lg bg-[--color-surface-muted] p-1",
-        underline: "border-b border-[--color-border] bg-transparent"
+        default: "rounded-lg bg-[var(--color-surface-muted)] p-1",
+        underline: "border-b border-[var(--color-border)] bg-transparent"
       }
     },
     defaultVariants: { variant: "default" }
@@ -1822,8 +1822,8 @@ var TabsList = React26.forwardRef(({ className, variant = "default", ...props },
 TabsList.displayName = "TabsList";
 var tabsTriggerBase = "inline-flex items-center justify-center whitespace-nowrap px-3 py-1.5 text-sm font-medium transition-all duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 touch:min-h-[--touch-target-min]";
 var tabsTriggerVariantStyles = {
-  default: "rounded-md data-[state=active]:bg-[--color-surface-raised] data-[state=active]:shadow-sm data-[state=active]:text-[--color-on-surface] text-[--color-on-surface-secondary]",
-  underline: "border-b-2 border-transparent rounded-none data-[state=active]:border-primary-500 data-[state=active]:text-[--color-on-surface] text-[--color-on-surface-secondary]"
+  default: "rounded-md data-[state=active]:bg-[var(--color-surface-raised)] data-[state=active]:shadow-sm data-[state=active]:text-[var(--color-on-surface)] text-[var(--color-on-surface-secondary)]",
+  underline: "border-b-2 border-transparent rounded-none data-[state=active]:border-primary-500 data-[state=active]:text-[var(--color-on-surface)] text-[var(--color-on-surface-secondary)]"
 };
 var TabsTrigger = React26.forwardRef(({ className, ...props }, ref) => {
   const { variant } = useTabsVariant();
@@ -1886,7 +1886,7 @@ var EmptyStateIcon = React27.forwardRef(({ className, ...props }, ref) => /* @__
   "div",
   {
     ref,
-    className: cn("text-[--color-on-surface-muted] [&>svg]:h-10 [&>svg]:w-10", className),
+    className: cn("text-[var(--color-on-surface-muted)] [&>svg]:h-10 [&>svg]:w-10", className),
     ...props
   }
 ));
@@ -1895,7 +1895,7 @@ var EmptyStateTitle = React27.forwardRef(({ className, ...props }, ref) => /* @_
   "h3",
   {
     ref,
-    className: cn("text-base font-semibold text-[--color-on-surface]", className),
+    className: cn("text-base font-semibold text-[var(--color-on-surface)]", className),
     ...props
   }
 ));
@@ -1904,7 +1904,7 @@ var EmptyStateDescription = React27.forwardRef(({ className, ...props }, ref) =>
   "p",
   {
     ref,
-    className: cn("text-sm text-[--color-on-surface-muted] max-w-sm", className),
+    className: cn("text-sm text-[var(--color-on-surface-muted)] max-w-sm", className),
     ...props
   }
 ));
@@ -1947,7 +1947,7 @@ var TableFooter = React28.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "border-t bg-[--color-surface-sunken] font-medium [&>tr]:last:border-b-0",
+      "border-t bg-[var(--color-surface-sunken)] font-medium [&>tr]:last:border-b-0",
       className
     ),
     ...props
@@ -1959,7 +1959,7 @@ var TableRow = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "border-b border-[--color-border] transition-colors hover:bg-[--color-surface-sunken] data-[state=selected]:bg-primary-50 dark:data-[state=selected]:bg-primary-950",
+      "border-b border-[var(--color-border)] transition-colors hover:bg-[var(--color-surface-sunken)] data-[state=selected]:bg-primary-50 dark:data-[state=selected]:bg-primary-950",
       className
     ),
     ...props
@@ -1971,7 +1971,7 @@ var TableHead = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "h-10 px-3 text-left align-middle text-xs font-medium text-[--color-on-surface-muted] uppercase tracking-wider [&:has([role=checkbox])]:pr-0",
+      "h-10 px-3 text-left align-middle text-xs font-medium text-[var(--color-on-surface-muted)] uppercase tracking-wider [&:has([role=checkbox])]:pr-0",
       className
     ),
     ...props
@@ -1994,7 +1994,7 @@ var TableCaption = React28.forwardRef(({ className, ...props }, ref) => /* @__PU
   "caption",
   {
     ref,
-    className: cn("mt-4 text-sm text-[--color-on-surface-muted]", className),
+    className: cn("mt-4 text-sm text-[var(--color-on-surface-muted)]", className),
     ...props
   }
 ));
@@ -2025,7 +2025,7 @@ function DataTablePagination({
     "div",
     {
       className: cn(
-        "flex items-center justify-between px-3 py-3 text-sm text-[--color-on-surface-secondary]",
+        "flex items-center justify-between px-3 py-3 text-sm text-[var(--color-on-surface-secondary)]",
         className
       ),
       children: [
@@ -2036,7 +2036,7 @@ function DataTablePagination({
             {
               value: pageSize,
               onChange: (e) => table.setPageSize(Number(e.target.value)),
-              className: "h-8 rounded-md border border-[--color-border-input] bg-[--color-surface-raised] px-2 text-sm",
+              className: "h-8 rounded-md border border-[var(--color-border-input)] bg-[var(--color-surface-raised)] px-2 text-sm",
               "aria-label": "Rows per page",
               children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx28("option", { value: size, children: size }, size))
             }
@@ -2048,7 +2048,7 @@ function DataTablePagination({
             /* @__PURE__ */ jsx28(
               "button",
               {
-                className: "inline-flex h-8 w-8 items-center justify-center rounded-md border border-[--color-border-input] bg-[--color-surface-raised] transition-colors hover:bg-[--color-surface-sunken] disabled:opacity-50 disabled:pointer-events-none",
+                className: "inline-flex h-8 w-8 items-center justify-center rounded-md border border-[var(--color-border-input)] bg-[var(--color-surface-raised)] transition-colors hover:bg-[var(--color-surface-sunken)] disabled:opacity-50 disabled:pointer-events-none",
                 onClick: () => table.previousPage(),
                 disabled: !table.getCanPreviousPage(),
                 "aria-label": "Previous page",
@@ -2071,7 +2071,7 @@ function DataTablePagination({
             /* @__PURE__ */ jsx28(
               "button",
               {
-                className: "inline-flex h-8 w-8 items-center justify-center rounded-md border border-[--color-border-input] bg-[--color-surface-raised] transition-colors hover:bg-[--color-surface-sunken] disabled:opacity-50 disabled:pointer-events-none",
+                className: "inline-flex h-8 w-8 items-center justify-center rounded-md border border-[var(--color-border-input)] bg-[var(--color-surface-raised)] transition-colors hover:bg-[var(--color-surface-sunken)] disabled:opacity-50 disabled:pointer-events-none",
                 onClick: () => table.nextPage(),
                 disabled: !table.getCanNextPage(),
                 "aria-label": "Next page",
@@ -2131,7 +2131,7 @@ function DataTableToolbar({
       ),
       children: [
         /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
-          selectedCount > 0 && /* @__PURE__ */ jsxs11("span", { className: "text-sm text-[--color-on-surface-secondary]", children: [
+          selectedCount > 0 && /* @__PURE__ */ jsxs11("span", { className: "text-sm text-[var(--color-on-surface-secondary)]", children: [
             selectedCount,
             " selected"
           ] }),
@@ -2141,7 +2141,7 @@ function DataTableToolbar({
           /* @__PURE__ */ jsxs11(
             "button",
             {
-              className: "inline-flex items-center gap-1 rounded-md border border-[--color-border-input] bg-[--color-surface-raised] px-3 py-1.5 text-sm transition-colors hover:bg-[--color-surface-sunken]",
+              className: "inline-flex items-center gap-1 rounded-md border border-[var(--color-border-input)] bg-[var(--color-surface-raised)] px-3 py-1.5 text-sm transition-colors hover:bg-[var(--color-surface-sunken)]",
               onClick: () => setShowColumnMenu(!showColumnMenu),
               "aria-label": "Toggle columns",
               "aria-expanded": showColumnMenu,
@@ -2164,10 +2164,10 @@ function DataTableToolbar({
               ]
             }
           ),
-          showColumnMenu && /* @__PURE__ */ jsx29("div", { className: "absolute right-0 top-full z-popover mt-1 min-w-[10rem] rounded-md border border-[--color-border] bg-[--color-surface-raised] p-2 shadow-md", children: table.getAllColumns().filter((col) => col.getCanHide()).map((col) => /* @__PURE__ */ jsxs11(
+          showColumnMenu && /* @__PURE__ */ jsx29("div", { className: "absolute right-0 top-full z-popover mt-1 min-w-[10rem] rounded-md border border-[var(--color-border)] bg-[var(--color-surface-raised)] p-2 shadow-md", children: table.getAllColumns().filter((col) => col.getCanHide()).map((col) => /* @__PURE__ */ jsxs11(
             "label",
             {
-              className: "flex items-center gap-2 rounded px-2 py-1 text-sm hover:bg-[--color-surface-sunken] cursor-pointer capitalize",
+              className: "flex items-center gap-2 rounded px-2 py-1 text-sm hover:bg-[var(--color-surface-sunken)] cursor-pointer capitalize",
               children: [
                 /* @__PURE__ */ jsx29(
                   "input",
@@ -2256,7 +2256,7 @@ function DataTable({
     }
   }, [rowSelection, table, onRowSelectionChange]);
   const showToolbar = enableRowSelection || enableColumnVisibility;
-  return /* @__PURE__ */ jsxs12("div", { className: cn("rounded-md border border-[--color-border]", className), children: [
+  return /* @__PURE__ */ jsxs12("div", { className: cn("rounded-md border border-[var(--color-border)]", className), children: [
     showToolbar && /* @__PURE__ */ jsx30(
       DataTableToolbar,
       {
@@ -2268,7 +2268,7 @@ function DataTable({
       /* @__PURE__ */ jsx30(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx30(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx30(TableHead, { children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxs12(
         "button",
         {
-          className: "flex items-center gap-1 -ml-2 px-2 py-1 rounded-md hover:bg-[--color-surface-muted] transition-colors duration-fast",
+          className: "flex items-center gap-1 -ml-2 px-2 py-1 rounded-md hover:bg-[var(--color-surface-muted)] transition-colors duration-fast",
           onClick: header.column.getToggleSortingHandler(),
           "aria-label": `Sort by ${typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : header.column.id}`,
           children: [
@@ -2342,7 +2342,7 @@ function DataTableColumnHeader({
     "button",
     {
       className: cn(
-        "flex items-center gap-1 -ml-2 px-2 py-1 rounded-md hover:bg-[--color-surface-muted] transition-colors duration-fast",
+        "flex items-center gap-1 -ml-2 px-2 py-1 rounded-md hover:bg-[var(--color-surface-muted)] transition-colors duration-fast",
         className
       ),
       onClick: () => column.toggleSorting(sorted === "asc"),
@@ -2384,7 +2384,7 @@ var FilterBar = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "flex flex-wrap items-center gap-2 rounded-lg border border-[--color-border] bg-[--color-surface-raised] p-3",
+      "flex flex-wrap items-center gap-2 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-raised)] p-3",
       className
     ),
     role: "toolbar",
@@ -2409,7 +2409,7 @@ var filterChipVariants = cva13(
     variants: {
       variant: {
         default: "bg-primary-50 text-primary-700",
-        outline: "border border-[--color-border-input] text-[--color-on-surface-secondary]"
+        outline: "border border-[var(--color-border-input)] text-[var(--color-on-surface-secondary)]"
       }
     },
     defaultVariants: { variant: "default" }
@@ -2469,7 +2469,7 @@ var ActiveFilters = React31.forwardRef(({ className, onClearAll, clearAllLabel =
         {
           type: "button",
           onClick: onClearAll,
-          className: "text-sm text-[--color-on-surface-muted] hover:text-[--color-on-surface-secondary] underline transition-colors",
+          className: "text-sm text-[var(--color-on-surface-muted)] hover:text-[var(--color-on-surface-secondary)] underline transition-colors",
           children: clearAllLabel
         }
       )
@@ -2501,7 +2501,7 @@ var PopoverContent = React32.forwardRef(({ className, align = "center", sideOffs
     align,
     sideOffset,
     className: cn(
-      "z-popover w-72 rounded-md border border-[--color-border] bg-[--color-surface-raised] p-4 shadow-md outline-none",
+      "z-popover w-72 rounded-md border border-[var(--color-border)] bg-[var(--color-surface-raised)] p-4 shadow-md outline-none",
       "animate-in fade-in-0 zoom-in-95",
       "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
       "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
@@ -2529,7 +2529,7 @@ var DropdownMenuContent = React33.forwardRef(({ className, sideOffset = 4, ...pr
     ref,
     sideOffset,
     className: cn(
-      "z-dropdown min-w-[8rem] overflow-hidden rounded-md border border-[--color-border] bg-[--color-surface-raised] p-1 shadow-md",
+      "z-dropdown min-w-[8rem] overflow-hidden rounded-md border border-[var(--color-border)] bg-[var(--color-surface-raised)] p-1 shadow-md",
       "animate-in fade-in-0 zoom-in-95",
       "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
       "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
@@ -2546,8 +2546,8 @@ var DropdownMenuSubTrigger = React33.forwardRef(({ className, inset, children, .
     ref,
     className: cn(
       "flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
-      "focus:bg-[--color-surface-muted]",
-      "data-[state=open]:bg-[--color-surface-muted]",
+      "focus:bg-[var(--color-surface-muted)]",
+      "data-[state=open]:bg-[var(--color-surface-muted)]",
       "touch:min-h-[--touch-target-min]",
       inset && "pl-8",
       className
@@ -2579,7 +2579,7 @@ var DropdownMenuSubContent = React33.forwardRef(({ className, ...props }, ref) =
   {
     ref,
     className: cn(
-      "z-dropdown min-w-[8rem] overflow-hidden rounded-md border border-[--color-border] bg-[--color-surface-raised] p-1 shadow-md",
+      "z-dropdown min-w-[8rem] overflow-hidden rounded-md border border-[var(--color-border)] bg-[var(--color-surface-raised)] p-1 shadow-md",
       "animate-in fade-in-0 zoom-in-95",
       "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
       "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
@@ -2595,7 +2595,7 @@ var DropdownMenuItem = React33.forwardRef(({ className, inset, destructive, ...p
     ref,
     className: cn(
       "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors",
-      "focus:bg-[--color-surface-muted] focus:text-[--color-on-surface]",
+      "focus:bg-[var(--color-surface-muted)] focus:text-[var(--color-on-surface)]",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       "touch:min-h-[--touch-target-min]",
       destructive && "text-error-600 focus:bg-error-50 focus:text-error-600",
@@ -2612,7 +2612,7 @@ var DropdownMenuCheckboxItem = React33.forwardRef(({ className, children, checke
     ref,
     className: cn(
       "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors",
-      "focus:bg-[--color-surface-muted]",
+      "focus:bg-[var(--color-surface-muted)]",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       "touch:min-h-[--touch-target-min]",
       className
@@ -2645,7 +2645,7 @@ var DropdownMenuRadioItem = React33.forwardRef(({ className, children, ...props
     ref,
     className: cn(
       "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors",
-      "focus:bg-[--color-surface-muted]",
+      "focus:bg-[var(--color-surface-muted)]",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       "touch:min-h-[--touch-target-min]",
       className
@@ -2663,7 +2663,7 @@ var DropdownMenuLabel = React33.forwardRef(({ className, inset, ...props }, ref)
   {
     ref,
     className: cn(
-      "px-2 py-1.5 text-xs font-medium text-[--color-on-surface-muted]",
+      "px-2 py-1.5 text-xs font-medium text-[var(--color-on-surface-muted)]",
       inset && "pl-8",
       className
     ),
@@ -2675,7 +2675,7 @@ var DropdownMenuSeparator = React33.forwardRef(({ className, ...props }, ref) =>
   DropdownMenuPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-[--color-border]", className),
+    className: cn("-mx-1 my-1 h-px bg-[var(--color-border)]", className),
     ...props
   }
 ));
@@ -2687,7 +2687,7 @@ var DropdownMenuShortcut = ({
   "span",
   {
     className: cn(
-      "ml-auto text-xs tracking-widest text-[--color-on-surface-muted]",
+      "ml-auto text-xs tracking-widest text-[var(--color-on-surface-muted)]",
       className
     ),
     ...props
@@ -2707,7 +2707,7 @@ var DialogOverlay = React34.forwardRef(({ className, ...props }, ref) => /* @__P
   {
     ref,
     className: cn(
-      "fixed inset-0 z-modal bg-black/50",
+      "fixed inset-0 z-modal bg-[var(--color-surface-overlay)]",
       "animate-in fade-in-0",
       "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
       className
@@ -2723,13 +2723,13 @@ var DialogContent = React34.forwardRef(({ className, children, ...props }, ref)
     {
       ref,
       className: cn(
-        "fixed z-modal bg-[--color-surface-raised] p-6 shadow-xl",
+        "fixed z-modal bg-[var(--color-surface-raised)] p-6 shadow-xl",
         "focus-visible:outline-none",
         // Mobile: full-screen
         "inset-0",
         // Desktop: centered modal
         "sm:inset-auto sm:left-1/2 sm:top-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2",
-        "sm:w-full sm:max-w-lg sm:rounded-xl sm:border sm:border-[--color-border]",
+        "sm:w-full sm:max-w-lg sm:rounded-xl sm:border sm:border-[var(--color-border)]",
         // Animations
         "animate-in fade-in-0",
         "sm:zoom-in-95 sm:slide-in-from-left-1/2 sm:slide-in-from-top-[48%]",
@@ -2800,7 +2800,7 @@ var DialogDescription = React34.forwardRef(({ className, ...props }, ref) => /*
   DialogPrimitive.Description,
   {
     ref,
-    className: cn("text-sm text-[--color-on-surface-muted]", className),
+    className: cn("text-sm text-[var(--color-on-surface-muted)]", className),
     ...props
   }
 ));
@@ -2818,18 +2818,18 @@ function CommandPalette({
   children
 }) {
   return /* @__PURE__ */ jsx36(DialogPrimitive2.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs17(DialogPrimitive2.Portal, { children: [
-    /* @__PURE__ */ jsx36(DialogPrimitive2.Overlay, { className: "fixed inset-0 z-modal bg-black/50 animate-in fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0" }),
+    /* @__PURE__ */ jsx36(DialogPrimitive2.Overlay, { className: "fixed inset-0 z-modal bg-[var(--color-surface-overlay)] animate-in fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0" }),
     /* @__PURE__ */ jsx36(
       DialogPrimitive2.Content,
       {
         className: cn(
-          "fixed left-1/2 top-[20%] z-modal w-full max-w-xl -translate-x-1/2 overflow-hidden rounded-xl border border-[--color-border] bg-[--color-surface-raised] shadow-2xl",
+          "fixed left-1/2 top-[20%] z-modal w-full max-w-xl -translate-x-1/2 overflow-hidden rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-raised)] shadow-2xl",
           "animate-in fade-in-0 zoom-in-95 slide-in-from-left-1/2",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           className
         ),
         children: /* @__PURE__ */ jsxs17(Command2, { shouldFilter: true, className: "flex flex-col", children: [
-          /* @__PURE__ */ jsxs17("div", { className: "flex items-center border-b border-[--color-border] px-4", children: [
+          /* @__PURE__ */ jsxs17("div", { className: "flex items-center border-b border-[var(--color-border)] px-4", children: [
             /* @__PURE__ */ jsxs17(
               "svg",
               {
@@ -2841,7 +2841,7 @@ function CommandPalette({
                 strokeWidth: "2",
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
-                className: "shrink-0 text-[--color-on-surface-muted]",
+                className: "shrink-0 text-[var(--color-on-surface-muted)]",
                 children: [
                   /* @__PURE__ */ jsx36("circle", { cx: "11", cy: "11", r: "8" }),
                   /* @__PURE__ */ jsx36("path", { d: "m21 21-4.3-4.3" })
@@ -2852,7 +2852,7 @@ function CommandPalette({
               Command2.Input,
               {
                 placeholder,
-                className: "flex h-12 w-full bg-transparent px-3 text-base outline-none placeholder:text-[--color-on-surface-muted]"
+                className: "flex h-12 w-full bg-transparent px-3 text-base outline-none placeholder:text-[var(--color-on-surface-muted)]"
               }
             )
           ] }),
@@ -2871,7 +2871,7 @@ function CommandPaletteGroup({
     Command2.Group,
     {
       heading,
-      className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-[--color-on-surface-muted]",
+      className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-[var(--color-on-surface-muted)]",
       children
     }
   );
@@ -2892,12 +2892,12 @@ function CommandPaletteItem({
       disabled,
       className: cn(
         "relative flex cursor-pointer select-none items-center rounded-md px-2 py-2 text-sm outline-none",
-        "data-[selected=true]:bg-[--color-surface-muted]",
+        "data-[selected=true]:bg-[var(--color-surface-muted)]",
         "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
         className
       ),
       children: [
-        icon && /* @__PURE__ */ jsx36("span", { className: "mr-2 flex h-4 w-4 items-center justify-center text-[--color-on-surface-muted]", children: icon }),
+        icon && /* @__PURE__ */ jsx36("span", { className: "mr-2 flex h-4 w-4 items-center justify-center text-[var(--color-on-surface-muted)]", children: icon }),
         /* @__PURE__ */ jsx36("span", { className: "flex-1", children }),
         shortcut && /* @__PURE__ */ jsx36(CommandPaletteShortcut, { children: shortcut })
       ]
@@ -2912,7 +2912,7 @@ function CommandPaletteSeparator({
   return /* @__PURE__ */ jsx36(
     Command2.Separator,
     {
-      className: cn("-mx-1 my-1 h-px bg-[--color-border]", className),
+      className: cn("-mx-1 my-1 h-px bg-[var(--color-border)]", className),
       ...props
     }
   );
@@ -2926,7 +2926,7 @@ function CommandPaletteEmpty({
   return /* @__PURE__ */ jsx36(
     Command2.Empty,
     {
-      className: cn("px-2 py-6 text-center text-sm text-[--color-on-surface-muted]", className),
+      className: cn("px-2 py-6 text-center text-sm text-[var(--color-on-surface-muted)]", className),
       ...props,
       children
     }
@@ -2941,7 +2941,7 @@ function CommandPaletteShortcut({
     "span",
     {
       className: cn(
-        "ml-auto text-xs tracking-widest text-[--color-on-surface-muted]",
+        "ml-auto text-xs tracking-widest text-[var(--color-on-surface-muted)]",
         className
       ),
       ...props
@@ -3023,7 +3023,7 @@ var DrawerContent = React35.forwardRef(({ className, size, children, ...props },
       "div",
       {
         className: cn(
-          "flex flex-col border-[--color-border] bg-[--color-surface-raised]",
+          "flex flex-col border-[var(--color-border)] bg-[var(--color-surface-raised)]",
           side === "right" ? "border-l" : "border-r",
           drawerSizeVariants({ size }),
           className
@@ -3037,7 +3037,7 @@ var DrawerContent = React35.forwardRef(({ className, size, children, ...props },
       DialogPrimitive3.Overlay,
       {
         className: cn(
-          "fixed inset-0 bg-black/30",
+          "fixed inset-0 bg-[var(--color-surface-overlay)]",
           "animate-in fade-in-0",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
         ),
@@ -3049,10 +3049,10 @@ var DrawerContent = React35.forwardRef(({ className, size, children, ...props },
       {
         ref,
         className: cn(
-          "fixed top-0 h-full bg-[--color-surface-raised] shadow-xl",
+          "fixed top-0 h-full bg-[var(--color-surface-raised)] shadow-xl",
           "focus-visible:outline-none",
-          side === "right" && "right-0 border-l border-[--color-border] animate-slide-in-right data-[state=closed]:animate-slide-out-right",
-          side === "left" && "left-0 border-r border-[--color-border] animate-slide-in-left data-[state=closed]:animate-slide-out-left",
+          side === "right" && "right-0 border-l border-[var(--color-border)] animate-slide-in-right data-[state=closed]:animate-slide-out-right",
+          side === "left" && "left-0 border-r border-[var(--color-border)] animate-slide-in-left data-[state=closed]:animate-slide-out-left",
           drawerSizeVariants({ size }),
           className
         ),
@@ -3071,7 +3071,7 @@ var DrawerHeader = React35.forwardRef(({ className, ...props }, ref) => {
     {
       ref,
       className: cn(
-        "flex items-center justify-between border-b border-[--color-border] px-6 py-4",
+        "flex items-center justify-between border-b border-[var(--color-border)] px-6 py-4",
         className
       ),
       ...props,
@@ -3140,7 +3140,7 @@ var DrawerDescription = React35.forwardRef(({ className, ...props }, ref) => /*
   DialogPrimitive3.Description,
   {
     ref,
-    className: cn("text-sm text-[--color-on-surface-muted]", className),
+    className: cn("text-sm text-[var(--color-on-surface-muted)]", className),
     ...props
   }
 ));
@@ -3150,7 +3150,7 @@ var DrawerFooter = React35.forwardRef(({ className, ...props }, ref) => /* @__PU
   {
     ref,
     className: cn(
-      "flex items-center justify-end gap-2 border-t border-[--color-border] px-6 py-4",
+      "flex items-center justify-end gap-2 border-t border-[var(--color-border)] px-6 py-4",
       className
     ),
     ...props
@@ -3225,7 +3225,7 @@ var AppShellSidebar = React36.forwardRef(({ className, children, ...props }, ref
     {
       ref,
       className: cn(
-        "hidden md:flex md:flex-col shrink-0 border-r border-[--color-border] bg-[--color-surface-raised] overflow-y-auto transition-[width] duration-slow",
+        "hidden md:flex md:flex-col shrink-0 border-r border-[var(--color-border)] bg-[var(--color-surface-raised)] overflow-y-auto transition-[width] duration-slow",
         className
       ),
       style: {
@@ -3244,7 +3244,7 @@ var AppShellHeader = React36.forwardRef(({ className, children, ...props }, ref)
     {
       ref,
       className: cn(
-        "flex h-14 items-center gap-3 border-b border-[--color-border] bg-[--color-surface-raised] px-4 shrink-0",
+        "flex h-14 items-center gap-3 border-b border-[var(--color-border)] bg-[var(--color-surface-raised)] px-4 shrink-0",
         className
       ),
       ...props,
@@ -3254,7 +3254,7 @@ var AppShellHeader = React36.forwardRef(({ className, children, ...props }, ref)
           {
             type: "button",
             onClick: () => setMobileSidebarOpen(true),
-            className: "rounded-md p-1.5 hover:bg-[--color-surface-muted] transition-colors touch:min-h-[--touch-target-min] touch:min-w-[--touch-target-min] flex items-center justify-center",
+            className: "rounded-md p-1.5 hover:bg-[var(--color-surface-muted)] transition-colors touch:min-h-[--touch-target-min] touch:min-w-[--touch-target-min] flex items-center justify-center",
             "aria-label": "Open menu",
             children: /* @__PURE__ */ jsx38(
               "svg",
@@ -3299,7 +3299,7 @@ var AppShellFooter = React36.forwardRef(({ className, ...props }, ref) => /* @__
   {
     ref,
     className: cn(
-      "flex items-center border-t border-[--color-border] bg-[--color-surface-raised] px-4 py-2 shrink-0",
+      "flex items-center border-t border-[var(--color-border)] bg-[var(--color-surface-raised)] px-4 py-2 shrink-0",
       className
     ),
     ...props
@@ -3315,7 +3315,7 @@ var BottomNavigation = React37.forwardRef(({ className, ...props }, ref) => /* @
   {
     ref,
     className: cn(
-      "fixed bottom-0 left-0 right-0 z-sticky flex items-center justify-around border-t border-[--color-border] bg-[--color-surface-raised] pb-[--safe-area-bottom]",
+      "fixed bottom-0 left-0 right-0 z-sticky flex items-center justify-around border-t border-[var(--color-border)] bg-[var(--color-surface-raised)] pb-[var(--safe-area-bottom)]",
       "h-[calc(var(--bottom-nav-height)+var(--safe-area-bottom))]",
       className
     ),
@@ -3329,7 +3329,7 @@ var BottomNavigationItem = React37.forwardRef(({ className, icon, label, active
     ref,
     className: cn(
       "flex min-w-[--touch-target-min] flex-1 flex-col items-center justify-center gap-0.5 py-1 text-xs transition-colors",
-      active ? "text-primary-500 font-medium" : "text-[--color-on-surface-muted] hover:text-[--color-on-surface-secondary]",
+      active ? "text-primary-500 font-medium" : "text-[var(--color-on-surface-muted)] hover:text-[var(--color-on-surface-secondary)]",
       className
     ),
     "aria-current": active ? "page" : void 0,
@@ -3420,13 +3420,13 @@ var InstallPrompt = React39.forwardRef(
         role: "dialog",
         "aria-label": title,
         className: cn(
-          "fixed bottom-0 left-0 right-0 z-modal border-t border-[--color-border] bg-[--color-surface-raised] p-4 shadow-lg pb-[calc(1rem+var(--safe-area-bottom))]",
+          "fixed bottom-0 left-0 right-0 z-modal border-t border-[var(--color-border)] bg-[var(--color-surface-raised)] p-4 shadow-lg pb-[calc(1rem+var(--safe-area-bottom))]",
           className
         ),
         ...props,
         children: /* @__PURE__ */ jsxs22("div", { className: "mx-auto max-w-md", children: [
-          /* @__PURE__ */ jsx41("p", { className: "text-sm font-semibold text-[--color-on-surface]", children: title }),
-          /* @__PURE__ */ jsx41("p", { className: "mt-1 text-xs text-[--color-on-surface-muted]", children: description }),
+          /* @__PURE__ */ jsx41("p", { className: "text-sm font-semibold text-[var(--color-on-surface)]", children: title }),
+          /* @__PURE__ */ jsx41("p", { className: "mt-1 text-xs text-[var(--color-on-surface-muted)]", children: description }),
           /* @__PURE__ */ jsxs22("div", { className: "mt-3 flex gap-2", children: [
             /* @__PURE__ */ jsx41(Button, { size: "sm", onClick: onInstall, className: "flex-1", children: installLabel }),
             /* @__PURE__ */ jsx41(
@@ -3529,7 +3529,7 @@ var PullToRefresh = React40.forwardRef(
                       strokeLinecap: "round",
                       strokeLinejoin: "round",
                       className: cn(
-                        "text-[--color-on-surface-muted] transition-transform duration-normal",
+                        "text-[var(--color-on-surface-muted)] transition-transform duration-normal",
                         shouldTrigger && "rotate-180 text-primary-500"
                       ),
                       children: [