@hilum/ui 2.0.0 → 2.0.1

package/dist/index.js

@@ -20,7 +20,7 @@ import { Toaster as Toaster$1 } from 'sonner';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var AccordionRoot = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Accordion.Root, { ref, className: cn("divide-y divide-ground-100", className), ...props }));
+var AccordionRoot = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Accordion.Root, { ref, className: cn("divide-y divide-border", className), ...props }));
 AccordionRoot.displayName = "Accordion";
 var AccordionItem = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Accordion.Item, { ref, className: cn("", className), ...props }));
 AccordionItem.displayName = "AccordionItem";
@@ -30,9 +30,9 @@ var AccordionTrigger = React15.forwardRef(({ className, children, ...props }, re
     ref,
     className: cn(
       "flex w-full items-center justify-between py-4",
-      "body font-medium text-ground-900 transition-colors hover:text-ground-700",
+      "body font-medium text-foreground transition-colors hover:text-muted-foreground",
       "[&[data-state=open]>svg]:rotate-180",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-900/15",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20",
       className
     ),
     ...props,
@@ -42,7 +42,7 @@ var AccordionTrigger = React15.forwardRef(({ className, children, ...props }, re
         ChevronDown,
         {
           size: 16,
-          className: "text-ground-400 transition-transform duration-200 shrink-0"
+          className: "text-muted-foreground transition-transform duration-200 shrink-0"
         }
       )
     ]
@@ -54,7 +54,7 @@ var AccordionContent = React15.forwardRef(({ className, children, ...props }, re
   {
     ref,
     className: cn(
-      "overflow-hidden body text-ground-500",
+      "overflow-hidden body text-muted-foreground",
       "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
       className
     ),
@@ -75,13 +75,13 @@ var buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-brand-primary text-white hover:bg-brand-primary/90 active:bg-brand-primary/80",
-        destructive: "bg-red-600 text-white hover:bg-red-700 active:bg-red-800",
-        outline: "bg-white text-ground-700 shadow-natural hover:bg-ground-50 rounded-xl",
-        secondary: "bg-ground-100 text-ground-700 hover:bg-ground-200",
-        brand: "bg-brand-secondary text-ground-900 hover:bg-brand-secondary/90 active:bg-brand-secondary/80",
-        ghost: "text-ground-600 hover:bg-ground-100 hover:text-ground-900",
-        link: "text-ground-900 underline-offset-4 hover:underline"
+        default: "bg-brand-primary text-background hover:bg-brand-primary/90 active:bg-brand-primary/80",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80",
+        outline: "bg-card text-muted-foreground shadow-natural hover:bg-muted rounded-xl",
+        secondary: "bg-muted text-muted-foreground hover:bg-muted",
+        brand: "bg-brand-secondary text-foreground hover:bg-brand-secondary/90 active:bg-brand-secondary/80",
+        ghost: "text-muted-foreground hover:bg-muted hover:text-foreground",
+        link: "text-foreground underline-offset-4 hover:underline"
       },
       size: {
         default: "h-9 px-4 py-2 rounded-md",
@@ -131,7 +131,7 @@ function ActionPanel({
         "a",
         {
           href: link.href,
-          className: "body font-medium text-ground-600 hover:text-ground-900 transition-colors inline-flex items-center gap-1",
+          className: "body font-medium text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-1",
           children: [
             link.label,
             " ",
@@ -143,7 +143,7 @@ function ActionPanel({
         {
           type: "button",
           onClick: link.onClick,
-          className: "body font-medium text-ground-600 hover:text-ground-900 transition-colors inline-flex items-center gap-1",
+          className: "body font-medium text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-1",
           children: [
             link.label,
             " ",
@@ -161,14 +161,14 @@ function ActionPanel({
     {
       className: cn(
         "rounded-xl border px-5 py-5",
-        variant === "muted" ? "border-ground-100 bg-ground-50" : "border-ground-100 bg-white shadow-natural",
+        variant === "muted" ? "border-border bg-muted" : "border-border bg-card shadow-natural",
         layout === "inline" && "flex items-center justify-between gap-6",
         className
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", layout === "inline" ? "flex-1" : ""), children: [
-          /* @__PURE__ */ jsx("p", { className: "body font-semibold text-ground-900", children: title }),
-          description && /* @__PURE__ */ jsx("p", { className: cn("body text-ground-400", layout === "stacked" ? "mt-1" : ""), children: description }),
+          /* @__PURE__ */ jsx("p", { className: "body font-semibold text-foreground", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: cn("body text-muted-foreground", layout === "stacked" ? "mt-1" : ""), children: description }),
           children && layout === "stacked" && /* @__PURE__ */ jsx("div", { className: "mt-4", children })
         ] }),
         layout === "stacked" ? (allActions.length > 0 || link) && /* @__PURE__ */ jsx("div", { className: "mt-4", children: renderActions() }) : /* @__PURE__ */ jsxs("div", { className: "shrink-0 flex items-center gap-3", children: [
@@ -179,6 +179,7 @@ function ActionPanel({
     }
   );
 }
+ActionPanel.displayName = "ActionPanel";
 function ActivityFeed({ events, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("flow-root", className), children: /* @__PURE__ */ jsx("ul", { role: "list", className: "-mb-8", children: events.map((event, i) => {
     const isLast = i === events.length - 1;
@@ -186,7 +187,7 @@ function ActivityFeed({ events, className }) {
       !isLast && /* @__PURE__ */ jsx(
         "span",
         {
-          className: "absolute top-4 left-4 -ml-px h-full w-0.5 bg-ground-100",
+          className: "absolute top-4 left-4 -ml-px h-full w-0.5 bg-muted",
           "aria-hidden": "true"
         }
       ),
@@ -195,19 +196,19 @@ function ActivityFeed({ events, className }) {
           "span",
           {
             className: cn(
-              "flex size-8 items-center justify-center rounded-full ring-8 ring-white",
-              event.iconBgClass ?? "bg-ground-100 text-ground-500"
+              "flex size-8 items-center justify-center rounded-full ring-8 ring-background",
+              event.iconBgClass ?? "bg-muted text-muted-foreground"
             ),
             children: event.icon
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-baseline justify-between gap-4 pt-1", children: [
-          /* @__PURE__ */ jsx("div", { className: "body text-ground-600", children: event.content }),
+          /* @__PURE__ */ jsx("div", { className: "body text-muted-foreground", children: event.content }),
           event.date && /* @__PURE__ */ jsx(
             "time",
             {
               dateTime: event.datetime ?? event.date,
-              className: "caption whitespace-nowrap text-ground-400",
+              className: "caption whitespace-nowrap text-muted-foreground",
               children: event.date
             }
           )
@@ -216,6 +217,7 @@ function ActivityFeed({ events, className }) {
     ] }) }, event.id ?? i);
   }) }) });
 }
+ActivityFeed.displayName = "ActivityFeed";
 var AlertDialogRoot = AlertDialog.Root;
 var AlertDialogTrigger = AlertDialog.Trigger;
 var AlertDialogPortal = AlertDialog.Portal;
@@ -241,7 +243,7 @@ var AlertDialogContent = React15.forwardRef(({ className, children, ...props },
       ref,
       className: cn(
         "fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]",
-        "w-full max-w-md bg-white rounded-2xl shadow-elevated p-6",
+        "w-full max-w-md bg-card rounded-2xl shadow-elevated p-6",
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -265,12 +267,12 @@ var AlertDialogTitle = React15.forwardRef(({ className, ...props }, ref) => /* @
   AlertDialog.Title,
   {
     ref,
-    className: cn("body-lg font-semibold text-ground-900", className),
+    className: cn("body-lg font-semibold text-foreground", className),
     ...props
   }
 ));
 AlertDialogTitle.displayName = "AlertDialogTitle";
-var AlertDialogDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialog.Description, { ref, className: cn("body text-ground-500", className), ...props }));
+var AlertDialogDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialog.Description, { ref, className: cn("body text-muted-foreground", className), ...props }));
 AlertDialogDescription.displayName = "AlertDialogDescription";
 var AlertDialogAction = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialog.Action,
@@ -279,7 +281,7 @@ var AlertDialogAction = React15.forwardRef(({ className, ...props }, ref) => /*
     className: cn(
       "inline-flex h-9 items-center justify-center rounded-md px-4",
       "body font-medium whitespace-nowrap transition-all duration-150",
-      "bg-brand-primary text-white hover:bg-brand-primary/90 active:bg-brand-primary/80",
+      "bg-brand-primary text-background hover:bg-brand-primary/90 active:bg-brand-primary/80",
       "focus-visible:ring-2 focus-visible:ring-brand-primary/30 focus-visible:ring-offset-1 outline-none",
       "disabled:pointer-events-none disabled:opacity-50",
       className
@@ -295,7 +297,7 @@ var AlertDialogCancel = React15.forwardRef(({ className, ...props }, ref) => /*
     className: cn(
       "inline-flex h-9 items-center justify-center rounded-md px-4",
       "body font-medium whitespace-nowrap transition-all duration-150",
-      "bg-white text-ground-700 shadow-natural hover:bg-ground-50 rounded-xl",
+      "bg-card text-muted-foreground shadow-natural hover:bg-muted rounded-xl",
       "focus-visible:ring-2 focus-visible:ring-brand-primary/30 focus-visible:ring-offset-1 outline-none",
       "disabled:pointer-events-none disabled:opacity-50",
       className
@@ -309,11 +311,11 @@ var alertVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-ground-50 text-ground-800 [&>svg]:text-ground-500",
-        info: "bg-brand-secondary/40 text-ground-700 [&>svg]:text-ground-500",
-        success: "bg-brand-secondary/15 text-ground-800 [&>svg]:text-ground-600",
-        warning: "bg-brand-secondary/70 text-ground-800 [&>svg]:text-ground-600",
-        destructive: "bg-red-50 text-red-800 [&>svg]:text-red-500"
+        default: "bg-muted text-muted-foreground [&>svg]:text-muted-foreground",
+        info: "bg-brand-secondary/40 text-muted-foreground [&>svg]:text-muted-foreground",
+        success: "bg-brand-secondary/15 text-muted-foreground [&>svg]:text-muted-foreground",
+        warning: "bg-brand-secondary/70 text-muted-foreground [&>svg]:text-muted-foreground",
+        destructive: "bg-destructive/10 text-destructive [&>svg]:text-destructive/70"
       }
     },
     defaultVariants: { variant: "default" }
@@ -355,7 +357,7 @@ function AvatarStack({ avatars, max, size = "md", className }) {
       {
         title: avatar.name,
         className: cn(
-          "relative inline-flex shrink-0 overflow-hidden rounded-full ring-white",
+          "relative inline-flex shrink-0 overflow-hidden rounded-full ring-background",
           s.wrapper
         ),
         children: avatar.src ? /* @__PURE__ */ jsx("img", { src: avatar.src, alt: avatar.name, className: "size-full object-cover" }) : /* @__PURE__ */ jsx(
@@ -364,7 +366,7 @@ function AvatarStack({ avatars, max, size = "md", className }) {
             className: cn(
               "flex size-full items-center justify-center font-medium",
               s.text,
-              avatar.colorClass ?? "bg-ground-200 text-ground-700"
+              avatar.colorClass ?? "bg-muted text-muted-foreground"
             ),
             children: avatar.fallback ?? avatar.name.slice(0, 2).toUpperCase()
           }
@@ -376,7 +378,7 @@ function AvatarStack({ avatars, max, size = "md", className }) {
       "span",
       {
         className: cn(
-          "relative inline-flex shrink-0 items-center justify-center rounded-full ring-white bg-ground-100 font-medium text-ground-600",
+          "relative inline-flex shrink-0 items-center justify-center rounded-full ring-background bg-muted font-medium text-muted-foreground",
           s.wrapper,
           s.text
         ),
@@ -424,7 +426,7 @@ var AvatarFallback = React15.forwardRef(({ className, ...props }, ref) => /* @__
   {
     ref,
     className: cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-ground-100 body font-semibold text-ground-600",
+      "flex h-full w-full items-center justify-center rounded-full bg-muted body font-semibold text-muted-foreground",
       className
     ),
     ...props
@@ -433,8 +435,8 @@ var AvatarFallback = React15.forwardRef(({ className, ...props }, ref) => /* @__
 AvatarFallback.displayName = "AvatarFallback";
 var statusColorMap = {
   online: "bg-brand-secondary",
-  offline: "bg-ground-300",
-  busy: "bg-red-500",
+  offline: "bg-muted",
+  busy: "bg-destructive",
   away: "bg-brand-secondary"
 };
 var statusSizeMap = {
@@ -450,7 +452,7 @@ var AvatarWithStatus = React15.forwardRef(({ status, size = "md", className, chi
     "span",
     {
       className: cn(
-        "absolute bottom-0 right-0 rounded-full ring-white",
+        "absolute bottom-0 right-0 rounded-full ring-background",
         statusColorMap[status],
         statusSizeMap[size]
       )
@@ -463,13 +465,13 @@ var badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-ground-900 text-white",
-        secondary: "bg-ground-100 text-ground-700",
-        outline: "border border-ground-200 text-ground-600 bg-transparent",
-        brand: "bg-brand-primary text-white",
-        success: "bg-brand-secondary/20 text-ground-800 border border-brand-secondary/50",
-        warning: "bg-brand-secondary/70 text-ground-700 border border-brand-secondary",
-        destructive: "bg-red-50 text-red-700 border border-red-200"
+        default: "bg-foreground text-background",
+        secondary: "bg-muted text-muted-foreground",
+        outline: "border border-border text-muted-foreground bg-transparent",
+        brand: "bg-brand-primary text-background",
+        success: "bg-brand-secondary/20 text-muted-foreground border border-brand-secondary/50",
+        warning: "bg-brand-secondary/70 text-muted-foreground border border-brand-secondary",
+        destructive: "bg-destructive/10 text-destructive border border-destructive/20"
       }
     },
     defaultVariants: {
@@ -488,7 +490,7 @@ var BreadcrumbList = React15.forwardRef(
     "ol",
     {
       ref,
-      className: cn("flex flex-wrap items-center gap-1.5 body text-ground-500", className),
+      className: cn("flex flex-wrap items-center gap-1.5 body text-muted-foreground", className),
       ...props
     }
   )
@@ -499,7 +501,7 @@ var BreadcrumbItem = React15.forwardRef(
 );
 BreadcrumbItem.displayName = "BreadcrumbItem";
 var BreadcrumbLink = React15.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("a", { ref, className: cn("transition-colors hover:text-ground-900", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("a", { ref, className: cn("transition-colors hover:text-foreground", className), ...props })
 );
 BreadcrumbLink.displayName = "BreadcrumbLink";
 var BreadcrumbPage = React15.forwardRef(
@@ -507,15 +509,14 @@ var BreadcrumbPage = React15.forwardRef(
     "span",
     {
       ref,
-      role: "link",
       "aria-current": "page",
-      className: cn("body font-medium text-ground-900", className),
+      className: cn("body font-medium text-foreground", className),
       ...props
     }
   )
 );
 BreadcrumbPage.displayName = "BreadcrumbPage";
-var BreadcrumbSeparator = ({ children, className, ...props }) => /* @__PURE__ */ jsx("li", { role: "presentation", "aria-hidden": "true", className: cn("text-ground-300", className), ...props, children: children ?? /* @__PURE__ */ jsx(ChevronRight, { size: 14 }) });
+var BreadcrumbSeparator = ({ children, className, ...props }) => /* @__PURE__ */ jsx("li", { role: "presentation", "aria-hidden": "true", className: cn("text-muted-foreground", className), ...props, children: children ?? /* @__PURE__ */ jsx(ChevronRight, { size: 14 }) });
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
 var BreadcrumbEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "span",
@@ -524,7 +525,7 @@ var BreadcrumbEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsx(
     "aria-hidden": "true",
     className: cn("flex size-5 items-center justify-center", className),
     ...props,
-    children: /* @__PURE__ */ jsx(MoreHorizontal, { size: 14, className: "text-ground-400" })
+    children: /* @__PURE__ */ jsx(MoreHorizontal, { size: 14, className: "text-muted-foreground" })
   }
 );
 BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
@@ -533,7 +534,7 @@ function ButtonGroup({ children, className }) {
     "div",
     {
       className: cn(
-        "inline-flex divide-x divide-ground-200 overflow-hidden rounded-lg border border-ground-200 bg-white shadow-natural",
+        "inline-flex divide-x divide-border overflow-hidden rounded-lg border border-border bg-card shadow-natural",
         className
       ),
       children
@@ -547,8 +548,8 @@ function ButtonGroupItem({ active, className, children, ...props }) {
       type: "button",
       className: cn(
         "relative inline-flex items-center gap-1.5 px-3.5 py-2 body font-medium transition-colors",
-        "focus:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-400/40 focus-visible:ring-inset",
-        active ? "bg-ground-900 text-white" : "text-ground-600 hover:bg-ground-50 hover:text-ground-900",
+        "focus:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-inset",
+        active ? "bg-foreground text-background" : "text-muted-foreground hover:bg-muted hover:text-foreground",
         className
       ),
       ...props,
@@ -556,6 +557,8 @@ function ButtonGroupItem({ active, className, children, ...props }) {
     }
   );
 }
+ButtonGroup.displayName = "ButtonGroup";
+ButtonGroupItem.displayName = "ButtonGroupItem";
 function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
   return /* @__PURE__ */ jsx(
     DayPicker,
@@ -566,33 +569,33 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
         months: "flex flex-col sm:flex-row gap-4",
         month: "flex flex-col gap-4",
         month_caption: "flex justify-center pt-1 relative items-center px-10",
-        caption_label: "body font-semibold text-ground-900",
+        caption_label: "body font-semibold text-foreground",
         nav: "flex items-center justify-between absolute inset-x-0 top-1",
         button_previous: cn(
           "absolute left-0 h-7 w-7 flex items-center justify-center rounded-md",
-          "text-ground-400 hover:bg-ground-100 hover:text-ground-700 transition-colors"
+          "text-muted-foreground hover:bg-muted hover:text-muted-foreground transition-colors"
         ),
         button_next: cn(
           "absolute right-0 h-7 w-7 flex items-center justify-center rounded-md",
-          "text-ground-400 hover:bg-ground-100 hover:text-ground-700 transition-colors"
+          "text-muted-foreground hover:bg-muted hover:text-muted-foreground transition-colors"
         ),
         month_grid: "w-full border-collapse mt-1",
         weekdays: "flex",
-        weekday: "w-9 h-9 flex items-center justify-center label text-ground-400 font-normal",
+        weekday: "w-9 h-9 flex items-center justify-center label text-muted-foreground font-normal",
         week: "flex w-full mt-1",
         day: "relative p-0 text-center",
         day_button: cn(
           "h-9 w-9 flex items-center justify-center rounded-full body font-normal",
-          "text-ground-900 hover:bg-ground-100 transition-colors",
+          "text-foreground hover:bg-muted transition-colors",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30"
         ),
-        selected: "[&>button]:bg-brand-primary [&>button]:text-white [&>button]:hover:bg-brand-primary/90",
+        selected: "[&>button]:bg-brand-primary [&>button]:text-background [&>button]:hover:bg-brand-primary/90",
         today: "[&>button]:font-semibold [&>button]:text-brand-primary",
-        outside: "opacity-40 [&>button]:text-ground-400",
+        outside: "opacity-40 [&>button]:text-muted-foreground",
         disabled: "opacity-30 [&>button]:cursor-not-allowed",
-        range_start: "[&>button]:bg-brand-primary [&>button]:text-white [&>button]:rounded-full",
-        range_end: "[&>button]:bg-brand-primary [&>button]:text-white [&>button]:rounded-full",
-        range_middle: "[&>button]:bg-brand-primary/15 [&>button]:text-ground-900 [&>button]:rounded-none",
+        range_start: "[&>button]:bg-brand-primary [&>button]:text-background [&>button]:rounded-full",
+        range_end: "[&>button]:bg-brand-primary [&>button]:text-background [&>button]:rounded-full",
+        range_middle: "[&>button]:bg-brand-primary/15 [&>button]:text-foreground [&>button]:rounded-none",
         hidden: "invisible",
         ...classNames
       },
@@ -609,15 +612,15 @@ function CardHeading({ title, description, actions, children, className }) {
     "div",
     {
       className: cn(
-        "flex items-start justify-between gap-4 border-b border-ground-100 px-5 py-4",
+        "flex items-start justify-between gap-4 border-b border-border px-5 py-4",
         className
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
           children,
           /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx("p", { className: "body font-semibold text-ground-900 truncate", children: title }),
-            description && /* @__PURE__ */ jsx("p", { className: "caption text-ground-400 mt-0.5", children: description })
+            /* @__PURE__ */ jsx("p", { className: "body font-semibold text-foreground truncate", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "caption text-muted-foreground mt-0.5", children: description })
           ] })
         ] }),
         actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions.map(
@@ -639,8 +642,8 @@ function CardHeading({ title, description, actions, children, className }) {
 var cardVariants = cva("rounded-xl", {
   variants: {
     variant: {
-      default: "bg-white shadow-natural",
-      muted: "bg-ground-50",
+      default: "bg-card shadow-natural",
+      muted: "bg-muted",
       ghost: "bg-transparent"
     }
   },
@@ -678,7 +681,7 @@ var CardTitle = React15.forwardRef(
     {
       ref,
       "data-slot": "card-title",
-      className: cn("subheading text-ground-900", className),
+      className: cn("subheading text-foreground", className),
       ...props
     }
   )
@@ -690,7 +693,7 @@ var CardDescription = React15.forwardRef(
     {
       ref,
       "data-slot": "card-description",
-      className: cn("caption text-ground-500", className),
+      className: cn("caption text-muted-foreground", className),
       ...props
     }
   )
@@ -893,18 +896,12 @@ function CarouselNext({
   );
 }
 var CHART_COLORS = {
-  primary: tokens.brand.primary,
-  // "#C100F1" — vivid purple
+  primary: tokens.semantic.light.primary,
   secondary: tokens.semantic.light.success,
-  // "#CDEA19" — lime
-  tertiary: tokens.brand.secondary,
-  // "#FFF5BF" — pale lemon
-  muted: tokens.ground[400],
-  // "#a8978a"
-  subtle: tokens.ground[200],
-  // "#e3dcd4"
-  dark: tokens.ground[900]
-  // "#26181a"
+  tertiary: tokens.semantic.light.warning,
+  muted: tokens.semantic.light.mutedForeground,
+  subtle: tokens.semantic.light.border,
+  dark: tokens.semantic.light.foreground
 };
 function ChartContainer({ children, className, height = 300 }) {
   return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children }) });
@@ -912,8 +909,8 @@ function ChartContainer({ children, className, height = 300 }) {
 ChartContainer.displayName = "ChartContainer";
 function ChartTooltip({ active, payload, label, labelClassName }) {
   if (!active || !payload?.length) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-ground-100 bg-white px-3 py-2 shadow-elevated", children: [
-    label && /* @__PURE__ */ jsx("p", { className: cn("mb-1 label text-ground-400", labelClassName), children: label }),
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border bg-card px-3 py-2 shadow-elevated", children: [
+    label && /* @__PURE__ */ jsx("p", { className: cn("mb-1 label text-muted-foreground", labelClassName), children: label }),
     payload.map((entry, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx(
         "span",
@@ -922,11 +919,11 @@ function ChartTooltip({ active, payload, label, labelClassName }) {
           style: { backgroundColor: entry.color }
         }
       ),
-      /* @__PURE__ */ jsxs("span", { className: "caption text-ground-500", children: [
+      /* @__PURE__ */ jsxs("span", { className: "caption text-muted-foreground", children: [
         entry.name,
         ":"
       ] }),
-      /* @__PURE__ */ jsx("span", { className: "caption font-medium text-ground-900", children: entry.value })
+      /* @__PURE__ */ jsx("span", { className: "caption font-medium text-foreground", children: entry.value })
     ] }, i))
   ] });
 }
@@ -936,7 +933,7 @@ var CheckboxRoot = React15.forwardRef(({ className, ...props }, ref) => /* @__PU
   {
     ref,
     className: cn(
-      "peer size-4 shrink-0 rounded border border-ground-300 bg-white transition-colors",
+      "peer size-4 shrink-0 rounded border border-border bg-card transition-colors",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
       "disabled:cursor-not-allowed disabled:opacity-50",
       "data-[state=checked]:bg-brand-primary data-[state=checked]:border-brand-primary",
@@ -944,7 +941,7 @@ var CheckboxRoot = React15.forwardRef(({ className, ...props }, ref) => /* @__PU
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx(Checkbox.Indicator, { className: "flex items-center justify-center text-white", children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { size: 11, strokeWidth: 3 }) : /* @__PURE__ */ jsx(Check, { size: 11, strokeWidth: 3 }) })
+    children: /* @__PURE__ */ jsx(Checkbox.Indicator, { className: "flex items-center justify-center text-background", children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { size: 11, strokeWidth: 3 }) : /* @__PURE__ */ jsx(Check, { size: 11, strokeWidth: 3 }) })
   }
 ));
 CheckboxRoot.displayName = "Checkbox";
@@ -977,8 +974,8 @@ function ColorPicker({
         disabled,
         "aria-label": ariaLabel,
         className: cn(
-          "inline-flex h-8 w-8 items-center justify-center rounded-md border border-ground-200 bg-white",
-          "transition-colors hover:border-ground-300",
+          "inline-flex h-8 w-8 items-center justify-center rounded-md border border-border bg-card",
+          "transition-colors hover:border-border",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/20 focus-visible:border-brand-primary",
           "disabled:cursor-not-allowed disabled:opacity-50",
           className
@@ -998,7 +995,7 @@ function ColorPicker({
       {
         align: "start",
         sideOffset: 6,
-        className: "z-50 w-56 rounded-xl bg-white p-3 shadow-natural outline-none",
+        className: "z-50 w-56 rounded-xl bg-card p-3 shadow-natural outline-none",
         children: [
           /* @__PURE__ */ jsx(
             "input",
@@ -1009,11 +1006,11 @@ function ColorPicker({
                 setHex(e.target.value);
                 onChange(e.target.value);
               },
-              className: "h-10 w-full cursor-pointer rounded-md border border-ground-200 bg-white p-0.5"
+              className: "h-10 w-full cursor-pointer rounded-md border border-border bg-card p-0.5"
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "caption text-ground-500", children: "Hex" }),
+            /* @__PURE__ */ jsx("span", { className: "caption text-muted-foreground", children: "Hex" }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -1024,7 +1021,7 @@ function ColorPicker({
                 onKeyDown: (e) => {
                   if (e.key === "Enter") commit(e.target.value);
                 },
-                className: "flex-1 h-7 rounded-md border border-ground-200 bg-white px-2 caption text-ground-900 focus:outline-none focus:border-brand-primary"
+                className: "flex-1 h-7 rounded-md border border-border bg-card px-2 caption text-foreground focus:outline-none focus:border-brand-primary"
               }
             )
           ] }),
@@ -1044,6 +1041,7 @@ function ColorPicker({
     ) })
   ] });
 }
+ColorPicker.displayName = "ColorPicker";
 function ColorInput({
   value,
   onChange,
@@ -1065,7 +1063,7 @@ function ColorInput({
     "div",
     {
       className: cn(
-        "inline-flex h-8 items-stretch gap-0 rounded-md border border-ground-200 bg-white overflow-hidden",
+        "inline-flex h-8 items-stretch gap-0 rounded-md border border-border bg-card overflow-hidden",
         "focus-within:ring-2 focus-within:ring-brand-primary/20 focus-within:border-brand-primary",
         disabled && "opacity-50 pointer-events-none",
         className
@@ -1093,10 +1091,10 @@ function ColorInput({
                 commitHex("#" + e.target.value.replace(/^#/, ""));
             },
             spellCheck: false,
-            className: "w-[5.5rem] caption text-ground-900 px-2 bg-transparent border-l border-ground-100 focus:outline-none uppercase"
+            className: "w-[5.5rem] caption text-foreground px-2 bg-transparent border-l border-border focus:outline-none uppercase"
           }
         ),
-        typeof opacity === "number" && onOpacityChange && /* @__PURE__ */ jsxs("div", { className: "relative flex items-center border-l border-ground-100", children: [
+        typeof opacity === "number" && onOpacityChange && /* @__PURE__ */ jsxs("div", { className: "relative flex items-center border-l border-border", children: [
           /* @__PURE__ */ jsx(
             "input",
             {
@@ -1105,15 +1103,16 @@ function ColorInput({
               max: 100,
               value: Math.round(opacity),
               onChange: (e) => onOpacityChange(Number(e.target.value)),
-              className: "w-12 caption text-ground-900 px-2 bg-transparent focus:outline-none text-right [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+              className: "w-12 caption text-foreground px-2 bg-transparent focus:outline-none text-right [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
             }
           ),
-          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "caption-xs text-ground-400 pr-2", children: "%" })
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "caption-xs text-muted-foreground pr-2", children: "%" })
         ] })
       ]
     }
   );
 }
+ColorInput.displayName = "ColorInput";
 function Combobox({
   options,
   value,
@@ -1125,12 +1124,17 @@ function Combobox({
 }) {
   const [open, setOpen] = React15.useState(false);
   const [query, setQuery] = React15.useState("");
+  const [activeIndex, setActiveIndex] = React15.useState(-1);
   const containerRef = React15.useRef(null);
   const inputRef = React15.useRef(null);
+  const listboxId = React15.useId();
   const selectedOption = options.find((o) => o.value === value);
   const filtered = query === "" ? options : options.filter(
     (o) => o.label.toLowerCase().includes(query.toLowerCase()) || o.description?.toLowerCase().includes(query.toLowerCase())
   );
+  React15.useEffect(() => {
+    setActiveIndex(-1);
+  }, [filtered.length, open]);
   React15.useEffect(() => {
     function onMouseDown(e) {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -1141,20 +1145,45 @@ function Combobox({
     document.addEventListener("mousedown", onMouseDown);
     return () => document.removeEventListener("mousedown", onMouseDown);
   }, []);
-  React15.useEffect(() => {
-    if (!open) return;
-    function onKey(e) {
-      if (e.key === "Escape") {
-        setOpen(false);
-        setQuery("");
+  function closeDropdown() {
+    setOpen(false);
+    setQuery("");
+    setActiveIndex(-1);
+  }
+  function selectOption(opt) {
+    onValueChange?.(opt.value);
+    closeDropdown();
+  }
+  function handleInputKeyDown(e) {
+    if (e.key === "Escape") {
+      closeDropdown();
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (!open) {
+        setOpen(true);
+        return;
       }
+      setActiveIndex((i) => Math.min(i + 1, filtered.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (!open) {
+        setOpen(true);
+        return;
+      }
+      const target = activeIndex >= 0 ? filtered[activeIndex] : filtered[0];
+      if (target) selectOption(target);
+    } else if (e.key === "Tab") {
+      closeDropdown();
     }
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [open]);
+  }
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("relative", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
-      selectedOption?.avatar && !open && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute left-2.5 flex size-5 items-center justify-center rounded-full bg-ground-200 caption-xs font-semibold text-ground-700 shrink-0", children: selectedOption.avatar }),
+      selectedOption?.avatar && !open && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute left-2.5 flex size-5 items-center justify-center rounded-full bg-muted caption-xs font-semibold text-muted-foreground shrink-0", children: selectedOption.avatar }),
       selectedOption?.statusColor && !open && /* @__PURE__ */ jsx(
         "div",
         {
@@ -1169,10 +1198,14 @@ function Combobox({
           type: "text",
           role: "combobox",
           "aria-expanded": open,
+          "aria-haspopup": "listbox",
+          "aria-controls": open ? listboxId : void 0,
+          "aria-activedescendant": open && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0,
+          "aria-autocomplete": "list",
           className: cn(
-            "flex h-9 w-full rounded-lg border border-ground-200 bg-white pr-8 body text-ground-900",
-            "placeholder:text-ground-400",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-400/30 focus-visible:border-ground-400",
+            "flex h-9 w-full rounded-lg border border-border bg-card pr-8 body text-foreground",
+            "placeholder:text-muted-foreground",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:border-border",
             "disabled:cursor-not-allowed disabled:opacity-50",
             selectedOption?.avatar && !open ? "pl-8" : selectedOption?.statusColor && !open ? "pl-7" : "pl-3"
           ),
@@ -1185,7 +1218,8 @@ function Combobox({
           onFocus: () => {
             setOpen(true);
             setQuery("");
-          }
+          },
+          onKeyDown: handleInputKeyDown
         }
       ),
       /* @__PURE__ */ jsx(
@@ -1193,11 +1227,11 @@ function Combobox({
         {
           type: "button",
           tabIndex: -1,
-          className: "absolute inset-y-0 right-0 flex items-center px-2 text-ground-400 hover:text-ground-700 transition-colors",
+          "aria-label": open ? "Close" : "Open",
+          className: "absolute inset-y-0 right-0 flex items-center px-2 text-muted-foreground hover:text-muted-foreground transition-colors",
           onClick: () => {
             if (open) {
-              setOpen(false);
-              setQuery("");
+              closeDropdown();
             } else {
               setOpen(true);
               inputRef.current?.focus();
@@ -1207,30 +1241,29 @@ function Combobox({
         }
       )
     ] }),
-    open && /* @__PURE__ */ jsx("div", { className: "absolute z-50 mt-1 w-full overflow-hidden rounded-lg border border-ground-200 bg-white shadow-elevated", children: /* @__PURE__ */ jsx("ul", { role: "listbox", className: "max-h-60 overflow-auto py-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx("li", { className: "px-3 py-2 body text-ground-400", children: emptyText }) : filtered.map((option) => {
+    open && /* @__PURE__ */ jsx("div", { className: "absolute z-50 mt-1 w-full overflow-hidden rounded-lg border border-border bg-card shadow-elevated", children: /* @__PURE__ */ jsx("ul", { id: listboxId, role: "listbox", className: "max-h-60 overflow-auto py-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx("li", { className: "px-3 py-2 body text-muted-foreground", children: emptyText }) : filtered.map((option, idx) => {
       const isSelected = option.value === value;
+      const isActive = idx === activeIndex;
       return /* @__PURE__ */ jsxs(
         "li",
         {
+          id: `${listboxId}-option-${idx}`,
           role: "option",
           "aria-selected": isSelected,
           className: cn(
             "flex cursor-pointer select-none items-center gap-2.5 px-3 py-2 body transition-colors",
-            isSelected ? "bg-brand-primary text-white" : "text-ground-900 hover:bg-ground-50"
+            isSelected ? "bg-brand-primary text-background" : isActive ? "bg-muted text-foreground" : "text-foreground hover:bg-muted"
           ),
           onMouseDown: (e) => e.preventDefault(),
-          onClick: () => {
-            onValueChange?.(option.value);
-            setQuery("");
-            setOpen(false);
-          },
+          onMouseEnter: () => setActiveIndex(idx),
+          onClick: () => selectOption(option),
           children: [
             option.avatar && /* @__PURE__ */ jsx(
               "div",
               {
                 className: cn(
                   "flex size-6 shrink-0 items-center justify-center rounded-full caption-xs font-semibold",
-                  isSelected ? "bg-white/20 text-white" : "bg-ground-200 text-ground-700"
+                  isSelected ? "bg-card/20 text-background" : "bg-muted text-muted-foreground"
                 ),
                 children: option.avatar
               }
@@ -1249,7 +1282,7 @@ function Combobox({
                 {
                   className: cn(
                     "caption truncate",
-                    isSelected ? "text-white/70" : "text-ground-400"
+                    isSelected ? "text-background/70" : "text-muted-foreground"
                   ),
                   children: option.description
                 }
@@ -1263,6 +1296,7 @@ function Combobox({
     }) }) })
   ] });
 }
+Combobox.displayName = "Combobox";
 var DialogRoot = Dialog.Root;
 var DialogTrigger = Dialog.Trigger;
 var DialogClose = Dialog.Close;
@@ -1288,7 +1322,7 @@ var DialogContent = React15.forwardRef(({ className, children, ...props }, ref)
       ref,
       className: cn(
         "fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]",
-        "w-full max-w-lg bg-white rounded-2xl shadow-elevated p-6",
+        "w-full max-w-lg bg-card rounded-2xl shadow-elevated p-6",
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -1297,7 +1331,7 @@ var DialogContent = React15.forwardRef(({ className, children, ...props }, ref)
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxs(Dialog.Close, { className: "absolute right-4 top-4 rounded-md p-1 text-ground-400 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ground-900/20", children: [
+        /* @__PURE__ */ jsxs(Dialog.Close, { className: "absolute right-4 top-4 rounded-md p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring/20", children: [
           /* @__PURE__ */ jsx(X, { size: 16 }),
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
         ] })
@@ -1318,12 +1352,12 @@ var DialogTitle = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
   Dialog.Title,
   {
     ref,
-    className: cn("body-lg font-semibold text-ground-900", className),
+    className: cn("body-lg font-semibold text-foreground", className),
     ...props
   }
 ));
 DialogTitle.displayName = "DialogTitle";
-var DialogDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog.Description, { ref, className: cn("body text-ground-500", className), ...props }));
+var DialogDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog.Description, { ref, className: cn("body text-muted-foreground", className), ...props }));
 DialogDescription.displayName = "DialogDescription";
 function CommandPalette({
   open,
@@ -1359,14 +1393,14 @@ function CommandPalette({
     onClose();
   }
   return /* @__PURE__ */ jsx(DialogRoot, { open, onOpenChange: (v) => !v && onClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-0 overflow-hidden p-0 sm:max-w-xl", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-b border-ground-100 px-4", children: [
-      /* @__PURE__ */ jsx(Search, { size: 16, className: "shrink-0 text-ground-400" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-b border-border px-4", children: [
+      /* @__PURE__ */ jsx(Search, { size: 16, className: "shrink-0 text-muted-foreground" }),
       /* @__PURE__ */ jsx(
         "input",
         {
           ref: inputRef,
           type: "text",
-          className: "h-12 flex-1 bg-transparent body text-ground-900 placeholder:text-ground-400 focus:outline-none",
+          className: "h-12 flex-1 bg-transparent body text-foreground placeholder:text-muted-foreground focus:outline-none",
           placeholder,
           value: query,
           onChange: (e) => setQuery(e.target.value),
@@ -1376,23 +1410,23 @@ function CommandPalette({
           }
         }
       ),
-      /* @__PURE__ */ jsx("kbd", { className: "hidden items-center gap-0.5 sm:flex", children: /* @__PURE__ */ jsx("span", { className: "caption-xs font-medium text-ground-400 rounded border border-ground-200 px-1.5 py-0.5", children: "esc" }) })
+      /* @__PURE__ */ jsx("kbd", { className: "hidden items-center gap-0.5 sm:flex", children: /* @__PURE__ */ jsx("span", { className: "caption-xs font-medium text-muted-foreground rounded border border-border px-1.5 py-0.5", children: "esc" }) })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "max-h-80 overflow-y-auto", children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-4 py-8 text-center body text-ground-400", children: emptyText }) : /* @__PURE__ */ jsx("ul", { role: "list", className: "py-2", children: categories.map((cat) => /* @__PURE__ */ jsxs("li", { children: [
-      cat && /* @__PURE__ */ jsx("p", { className: "label px-4 py-2 text-ground-400", children: cat }),
+    /* @__PURE__ */ jsx("div", { className: "max-h-80 overflow-y-auto", children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-4 py-8 text-center body text-muted-foreground", children: emptyText }) : /* @__PURE__ */ jsx("ul", { role: "list", className: "py-2", children: categories.map((cat) => /* @__PURE__ */ jsxs("li", { children: [
+      cat && /* @__PURE__ */ jsx("p", { className: "label px-4 py-2 text-muted-foreground", children: cat }),
       grouped[cat].map((item, i) => /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
-          className: "flex w-full items-center gap-3 px-4 py-2.5 body text-left transition-colors hover:bg-ground-50 focus-visible:bg-ground-50 focus-visible:outline-none",
+          className: "flex w-full items-center gap-3 px-4 py-2.5 body text-left transition-colors hover:bg-muted focus-visible:bg-muted focus-visible:outline-none",
           onClick: () => handleSelect(item),
           children: [
-            item.icon && /* @__PURE__ */ jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg border border-ground-200 bg-white text-ground-500", children: item.icon }),
+            item.icon && /* @__PURE__ */ jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg border border-border bg-card text-muted-foreground", children: item.icon }),
             /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsx("p", { className: "font-medium text-ground-900 truncate", children: item.label }),
-              item.description && /* @__PURE__ */ jsx("p", { className: "caption text-ground-400 truncate", children: item.description })
+              /* @__PURE__ */ jsx("p", { className: "font-medium text-foreground truncate", children: item.label }),
+              item.description && /* @__PURE__ */ jsx("p", { className: "caption text-muted-foreground truncate", children: item.description })
             ] }),
-            /* @__PURE__ */ jsx(ArrowRight, { size: 13, className: "shrink-0 text-ground-300" })
+            /* @__PURE__ */ jsx(ArrowRight, { size: 13, className: "shrink-0 text-muted-foreground" })
           ]
         },
         item.id ?? i
@@ -1400,6 +1434,7 @@ function CommandPalette({
     ] }, cat)) }) })
   ] }) });
 }
+CommandPalette.displayName = "CommandPalette";
 var CommandCtx = React15.createContext({
   query: "",
   setQuery: () => {
@@ -1426,7 +1461,7 @@ function Command({ className, children, onSelect, ...props }) {
     "div",
     {
       className: cn(
-        "flex flex-col overflow-hidden rounded-xl border border-ground-200 bg-white",
+        "flex flex-col overflow-hidden rounded-xl border border-border bg-card",
         className
       ),
       ...props,
@@ -1436,8 +1471,8 @@ function Command({ className, children, onSelect, ...props }) {
 }
 var CommandInput = React15.forwardRef(({ className, ...props }, ref) => {
   const { query, setQuery } = React15.useContext(CommandCtx);
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-ground-100 px-3", children: [
-    /* @__PURE__ */ jsx(Search, { size: 14, className: "shrink-0 text-ground-400" }),
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3", children: [
+    /* @__PURE__ */ jsx(Search, { size: 14, className: "shrink-0 text-muted-foreground" }),
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -1447,8 +1482,8 @@ var CommandInput = React15.forwardRef(({ className, ...props }, ref) => {
         autoCorrect: "off",
         spellCheck: false,
         className: cn(
-          "flex h-10 w-full bg-transparent body text-ground-900",
-          "placeholder:text-ground-400 focus:outline-none",
+          "flex h-10 w-full bg-transparent body text-foreground",
+          "placeholder:text-muted-foreground focus:outline-none",
           className
         ),
         value: query,
@@ -1505,7 +1540,7 @@ var CommandEmpty = React15.forwardRef(
       "div",
       {
         ref,
-        className: cn("py-6 text-center caption text-ground-400", className),
+        className: cn("py-6 text-center caption text-muted-foreground", className),
         ...props,
         children
       }
@@ -1515,7 +1550,7 @@ var CommandEmpty = React15.forwardRef(
 CommandEmpty.displayName = "CommandEmpty";
 var CommandGroup = React15.forwardRef(
   ({ className, heading, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, role: "group", className: cn("py-1", className), ...props, children: [
-    heading && /* @__PURE__ */ jsx("p", { className: "px-3 pb-1 pt-0.5 label text-ground-400", children: heading }),
+    heading && /* @__PURE__ */ jsx("p", { className: "px-3 pb-1 pt-0.5 label text-muted-foreground", children: heading }),
     children
   ] })
 );
@@ -1547,9 +1582,9 @@ var CommandItem = React15.forwardRef(
         tabIndex: disabled ? void 0 : 0,
         className: cn(
           "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5 mx-1",
-          "body text-ground-700 outline-none transition-colors",
-          "hover:bg-ground-50 hover:text-ground-900",
-          "focus:bg-ground-50 focus:text-ground-900",
+          "body text-muted-foreground outline-none transition-colors",
+          "hover:bg-muted hover:text-foreground",
+          "focus:bg-muted focus:text-foreground",
           disabled && "pointer-events-none opacity-40",
           className
         ),
@@ -1568,19 +1603,20 @@ var CommandItem = React15.forwardRef(
 );
 CommandItem.displayName = "CommandItem";
 var CommandSeparator = React15.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("my-1 h-px bg-ground-100", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("my-1 h-px bg-muted", className), ...props })
 );
 CommandSeparator.displayName = "CommandSeparator";
 function CommandShortcut({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: cn("ml-auto caption text-ground-300 tracking-widest font-medium", className),
+      className: cn("ml-auto caption text-muted-foreground tracking-widest font-medium", className),
       ...props
     }
   );
 }
 CommandShortcut.displayName = "CommandShortcut";
+Command.displayName = "Command";
 var ContextMenuRoot = ContextMenu.Root;
 var ContextMenuTrigger = ContextMenu.Trigger;
 var ContextMenuGroup = ContextMenu.Group;
@@ -1592,7 +1628,7 @@ var ContextMenuContent = React15.forwardRef(({ className, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] bg-white rounded-xl shadow-natural p-1",
+      "z-50 min-w-[8rem] bg-card rounded-xl shadow-natural p-1",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -1611,7 +1647,7 @@ var ContextMenuItem = React15.forwardRef(({ className, inset, destructive, ...pr
     className: cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
       "body outline-none transition-colors",
-      destructive ? "text-red-600 focus:bg-red-50 focus:text-red-700" : "text-ground-700 focus:bg-ground-50 focus:text-ground-900",
+      destructive ? "text-destructive focus:bg-destructive/10 focus:text-destructive" : "text-muted-foreground focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
@@ -1626,14 +1662,14 @@ var ContextMenuCheckboxItem = React15.forwardRef(({ className, children, ...prop
     ref,
     className: cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
-      "body text-ground-700 outline-none transition-colors",
-      "focus:bg-ground-50 focus:text-ground-900",
+      "body text-muted-foreground outline-none transition-colors",
+      "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 13, className: "text-ground-900" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 13, className: "text-foreground" }) }) }),
       children
     ]
   }
@@ -1645,14 +1681,14 @@ var ContextMenuRadioItem = React15.forwardRef(({ className, children, ...props }
     ref,
     className: cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
-      "body text-ground-700 outline-none transition-colors",
-      "focus:bg-ground-50 focus:text-ground-900",
+      "body text-muted-foreground outline-none transition-colors",
+      "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { size: 8, className: "fill-ground-900 text-ground-900" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { size: 8, className: "fill-foreground text-foreground" }) }) }),
       children
     ]
   }
@@ -1662,7 +1698,7 @@ var ContextMenuLabel = React15.forwardRef(({ className, inset, ...props }, ref)
   ContextMenu.Label,
   {
     ref,
-    className: cn("px-2.5 py-1 label text-ground-400", inset && "pl-8", className),
+    className: cn("px-2.5 py-1 label text-muted-foreground", inset && "pl-8", className),
     ...props
   }
 ));
@@ -1671,7 +1707,7 @@ var ContextMenuSeparator = React15.forwardRef(({ className, ...props }, ref) =>
   ContextMenu.Separator,
   {
     ref,
-    className: cn("mx-1 my-1 h-px bg-ground-100", className),
+    className: cn("mx-1 my-1 h-px bg-muted", className),
     ...props
   }
 ));
@@ -1682,15 +1718,15 @@ var ContextMenuSubTrigger = React15.forwardRef(({ className, inset, children, ..
     ref,
     className: cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
-      "body text-ground-700 outline-none transition-colors",
-      "focus:bg-ground-50 focus:text-ground-900 data-[state=open]:bg-ground-50",
+      "body text-muted-foreground outline-none transition-colors",
+      "focus:bg-muted focus:text-foreground data-[state=open]:bg-muted",
       inset && "pl-8",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(ChevronRight, { size: 14, className: "ml-auto text-ground-400" })
+      /* @__PURE__ */ jsx(ChevronRight, { size: 14, className: "ml-auto text-muted-foreground" })
     ]
   }
 ));
@@ -1700,7 +1736,7 @@ var ContextMenuSubContent = React15.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] bg-white rounded-xl border border-ground-100 shadow-natural p-1",
+      "z-50 min-w-[8rem] bg-card rounded-xl border border-border shadow-natural p-1",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -1712,32 +1748,32 @@ var ContextMenuSubContent = React15.forwardRef(({ className, ...props }, ref) =>
 ));
 ContextMenuSubContent.displayName = "ContextMenuSubContent";
 function ContextMenuShortcut({ className, ...props }) {
-  return /* @__PURE__ */ jsx("span", { className: cn("ml-auto caption text-ground-400", className), ...props });
+  return /* @__PURE__ */ jsx("span", { className: cn("ml-auto caption text-muted-foreground", className), ...props });
 }
 ContextMenuShortcut.displayName = "ContextMenuShortcut";
 var Table = React15.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn(
-      "w-full overflow-hidden rounded-xl border border-ground-100 bg-white",
+      "w-full overflow-hidden rounded-xl border border-border bg-card",
       containerClassName
     ),
     children: /* @__PURE__ */ jsx(
       "table",
       {
         ref,
-        className: cn("min-w-full caption-bottom divide-y divide-ground-200", className),
+        className: cn("min-w-full caption-bottom divide-y divide-border", className),
         ...props
       }
     )
   }
 ));
 Table.displayName = "Table";
-var TableHeader = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("bg-ground-50", className), ...props }));
+var TableHeader = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("bg-muted", className), ...props }));
 TableHeader.displayName = "TableHeader";
-var TableBody = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("divide-y divide-ground-100 bg-white", className), ...props }));
+var TableBody = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("divide-y divide-border bg-card", className), ...props }));
 TableBody.displayName = "TableBody";
-var TableFooter = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tfoot", { ref, className: cn("bg-ground-50 font-medium", className), ...props }));
+var TableFooter = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tfoot", { ref, className: cn("bg-muted font-medium", className), ...props }));
 TableFooter.displayName = "TableFooter";
 var TableRow = React15.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -1745,7 +1781,7 @@ var TableRow = React15.forwardRef(
     {
       ref,
       className: cn(
-        "transition-colors hover:bg-ground-50/50 data-[state=selected]:bg-ground-50",
+        "transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
         className
       ),
       ...props
@@ -1758,7 +1794,7 @@ var TableHead = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "px-6 py-3 text-left align-middle label text-ground-400",
+      "px-6 py-3 text-left align-middle label text-muted-foreground",
       "[&:has([role=checkbox])]:pr-0",
       className
     ),
@@ -1771,7 +1807,7 @@ var TableCell = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "px-6 py-4 align-middle body text-ground-500",
+      "px-6 py-4 align-middle body text-muted-foreground",
       "[&:has([role=checkbox])]:pr-0",
       className
     ),
@@ -1779,7 +1815,7 @@ var TableCell = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("caption", { ref, className: cn("mt-4 caption text-ground-400", className), ...props }));
+var TableCaption = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("caption", { ref, className: cn("mt-4 caption text-muted-foreground", className), ...props }));
 TableCaption.displayName = "TableCaption";
 function Input({ className, type, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -1788,12 +1824,12 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn(
-        "flex h-9 w-full rounded-md border border-ground-200 bg-white px-3 py-1",
-        "body text-ground-900 placeholder:text-ground-400",
+        "flex h-9 w-full rounded-md border border-border bg-card px-3 py-1",
+        "body text-foreground placeholder:text-muted-foreground",
         "transition-colors duration-150",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/20 focus-visible:border-brand-primary",
-        "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-ground-50",
-        "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-ground-900",
+        "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted",
+        "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
         className
       ),
       ...props
@@ -1834,30 +1870,37 @@ function DataTable({
       }
     ),
     /* @__PURE__ */ jsxs(Table, { children: [
-      /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHead, { children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxs(
-        "button",
+      /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+        TableHead,
         {
-          className: cn(
-            "flex items-center gap-1 transition-colors hover:text-ground-700",
-            header.column.getIsSorted() && "text-ground-900"
-          ),
-          onClick: header.column.getToggleSortingHandler(),
-          children: [
-            flexRender(header.column.columnDef.header, header.getContext()),
-            header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ChevronUp, { size: 12, className: "text-brand-primary" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ChevronDown, { size: 12, className: "text-brand-primary" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { size: 12, className: "text-ground-300" })
-          ]
-        }
-      ) : flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }, headerGroup.id)) }),
-      /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center text-ground-400", children: "No results." }) }) })
+          "aria-sort": header.column.getCanSort() ? header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : "none" : void 0,
+          children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: cn(
+                "flex items-center gap-1 transition-colors hover:text-muted-foreground",
+                header.column.getIsSorted() && "text-foreground"
+              ),
+              onClick: header.column.getToggleSortingHandler(),
+              children: [
+                flexRender(header.column.columnDef.header, header.getContext()),
+                header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ChevronUp, { size: 12, className: "text-brand-primary" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ChevronDown, { size: 12, className: "text-brand-primary" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { size: 12, className: "text-muted-foreground" })
+              ]
+            }
+          ) : flexRender(header.column.columnDef.header, header.getContext())
+        },
+        header.id
+      )) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center text-muted-foreground", children: "No results." }) }) })
     ] }),
     showPagination && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs("p", { className: "caption text-ground-400", children: [
+      /* @__PURE__ */ jsxs("p", { className: "caption text-muted-foreground", children: [
         table.getFilteredRowModel().rows.length,
         " result",
         table.getFilteredRowModel().rows.length !== 1 ? "s" : ""
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs("span", { className: "caption text-ground-400", children: [
+        /* @__PURE__ */ jsxs("span", { className: "caption text-muted-foreground", children: [
           "Page ",
           table.getState().pagination.pageIndex + 1,
           " of ",
@@ -1897,7 +1940,7 @@ var PopoverContent = React15.forwardRef(({ className, align = "center", sideOffs
     align,
     sideOffset,
     className: cn(
-      "z-50 w-72 rounded-xl bg-white p-4 shadow-natural outline-none",
+      "z-50 w-72 rounded-xl bg-card p-4 shadow-natural outline-none",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -1928,12 +1971,12 @@ function DatePicker({
         variant: "outline",
         className: cn(
           "w-[240px] justify-start gap-2 text-left font-normal",
-          !value && "text-ground-400",
+          !value && "text-muted-foreground",
           className
         ),
         disabled,
         children: [
-          /* @__PURE__ */ jsx(CalendarIcon, { size: 14, className: "text-ground-400 shrink-0" }),
+          /* @__PURE__ */ jsx(CalendarIcon, { size: 14, className: "text-muted-foreground shrink-0" }),
           value ? formatDate(value) : /* @__PURE__ */ jsx("span", { children: placeholder })
         ]
       }
@@ -1960,21 +2003,21 @@ function DescriptionList({
 }) {
   return /* @__PURE__ */ jsxs("div", { className, children: [
     (title || description) && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-      title && /* @__PURE__ */ jsx("p", { className: "body font-semibold text-ground-900", children: title }),
-      description && /* @__PURE__ */ jsx("p", { className: "mt-1 caption text-ground-400", children: description })
+      title && /* @__PURE__ */ jsx("p", { className: "body font-semibold text-foreground", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-1 caption text-muted-foreground", children: description })
     ] }),
-    /* @__PURE__ */ jsx("dl", { className: cn("border-t border-ground-100", columns === 2 && "sm:grid sm:grid-cols-2"), children: items.map((item, i) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("dl", { className: cn("border-t border-border", columns === 2 && "sm:grid sm:grid-cols-2"), children: items.map((item, i) => /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
           "py-3.5",
-          columns === 1 ? "grid grid-cols-3 gap-4 items-baseline" : "flex flex-col gap-1 border-b border-ground-100",
-          columns === 1 && i !== items.length - 1 && "border-b border-ground-100",
-          striped && i % 2 === 0 && "bg-ground-50 -mx-4 px-4 rounded"
+          columns === 1 ? "grid grid-cols-3 gap-4 items-baseline" : "flex flex-col gap-1 border-b border-border",
+          columns === 1 && i !== items.length - 1 && "border-b border-border",
+          striped && i % 2 === 0 && "bg-muted -mx-4 px-4 rounded"
         ),
         children: [
-          /* @__PURE__ */ jsx("dt", { className: "caption font-semibold text-ground-500 uppercase tracking-wide", children: item.term }),
-          /* @__PURE__ */ jsx("dd", { className: cn("body text-ground-900", columns === 1 ? "col-span-2" : ""), children: item.action ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsx("dt", { className: "caption font-semibold text-muted-foreground uppercase tracking-wide", children: item.term }),
+          /* @__PURE__ */ jsx("dd", { className: cn("body text-foreground", columns === 1 ? "col-span-2" : ""), children: item.action ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
             /* @__PURE__ */ jsx("span", { children: item.details }),
             item.action
           ] }) : item.details })
@@ -1984,6 +2027,7 @@ function DescriptionList({
     )) })
   ] });
 }
+DescriptionList.displayName = "DescriptionList";
 var DrawerRoot = Drawer.Root;
 var DrawerTrigger = Drawer.Trigger;
 var DrawerPortal = Drawer.Portal;
@@ -1992,7 +2036,7 @@ var DrawerOverlay = React15.forwardRef(({ className, ...props }, ref) => /* @__P
   Drawer.Overlay,
   {
     ref,
-    className: cn("fixed inset-0 z-50 bg-ground-950/40 backdrop-blur-[1px]", className),
+    className: cn("fixed inset-0 z-50 bg-foreground/40 backdrop-blur-[1px]", className),
     ...props
   }
 ));
@@ -2004,12 +2048,12 @@ var DrawerContent = React15.forwardRef(({ className, children, ...props }, ref)
     {
       ref,
       className: cn(
-        "fixed inset-x-0 bottom-0 z-50 flex flex-col rounded-t-2xl border border-ground-100 bg-white",
+        "fixed inset-x-0 bottom-0 z-50 flex flex-col rounded-t-2xl border border-border bg-card",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 h-1 w-12 rounded-full bg-ground-200" }),
+        /* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 h-1 w-12 rounded-full bg-muted" }),
         children
       ]
     }
@@ -2024,7 +2068,7 @@ var DrawerTitle = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
   Drawer.Title,
   {
     ref,
-    className: cn("subheading text-ground-900", className),
+    className: cn("subheading text-foreground", className),
     ...props
   }
 ));
@@ -2033,7 +2077,7 @@ var DrawerDescription = React15.forwardRef(({ className, ...props }, ref) => /*
   Drawer.Description,
   {
     ref,
-    className: cn("body text-ground-500", className),
+    className: cn("body text-muted-foreground", className),
     ...props
   }
 ));
@@ -2050,7 +2094,7 @@ var DropdownMenuContent = React15.forwardRef(({ className, sideOffset = 4, ...pr
     ref,
     sideOffset,
     className: cn(
-      "z-50 min-w-[8rem] bg-white rounded-xl shadow-natural p-1",
+      "z-50 min-w-[8rem] bg-card rounded-xl shadow-natural p-1",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -2069,7 +2113,7 @@ var DropdownMenuItem = React15.forwardRef(({ className, inset, destructive, ...p
     className: cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
       "body outline-none transition-colors",
-      destructive ? "text-red-600 focus:bg-red-50 focus:text-red-700" : "text-ground-700 focus:bg-ground-50 focus:text-ground-900",
+      destructive ? "text-destructive focus:bg-destructive/10 focus:text-destructive" : "text-muted-foreground focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
@@ -2084,14 +2128,14 @@ var DropdownMenuCheckboxItem = React15.forwardRef(({ className, children, ...pro
     ref,
     className: cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
-      "body text-ground-700 outline-none transition-colors",
-      "focus:bg-ground-50 focus:text-ground-900",
+      "body text-muted-foreground outline-none transition-colors",
+      "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 13, className: "text-ground-900" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 13, className: "text-foreground" }) }) }),
       children
     ]
   }
@@ -2103,14 +2147,14 @@ var DropdownMenuRadioItem = React15.forwardRef(({ className, children, ...props
     ref,
     className: cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
-      "body text-ground-700 outline-none transition-colors",
-      "focus:bg-ground-50 focus:text-ground-900",
+      "body text-muted-foreground outline-none transition-colors",
+      "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { size: 8, className: "fill-ground-900 text-ground-900" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { size: 8, className: "fill-foreground text-foreground" }) }) }),
       children
     ]
   }
@@ -2120,7 +2164,7 @@ var DropdownMenuLabel = React15.forwardRef(({ className, inset, ...props }, ref)
   DropdownMenu.Label,
   {
     ref,
-    className: cn("px-2.5 py-1 label text-ground-400", inset && "pl-8", className),
+    className: cn("px-2.5 py-1 label text-muted-foreground", inset && "pl-8", className),
     ...props
   }
 ));
@@ -2129,7 +2173,7 @@ var DropdownMenuSeparator = React15.forwardRef(({ className, ...props }, ref) =>
   DropdownMenu.Separator,
   {
     ref,
-    className: cn("mx-1 my-1 h-px bg-ground-100", className),
+    className: cn("mx-1 my-1 h-px bg-muted", className),
     ...props
   }
 ));
@@ -2140,15 +2184,15 @@ var DropdownMenuSubTrigger = React15.forwardRef(({ className, inset, children, .
     ref,
     className: cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
-      "body text-ground-700 outline-none transition-colors",
-      "focus:bg-ground-50 focus:text-ground-900 data-[state=open]:bg-ground-50",
+      "body text-muted-foreground outline-none transition-colors",
+      "focus:bg-muted focus:text-foreground data-[state=open]:bg-muted",
       inset && "pl-8",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(ChevronRight, { size: 14, className: "ml-auto text-ground-400" })
+      /* @__PURE__ */ jsx(ChevronRight, { size: 14, className: "ml-auto text-muted-foreground" })
     ]
   }
 ));
@@ -2158,7 +2202,7 @@ var DropdownMenuSubContent = React15.forwardRef(({ className, ...props }, ref) =
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] bg-white rounded-xl border border-ground-100 shadow-natural p-1",
+      "z-50 min-w-[8rem] bg-card rounded-xl border border-border shadow-natural p-1",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -2170,25 +2214,26 @@ var DropdownMenuSubContent = React15.forwardRef(({ className, ...props }, ref) =
 ));
 DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
 function DropdownMenuShortcut({ className, ...props }) {
-  return /* @__PURE__ */ jsx("span", { className: cn("ml-auto caption text-ground-400", className), ...props });
+  return /* @__PURE__ */ jsx("span", { className: cn("ml-auto caption text-muted-foreground", className), ...props });
 }
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 function EmptyState({ icon, title, description, action, className }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-4 px-6 py-14 text-center", className), children: [
-    icon && /* @__PURE__ */ jsx("div", { className: "flex size-12 items-center justify-center rounded-xl bg-brand-secondary/20 text-ground-700", children: icon }),
+    icon && /* @__PURE__ */ jsx("div", { className: "flex size-12 items-center justify-center rounded-xl bg-brand-secondary/20 text-muted-foreground", children: icon }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
-      /* @__PURE__ */ jsx("p", { className: "body font-semibold text-ground-900", children: title }),
-      description && /* @__PURE__ */ jsx("p", { className: "body max-w-xs text-ground-400", children: description })
+      /* @__PURE__ */ jsx("p", { className: "body font-semibold text-foreground", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "body max-w-xs text-muted-foreground", children: description })
     ] }),
     action && (action.href ? /* @__PURE__ */ jsx(Button, { size: "sm", asChild: true, children: /* @__PURE__ */ jsx("a", { href: action.href, children: action.label }) }) : /* @__PURE__ */ jsx(Button, { size: "sm", onClick: action.onClick, children: action.label }))
   ] });
 }
+EmptyState.displayName = "EmptyState";
 var Label = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Label$1.Root,
   {
     ref,
     className: cn(
-      "body font-medium leading-none text-ground-700",
+      "body font-medium leading-none text-muted-foreground",
       "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
       className
     ),
@@ -2212,12 +2257,12 @@ function Field({
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
       /* @__PURE__ */ jsxs(Label, { htmlFor, "aria-required": required, children: [
         label,
-        required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-red-600", "aria-hidden": "true", children: "*" })
+        required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-destructive", "aria-hidden": "true", children: "*" })
       ] }),
-      cornerHint && /* @__PURE__ */ jsx("span", { className: "caption text-ground-400", children: cornerHint })
+      cornerHint && /* @__PURE__ */ jsx("span", { className: "caption text-muted-foreground", children: cornerHint })
     ] }),
     children,
-    error ? /* @__PURE__ */ jsx("p", { id: descriptionId, role: "alert", className: "caption text-red-600", children: error }) : hint ? /* @__PURE__ */ jsx("p", { id: descriptionId, className: "caption text-ground-400", children: hint }) : null
+    error ? /* @__PURE__ */ jsx("p", { id: descriptionId, role: "alert", className: "caption text-destructive", children: error }) : hint ? /* @__PURE__ */ jsx("p", { id: descriptionId, className: "caption text-muted-foreground", children: hint }) : null
   ] });
 }
 Field.displayName = "Field";
@@ -2247,17 +2292,17 @@ function GridListCard({
     "div",
     {
       className: cn(
-        "flex h-full flex-col gap-1 rounded-xl border border-ground-100 bg-white p-4 shadow-natural transition-shadow",
+        "flex h-full flex-col gap-1 rounded-xl border border-border bg-card p-4 shadow-natural transition-shadow",
         href && "hover:shadow-elevated",
         className
       ),
       children: [
         accent && /* @__PURE__ */ jsx("div", { className: "mb-2", children: accent }),
-        /* @__PURE__ */ jsx("p", { className: "body font-semibold text-ground-900", children: title }),
-        description && /* @__PURE__ */ jsx("p", { className: "caption text-ground-400", children: description }),
+        /* @__PURE__ */ jsx("p", { className: "body font-semibold text-foreground", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "caption text-muted-foreground", children: description }),
         (meta || trailing) && /* @__PURE__ */ jsxs("div", { className: "mt-auto flex items-center justify-between pt-3", children: [
-          meta && /* @__PURE__ */ jsx("span", { className: "caption text-ground-400", children: meta }),
-          trailing && /* @__PURE__ */ jsx("span", { className: "caption text-ground-400", children: trailing })
+          meta && /* @__PURE__ */ jsx("span", { className: "caption text-muted-foreground", children: meta }),
+          trailing && /* @__PURE__ */ jsx("span", { className: "caption text-muted-foreground", children: trailing })
         ] })
       ]
     }
@@ -2266,7 +2311,7 @@ function GridListCard({
     "a",
     {
       href,
-      className: "block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-400/40 rounded-xl",
+      className: "block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 rounded-xl",
       children: inner
     }
   ) : inner });
@@ -2275,7 +2320,7 @@ function GridListAccentCard({
   title,
   meta,
   href,
-  accentClass = "bg-ground-900",
+  accentClass = "bg-foreground",
   initials,
   trailing,
   className
@@ -2284,7 +2329,7 @@ function GridListAccentCard({
     "div",
     {
       className: cn(
-        "flex overflow-hidden rounded-xl border border-ground-100 bg-white shadow-natural transition-shadow",
+        "flex overflow-hidden rounded-xl border border-border bg-card shadow-natural transition-shadow",
         href && "hover:shadow-elevated",
         className
       ),
@@ -2293,16 +2338,16 @@ function GridListAccentCard({
           "div",
           {
             className: cn(
-              "flex w-14 shrink-0 items-center justify-center body font-semibold text-white",
+              "flex w-14 shrink-0 items-center justify-center body font-semibold text-background",
               accentClass
             ),
             children: initials
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center justify-between truncate border-l border-ground-100 px-4 py-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center justify-between truncate border-l border-border px-4 py-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx("p", { className: "body font-semibold text-ground-900 truncate", children: title }),
-            meta && /* @__PURE__ */ jsx("p", { className: "caption text-ground-400", children: meta })
+            /* @__PURE__ */ jsx("p", { className: "body font-semibold text-foreground truncate", children: title }),
+            meta && /* @__PURE__ */ jsx("p", { className: "caption text-muted-foreground", children: meta })
           ] }),
           trailing && /* @__PURE__ */ jsx("div", { className: "shrink-0 pl-2", children: trailing })
         ] })
@@ -2313,11 +2358,14 @@ function GridListAccentCard({
     "a",
     {
       href,
-      className: "block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-400/40 rounded-xl",
+      className: "block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 rounded-xl",
       children: inner
     }
   ) : inner });
 }
+GridList.displayName = "GridList";
+GridListCard.displayName = "GridListCard";
+GridListAccentCard.displayName = "GridListAccentCard";
 var HoverCardRoot = HoverCard.Root;
 var HoverCardTrigger = HoverCard.Trigger;
 var HoverCardContent = React15.forwardRef(({ className, align = "center", sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(HoverCard.Portal, { children: /* @__PURE__ */ jsx(
@@ -2327,7 +2375,7 @@ var HoverCardContent = React15.forwardRef(({ className, align = "center", sideOf
     align,
     sideOffset,
     className: cn(
-      "z-50 w-64 rounded-xl border border-ground-100 bg-white p-4 shadow-elevated outline-none",
+      "z-50 w-64 rounded-xl border border-border bg-card p-4 shadow-elevated outline-none",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -2356,9 +2404,9 @@ var InputGroup = React15.forwardRef(
     const hasLeading = leadingAddon || leadingIcon;
     const hasTrailing = trailingAddon || trailingIcon || trailingButton || error;
     const baseInput = cn(
-      "flex h-9 w-full border bg-white body text-ground-900 placeholder:text-ground-400",
+      "flex h-9 w-full border bg-card body text-foreground placeholder:text-muted-foreground",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:disabled:cursor-not-allowed disabled:opacity-50",
-      error ? "border-red-400 focus-visible:ring-red-200 focus-visible:border-red-500" : "border-ground-200 focus-visible:ring-brand-primary/20 focus-visible:border-brand-primary"
+      error ? "border-destructive focus-visible:ring-destructive/20 focus-visible:border-destructive" : "border-border focus-visible:ring-brand-primary/20 focus-visible:border-brand-primary"
     );
     if (!hasLeading && !hasTrailing) {
       return /* @__PURE__ */ jsx("input", { ref, className: cn(baseInput, radius, "px-3", className), ...props });
@@ -2368,15 +2416,15 @@ var InputGroup = React15.forwardRef(
         "span",
         {
           className: cn(
-            "inline-flex items-center border border-r-0 bg-ground-50 px-3 body text-ground-500 select-none",
-            error ? "border-red-400" : "border-ground-200",
+            "inline-flex items-center border border-r-0 bg-muted px-3 body text-muted-foreground select-none",
+            error ? "border-destructive" : "border-border",
             pill ? "rounded-l-full" : "rounded-l-lg"
           ),
           children: leadingAddon
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
-        leadingIcon && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-ground-400", children: leadingIcon }),
+        leadingIcon && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground", children: leadingIcon }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -2390,14 +2438,14 @@ var InputGroup = React15.forwardRef(
             ...props
           }
         ),
-        (trailingIcon || error) && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3", children: error ? /* @__PURE__ */ jsx(AlertCircle, { size: 15, className: "text-red-500" }) : /* @__PURE__ */ jsx("span", { className: "text-ground-400", children: trailingIcon }) })
+        (trailingIcon || error) && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3", children: error ? /* @__PURE__ */ jsx(AlertCircle, { size: 15, className: "text-destructive" }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: trailingIcon }) })
       ] }),
       trailingAddon && /* @__PURE__ */ jsx(
         "span",
         {
           className: cn(
-            "inline-flex items-center border border-l-0 bg-ground-50 px-3 body text-ground-500 select-none",
-            error ? "border-red-400" : "border-ground-200",
+            "inline-flex items-center border border-l-0 bg-muted px-3 body text-muted-foreground select-none",
+            error ? "border-destructive" : "border-border",
             pill ? "rounded-r-full" : "rounded-r-lg"
           ),
           children: trailingAddon
@@ -2457,7 +2505,7 @@ var InputNumber = React15.forwardRef(
       "div",
       {
         className: cn(
-          "inline-flex h-8 items-stretch rounded-md border border-ground-200 bg-white overflow-hidden",
+          "inline-flex h-8 items-stretch rounded-md border border-border bg-card overflow-hidden",
           "focus-within:ring-2 focus-within:ring-brand-primary/20 focus-within:border-brand-primary",
           disabled && "opacity-50 pointer-events-none",
           className
@@ -2475,12 +2523,12 @@ var InputNumber = React15.forwardRef(
               onBlur: (e) => commit(e.target.value),
               onKeyDown,
               disabled,
-              className: "w-full caption text-ground-900 px-2 bg-transparent focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none text-right",
+              className: "w-full caption text-foreground px-2 bg-transparent focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none text-right",
               ...rest
             }
           ),
-          unit && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "caption-xs text-ground-400 self-center pr-1.5 select-none", children: unit }),
-          !hideSteppers && /* @__PURE__ */ jsxs("div", { className: "flex flex-col border-l border-ground-100", children: [
+          unit && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "caption-xs text-muted-foreground self-center pr-1.5 select-none", children: unit }),
+          !hideSteppers && /* @__PURE__ */ jsxs("div", { className: "flex flex-col border-l border-border", children: [
             /* @__PURE__ */ jsx(
               "button",
               {
@@ -2488,11 +2536,11 @@ var InputNumber = React15.forwardRef(
                 tabIndex: -1,
                 onClick: () => bump(step),
                 "aria-label": "Increment",
-                className: "flex-1 px-1 hover:bg-ground-50 active:bg-ground-100 transition-colors text-ground-500",
+                className: "flex-1 px-1 hover:bg-muted active:bg-muted transition-colors text-muted-foreground",
                 children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 8 5", width: "8", height: "5", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M0 5 L4 0 L8 5 Z" }) })
               }
             ),
-            /* @__PURE__ */ jsx("div", { className: "border-t border-ground-100" }),
+            /* @__PURE__ */ jsx("div", { className: "border-t border-border" }),
             /* @__PURE__ */ jsx(
               "button",
               {
@@ -2500,7 +2548,7 @@ var InputNumber = React15.forwardRef(
                 tabIndex: -1,
                 onClick: () => bump(-step),
                 "aria-label": "Decrement",
-                className: "flex-1 px-1 hover:bg-ground-50 active:bg-ground-100 transition-colors text-ground-500",
+                className: "flex-1 px-1 hover:bg-muted active:bg-muted transition-colors text-muted-foreground",
                 children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 8 5", width: "8", height: "5", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M0 0 L4 5 L8 0 Z" }) })
               }
             )
@@ -2534,7 +2582,7 @@ var InputOTPSlot = React15.forwardRef(({ index, className, ...props }, ref) => {
       ref,
       className: cn(
         "relative flex h-12 w-11 items-center justify-center",
-        "border-y border-r border-ground-200 body font-medium text-ground-900",
+        "border-y border-r border-border body font-medium text-foreground",
         "first:rounded-l-xl first:border-l last:rounded-r-xl",
         "transition-all",
         isActive && "z-10 ring-2 ring-brand-primary/40 border-brand-primary",
@@ -2543,14 +2591,14 @@ var InputOTPSlot = React15.forwardRef(({ index, className, ...props }, ref) => {
       ...props,
       children: [
         char,
-        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-5 w-px animate-caret-blink bg-ground-900 duration-1000" }) })
+        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-5 w-px animate-caret-blink bg-foreground duration-1000" }) })
       ]
     }
   );
 });
 InputOTPSlot.displayName = "InputOTPSlot";
 var InputOTPSeparator = React15.forwardRef(
-  ({ ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx(Minus, { size: 14, className: "text-ground-300" }) })
+  ({ ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx(Minus, { size: 14, className: "text-muted-foreground" }) })
 );
 InputOTPSeparator.displayName = "InputOTPSeparator";
 var Kbd = React15.forwardRef(
@@ -2559,7 +2607,7 @@ var Kbd = React15.forwardRef(
     {
       ref,
       className: cn(
-        "inline-flex h-5 min-w-5 items-center justify-center rounded border border-ground-200 bg-ground-50 px-1.5 font-mono caption-xs font-medium text-ground-500",
+        "inline-flex h-5 min-w-5 items-center justify-center rounded border border-border bg-muted px-1.5 font-mono caption-xs font-medium text-muted-foreground",
         className
       ),
       ...props
@@ -2602,12 +2650,13 @@ function MediaObject({
     }
   );
 }
+MediaObject.displayName = "MediaObject";
 var MenubarRoot = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Menubar.Root,
   {
     ref,
     className: cn(
-      "flex h-9 items-center gap-0.5 rounded-lg border border-ground-100 bg-white px-1",
+      "flex h-9 items-center gap-0.5 rounded-lg border border-border bg-card px-1",
       className
     ),
     ...props
@@ -2623,10 +2672,10 @@ var MenubarTrigger = React15.forwardRef(({ className, ...props }, ref) => /* @__
   {
     ref,
     className: cn(
-      "flex cursor-default items-center rounded-md px-3 py-1 body font-medium text-ground-700 select-none outline-none",
-      "hover:bg-ground-50",
-      "data-[state=open]:bg-ground-100 data-[state=open]:text-ground-900",
-      "focus:bg-ground-50",
+      "flex cursor-default items-center rounded-md px-3 py-1 body font-medium text-muted-foreground select-none outline-none",
+      "hover:bg-muted",
+      "data-[state=open]:bg-muted data-[state=open]:text-foreground",
+      "focus:bg-muted",
       className
     ),
     ...props
@@ -2641,7 +2690,7 @@ var MenubarContent = React15.forwardRef(({ className, align = "start", alignOffs
     alignOffset,
     sideOffset,
     className: cn(
-      "z-50 min-w-[12rem] bg-white rounded-xl shadow-natural p-1",
+      "z-50 min-w-[12rem] bg-card rounded-xl shadow-natural p-1",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -2659,8 +2708,8 @@ var MenubarItem = React15.forwardRef(({ className, inset, ...props }, ref) => /*
     ref,
     className: cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
-      "body text-ground-700 outline-none transition-colors",
-      "focus:bg-ground-50 focus:text-ground-900",
+      "body text-muted-foreground outline-none transition-colors",
+      "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
@@ -2675,14 +2724,14 @@ var MenubarCheckboxItem = React15.forwardRef(({ className, children, ...props },
     ref,
     className: cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
-      "body text-ground-700 outline-none transition-colors",
-      "focus:bg-ground-50 focus:text-ground-900",
+      "body text-muted-foreground outline-none transition-colors",
+      "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(Menubar.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 13, className: "text-ground-900" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(Menubar.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 13, className: "text-foreground" }) }) }),
       children
     ]
   }
@@ -2694,14 +2743,14 @@ var MenubarRadioItem = React15.forwardRef(({ className, children, ...props }, re
     ref,
     className: cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
-      "body text-ground-700 outline-none transition-colors",
-      "focus:bg-ground-50 focus:text-ground-900",
+      "body text-muted-foreground outline-none transition-colors",
+      "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(Menubar.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { size: 8, className: "fill-ground-900 text-ground-900" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(Menubar.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { size: 8, className: "fill-foreground text-foreground" }) }) }),
       children
     ]
   }
@@ -2711,7 +2760,7 @@ var MenubarLabel = React15.forwardRef(({ className, inset, ...props }, ref) => /
   Menubar.Label,
   {
     ref,
-    className: cn("px-2.5 py-1 label text-ground-400", inset && "pl-8", className),
+    className: cn("px-2.5 py-1 label text-muted-foreground", inset && "pl-8", className),
     ...props
   }
 ));
@@ -2720,7 +2769,7 @@ var MenubarSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @
   Menubar.Separator,
   {
     ref,
-    className: cn("mx-1 my-1 h-px bg-ground-100", className),
+    className: cn("mx-1 my-1 h-px bg-muted", className),
     ...props
   }
 ));
@@ -2731,15 +2780,15 @@ var MenubarSubTrigger = React15.forwardRef(({ className, inset, children, ...pro
     ref,
     className: cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
-      "body text-ground-700 outline-none transition-colors",
-      "focus:bg-ground-50 focus:text-ground-900 data-[state=open]:bg-ground-50",
+      "body text-muted-foreground outline-none transition-colors",
+      "focus:bg-muted focus:text-foreground data-[state=open]:bg-muted",
       inset && "pl-8",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(ChevronRight, { size: 14, className: "ml-auto text-ground-400" })
+      /* @__PURE__ */ jsx(ChevronRight, { size: 14, className: "ml-auto text-muted-foreground" })
     ]
   }
 ));
@@ -2749,7 +2798,7 @@ var MenubarSubContent = React15.forwardRef(({ className, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] bg-white rounded-xl border border-ground-100 shadow-natural p-1",
+      "z-50 min-w-[8rem] bg-card rounded-xl border border-border shadow-natural p-1",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -2761,7 +2810,7 @@ var MenubarSubContent = React15.forwardRef(({ className, ...props }, ref) => /*
 ));
 MenubarSubContent.displayName = "MenubarSubContent";
 function MenubarShortcut({ className, ...props }) {
-  return /* @__PURE__ */ jsx("span", { className: cn("ml-auto caption text-ground-400", className), ...props });
+  return /* @__PURE__ */ jsx("span", { className: cn("ml-auto caption text-muted-foreground", className), ...props });
 }
 MenubarShortcut.displayName = "MenubarShortcut";
 var NativeSelect = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "relative", children: [
@@ -2770,11 +2819,11 @@ var NativeSelect = React15.forwardRef(({ className, children, ...props }, ref) =
     {
       ref,
       className: cn(
-        "peer h-9 w-full appearance-none rounded-lg border border-ground-200 bg-white pl-3 pr-8",
-        "body text-ground-900",
-        "focus:outline-none focus:ring-2 focus:ring-ground-400/30 focus:border-ground-400",
+        "peer h-9 w-full appearance-none rounded-lg border border-border bg-card pl-3 pr-8",
+        "body text-foreground",
+        "focus:outline-none focus:ring-2 focus:ring-ring/30 focus:border-border",
         "disabled:cursor-not-allowed disabled:opacity-50",
-        "aria-[invalid=true]:border-red-500 aria-[invalid=true]:focus:ring-red-500/20",
+        "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:ring-destructive/20",
         className
       ),
       ...props,
@@ -2785,7 +2834,7 @@ var NativeSelect = React15.forwardRef(({ className, children, ...props }, ref) =
     ChevronDown,
     {
       size: 14,
-      className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-ground-400 peer-disabled:opacity-50"
+      className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground peer-disabled:opacity-50"
     }
   )
 ] }));
@@ -2820,9 +2869,9 @@ var NavigationMenuTrigger = React15.forwardRef(({ className, children, ...props
     ref,
     className: cn(
       "group inline-flex h-9 w-max items-center justify-center gap-1 rounded-md px-3 py-2",
-      "body font-medium text-ground-700",
-      "hover:bg-ground-100 hover:text-ground-900",
-      "data-[active]:bg-ground-100 data-[state=open]:bg-ground-100",
+      "body font-medium text-muted-foreground",
+      "hover:bg-muted hover:text-foreground",
+      "data-[active]:bg-muted data-[state=open]:bg-muted",
       "outline-none transition-colors",
       className
     ),
@@ -2863,8 +2912,8 @@ var NavigationMenuLink = React15.forwardRef(({ className, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      "block select-none rounded-md px-3 py-2 body text-ground-700",
-      "hover:bg-ground-50 hover:text-ground-900",
+      "block select-none rounded-md px-3 py-2 body text-muted-foreground",
+      "hover:bg-muted hover:text-foreground",
       "outline-none transition-colors",
       className
     ),
@@ -2877,7 +2926,7 @@ var NavigationMenuViewport = React15.forwardRef(({ className, ...props }, ref) =
   {
     ref,
     className: cn(
-      "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-xl border border-ground-100 bg-white shadow-elevated",
+      "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-xl border border-border bg-card shadow-elevated",
       "md:w-[var(--radix-navigation-menu-viewport-width)]",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90",
@@ -2898,31 +2947,31 @@ var NavigationMenuIndicator = React15.forwardRef(({ className, ...props }, ref)
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-ground-100 shadow-elevated" })
+    children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-muted shadow-elevated" })
   }
 ));
 NavigationMenuIndicator.displayName = "NavigationMenuIndicator";
 function navigationMenuTriggerStyle() {
   return cn(
     "group inline-flex h-9 w-max items-center justify-center gap-1 rounded-md px-3 py-2",
-    "body font-medium text-ground-700",
-    "hover:bg-ground-100 hover:text-ground-900",
-    "data-[active]:bg-ground-100 data-[state=open]:bg-ground-100",
+    "body font-medium text-muted-foreground",
+    "hover:bg-muted hover:text-foreground",
+    "data-[active]:bg-muted data-[state=open]:bg-muted",
     "outline-none transition-colors"
   );
 }
 var variantConfig = {
-  default: { icon: null, iconClass: "text-ground-400" },
+  default: { icon: null, iconClass: "text-muted-foreground" },
   success: {
     icon: CheckCircle,
-    iconClass: "bg-brand-secondary/25 text-ground-700 rounded-full p-1"
+    iconClass: "bg-brand-secondary/25 text-muted-foreground rounded-full p-1"
   },
-  error: { icon: AlertCircle, iconClass: "text-red-500" },
+  error: { icon: AlertCircle, iconClass: "text-destructive" },
   warning: {
     icon: AlertTriangle,
-    iconClass: "bg-brand-secondary/80 text-ground-700 rounded-full p-1"
+    iconClass: "bg-brand-secondary/80 text-muted-foreground rounded-full p-1"
   },
-  info: { icon: Info, iconClass: "text-ground-400" }
+  info: { icon: Info, iconClass: "text-muted-foreground" }
 };
 function Notification({
   title,
@@ -2940,14 +2989,14 @@ function Notification({
     "div",
     {
       className: cn(
-        "pointer-events-auto w-full max-w-sm overflow-hidden rounded-xl border border-ground-100 bg-white shadow-elevated",
+        "pointer-events-auto w-full max-w-sm overflow-hidden rounded-xl border border-border bg-card shadow-elevated",
         className
       ),
       children: /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
         resolvedIcon && /* @__PURE__ */ jsx("div", { className: cn("shrink-0 mt-0.5", config.iconClass), children: resolvedIcon }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("p", { className: "body font-semibold text-ground-900", children: title }),
-          description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 body text-ground-500", children: description }),
+          /* @__PURE__ */ jsx("p", { className: "body font-semibold text-foreground", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 body text-muted-foreground", children: description }),
           actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex gap-3", children: actions.map((action, i) => /* @__PURE__ */ jsx(
             "button",
             {
@@ -2955,7 +3004,7 @@ function Notification({
               onClick: action.onClick,
               className: cn(
                 "body font-semibold transition-colors",
-                action.variant === "ghost" ? "text-ground-400 hover:text-ground-700" : "text-ground-900 hover:text-ground-600"
+                action.variant === "ghost" ? "text-muted-foreground hover:text-muted-foreground" : "text-foreground hover:text-muted-foreground"
               ),
               children: action.label
             },
@@ -2967,7 +3016,7 @@ function Notification({
           {
             type: "button",
             onClick: onClose,
-            className: "rounded-md text-ground-400 hover:text-ground-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-400/40",
+            className: "rounded-md text-muted-foreground hover:text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30",
             children: [
               /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" }),
               /* @__PURE__ */ jsx(X, { size: 16 })
@@ -2978,6 +3027,7 @@ function Notification({
     }
   );
 }
+Notification.displayName = "Notification";
 function PageHeading({
   title,
   description,
@@ -2987,27 +3037,27 @@ function PageHeading({
   badge,
   className
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("border-b border-ground-100 pb-6", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("border-b border-border pb-6", className), children: [
     breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx("nav", { className: "mb-3 flex items-center gap-1.5", "aria-label": "Breadcrumb", children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React15.Fragment, { children: [
-      i > 0 && /* @__PURE__ */ jsx(ChevronRight, { size: 12, className: "text-ground-300 shrink-0" }),
+      i > 0 && /* @__PURE__ */ jsx(ChevronRight, { size: 12, className: "text-muted-foreground shrink-0" }),
       crumb.href ? /* @__PURE__ */ jsx(
         "a",
         {
           href: crumb.href,
-          className: "caption text-ground-400 hover:text-ground-700 transition-colors",
+          className: "caption text-muted-foreground hover:text-muted-foreground transition-colors",
           children: crumb.label
         }
-      ) : /* @__PURE__ */ jsx("span", { className: "caption font-semibold text-ground-700", children: crumb.label })
+      ) : /* @__PURE__ */ jsx("span", { className: "caption font-semibold text-muted-foreground", children: crumb.label })
     ] }, i)) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx("h1", { className: "display text-ground-900 truncate", children: title }),
+          /* @__PURE__ */ jsx("h1", { className: "display text-foreground truncate", children: title }),
           badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: badge }) : /* @__PURE__ */ jsx(Badge, { variant: badge.variant ?? "secondary", children: badge.label }))
         ] }),
-        description && /* @__PURE__ */ jsx("p", { className: "mt-1.5 body text-ground-400 max-w-2xl", children: description }),
-        meta && meta.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap items-center gap-4", children: meta.map((m, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 caption text-ground-400", children: [
-          m.icon && /* @__PURE__ */ jsx("span", { className: "text-ground-400", children: m.icon }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-1.5 body text-muted-foreground max-w-2xl", children: description }),
+        meta && meta.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap items-center gap-4", children: meta.map((m, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 caption text-muted-foreground", children: [
+          m.icon && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: m.icon }),
           /* @__PURE__ */ jsx("span", { children: m.text })
         ] }, i)) })
       ] }),
@@ -3099,7 +3149,7 @@ var PaginationEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "span",
   {
     "aria-hidden": true,
-    className: cn("flex size-8 items-center justify-center text-ground-400", className),
+    className: cn("flex size-8 items-center justify-center text-muted-foreground", className),
     ...props,
     children: /* @__PURE__ */ jsx(MoreHorizontal, { size: 14 })
   }
@@ -3109,7 +3159,7 @@ var ProgressRoot = React15.forwardRef(({ className, value, ...props }, ref) => /
   Progress.Root,
   {
     ref,
-    className: cn("relative h-2 w-full overflow-hidden rounded-full bg-ground-100", className),
+    className: cn("relative h-2 w-full overflow-hidden rounded-full bg-muted", className),
     value,
     ...props,
     children: /* @__PURE__ */ jsx(
@@ -3143,7 +3193,7 @@ function PropertyRow({
         label !== void 0 && /* @__PURE__ */ jsx(
           "div",
           {
-            className: "caption text-ground-500 shrink-0 select-none",
+            className: "caption text-muted-foreground shrink-0 select-none",
             style: { width: typeof labelWidth === "number" ? `${labelWidth}px` : labelWidth },
             children: label
           }
@@ -3153,6 +3203,7 @@ function PropertyRow({
     }
   );
 }
+PropertyRow.displayName = "PropertyRow";
 function RadioCards({ options, value, onValueChange, columns = 3, className }) {
   const colMap2 = {
     1: "grid-cols-1",
@@ -3174,7 +3225,7 @@ function RadioCards({ options, value, onValueChange, columns = 3, className }) {
           "relative flex cursor-pointer flex-col gap-1 rounded-xl border p-4 text-left transition-all",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
           "disabled:cursor-not-allowed disabled:opacity-50",
-          isSelected ? "border-brand-primary bg-white shadow-natural" : "border-ground-200 bg-white hover:border-ground-400"
+          isSelected ? "border-brand-primary bg-card shadow-natural" : "border-border bg-card hover:border-border"
         ),
         children: [
           isSelected && /* @__PURE__ */ jsx(
@@ -3186,27 +3237,27 @@ function RadioCards({ options, value, onValueChange, columns = 3, className }) {
           ),
           /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
             /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-              option.icon && /* @__PURE__ */ jsx("div", { className: "mb-2 text-ground-500", children: option.icon }),
+              option.icon && /* @__PURE__ */ jsx("div", { className: "mb-2 text-muted-foreground", children: option.icon }),
               /* @__PURE__ */ jsx(
                 "p",
                 {
                   className: cn(
                     "body font-semibold",
-                    isSelected ? "text-ground-900" : "text-ground-800"
+                    isSelected ? "text-foreground" : "text-muted-foreground"
                   ),
                   children: option.label
                 }
               ),
-              option.description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 caption text-ground-400", children: option.description })
+              option.description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 caption text-muted-foreground", children: option.description })
             ] }),
             /* @__PURE__ */ jsx(
               "div",
               {
                 className: cn(
                   "flex size-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
-                  isSelected ? "border-brand-primary bg-brand-primary" : "border-ground-300 bg-white"
+                  isSelected ? "border-brand-primary bg-brand-primary" : "border-border bg-card"
                 ),
-                children: isSelected && /* @__PURE__ */ jsx(Check, { size: 10, className: "text-white", strokeWidth: 3 })
+                children: isSelected && /* @__PURE__ */ jsx(Check, { size: 10, className: "text-background", strokeWidth: 3 })
               }
             )
           ] }),
@@ -3215,7 +3266,7 @@ function RadioCards({ options, value, onValueChange, columns = 3, className }) {
             {
               className: cn(
                 "caption font-semibold mt-2",
-                isSelected ? "text-ground-900" : "text-ground-400"
+                isSelected ? "text-foreground" : "text-muted-foreground"
               ),
               children: option.meta
             }
@@ -3226,6 +3277,7 @@ function RadioCards({ options, value, onValueChange, columns = 3, className }) {
     );
   }) });
 }
+RadioCards.displayName = "RadioCards";
 var RadioGroupRoot = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadioGroup.Root, { ref, className: cn("grid gap-2", className), ...props }));
 RadioGroupRoot.displayName = "RadioGroup";
 var RadioGroupItem = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -3233,15 +3285,15 @@ var RadioGroupItem = React15.forwardRef(({ className, ...props }, ref) => /* @__
   {
     ref,
     className: cn(
-      "aspect-square size-4 rounded-full border border-ground-300 text-ground-900",
+      "aspect-square size-4 rounded-full border border-border text-foreground",
       "shadow-none transition-colors",
-      "focus:outline-none focus-visible:ring-2 focus-visible:ring-ground-900/20",
+      "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/20",
       "disabled:cursor-not-allowed disabled:opacity-50",
-      "data-[state=checked]:bg-ground-900 data-[state=checked]:border-ground-900",
+      "data-[state=checked]:bg-foreground data-[state=checked]:border-foreground",
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx(RadioGroup.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "size-2 rounded-full bg-white" }) })
+    children: /* @__PURE__ */ jsx(RadioGroup.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "size-2 rounded-full bg-card" }) })
   }
 ));
 RadioGroupItem.displayName = "RadioGroupItem";
@@ -3272,7 +3324,7 @@ function ResizableHandle({ className, withHandle = true, ...props }) {
     Separator$1,
     {
       className: cn(
-        "relative flex shrink-0 items-center justify-center bg-ground-100",
+        "relative flex shrink-0 items-center justify-center bg-muted",
         "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-primary/50",
         // Horizontal (default): vertical bar
         "[&:not([aria-orientation=vertical])]:h-full [&:not([aria-orientation=vertical])]:w-px",
@@ -3286,7 +3338,7 @@ function ResizableHandle({ className, withHandle = true, ...props }) {
         className
       ),
       ...props,
-      children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-10 flex h-5 w-3 items-center justify-center rounded-sm border border-ground-100 bg-white shadow-natural", children: /* @__PURE__ */ jsx(GripVertical, { size: 10, className: "text-ground-400" }) })
+      children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-10 flex h-5 w-3 items-center justify-center rounded-sm border border-border bg-card shadow-natural", children: /* @__PURE__ */ jsx(GripVertical, { size: 10, className: "text-muted-foreground" }) })
     }
   );
 }
@@ -3310,7 +3362,7 @@ var ScrollAreaScrollbar = React15.forwardRef(({ className, orientation = "vertic
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx(ScrollArea.Thumb, { className: "relative flex-1 rounded-full bg-ground-200 hover:bg-ground-300 transition-colors" })
+    children: /* @__PURE__ */ jsx(ScrollArea.Thumb, { className: "relative flex-1 rounded-full bg-muted hover:bg-muted transition-colors" })
   }
 ));
 ScrollAreaScrollbar.displayName = "ScrollAreaScrollbar";
@@ -3326,13 +3378,13 @@ function SectionHeading({
     {
       className: cn(
         "flex flex-col gap-1 pb-4 sm:flex-row sm:items-start sm:justify-between",
-        border && "border-b border-ground-100",
+        border && "border-b border-border",
         className
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("h2", { className: "heading text-ground-900 truncate", children: title }),
-          description && /* @__PURE__ */ jsx("p", { className: "mt-1 body text-ground-400", children: description })
+          /* @__PURE__ */ jsx("h2", { className: "heading text-foreground truncate", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "mt-1 body text-muted-foreground", children: description })
         ] }),
         actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2 pt-1", children: actions.map(
           (action, i) => action.href ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: action.variant ?? "default", asChild: true, children: /* @__PURE__ */ jsx("a", { href: action.href, children: action.label }) }, i) : /* @__PURE__ */ jsx(
@@ -3358,18 +3410,18 @@ var SelectTrigger = React15.forwardRef(({ className, children, ...props }, ref)
   {
     ref,
     className: cn(
-      "flex h-9 w-full items-center justify-between rounded-xl bg-white px-3 py-2",
-      "body text-ground-900 shadow-natural",
-      "focus:outline-none focus:ring-2 focus:ring-ground-900/15",
+      "flex h-9 w-full items-center justify-between rounded-xl bg-card px-3 py-2",
+      "body text-foreground shadow-natural",
+      "focus:outline-none focus:ring-2 focus:ring-ring/20",
       "disabled:opacity-50 disabled:cursor-not-allowed",
-      "data-[placeholder]:text-ground-400",
+      "data-[placeholder]:text-muted-foreground",
       "[&>span]:line-clamp-1",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(Select.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { size: 15, className: "text-ground-400 shrink-0" }) })
+      /* @__PURE__ */ jsx(Select.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { size: 15, className: "text-muted-foreground shrink-0" }) })
     ]
   }
 ));
@@ -3380,7 +3432,7 @@ var SelectContent = React15.forwardRef(({ className, children, position = "poppe
     ref,
     className: cn(
       "relative z-50 max-h-96 min-w-[8rem] overflow-hidden",
-      "bg-white rounded-xl shadow-natural p-1",
+      "bg-card rounded-xl shadow-natural p-1",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -3391,7 +3443,7 @@ var SelectContent = React15.forwardRef(({ className, children, position = "poppe
     position,
     ...props,
     children: [
-      /* @__PURE__ */ jsx(Select.ScrollUpButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsx(ChevronUp, { size: 14, className: "text-ground-400" }) }),
+      /* @__PURE__ */ jsx(Select.ScrollUpButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsx(ChevronUp, { size: 14, className: "text-muted-foreground" }) }),
       /* @__PURE__ */ jsx(
         Select.Viewport,
         {
@@ -3401,7 +3453,7 @@ var SelectContent = React15.forwardRef(({ className, children, position = "poppe
           children
         }
       ),
-      /* @__PURE__ */ jsx(Select.ScrollDownButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsx(ChevronDown, { size: 14, className: "text-ground-400" }) })
+      /* @__PURE__ */ jsx(Select.ScrollDownButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsx(ChevronDown, { size: 14, className: "text-muted-foreground" }) })
     ]
   }
 ) }));
@@ -3412,14 +3464,14 @@ var SelectItem = React15.forwardRef(({ className, children, ...props }, ref) =>
     ref,
     className: cn(
       "relative flex w-full cursor-default select-none items-center rounded-md px-2.5 py-1.5",
-      "body text-ground-700 outline-none",
-      "focus:bg-ground-50 focus:text-ground-900",
+      "body text-muted-foreground outline-none",
+      "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(Select.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 13, className: "text-ground-900" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(Select.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 13, className: "text-foreground" }) }) }),
       /* @__PURE__ */ jsx(Select.ItemText, { children })
     ]
   }
@@ -3429,12 +3481,12 @@ var SelectLabel = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
   Select.Label,
   {
     ref,
-    className: cn("px-2.5 py-1 label text-ground-400", className),
+    className: cn("px-2.5 py-1 label text-muted-foreground", className),
     ...props
   }
 ));
 SelectLabel.displayName = "SelectLabel";
-var SelectSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Select.Separator, { ref, className: cn("mx-1 my-1 h-px bg-ground-100", className), ...props }));
+var SelectSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Select.Separator, { ref, className: cn("mx-1 my-1 h-px bg-muted", className), ...props }));
 SelectSeparator.displayName = "SelectSeparator";
 var Separator2 = React15.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
   Separator.Root,
@@ -3443,7 +3495,7 @@ var Separator2 = React15.forwardRef(({ className, orientation = "horizontal", de
     decorative,
     orientation,
     className: cn(
-      "shrink-0 bg-ground-100",
+      "shrink-0 bg-muted",
       orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
       className
     ),
@@ -3470,7 +3522,7 @@ var SheetOverlay = React15.forwardRef(({ className, ...props }, ref) => /* @__PU
 SheetOverlay.displayName = "SheetOverlay";
 var sheetContentVariants = cva(
   [
-    "fixed z-50 bg-white shadow-elevated p-6",
+    "fixed z-50 bg-card shadow-elevated p-6",
     "data-[state=open]:animate-in data-[state=closed]:animate-out",
     "transition ease-in-out duration-300"
   ],
@@ -3499,7 +3551,7 @@ var SheetContent = React15.forwardRef(
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsxs(Dialog.Close, { className: "absolute right-4 top-4 rounded-md p-1 text-ground-400 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ground-900/20", children: [
+          /* @__PURE__ */ jsxs(Dialog.Close, { className: "absolute right-4 top-4 rounded-md p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring/20", children: [
             /* @__PURE__ */ jsx(X, { size: 16 }),
             /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
           ] })
@@ -3521,12 +3573,12 @@ var SheetTitle = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE
   Dialog.Title,
   {
     ref,
-    className: cn("body-lg font-semibold text-ground-900", className),
+    className: cn("body-lg font-semibold text-foreground", className),
     ...props
   }
 ));
 SheetTitle.displayName = "SheetTitle";
-var SheetDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog.Description, { ref, className: cn("body text-ground-500", className), ...props }));
+var SheetDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog.Description, { ref, className: cn("body text-muted-foreground", className), ...props }));
 SheetDescription.displayName = "SheetDescription";
 function TooltipProvider({
   children,
@@ -3542,7 +3594,7 @@ var TooltipContent = React15.forwardRef(({ className, sideOffset = 4, ...props }
     ref,
     sideOffset,
     className: cn(
-      "z-50 rounded-lg bg-ground-900 px-2.5 py-1.5 caption text-white",
+      "z-50 rounded-lg bg-foreground px-2.5 py-1.5 caption text-background",
       "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-1 data-[side=top]:slide-in-from-bottom-1",
@@ -3625,7 +3677,7 @@ function Sidebar({
         "data-variant": variant,
         "data-collapsible": "none",
         className: cn(
-          "flex flex-col h-svh bg-white border-r border-ground-100 w-(--sidebar-width)",
+          "flex flex-col h-svh bg-card border-r border-border w-(--sidebar-width)",
           side === "right" && "border-r-0 border-l",
           className
         ),
@@ -3643,7 +3695,7 @@ function Sidebar({
         "data-variant": variant,
         "data-collapsible": "offcanvas",
         className: cn(
-          "group peer flex flex-col h-svh bg-white border-r border-ground-100",
+          "group peer flex flex-col h-svh bg-card border-r border-border",
           "transition-[width,transform] duration-200 ease-linear",
           "data-[state=expanded]:w-(--sidebar-width) data-[state=collapsed]:w-0 data-[state=collapsed]:-translate-x-full",
           side === "right" && "border-r-0 border-l data-[state=collapsed]:translate-x-full",
@@ -3662,7 +3714,7 @@ function Sidebar({
       "data-variant": variant,
       "data-collapsible": "icon",
       className: cn(
-        "group peer hidden md:flex flex-col h-svh bg-white border-r border-ground-100",
+        "group peer hidden md:flex flex-col h-svh bg-card border-r border-border",
         "transition-[width] duration-200 ease-linear overflow-hidden",
         "data-[state=expanded]:w-(--sidebar-width) data-[state=collapsed]:w-(--sidebar-width-icon)",
         side === "right" && "border-r-0 border-l",
@@ -3723,7 +3775,7 @@ function SidebarInset({ className, ...props }) {
     "main",
     {
       "data-sidebar": "inset",
-      className: cn("relative flex min-h-svh flex-1 flex-col bg-white overflow-hidden", className),
+      className: cn("relative flex min-h-svh flex-1 flex-col bg-card overflow-hidden", className),
       ...props
     }
   );
@@ -3733,7 +3785,7 @@ function SidebarHeader({ className, ...props }) {
     "div",
     {
       "data-sidebar": "header",
-      className: cn("flex flex-col gap-2 p-3 border-b border-ground-100", className),
+      className: cn("flex flex-col gap-2 p-3 border-b border-border", className),
       ...props
     }
   );
@@ -3753,7 +3805,7 @@ function SidebarFooter({ className, ...props }) {
     "div",
     {
       "data-sidebar": "footer",
-      className: cn("flex flex-col gap-2 p-3 border-t border-ground-100", className),
+      className: cn("flex flex-col gap-2 p-3 border-t border-border", className),
       ...props
     }
   );
@@ -3763,7 +3815,7 @@ function SidebarSeparator({ className, ...props }) {
     Separator2,
     {
       "data-sidebar": "separator",
-      className: cn("mx-2 my-1 bg-ground-100", className),
+      className: cn("mx-2 my-1 bg-muted", className),
       ...props
     }
   );
@@ -3789,8 +3841,8 @@ function SidebarGroupLabel({
     {
       "data-sidebar": "group-label",
       className: cn(
-        "flex h-8 shrink-0 items-center rounded-md px-2 label text-ground-400",
-        "outline-none ring-ground-900 transition-[margin,opacity] duration-200 ease-linear",
+        "flex h-8 shrink-0 items-center rounded-md px-2 label text-muted-foreground",
+        "outline-none ring-ring transition-[margin,opacity] duration-200 ease-linear",
         "group-data-[state=collapsed]/sidebar-wrapper:opacity-0",
         "group-data-[state=collapsed]/sidebar-wrapper:h-0",
         "group-data-[state=collapsed]/sidebar-wrapper:m-0",
@@ -3817,7 +3869,7 @@ function SidebarGroupAction({
       "data-sidebar": "group-action",
       className: cn(
         "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center",
-        "rounded-md text-ground-400 hover:bg-ground-100 hover:text-ground-900",
+        "rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
         "outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
         className
       ),
@@ -3857,11 +3909,11 @@ function SidebarMenuButton({
       className: cn(
         // Base
         "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 body-sm text-left",
-        "outline-none ring-ground-900",
+        "outline-none ring-ring",
         "transition-[width,height,padding] duration-150",
-        "hover:bg-ground-100 hover:text-ground-900",
+        "hover:bg-muted hover:text-foreground",
         "focus-visible:ring-2 focus-visible:ring-brand-primary/30",
-        "active:bg-ground-100",
+        "active:bg-muted",
         "disabled:pointer-events-none disabled:opacity-50",
         "[&>svg]:size-4 [&>svg]:shrink-0",
         // Size variants
@@ -3913,7 +3965,7 @@ function SidebarMenuAction({
       "data-sidebar": "menu-action",
       className: cn(
         "absolute right-1 top-1/2 -translate-y-1/2 flex aspect-square w-5 items-center justify-center",
-        "rounded-md text-ground-400 hover:bg-ground-100 hover:text-ground-900",
+        "rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
         "outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
         showOnHover && [
           "opacity-0 transition-opacity",
@@ -3934,7 +3986,7 @@ function SidebarMenuBadge({ className, ...props }) {
       "data-sidebar": "menu-badge",
       className: cn(
         "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-full",
-        "caption font-medium bg-ground-100 text-ground-700 px-1",
+        "caption font-medium bg-muted text-muted-foreground px-1",
         "group-data-[state=collapsed]/sidebar-wrapper:hidden",
         className
       ),
@@ -3957,11 +4009,11 @@ function SidebarMenuSkeleton({
       className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
       ...props,
       children: [
-        showIcon && /* @__PURE__ */ jsx("div", { className: "size-4 shrink-0 rounded-md bg-ground-200 animate-pulse" }),
+        showIcon && /* @__PURE__ */ jsx("div", { className: "size-4 shrink-0 rounded-md bg-muted animate-pulse" }),
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "h-4 max-w-(--skeleton-width) flex-1 rounded-md bg-ground-200 animate-pulse",
+            className: "h-4 max-w-(--skeleton-width) flex-1 rounded-md bg-muted animate-pulse",
             style: { "--skeleton-width": width }
           }
         )
@@ -3975,7 +4027,7 @@ function SidebarMenuSub({ className, ...props }) {
     {
       "data-sidebar": "menu-sub",
       className: cn(
-        "mx-3.5 flex min-w-0 flex-col gap-1 border-l border-ground-100 pl-3",
+        "mx-3.5 flex min-w-0 flex-col gap-1 border-l border-border pl-3",
         "group-data-[state=collapsed]/sidebar-wrapper:hidden",
         className
       ),
@@ -4007,9 +4059,9 @@ function SidebarMenuSubButton({
       "data-active": isActive,
       className: cn(
         "flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-md px-2",
-        "body text-ground-500 outline-none",
+        "body text-muted-foreground outline-none",
         "transition-colors duration-150",
-        "hover:text-ground-900 hover:bg-ground-100",
+        "hover:text-foreground hover:bg-muted",
         "focus-visible:ring-2 focus-visible:ring-brand-primary/30",
         "disabled:pointer-events-none disabled:opacity-50",
         "[&>svg]:size-3.5 [&>svg]:shrink-0",
@@ -4025,7 +4077,7 @@ function Skeleton({ className, ...props }) {
     "div",
     {
       "data-slot": "skeleton",
-      className: cn("animate-pulse rounded-md bg-ground-100", className),
+      className: cn("animate-pulse rounded-md bg-muted", className),
       ...props
     }
   );
@@ -4037,8 +4089,8 @@ var SliderRoot = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE
     className: cn("relative flex w-full touch-none select-none items-center", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx(Slider.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-ground-100", children: /* @__PURE__ */ jsx(Slider.Range, { className: "absolute h-full bg-brand-primary" }) }),
-      /* @__PURE__ */ jsx(Slider.Thumb, { className: "block size-4 rounded-full border-2 border-brand-primary bg-white shadow-natural transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30 disabled:pointer-events-none disabled:opacity-50" })
+      /* @__PURE__ */ jsx(Slider.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(Slider.Range, { className: "absolute h-full bg-brand-primary" }) }),
+      /* @__PURE__ */ jsx(Slider.Thumb, { className: "block size-4 rounded-full border-2 border-brand-primary bg-card shadow-natural transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30 disabled:pointer-events-none disabled:opacity-50" })
     ]
   }
 ));
@@ -4051,14 +4103,14 @@ function Toaster({ ...props }) {
       className: "toaster group",
       toastOptions: {
         classNames: {
-          toast: "group toast font-sans text-sm group-[.toaster]:bg-white group-[.toaster]:text-ground-900 group-[.toaster]:border group-[.toaster]:border-ground-100 group-[.toaster]:shadow-elevated group-[.toaster]:rounded-xl",
-          description: "group-[.toast]:text-ground-500 group-[.toast]:text-xs",
-          actionButton: "group-[.toast]:bg-brand-primary group-[.toast]:text-white group-[.toast]:rounded-md group-[.toast]:text-xs group-[.toast]:font-medium",
-          cancelButton: "group-[.toast]:bg-ground-100 group-[.toast]:text-ground-600 group-[.toast]:rounded-md group-[.toast]:text-xs group-[.toast]:font-medium",
-          success: "group-[.toaster]:border-brand-secondary/40 group-[.toaster]:text-ground-900",
-          error: "group-[.toaster]:bg-red-50 group-[.toaster]:text-red-700 group-[.toaster]:border-red-200",
-          warning: "group-[.toaster]:bg-yellow-50 group-[.toaster]:text-yellow-800 group-[.toaster]:border-yellow-200",
-          info: "group-[.toaster]:border-ground-200"
+          toast: "group toast font-sans text-sm group-[.toaster]:bg-card group-[.toaster]:text-foreground group-[.toaster]:border group-[.toaster]:border-border group-[.toaster]:shadow-elevated group-[.toaster]:rounded-xl",
+          description: "group-[.toast]:text-muted-foreground group-[.toast]:text-xs",
+          actionButton: "group-[.toast]:bg-brand-primary group-[.toast]:text-background group-[.toast]:rounded-md group-[.toast]:text-xs group-[.toast]:font-medium",
+          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground group-[.toast]:rounded-md group-[.toast]:text-xs group-[.toast]:font-medium",
+          success: "group-[.toaster]:border-brand-secondary/40 group-[.toaster]:text-foreground",
+          error: "group-[.toaster]:bg-destructive/10 group-[.toaster]:text-destructive group-[.toaster]:border-destructive/20",
+          warning: "group-[.toaster]:bg-warning group-[.toaster]:text-warning-foreground group-[.toaster]:border-warning/40",
+          info: "group-[.toaster]:border-border"
         }
       },
       ...props
@@ -4099,9 +4151,9 @@ function StackedList({ children, divided = true, bordered = true, className }) {
     {
       role: "list",
       className: cn(
-        "overflow-hidden rounded-xl bg-white",
-        bordered && "border border-ground-100 shadow-natural",
-        divided && "divide-y divide-ground-100",
+        "overflow-hidden rounded-xl bg-card",
+        bordered && "border border-border shadow-natural",
+        divided && "divide-y divide-border",
         className
       ),
       children
@@ -4111,14 +4163,14 @@ function StackedList({ children, divided = true, bordered = true, className }) {
 function StackedListItem({ children, href, onClick, className }) {
   const inner = /* @__PURE__ */ jsx("div", { className: cn("px-4 py-3.5", className), children });
   if (href) {
-    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href, className: "block hover:bg-ground-50 transition-colors", children: inner }) });
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href, className: "block hover:bg-muted transition-colors", children: inner }) });
   }
   if (onClick) {
     return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        className: "w-full text-left hover:bg-ground-50 transition-colors",
+        className: "w-full text-left hover:bg-muted transition-colors",
         onClick,
         children: inner
       }
@@ -4128,21 +4180,21 @@ function StackedListItem({ children, href, onClick, className }) {
 }
 function StatCard({ label, value, trend, icon, className }) {
   const trendColor = {
-    up: "text-ground-800 bg-brand-secondary/30 rounded-full px-2 py-0.5 w-fit",
-    down: "text-red-600",
-    neutral: "text-ground-400"
+    up: "text-muted-foreground bg-brand-secondary/30 rounded-full px-2 py-0.5 w-fit",
+    down: "text-destructive",
+    neutral: "text-muted-foreground"
   };
   const TrendIcon = {
     up: TrendingUp,
     down: TrendingDown,
     neutral: Minus
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-xl border border-ground-100 bg-white p-5", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-xl border border-border bg-card p-5", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
-      /* @__PURE__ */ jsx("p", { className: "label text-ground-400", children: label }),
-      icon && /* @__PURE__ */ jsx("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-ground-50 text-ground-400", children: icon })
+      /* @__PURE__ */ jsx("p", { className: "label text-muted-foreground", children: label }),
+      icon && /* @__PURE__ */ jsx("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground", children: icon })
     ] }),
-    /* @__PURE__ */ jsx("p", { className: "heading-xl mt-2 text-ground-900", children: value }),
+    /* @__PURE__ */ jsx("p", { className: "heading-xl mt-2 text-foreground", children: value }),
     trend && (() => {
       const Icon = TrendIcon[trend.direction];
       return /* @__PURE__ */ jsxs("div", { className: cn("mt-2 flex items-center gap-1", trendColor[trend.direction]), children: [
@@ -4152,6 +4204,7 @@ function StatCard({ label, value, trend, icon, className }) {
     })()
   ] });
 }
+StatCard.displayName = "StatCard";
 function CirclesSteps({ steps, className }) {
   return /* @__PURE__ */ jsx("nav", { "aria-label": "Progress", className, children: /* @__PURE__ */ jsx("ol", { role: "list", className: "flex items-center", children: steps.map((step, i) => {
     const isLast = i === steps.length - 1;
@@ -4161,7 +4214,7 @@ function CirclesSteps({ steps, className }) {
         {
           className: cn(
             "h-full",
-            step.status === "complete" ? "bg-brand-primary" : "bg-ground-200"
+            step.status === "complete" ? "bg-brand-primary" : "bg-muted"
           )
         }
       ) }),
@@ -4178,10 +4231,10 @@ function CirclesSteps({ steps, className }) {
                 className: cn(
                   "relative z-10 flex size-8 items-center justify-center rounded-full transition-colors",
                   step.status === "complete" && "bg-brand-primary group-hover:bg-brand-primary/80",
-                  step.status === "current" && "border-2 border-brand-primary bg-white",
-                  step.status === "upcoming" && "border-2 border-ground-300 bg-white group-hover:border-ground-400"
+                  step.status === "current" && "border-2 border-brand-primary bg-card",
+                  step.status === "upcoming" && "border-2 border-border bg-card group-hover:border-border"
                 ),
-                children: step.status === "complete" ? /* @__PURE__ */ jsx(Check, { size: 14, className: "text-white", strokeWidth: 2.5 }) : step.status === "current" ? /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-brand-primary" }) : /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-transparent group-hover:bg-ground-300" })
+                children: step.status === "complete" ? /* @__PURE__ */ jsx(Check, { size: 14, className: "text-background", strokeWidth: 2.5 }) : step.status === "current" ? /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-brand-primary" }) : /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-transparent group-hover:bg-muted" })
               }
             ),
             /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-center", children: [
@@ -4190,12 +4243,12 @@ function CirclesSteps({ steps, className }) {
                 {
                   className: cn(
                     "caption font-semibold",
-                    step.status === "upcoming" ? "text-ground-400" : "text-ground-900"
+                    step.status === "upcoming" ? "text-muted-foreground" : "text-foreground"
                   ),
                   children: step.name
                 }
               ),
-              step.description && /* @__PURE__ */ jsx("span", { className: "caption text-ground-400", children: step.description })
+              step.description && /* @__PURE__ */ jsx("span", { className: "caption text-muted-foreground", children: step.description })
             ] })
           ]
         }
@@ -4206,7 +4259,7 @@ function CirclesSteps({ steps, className }) {
 function BulletsSteps({ steps, className }) {
   const currentIdx = steps.findIndex((s) => s.status === "current");
   return /* @__PURE__ */ jsxs("nav", { className: cn("flex items-center gap-4", className), "aria-label": "Progress", children: [
-    /* @__PURE__ */ jsxs("p", { className: "body font-medium text-ground-700", children: [
+    /* @__PURE__ */ jsxs("p", { className: "body font-medium text-muted-foreground", children: [
       "Step ",
       currentIdx + 1,
       " of ",
@@ -4222,24 +4275,24 @@ function BulletsSteps({ steps, className }) {
           "span",
           {
             className: "block size-2.5 rounded-full bg-brand-primary hover:bg-brand-primary/80 transition-colors",
-            title: step.name
+            "aria-label": `${step.name}: completed`
           }
         ) : step.status === "current" ? /* @__PURE__ */ jsxs(
           "span",
           {
             className: "relative flex size-4 items-center justify-center",
             "aria-current": "step",
+            "aria-label": `${step.name}: current step`,
             children: [
               /* @__PURE__ */ jsx("span", { className: "absolute size-4 rounded-full bg-brand-primary/20" }),
-              /* @__PURE__ */ jsx("span", { className: "relative size-2.5 rounded-full bg-brand-primary" }),
-              /* @__PURE__ */ jsx("span", { className: "sr-only", children: step.name })
+              /* @__PURE__ */ jsx("span", { className: "relative size-2.5 rounded-full bg-brand-primary" })
             ]
           }
         ) : /* @__PURE__ */ jsx(
           "span",
           {
-            className: "block size-2.5 rounded-full bg-ground-200 hover:bg-ground-300 transition-colors",
-            title: step.name
+            className: "block size-2.5 rounded-full bg-muted hover:bg-muted transition-colors",
+            "aria-label": `${step.name}: upcoming`
           }
         )
       }
@@ -4251,7 +4304,7 @@ function ProgressSteps({ steps, className }) {
   const currentIdx = steps.findIndex((s) => s.status === "current");
   const progress = (completeCount + (currentIdx >= 0 ? 0.5 : 0)) / steps.length * 100;
   return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-ground-100", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
       "div",
       {
         className: "h-full rounded-full bg-brand-primary transition-all duration-500",
@@ -4266,7 +4319,7 @@ function ProgressSteps({ steps, className }) {
           className: cn(
             "caption font-medium",
             i === 0 ? "text-left" : isLast ? "text-right" : "text-center",
-            step.status === "upcoming" ? "text-ground-400" : "text-ground-900"
+            step.status === "upcoming" ? "text-muted-foreground" : "text-foreground"
           ),
           children: step.name
         },
@@ -4281,6 +4334,7 @@ function Steps({ steps, variant = "circles", className }) {
   if (variant === "progress") return /* @__PURE__ */ jsx(ProgressSteps, { steps, ...classNameProp });
   return /* @__PURE__ */ jsx(CirclesSteps, { steps, ...classNameProp });
 }
+Steps.displayName = "Steps";
 var SwitchRoot = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Switch.Root,
   {
@@ -4290,7 +4344,7 @@ var SwitchRoot = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE
       "border-2 border-transparent transition-colors",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
       "disabled:cursor-not-allowed disabled:opacity-50",
-      "data-[state=unchecked]:bg-ground-200 data-[state=checked]:bg-brand-primary",
+      "data-[state=unchecked]:bg-muted data-[state=checked]:bg-brand-primary",
       className
     ),
     ...props,
@@ -4298,7 +4352,7 @@ var SwitchRoot = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE
       Switch.Thumb,
       {
         className: cn(
-          "pointer-events-none block size-4 rounded-full bg-white shadow-natural",
+          "pointer-events-none block size-4 rounded-full bg-card shadow-natural",
           "transition-transform data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-4"
         )
       }
@@ -4312,7 +4366,7 @@ var TabsList = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   Tabs.List,
   {
     ref,
-    className: cn("inline-flex items-center gap-1 border-b border-ground-100 w-full", className),
+    className: cn("inline-flex items-center gap-1 border-b border-border w-full", className),
     ...props
   }
 ));
@@ -4322,7 +4376,7 @@ var TabsTrigger = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "px-0 pb-2.5 body font-medium text-ground-400",
+      "px-0 pb-2.5 body font-medium text-muted-foreground",
       "border-b-2 border-transparent -mb-px",
       "transition-colors cursor-pointer",
       "data-[state=active]:text-brand-primary data-[state=active]:border-brand-primary",
@@ -4342,11 +4396,11 @@ function Textarea({ className, ...props }) {
     {
       "data-slot": "textarea",
       className: cn(
-        "flex min-h-[80px] w-full rounded-md border border-ground-200 bg-white px-3 py-2",
-        "body text-ground-900 placeholder:text-ground-400",
+        "flex min-h-[80px] w-full rounded-md border border-border bg-card px-3 py-2",
+        "body text-foreground placeholder:text-muted-foreground",
         "resize-none transition-colors duration-150",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-900/15 focus-visible:border-ground-400",
-        "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-ground-50",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20 focus-visible:border-border",
+        "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted",
         className
       ),
       ...props
@@ -4366,19 +4420,19 @@ var toggleVariants = cva(
     variants: {
       variant: {
         default: [
-          "bg-transparent text-ground-600",
-          "hover:bg-ground-100 hover:text-ground-900",
-          "data-[state=on]:bg-ground-100 data-[state=on]:text-ground-900"
+          "bg-transparent text-muted-foreground",
+          "hover:bg-muted hover:text-foreground",
+          "data-[state=on]:bg-muted data-[state=on]:text-foreground"
         ],
         outline: [
-          "border border-ground-200 bg-white text-ground-600 shadow-natural",
-          "hover:bg-ground-50 hover:text-ground-900",
-          "data-[state=on]:bg-ground-100 data-[state=on]:text-ground-900 data-[state=on]:border-ground-300"
+          "border border-border bg-card text-muted-foreground shadow-natural",
+          "hover:bg-muted hover:text-foreground",
+          "data-[state=on]:bg-muted data-[state=on]:text-foreground data-[state=on]:border-border"
         ],
         brand: [
-          "bg-transparent text-ground-600",
-          "hover:bg-ground-100 hover:text-ground-900",
-          "data-[state=on]:bg-brand-primary data-[state=on]:text-white"
+          "bg-transparent text-muted-foreground",
+          "hover:bg-muted hover:text-foreground",
+          "data-[state=on]:bg-brand-primary data-[state=on]:text-background"
         ]
       },
       size: {