luaniverse 4.2.4 → 4.2.6

package/dist/index.js

@@ -134,62 +134,55 @@ var LogoSpinner = ({
 var buttonVariants = cva(
   [
     "lua:flex lua:items-center lua:justify-center lua:rounded-full lua:font-onest lua:font-semibold lua:leading-5 lua:transition-all lua:focus-visible:outline-hidden lua:gap-2 lua:cursor-pointer",
-    "lua:disabled:pointer-events-none lua:disabled:bg-black/4 lua:disabled:text-black/16 lua:disabled:border-transparent",
-    "lua:focus-visible:ring-2 lua:focus-visible:ring-offset-2 lua:focus-visible:ring-offset-white"
+    "lua:disabled:pointer-events-none lua:disabled:opacity-50",
+    "lua:focus-visible:ring-2 lua:focus-visible:ring-offset-2 lua:focus-visible:ring-ring"
   ].join(" "),
   {
     variants: {
       variant: {
         default: [
-          "lua:bg-black lua:text-white",
-          "lua:hover:bg-black-hover",
-          "lua:active:bg-black-hover",
-          "lua:focus-visible:bg-black lua:focus-visible:ring-black"
+          "lua:bg-default lua:text-default-foreground",
+          "lua:hover:bg-default-hover",
+          "lua:active:bg-default-active"
         ].join(" "),
         primary: [
-          "lua:bg-blue-600 lua:text-white",
-          "lua:hover:bg-blue-700",
-          "lua:active:bg-blue-800",
-          "lua:focus-visible:bg-blue-600 lua:focus-visible:ring-blue-600"
+          "lua:bg-primary lua:text-primary-foreground",
+          "lua:hover:bg-primary-hover",
+          "lua:active:bg-primary-active"
         ].join(" "),
         outline: [
-          "lua:border lua:border-blue-600 lua:bg-white lua:text-blue-600",
-          "lua:hover:bg-blue-600 lua:hover:text-white",
-          "lua:active:bg-blue-600 lua:active:text-white",
-          "lua:focus-visible:ring-blue-600"
+          "lua:border lua:border-primary lua:bg-card lua:text-primary",
+          "lua:hover:bg-primary lua:hover:text-primary-foreground lua:hover:border-primary",
+          "lua:active:bg-primary-hover lua:active:border-primary-hover"
         ].join(" "),
         tertiary: [
-          "lua:bg-white lua:border lua:border-neutral-400 lua:text-gray-900",
-          "lua:hover:bg-neutral-200",
-          "lua:active:bg-neutral-300",
-          "lua:focus-visible:bg-neutral-100 lua:focus-visible:border-neutral-500 lua:focus-visible:ring-black"
+          "lua:bg-card lua:border lua:border-border lua:text-card-foreground",
+          "lua:hover:bg-secondary",
+          "lua:active:bg-secondary-hover"
         ].join(" "),
         secondary: [
-          "lua:bg-gray-100 lua:text-gray-900",
-          "lua:hover:bg-gray-200",
-          "lua:active:bg-gray-300",
-          "lua:focus-visible:bg-gray-100 lua:focus-visible:ring-black"
+          "lua:bg-secondary lua:text-secondary-foreground",
+          "lua:hover:bg-secondary-hover",
+          "lua:active:bg-secondary-active"
         ].join(" "),
         muted: [
-          "lua:bg-transparent lua:text-gray-700",
-          "lua:hover:bg-neutral-200",
-          "lua:active:bg-neutral-600",
-          "lua:focus-visible:bg-white lua:focus-visible:ring-black"
+          "lua:bg-transparent lua:text-muted-foreground",
+          "lua:hover:bg-muted",
+          "lua:active:bg-secondary"
         ].join(" "),
         destructive: [
-          "lua:bg-red-600 lua:text-white",
-          "lua:hover:bg-red-700",
-          "lua:active:bg-red-800",
-          "lua:focus-visible:bg-red-600 lua:focus-visible:ring-red-600"
+          "lua:bg-destructive lua:text-destructive-foreground",
+          "lua:hover:bg-destructive-hover",
+          "lua:active:bg-destructive-active"
         ].join(" ")
       },
       size: {
-        small: "lua:h-6 lua:px-3 lua:text-xs sm:lua:text-sm",
-        // 12px mobile, 14px larger screens
-        default: "lua:h-8 lua:px-3 lua:text-sm sm:lua:text-base",
-        // 14px mobile, 16px larger screens
-        large: "lua:h-10 lua:px-4 lua:text-base sm:lua:text-lg"
-        // 16px mobile, 18px larger screens
+        small: "lua:h-6 lua:px-3 lua:text-xs",
+        // 12px
+        default: "lua:h-8 lua:px-3 lua:text-sm",
+        // 14px
+        large: "lua:h-10 lua:px-4 lua:text-base"
+        // 16px
       },
       hasStartAdornment: {
         true: "lua:pl-2"
@@ -359,14 +352,14 @@ var Input = React121.forwardRef(
         {
           htmlFor: inputId,
           className: cn(
-            "lua:block lua:text-sm lua:font-medium lua:mb-2 lua:text-gray-900",
-            disabled && "lua:text-gray-600 lua:cursor-not-allowed"
+            "lua:block lua:text-sm lua:font-medium lua:mb-2 lua:text-foreground",
+            disabled && "lua:text-muted-foreground lua:cursor-not-allowed"
           ),
           children: label
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "lua:relative", children: [
-        hasStartAdornment && /* @__PURE__ */ jsx("div", { className: "lua:absolute lua:left-3 lua:top-1/2 lua:-translate-y-1/2 lua:flex lua:items-center lua:pointer-events-none lua:text-gray-500", children: startAdornment }),
+        hasStartAdornment && /* @__PURE__ */ jsx("div", { className: "lua:absolute lua:left-3 lua:top-1/2 lua:-translate-y-1/2 lua:flex lua:items-center lua:pointer-events-none lua:text-muted-foreground", children: startAdornment }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -374,36 +367,36 @@ var Input = React121.forwardRef(
             id: inputId,
             className: cn(
               // Base styles
-              "lua:flex lua:h-10 lua:w-full lua:rounded-md lua:border lua:bg-transparent lua:px-3 lua:py-2 lua:text-base lua:transition-all lua:duration-200",
-              "file:lua:border-0 file:lua:bg-transparent file:lua:text-sm file:lua:font-medium file:lua:text-gray-900",
-              "placeholder:lua:text-gray-500",
-              "focus-visible:lua:outline-hidden focus-visible:lua:ring-2 focus-visible:lua:ring-offset-2 focus-visible:lua:ring-offset-white",
+              "lua:flex lua:h-10 lua:w-full lua:rounded-md lua:border lua:bg-card lua:px-3 lua:py-2 lua:text-base lua:transition-all lua:duration-200",
+              "lua:file:border-0 lua:file:bg-transparent lua:file:text-sm lua:file:font-medium lua:file:text-foreground",
+              "lua:placeholder:text-muted-foreground",
+              "lua:focus-visible:outline-hidden lua:focus-visible:ring-2 lua:focus-visible:ring-offset-2 lua:focus-visible:ring-offset-background",
               // Default state
-              "lua:border-gray-300 lua:text-gray-900",
-              "focus-visible:lua:ring-blue-600",
+              "lua:border-input lua:text-foreground",
+              "lua:focus-visible:ring-ring",
               // Error state
               hasError && [
-                "lua:border-red-600",
-                "focus-visible:lua:ring-red-600",
-                "lua:text-gray-900"
+                "lua:border-destructive",
+                "lua:focus-visible:ring-destructive",
+                "lua:text-foreground"
               ],
               // Success state
               hasSuccess && [
-                "lua:border-green-500",
-                "focus-visible:lua:ring-green-500"
+                "lua:border-success",
+                "lua:focus-visible:ring-success"
               ],
               // Disabled state
               disabled && [
                 "lua:cursor-not-allowed lua:opacity-50",
-                "lua:bg-gray-100",
-                "lua:text-gray-600",
-                "placeholder:lua:text-gray-400"
+                "lua:bg-muted",
+                "lua:text-muted-foreground",
+                "lua:placeholder:text-muted-foreground"
               ],
               // Padding adjustments for adornments
               hasStartAdornment && "lua:pl-10",
               hasEndAdornment && "lua:pr-10",
               // Responsive text size
-              "md:lua:text-sm",
+              "lua:md:text-sm",
               className
             ),
             ref,
@@ -413,13 +406,13 @@ var Input = React121.forwardRef(
             ...props
           }
         ),
-        hasEndAdornment && /* @__PURE__ */ jsx("div", { className: "lua:absolute lua:right-3 lua:top-1/2 lua:-translate-y-1/2 lua:flex lua:items-center lua:pointer-events-none lua:text-gray-500", children: endAdornment })
+        hasEndAdornment && /* @__PURE__ */ jsx("div", { className: "lua:absolute lua:right-3 lua:top-1/2 lua:-translate-y-1/2 lua:flex lua:items-center lua:pointer-events-none lua:text-muted-foreground", children: endAdornment })
       ] }),
       description && !error && !success && /* @__PURE__ */ jsx(
         "p",
         {
           id: descriptionId,
-          className: "lua:mt-2 lua:text-sm lua:text-gray-600",
+          className: "lua:mt-2 lua:text-sm lua:text-muted-foreground",
           children: description
         }
       ),
@@ -427,7 +420,7 @@ var Input = React121.forwardRef(
         "p",
         {
           id: errorId,
-          className: "lua:mt-2 lua:text-sm lua:text-red-600",
+          className: "lua:mt-2 lua:text-sm lua:text-destructive",
           role: "alert",
           "aria-live": "polite",
           children: error
@@ -437,7 +430,7 @@ var Input = React121.forwardRef(
         "p",
         {
           id: successId,
-          className: "lua:mt-2 lua:text-sm lua:text-green-600",
+          className: "lua:mt-2 lua:text-sm lua:text-success",
           role: "status",
           "aria-live": "polite",
           children: success
@@ -450,38 +443,40 @@ Input.displayName = "Input";
 var badgeVariants = cva(
   [
     "lua:inline-flex lua:items-center lua:justify-center lua:rounded-md lua:border lua:px-2 lua:py-1 lua:text-xs lua:font-medium",
-    "lua:w-fit lua:whitespace-nowrap lua:shrink-0 [&>svg]:lua:size-3 lua:gap-1 [&>svg]:lua:pointer-events-none",
-    "lua:focus-visible:border-blue-600 lua:focus-visible:ring-blue-600/50 lua:focus-visible:ring-2",
-    "aria-invalid:lua:ring-red-600/20",
-    "aria-invalid:lua:border-red-600 lua:transition-[color,box-shadow] lua:overflow-hidden"
+    "lua:w-fit lua:whitespace-nowrap lua:shrink-0 lua:[&>svg]:size-3 lua:gap-1 lua:[&>svg]:pointer-events-none",
+    "lua:focus-visible:ring-ring lua:focus-visible:ring-2",
+    "lua:transition-[color,box-shadow] lua:overflow-hidden"
   ].join(" "),
   {
     variants: {
       variant: {
         default: [
-          "lua:border-transparent lua:bg-blue-600 lua:text-white",
-          "[a&]:lua:hover:bg-blue-700"
+          "lua:border-transparent lua:bg-default lua:text-default-foreground",
+          "lua:[a&]:hover:bg-default-hover"
+        ].join(" "),
+        primary: [
+          "lua:border-transparent lua:bg-primary lua:text-primary-foreground",
+          "lua:[a&]:hover:bg-primary-hover"
         ].join(" "),
         secondary: [
-          "lua:border-transparent lua:bg-gray-100 lua:text-gray-900",
-          "[a&]:lua:hover:bg-gray-200"
+          "lua:border-transparent lua:bg-secondary lua:text-secondary-foreground",
+          "lua:[a&]:hover:bg-secondary-hover"
         ].join(" "),
         destructive: [
-          "lua:border-transparent lua:bg-red-600 lua:text-white",
-          "[a&]:lua:hover:bg-red-700",
-          "lua:focus-visible:ring-red-600/20"
+          "lua:border-transparent lua:bg-destructive lua:text-destructive-foreground",
+          "lua:[a&]:hover:bg-destructive-hover"
         ].join(" "),
         outline: [
-          "lua:text-gray-900 lua:border-gray-300",
-          "[a&]:lua:hover:bg-gray-100 [a&]:lua:hover:text-gray-900"
+          "lua:bg-card lua:text-card-foreground lua:border-border",
+          "lua:[a&]:hover:bg-secondary"
         ].join(" "),
         success: [
-          "lua:border-transparent lua:bg-green-600 lua:text-white",
-          "[a&]:lua:hover:bg-green-700"
+          "lua:border-transparent lua:bg-success lua:text-success-foreground",
+          "lua:[a&]:hover:bg-success-hover"
         ].join(" "),
         warning: [
-          "lua:border-transparent lua:bg-yellow-600 lua:text-white",
-          "[a&]:lua:hover:bg-yellow-700"
+          "lua:border-transparent lua:bg-warning lua:text-warning-foreground",
+          "lua:[a&]:hover:bg-warning-hover"
         ].join(" ")
       }
     },
@@ -540,29 +535,29 @@ var Textarea = React121.forwardRef(
           "data-slot": "textarea",
           className: cn(
             // Base styles
-            "lua:flex lua:min-h-16 lua:w-full lua:rounded-md lua:border lua:bg-transparent lua:px-3 lua:py-2 lua:text-base lua:transition-all lua:duration-200",
-            "lua:placeholder:text-gray-500",
-            "lua:focus-visible:outline-hidden lua:focus-visible:ring-2 lua:focus-visible:ring-offset-2 lua:focus-visible:ring-offset-white",
+            "lua:flex lua:min-h-16 lua:w-full lua:rounded-md lua:border lua:bg-card lua:px-3 lua:py-2 lua:text-base lua:transition-all lua:duration-200",
+            "lua:placeholder:text-muted-foreground",
+            "lua:focus-visible:outline-hidden lua:focus-visible:ring-2 lua:focus-visible:ring-offset-2 lua:focus-visible:ring-offset-background",
             // Default state
-            "lua:border-gray-300 lua:text-gray-900",
-            "lua:focus-visible:ring-blue-600",
+            "lua:border-input lua:text-foreground",
+            "lua:focus-visible:ring-ring",
             // Error state
             hasError && [
-              "lua:border-red-600",
-              "lua:focus-visible:ring-red-600",
-              "lua:text-gray-900"
+              "lua:border-destructive",
+              "lua:focus-visible:ring-destructive",
+              "lua:text-foreground"
             ],
             // Success state
             hasSuccess && [
-              "lua:border-green-500",
-              "lua:focus-visible:ring-green-500"
+              "lua:border-success",
+              "lua:focus-visible:ring-success"
             ],
             // Disabled state
             disabled && [
               "lua:cursor-not-allowed lua:opacity-50",
-              "lua:bg-gray-100",
-              "lua:text-gray-600",
-              "lua:placeholder:text-gray-400"
+              "lua:bg-muted",
+              "lua:text-muted-foreground",
+              "lua:placeholder:text-muted-foreground"
             ],
             // Resize behavior
             resizeClasses[resize],
@@ -581,7 +576,7 @@ var Textarea = React121.forwardRef(
         "p",
         {
           id: descriptionId,
-          className: "lua:mt-2 lua:text-sm lua:text-gray-600",
+          className: "lua:mt-2 lua:text-sm lua:text-muted-foreground",
           children: description
         }
       ),
@@ -589,7 +584,7 @@ var Textarea = React121.forwardRef(
         "p",
         {
           id: errorId,
-          className: "lua:mt-2 lua:text-sm lua:text-red-600",
+          className: "lua:mt-2 lua:text-sm lua:text-destructive",
           role: "alert",
           "aria-live": "polite",
           children: error
@@ -599,7 +594,7 @@ var Textarea = React121.forwardRef(
         "p",
         {
           id: successId,
-          className: "lua:mt-2 lua:text-sm lua:text-green-600",
+          className: "lua:mt-2 lua:text-sm lua:text-success",
           role: "status",
           "aria-live": "polite",
           children: success
@@ -611,7 +606,7 @@ var Textarea = React121.forwardRef(
 Textarea.displayName = "Textarea";
 var Tabs = TabsPrimitive.Root;
 var tabsListVariants = cva([
-  "lua:inline-flex lua:items-center lua:justify-center lua:p-1 lua:text-gray-600 lua:gap-2 lua:flex-wrap"
+  "lua:inline-flex lua:items-center lua:justify-center lua:p-1 lua:text-muted-foreground lua:gap-2 lua:flex-wrap"
 ].join(" "));
 var TabsList = React121.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.List,
@@ -624,10 +619,10 @@ var TabsList = React121.forwardRef(({ className, ...props }, ref) => /* @__PURE_
 TabsList.displayName = TabsPrimitive.List.displayName;
 var tabsTriggerVariants = cva([
   "lua:font-onest lua:inline-flex lua:items-center lua:justify-center lua:whitespace-nowrap lua:rounded-full lua:px-3 lua:py-1 lua:text-sm lua:font-medium",
-  "lua:ring-offset-white lua:transition-all lua:focus-visible:outline-hidden lua:focus-visible:ring-2",
-  "lua:focus-visible:ring-blue-600 lua:focus-visible:ring-offset-2 lua:disabled:pointer-events-none lua:disabled:opacity-50",
-  "lua:data-[state=active]:bg-blue-50 lua:data-[state=active]:text-blue-800 lua:data-[state=active]:hover:bg-blue-100",
-  "lua:text-gray-500 lua:hover:bg-gray-100"
+  "lua:ring-offset-background lua:transition-all lua:focus-visible:outline-hidden lua:focus-visible:ring-2",
+  "lua:focus-visible:ring-ring lua:focus-visible:ring-offset-2 lua:disabled:pointer-events-none lua:disabled:opacity-50",
+  "lua:data-[state=active]:bg-accent-subtle lua:data-[state=active]:text-accent-subtle-foreground lua:data-[state=active]:hover:bg-accent-subtle-hover",
+  "lua:text-muted-foreground lua:hover:bg-secondary"
 ].join(" "));
 var TabsTrigger = React121.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Trigger,
@@ -639,8 +634,8 @@ var TabsTrigger = React121.forwardRef(({ className, ...props }, ref) => /* @__PU
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 var tabsContentVariants = cva([
-  "lua:mt-2 lua:ring-offset-white lua:focus-visible:outline-hidden lua:focus-visible:ring-2",
-  "lua:focus-visible:ring-blue-600 lua:focus-visible:ring-offset-2"
+  "lua:mt-2 lua:ring-offset-background lua:focus-visible:outline-hidden lua:focus-visible:ring-2",
+  "lua:focus-visible:ring-ring lua:focus-visible:ring-offset-2"
 ].join(" "));
 var TabsContent = React121.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Content,
@@ -656,7 +651,7 @@ var InputOTP = React121.forwardRef(({ className, containerClassName, ...props },
   {
     ref,
     containerClassName: cn(
-      "lua:flex lua:items-center lua:gap-2 has-disabled:lua:opacity-50",
+      "lua:flex lua:items-center lua:gap-2 lua:has-disabled:opacity-50",
       containerClassName
     ),
     className: cn("lua:disabled:cursor-not-allowed", className),
@@ -674,14 +669,14 @@ var InputOTPSlot = React121.forwardRef(({ index, className, ...props }, ref) =>
     {
       ref,
       className: cn(
-        "lua:relative lua:flex lua:h-10 lua:w-10 lua:items-center lua:justify-center lua:border lua:border-gray-300 lua:bg-white lua:text-sm lua:transition-all lua:first:rounded-l-md lua:last:rounded-r-md lua:focus-within:z-10 lua:focus-within:ring-2 lua:focus-within:ring-blue-600 lua:focus-within:ring-offset-2 lua:disabled:cursor-not-allowed lua:disabled:opacity-50",
-        isActive && "lua:z-10 lua:ring-2 lua:ring-blue-600 lua:ring-offset-2",
+        "lua:relative lua:flex lua:h-10 lua:w-10 lua:items-center lua:justify-center lua:border lua:border-input lua:bg-card lua:text-sm lua:text-foreground lua:transition-all lua:first:rounded-l-md lua:last:rounded-r-md lua:focus-within:z-10 lua:focus-within:ring-2 lua:focus-within:ring-ring lua:focus-within:ring-offset-2 lua:focus-within:ring-offset-background lua:disabled:cursor-not-allowed lua:disabled:opacity-50",
+        isActive && "lua:z-10 lua:ring-2 lua:ring-ring lua:ring-offset-2 lua:ring-offset-background",
         className
       ),
       ...props,
       children: [
         char,
-        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "lua:pointer-events-none lua:absolute lua:inset-0 lua:flex lua:items-center lua:justify-center", children: /* @__PURE__ */ jsx("div", { className: "lua:h-4 lua:w-px lua:animate-caret-blink lua:bg-gray-900 lua:duration-1000" }) })
+        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "lua:pointer-events-none lua:absolute lua:inset-0 lua:flex lua:items-center lua:justify-center", children: /* @__PURE__ */ jsx("div", { className: "lua:h-4 lua:w-px lua:animate-caret-blink lua:bg-foreground lua:duration-1000" }) })
       ]
     }
   );
@@ -694,31 +689,25 @@ var InputOTPSeparator = React121.forwardRef(({ className, ...props }, ref) => /*
     role: "separator",
     className: cn("lua:flex lua:items-center lua:justify-center", className),
     ...props,
-    children: /* @__PURE__ */ jsx("div", { className: "lua:h-px lua:w-3 lua:bg-gray-300" })
+    children: /* @__PURE__ */ jsx("div", { className: "lua:h-px lua:w-3 lua:bg-border" })
   }
 ));
 InputOTPSeparator.displayName = "InputOTPSeparator";
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipArrow = React121.forwardRef(({ className, style, ...props }, ref) => /* @__PURE__ */ jsx(
+var TooltipArrow = React121.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TooltipPrimitive.Arrow,
   {
     ref,
-    className: cn("", className),
+    className: cn("lua:fill-popover lua:stroke-border", className),
     width: 8,
     height: 4,
-    style: {
-      fill: "#ffffff",
-      stroke: "#d1d5db",
-      strokeWidth: "1px",
-      ...style
-    },
     ...props
   }
 ));
 TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
-var TooltipContent = React121.forwardRef(({ className, sideOffset = 4, style, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var TooltipContent = React121.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   TooltipPrimitive.Content,
   {
     ref,
@@ -726,18 +715,9 @@ var TooltipContent = React121.forwardRef(({ className, sideOffset = 4, style, ..
     className: cn(
       "lua:z-50 lua:overflow-hidden lua:px-3 lua:py-2 lua:text-xs lua:transition-all lua:duration-200",
       "lua:shadow-lg lua:border lua:rounded-lg",
-      "lua:bg-white lua:text-gray-900 lua:border-gray-300",
+      "lua:bg-popover lua:text-popover-foreground lua:border-border",
       className
     ),
-    style: {
-      color: "#111827",
-      // gray-900 
-      backgroundColor: "#ffffff",
-      // white
-      borderColor: "#d1d5db",
-      // gray-300
-      ...style
-    },
     ...props
   }
 ) }));
@@ -747,7 +727,7 @@ var Card = React121.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   {
     ref,
     className: cn(
-      "lua:rounded-xl lua:border lua:border-gray-200 lua:bg-white lua:text-gray-900 lua:shadow-sm",
+      "lua:rounded-xl lua:border lua:border-border lua:bg-card lua:text-card-foreground lua:shadow-sm",
       className
     ),
     ...props
@@ -767,7 +747,10 @@ var CardTitle = React121.forwardRef(({ className, ...props }, ref) => /* @__PURE
   "div",
   {
     ref,
-    className: cn("lua:font-semibold lua:leading-none lua:tracking-tight", className),
+    className: cn(
+      "lua:font-semibold lua:leading-none lua:tracking-tight lua:text-card-foreground",
+      className
+    ),
     ...props
   }
 ));
@@ -776,12 +759,25 @@ var CardDescription = React121.forwardRef(({ className, ...props }, ref) => /* @
   "div",
   {
     ref,
-    className: cn("lua:text-sm lua:text-gray-600", className),
+    className: cn(
+      "lua:text-sm lua:text-muted-foreground",
+      className
+    ),
     ...props
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React121.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("lua:p-6 lua:pt-0", className), ...props }));
+var CardContent = React121.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "lua:p-6 lua:pt-0 lua:text-card-foreground",
+      className
+    ),
+    ...props
+  }
+));
 CardContent.displayName = "CardContent";
 var CardFooter = React121.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
@@ -4966,7 +4962,7 @@ var CarouselPrevious = React121.forwardRef(({ className, variant = "outline", si
       variant,
       size,
       className: cn(
-        "lua:absolute lua:h-8 lua:w-8 lua:p-0 lua:rounded-full lua:bg-white lua:border lua:border-gray-200 lua:hover:bg-gray-100 lua:hover:text-gray-900 lua:focus:ring-2 lua:focus:ring-blue-600 lua:focus:ring-offset-2 lua:disabled:opacity-50 lua:disabled:cursor-not-allowed",
+        "lua:absolute lua:h-8 lua:w-8 lua:p-0 lua:rounded-full",
         orientation === "horizontal" ? "lua:-left-12 lua:top-1/2 lua:-translate-y-1/2" : "lua:-top-12 lua:left-1/2 lua:-translate-x-1/2 lua:rotate-90",
         className
       ),
@@ -4988,7 +4984,7 @@ var CarouselNext = React121.forwardRef(({ className, variant = "outline", size =
       variant,
       size,
       className: cn(
-        "lua:absolute lua:h-8 lua:w-8 lua:p-0 lua:rounded-full lua:bg-white lua:border lua:border-gray-200 lua:hover:bg-gray-100 lua:hover:text-gray-900 lua:focus:ring-2 lua:focus:ring-blue-600 lua:focus:ring-offset-2 lua:disabled:opacity-50 lua:disabled:cursor-not-allowed",
+        "lua:absolute lua:h-8 lua:w-8 lua:p-0 lua:rounded-full",
         orientation === "horizontal" ? "lua:-right-12 lua:top-1/2 lua:-translate-y-1/2" : "lua:-bottom-12 lua:left-1/2 lua:-translate-x-1/2 lua:rotate-90",
         className
       ),
@@ -5029,7 +5025,7 @@ var DialogContent = React121.forwardRef(({ className, children, showClose = true
     {
       ref,
       className: cn(
-        "lua:fixed lua:z-50 lua:max-w-lg lua:outline-hidden lua:border lua:border-gray-200 lua:bg-white lua:p-6 lua:shadow-lg lua:transition-all lua:duration-200 lua:rounded-xl lua:mx-4",
+        "lua:fixed lua:z-50 lua:max-w-lg lua:outline-hidden lua:border lua:border-border lua:bg-card lua:text-card-foreground lua:p-6 lua:shadow-lg lua:transition-all lua:duration-200 lua:rounded-xl lua:mx-4",
         className
       ),
       style: {
@@ -5040,7 +5036,7 @@ var DialogContent = React121.forwardRef(({ className, children, showClose = true
       ...props,
       children: [
         children,
-        showClose && /* @__PURE__ */ jsx(DialogPrimitive.Close, { className: "lua:absolute lua:right-4 lua:top-4 lua:rounded-sm lua:opacity-70 lua:ring-offset-white lua:transition-opacity lua:hover:opacity-100 lua:focus:outline-hidden lua:focus:ring-2 lua:focus:ring-blue-600 lua:focus:ring-offset-2 lua:disabled:pointer-events-none lua:hover:bg-gray-100 lua:text-gray-600", children: /* @__PURE__ */ jsx(XIcon, { size: 24 }) })
+        showClose && /* @__PURE__ */ jsx(DialogPrimitive.Close, { className: "lua:absolute lua:right-4 lua:top-4 lua:rounded-sm lua:opacity-70 lua:ring-offset-background lua:transition-opacity lua:hover:opacity-100 lua:focus:outline-hidden lua:focus:ring-2 lua:focus:ring-ring lua:focus:ring-offset-2 lua:disabled:pointer-events-none lua:hover:bg-secondary lua:text-muted-foreground", children: /* @__PURE__ */ jsx(XIcon, { size: 24 }) })
       ]
     }
   )
@@ -5053,7 +5049,7 @@ var DialogHeader = ({
   "div",
   {
     className: cn(
-      "lua:flex lua:flex-col lua:space-y-2 sm:lua:text-left lua:min-h-6",
+      "lua:flex lua:flex-col lua:space-y-2 lua:sm:text-left lua:min-h-6",
       className
     ),
     ...props
@@ -5090,7 +5086,7 @@ var DialogDescription = React121.forwardRef(({ className, ...props }, ref) => /*
   DialogPrimitive.Description,
   {
     ref,
-    className: cn("lua:text-sm lua:text-gray-600", className),
+    className: cn("lua:text-sm lua:text-muted-foreground", className),
     ...props
   }
 ));
@@ -5103,7 +5099,7 @@ var SheetOverlay = React121.forwardRef(({ className, ...props }, ref) => /* @__P
   DialogPrimitive.Overlay,
   {
     className: cn(
-      "lua:fixed lua:inset-0 lua:z-50 lua:bg-black/80 lua:backdrop-blur-sm data-[state=open]:lua:animate-in data-[state=closed]:lua:animate-out data-[state=closed]:lua:fade-out-0 data-[state=open]:lua:fade-in-0",
+      "lua:fixed lua:inset-0 lua:z-50 lua:bg-black/80 lua:backdrop-blur-sm lua:data-[state=open]:animate-in lua:data-[state=closed]:animate-out lua:data-[state=closed]:fade-out-0 lua:data-[state=open]:fade-in-0",
       className
     ),
     ...props,
@@ -5112,14 +5108,14 @@ var SheetOverlay = React121.forwardRef(({ className, ...props }, ref) => /* @__P
 ));
 SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
 var sheetVariants = cva(
-  "lua:fixed lua:z-50 lua:gap-4 lua:bg-white lua:shadow-lg lua:transition lua:ease-in-out lua:data-[state=open]:animate-in lua:data-[state=closed]:animate-out lua:data-[state=closed]:duration-300 lua:data-[state=open]:duration-500",
+  "lua:fixed lua:z-50 lua:gap-4 lua:bg-card lua:text-card-foreground lua:shadow-lg lua:transition lua:ease-in-out lua:data-[state=open]:animate-in lua:data-[state=closed]:animate-out lua:data-[state=closed]:duration-300 lua:data-[state=open]:duration-500",
   {
     variants: {
       side: {
-        top: "lua:inset-x-0 lua:top-0 lua:border-b data-[state=closed]:lua:slide-out-to-top data-[state=open]:lua:slide-in-from-top",
-        bottom: "lua:inset-x-0 lua:bottom-0 lua:border-t data-[state=closed]:lua:slide-out-to-bottom data-[state=open]:lua:slide-in-from-bottom",
-        left: "lua:inset-y-0 lua:left-0 lua:h-full lua:w-3/4 lua:border-r lua:data-[state=closed]:slide-out-to-left lua:data-[state=open]:slide-in-from-left lua:sm:max-w-sm",
-        right: "lua:inset-y-0 lua:right-0 lua:h-full lua:w-3/4 lua:border-l lua:data-[state=closed]:slide-out-to-right lua:data-[state=open]:slide-in-from-right lua:sm:max-w-sm"
+        top: "lua:inset-x-0 lua:top-0 lua:border-b lua:border-border lua:data-[state=closed]:slide-out-to-top lua:data-[state=open]:slide-in-from-top",
+        bottom: "lua:inset-x-0 lua:bottom-0 lua:border-t lua:border-border lua:data-[state=closed]:slide-out-to-bottom lua:data-[state=open]:slide-in-from-bottom",
+        left: "lua:inset-y-0 lua:left-0 lua:h-full lua:w-3/4 lua:border-r lua:border-border lua:data-[state=closed]:slide-out-to-left lua:data-[state=open]:slide-in-from-left lua:sm:max-w-sm",
+        right: "lua:inset-y-0 lua:right-0 lua:h-full lua:w-3/4 lua:border-l lua:border-border lua:data-[state=closed]:slide-out-to-right lua:data-[state=open]:slide-in-from-right lua:sm:max-w-sm"
       }
     },
     defaultVariants: {
@@ -5145,7 +5141,7 @@ var SheetContent = React121.forwardRef(
         ...props,
         children: [
           children,
-          showClose && /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "lua:absolute lua:right-4 lua:top-4 lua:rounded-sm lua:opacity-70 lua:ring-offset-white lua:transition-opacity lua:hover:opacity-100 lua:focus:outline-hidden lua:focus:ring-2 lua:focus:ring-blue-600 lua:focus:ring-offset-2 lua:disabled:pointer-events-none lua:data-[state=open]:bg-gray-100", children: [
+          showClose && /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "lua:absolute lua:right-4 lua:top-4 lua:rounded-sm lua:opacity-70 lua:ring-offset-background lua:transition-opacity lua:hover:opacity-100 lua:focus:outline-hidden lua:focus:ring-2 lua:focus:ring-ring lua:focus:ring-offset-2 lua:disabled:pointer-events-none lua:data-[state=open]:bg-secondary", children: [
             /* @__PURE__ */ jsx(XIcon, { size: 16 }),
             /* @__PURE__ */ jsx("span", { className: "lua:sr-only", children: "Close" })
           ] })
@@ -5162,7 +5158,7 @@ var SheetHeader = ({
   "div",
   {
     className: cn(
-      "lua:flex lua:flex-col lua:space-y-2 lua:text-center lua:sm:text-left lua:p-4 lua:border-b",
+      "lua:flex lua:flex-col lua:space-y-2 lua:text-center lua:sm:text-left lua:p-4 lua:border-b lua:border-border",
       className
     ),
     ...props
@@ -5176,7 +5172,7 @@ var SheetFooter = ({
   "div",
   {
     className: cn(
-      "lua:flex lua:flex-col-reverse lua:sm:flex-row lua:sm:justify-end lua:sm:space-x-2 lua:p-4 lua:border-t",
+      "lua:flex lua:flex-col-reverse lua:sm:flex-row lua:sm:justify-end lua:sm:space-x-2 lua:p-4 lua:border-t lua:border-border",
       className
     ),
     ...props
@@ -5188,7 +5184,7 @@ var SheetTitle = React121.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "lua:text-base lua:font-semibold lua:text-gray-900",
+      "lua:text-base lua:font-semibold lua:text-foreground",
       className
     ),
     ...props
@@ -5199,7 +5195,7 @@ var SheetDescription = React121.forwardRef(({ className, ...props }, ref) => /*
   DialogPrimitive.Description,
   {
     ref,
-    className: cn("lua:text-sm lua:text-gray-600", className),
+    className: cn("lua:text-sm lua:text-muted-foreground", className),
     ...props
   }
 ));
@@ -5349,10 +5345,10 @@ PaginationItem.displayName = "PaginationItem";
 var paginationLinkVariants = cva(
   [
     "lua:flex lua:items-center lua:justify-center lua:rounded-md lua:font-semibold lua:transition-colors lua:no-underline",
-    "lua:bg-black lua:text-white",
-    "lua:hover:bg-black-hover",
-    "lua:active:bg-black-hover",
-    "lua:focus-visible:outline-hidden lua:focus-visible:ring-2 lua:focus-visible:ring-black lua:focus-visible:ring-offset-2 lua:focus-visible:ring-offset-white"
+    "lua:bg-default lua:text-default-foreground",
+    "lua:hover:bg-default-hover",
+    "lua:active:bg-default-active",
+    "lua:focus-visible:outline-hidden lua:focus-visible:ring-2 lua:focus-visible:ring-ring lua:focus-visible:ring-offset-2 lua:focus-visible:ring-offset-background"
   ],
   {
     variants: {
@@ -5375,7 +5371,7 @@ var PaginationLink = React121.forwardRef(({ className, isActive, ...props }, ref
       "aria-current": isActive ? "page" : void 0,
       className: cn(
         paginationLinkVariants({ size }),
-        isActive && "lua:bg-black-hover",
+        isActive && "lua:bg-default-hover",
         className
       ),
       ...props
@@ -5398,7 +5394,7 @@ var PaginationPrevious = React121.forwardRef(({ className, ...props }, ref) => {
       ...props,
       children: [
         /* @__PURE__ */ jsx(ArrowLeft, { size: size === "small" ? 12 : 16, "aria-hidden": true }),
-        /* @__PURE__ */ jsx("span", { className: "lua:hidden lua:sm:lua:inline", children: "Previous" })
+        /* @__PURE__ */ jsx("span", { className: "lua:hidden lua:sm:inline", children: "Previous" })
       ]
     }
   );
@@ -5418,7 +5414,7 @@ var PaginationNext = React121.forwardRef(({ className, ...props }, ref) => {
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "lua:hidden lua:sm:lua:inline", children: "Next" }),
+        /* @__PURE__ */ jsx("span", { className: "lua:hidden lua:sm:inline", children: "Next" }),
         /* @__PURE__ */ jsx(ArrowRight, { size: size === "small" ? 12 : 16, "aria-hidden": true })
       ]
     }
@@ -5454,7 +5450,7 @@ var DropdownMenuSubTrigger = React121.forwardRef(({ className, inset, children,
   {
     ref,
     className: cn(
-      "lua:flex lua:cursor-default lua:select-none lua:items-center lua:gap-2 lua:rounded-sm lua:px-2 lua:py-2 lua:text-sm lua:outline-hidden lua:focus:bg-gray-100 data-[state=open]:lua:bg-gray-100 [&_svg]:lua:pointer-events-none [&_svg]:lua:size-4 [&_svg]:lua:shrink-0",
+      "lua:flex lua:cursor-default lua:select-none lua:items-center lua:gap-2 lua:rounded-sm lua:px-2 lua:py-2 lua:text-sm lua:outline-hidden lua:focus:bg-gray-100 lua:data-[state=open]:bg-gray-100 lua:[&_svg]:pointer-events-none lua:[&_svg]:size-4 lua:[&_svg]:shrink-0",
       inset && "lua:pl-8",
       className
     ),
@@ -5471,7 +5467,7 @@ var DropdownMenuSubContent = React121.forwardRef(({ className, ...props }, ref)
   {
     ref,
     className: cn(
-      "lua:z-50 lua:min-w-32 lua:overflow-hidden lua:rounded-md lua:border lua:border-gray-200 lua:bg-white lua:text-gray-900 lua:p-1 lua:shadow-lg data-[state=open]:lua:animate-in data-[state=closed]:lua:animate-out data-[state=closed]:lua:fade-out-0 data-[state=open]:lua:fade-in-0 data-[state=closed]:lua:zoom-out-95 data-[state=open]:lua:zoom-in-95",
+      "lua:z-50 lua:min-w-32 lua:overflow-hidden lua:rounded-md lua:border lua:border-gray-200 lua:bg-white lua:text-gray-900 lua:p-1 lua:shadow-lg lua:data-[state=open]:animate-in lua:data-[state=closed]:animate-out lua:data-[state=closed]:fade-out-0 lua:data-[state=open]:fade-in-0 lua:data-[state=closed]:zoom-out-95 lua:data-[state=open]:zoom-in-95",
       className
     ),
     ...props
@@ -5485,7 +5481,7 @@ var DropdownMenuContent = React121.forwardRef(({ className, sideOffset = 4, ...p
     sideOffset,
     className: cn(
       "lua:z-50 lua:max-h-96 lua:min-w-32 lua:overflow-y-auto lua:overflow-x-hidden lua:rounded-md lua:border lua:border-gray-200 lua:bg-white lua:text-gray-900 lua:p-1 lua:shadow-md",
-      "data-[state=open]:lua:animate-in data-[state=closed]:lua:animate-out data-[state=closed]:lua:fade-out-0 data-[state=open]:lua:fade-in-0 data-[state=closed]:lua:zoom-out-95 data-[state=open]:lua:zoom-in-95",
+      "lua:data-[state=open]:animate-in lua:data-[state=closed]:animate-out lua:data-[state=closed]:fade-out-0 lua:data-[state=open]:fade-in-0 lua:data-[state=closed]:zoom-out-95 lua:data-[state=open]:zoom-in-95",
       className
     ),
     ...props
@@ -5497,7 +5493,7 @@ var DropdownMenuItem = React121.forwardRef(({ className, inset, ...props }, ref)
   {
     ref,
     className: cn(
-      "lua:relative lua:flex lua:cursor-default lua:select-none lua:items-center lua:gap-2 lua:rounded-sm lua:px-2 lua:py-2 lua:text-sm lua:outline-hidden lua:transition-colors lua:focus:bg-gray-100 lua:focus:text-gray-900 data-disabled:lua:pointer-events-none data-disabled:lua:opacity-50 [&>svg]:lua:size-4 [&>svg]:lua:shrink-0",
+      "lua:relative lua:flex lua:cursor-default lua:select-none lua:items-center lua:gap-2 lua:rounded-sm lua:px-2 lua:py-2 lua:text-sm lua:outline-hidden lua:transition-colors lua:focus:bg-gray-100 lua:focus:text-gray-900 lua:data-disabled:pointer-events-none lua:data-disabled:opacity-50 lua:[&>svg]:size-4 lua:[&>svg]:shrink-0",
       inset && "lua:pl-8",
       className
     ),
@@ -5510,7 +5506,7 @@ var DropdownMenuCheckboxItem = React121.forwardRef(({ className, children, check
   {
     ref,
     className: cn(
-      "lua:relative lua:flex lua:cursor-default lua:select-none lua:items-center lua:rounded-sm lua:py-2 lua:pl-8 lua:pr-2 lua:text-sm lua:outline-hidden lua:transition-colors lua:focus:bg-gray-100 lua:focus:text-gray-900 data-disabled:lua:pointer-events-none data-disabled:lua:opacity-50",
+      "lua:relative lua:flex lua:cursor-default lua:select-none lua:items-center lua:rounded-sm lua:py-2 lua:pl-8 lua:pr-2 lua:text-sm lua:outline-hidden lua:transition-colors lua:focus:bg-gray-100 lua:focus:text-gray-900 lua:data-disabled:pointer-events-none lua:data-disabled:opacity-50",
       className
     ),
     checked,
@@ -5527,7 +5523,7 @@ var DropdownMenuRadioItem = React121.forwardRef(({ className, children, ...props
   {
     ref,
     className: cn(
-      "lua:relative lua:flex lua:cursor-default lua:select-none lua:items-center lua:rounded-sm lua:py-2 lua:pl-8 lua:pr-2 lua:text-sm lua:outline-hidden lua:transition-colors lua:focus:bg-gray-100 lua:focus:text-gray-900 data-disabled:lua:pointer-events-none data-disabled:lua:opacity-50",
+      "lua:relative lua:flex lua:cursor-default lua:select-none lua:items-center lua:rounded-sm lua:py-2 lua:pl-8 lua:pr-2 lua:text-sm lua:outline-hidden lua:transition-colors lua:focus:bg-gray-100 lua:focus:text-gray-900 lua:data-disabled:pointer-events-none lua:data-disabled:opacity-50",
       className
     ),
     ...props,
@@ -5580,7 +5576,7 @@ var TableWrapper = React121.forwardRef(
       ref,
       "data-slot": "table-wrapper",
       className: cn(
-        " lua:border-gray-200 lua:rounded-xl lua:border-0 lua:md:border-1",
+        " lua:border-border lua:rounded-xl lua:border-0 lua:md:border-1",
         className
       ),
       ...props
@@ -5642,7 +5638,7 @@ var TableFooter = React121.forwardRef(({ className, ...props }, ref) => /* @__PU
     ref,
     "data-slot": "table-footer",
     className: cn(
-      "lua:bg-gray-50 lua:border-t lua:font-medium lua:[&>tr]:last:border-b-0 lua:block lua:md:table-footer-group lua:mt-4 lua:md:mt-0",
+      "lua:bg-muted lua:border-t lua:border-border lua:font-medium lua:[&>tr]:last:border-b-0 lua:block lua:md:table-footer-group lua:mt-4 lua:md:mt-0",
       className
     ),
     ...props
@@ -5657,10 +5653,10 @@ var TableRow = React121.forwardRef(({ className, ...props }, ref) => /* @__PURE_
     className: cn(
       "lua:transition-colors lua:block lua:md:table-row",
       // Mobile card styles (default)
-      "lua:bg-white lua:border lua:border-gray-200 lua:rounded-lg lua:p-4 lua:shadow-sm lua:mb-4",
+      "lua:bg-card lua:border lua:border-border lua:rounded-lg lua:p-4 lua:shadow-sm lua:mb-4",
       // Desktop table styles (md and up)
-      "lua:md:bg-transparent lua:md:border-0 lua:md:border-b lua:md:border-gray-200 lua:md:rounded-none lua:md:p-0 lua:md:shadow-none lua:md:mb-0",
-      "lua:md:hover:bg-gray-50 lua:md:data-[state=selected]:bg-gray-100",
+      "lua:md:bg-transparent lua:md:border-0 lua:md:border-b lua:md:border-border lua:md:rounded-none lua:md:p-0 lua:md:shadow-none lua:md:mb-0",
+      "lua:md:hover:bg-muted lua:md:data-[state=selected]:bg-secondary",
       className
     ),
     ...props
@@ -5673,7 +5669,7 @@ var TableHead = React121.forwardRef(({ className, ...props }, ref) => /* @__PURE
     ref,
     "data-slot": "table-head",
     className: cn(
-      "lua:bg-gray-100 lua:text-gray-900 lua:h-11 lua:px-4 lua:text-left lua:align-middle lua:font-medium lua:whitespace-nowrap [&:has([role=checkbox])]:lua:pr-0 [&>[role=checkbox]]:lua:translate-y-[2px] lua:hidden lua:md:table-cell",
+      "lua:bg-secondary lua:text-foreground lua:h-11 lua:px-4 lua:text-left lua:align-middle lua:font-medium lua:whitespace-nowrap lua:[&:has([role=checkbox])]:pr-0 lua:[&>[role=checkbox]]:translate-y-[2px] lua:hidden lua:md:table-cell",
       className
     ),
     ...props
@@ -5689,8 +5685,8 @@ var TableCell = React121.forwardRef(({ className, label, ...props }, ref) => /*
     className: cn(
       "lua:[&:has([role=checkbox])]:pr-0 lua:[&>[role=checkbox]]:translate-y-[2px] lua:block lua:md:table-cell",
       // Mobile card cell styles (default)
-      "lua:py-3 lua:px-0 lua:border-b lua:border-gray-100 last:lua:border-b-0 lua:text-left",
-      "lua:before:content-[attr(data-label)] lua:before:float-left lua:before:font-normal before:lua:text-gray-700 lua:before:mr-4 lua:before:min-w-[100px]",
+      "lua:py-3 lua:px-0 lua:border-b lua:border-border lua:last:border-b-0 lua:text-left",
+      "lua:before:content-[attr(data-label)] lua:before:float-left lua:before:font-normal lua:before:text-foreground lua:before:mr-4 lua:before:min-w-[100px]",
       // Desktop table cell styles (md and up)
       "lua:md:px-4 lua:md:align-middle lua:md:whitespace-nowrap lua:md:text-left lua:md:border-b-0",
       "lua:md:before:content-none",
@@ -5705,7 +5701,7 @@ var TableCaption = React121.forwardRef(({ className, ...props }, ref) => /* @__P
   {
     ref,
     "data-slot": "table-caption",
-    className: cn("lua:text-gray-600 lua:mt-4 lua:text-sm", className),
+    className: cn("lua:text-muted-foreground lua:mt-4 lua:text-sm", className),
     ...props
   }
 ));
@@ -5718,7 +5714,7 @@ var SelectTrigger = React121.forwardRef(({ className, children, ...props }, ref)
   {
     ref,
     className: cn(
-      "lua:flex lua:h-10 lua:w-full lua:items-center lua:justify-between lua:rounded-md lua:border lua:border-gray-300 lua:bg-white lua:px-3 lua:py-2 lua:text-sm lua:text-gray-900 lua:ring-offset-white lua:placeholder:text-gray-500 lua:focus:outline-hidden lua:focus:ring-2 lua:focus:ring-blue-600 lua:focus:ring-offset-2 lua:disabled:cursor-not-allowed lua:disabled:opacity-50 [&>span]:lua:line-clamp-1",
+      "lua:flex lua:h-10 lua:w-full lua:items-center lua:justify-between lua:rounded-md lua:border lua:border-input lua:bg-card lua:px-3 lua:py-2 lua:text-sm lua:text-foreground lua:ring-offset-background lua:placeholder:text-muted-foreground lua:focus:outline-hidden lua:focus:ring-2 lua:focus:ring-ring lua:focus:ring-offset-2 lua:disabled:cursor-not-allowed lua:disabled:opacity-50 lua:[&>span]:line-clamp-1",
       className
     ),
     ...props,
@@ -5760,7 +5756,7 @@ var SelectContent = React121.forwardRef(({ className, children, position = "popp
   {
     ref,
     className: cn(
-      "lua:relative lua:z-50 lua:max-h-96 lua:min-w-32 lua:overflow-hidden lua:rounded-md lua:border lua:border-gray-200 lua:bg-white lua:text-gray-900 lua:shadow-md data-[state=open]:lua:animate-in data-[state=closed]:lua:animate-out data-[state=closed]:lua:fade-out-0 data-[state=open]:lua:fade-in-0 data-[state=closed]:lua:zoom-out-95 data-[state=open]:lua:zoom-in-95",
+      "lua:relative lua:z-50 lua:max-h-96 lua:min-w-32 lua:overflow-hidden lua:rounded-md lua:border lua:border-border lua:bg-popover lua:text-popover-foreground lua:shadow-md lua:data-[state=open]:animate-in lua:data-[state=closed]:animate-out lua:data-[state=closed]:fade-out-0 lua:data-[state=open]:fade-in-0 lua:data-[state=closed]:zoom-out-95 lua:data-[state=open]:zoom-in-95",
       className
     ),
     position,
@@ -5796,7 +5792,7 @@ var SelectItem = React121.forwardRef(({ className, children, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "lua:relative lua:flex lua:w-full lua:cursor-default lua:select-none lua:items-center lua:rounded-sm lua:py-2 lua:pl-8 lua:pr-2 lua:text-sm lua:outline-hidden lua:focus:bg-gray-100 lua:focus:text-gray-900 data-disabled:lua:pointer-events-none data-disabled:lua:opacity-50",
+      "lua:relative lua:flex lua:w-full lua:cursor-default lua:select-none lua:items-center lua:rounded-sm lua:py-2 lua:pl-8 lua:pr-2 lua:text-sm lua:outline-hidden lua:focus:bg-secondary lua:focus:text-foreground lua:data-disabled:pointer-events-none lua:data-disabled:opacity-50",
       className
     ),
     ...props,
@@ -5811,7 +5807,7 @@ var SelectSeparator = React121.forwardRef(({ className, ...props }, ref) => /* @
   SelectPrimitive.Separator,
   {
     ref,
-    className: cn("lua:-mx-1 lua:my-1 lua:h-px lua:bg-gray-200", className),
+    className: cn("lua:-mx-1 lua:my-1 lua:h-px lua:bg-border", className),
     ...props
   }
 ));
@@ -5832,12 +5828,12 @@ var Switch = React121.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   SwitchPrimitives.Root,
   {
     className: cn(
-      "lua:peer lua:inline-flex lua:h-5 lua:w-9 lua:shrink-0 lua:cursor-pointer lua:items-center lua:rounded-full lua:border-2 lua:border-transparent lua:transition-all lua:focus-visible:outline-none lua:focus-visible:ring-2 lua:focus-visible:ring-blue-600 lua:focus-visible:ring-offset-2 lua:disabled:cursor-not-allowed lua:disabled:opacity-50 lua:data-[state=checked]:bg-blue-500 lua:data-[state=unchecked]:bg-gray-200",
+      "lua:peer lua:inline-flex lua:h-5 lua:w-9 lua:shrink-0 lua:cursor-pointer lua:items-center lua:rounded-full lua:border-2 lua:border-transparent lua:transition-all lua:focus-visible:outline-none lua:focus-visible:ring-2 lua:focus-visible:ring-ring lua:focus-visible:ring-offset-2 lua:focus-visible:ring-offset-background lua:disabled:cursor-not-allowed lua:disabled:opacity-50 lua:data-[state=checked]:bg-primary lua:data-[state=unchecked]:bg-secondary",
       className
     ),
     ...props,
     ref,
-    children: /* @__PURE__ */ jsx(SwitchPrimitives.Thumb, { className: "lua:pointer-events-none lua:block lua:h-4 lua:w-4 lua:rounded-full lua:bg-white lua:shadow-lg lua:ring-0 lua:transition-transform lua:data-[state=checked]:translate-x-4 lua:data-[state=unchecked]:translate-x-0" })
+    children: /* @__PURE__ */ jsx(SwitchPrimitives.Thumb, { className: "lua:pointer-events-none lua:block lua:h-4 lua:w-4 lua:rounded-full lua:bg-background lua:shadow-lg lua:ring-0 lua:transition-transform lua:data-[state=checked]:translate-x-4 lua:data-[state=unchecked]:translate-x-0" })
   }
 ));
 Switch.displayName = SwitchPrimitives.Root.displayName;
@@ -5858,7 +5854,7 @@ var RadioGroupItem = React121.forwardRef(({ className, ...props }, ref) => {
     {
       ref,
       className: cn(
-        "lua:aspect-square lua:h-4 lua:w-4 lua:rounded-full lua:border lua:border-blue-600 lua:text-blue-600 lua:ring-offset-white lua:focus:outline-hidden lua:focus-visible:ring-2 lua:focus-visible:ring-blue-600 lua:focus-visible:ring-offset-2 lua:disabled:cursor-not-allowed lua:disabled:opacity-50",
+        "lua:aspect-square lua:h-4 lua:w-4 lua:rounded-full lua:border lua:border-primary lua:text-primary lua:ring-offset-background lua:focus:outline-hidden lua:focus-visible:ring-2 lua:focus-visible:ring-ring lua:focus-visible:ring-offset-2 lua:disabled:cursor-not-allowed lua:disabled:opacity-50",
         className
       ),
       ...props,
@@ -5872,7 +5868,7 @@ var Checkbox = React121.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "lua:peer lua:h-4 lua:w-4 lua:shrink-0 lua:rounded lua:border lua:border-gray-300 lua:bg-white lua:shadow-xs lua:transition-all lua:outline-hidden lua:focus-visible:ring-2 lua:focus-visible:ring-blue-600 lua:focus-visible:ring-offset-2 lua:focus-visible:ring-offset-white lua:disabled:cursor-not-allowed lua:disabled:opacity-50 lua:data-[state=checked]:bg-blue-600 lua:data-[state=checked]:text-white lua:data-[state=checked]:border-blue-600 lua:aria-[invalid=true]:border-red-500 lua:aria-[invalid=true]:ring-red-200",
+      "lua:peer lua:h-4 lua:w-4 lua:shrink-0 lua:rounded lua:border lua:border-input lua:bg-card lua:shadow-xs lua:transition-all lua:outline-hidden lua:focus-visible:ring-2 lua:focus-visible:ring-ring lua:focus-visible:ring-offset-2 lua:focus-visible:ring-offset-background lua:disabled:cursor-not-allowed lua:disabled:opacity-50 lua:data-[state=checked]:bg-primary lua:data-[state=checked]:text-primary-foreground lua:data-[state=checked]:border-primary lua:aria-[invalid=true]:border-destructive",
       className
     ),
     ...props,
@@ -5934,7 +5930,7 @@ var MultiSelect = React121.forwardRef(
         {
           ref,
           className: cn(
-            "lua:flex lua:h-10 lua:w-full lua:items-center lua:justify-between lua:rounded-md lua:border lua:border-gray-300 lua:bg-white lua:px-3 lua:py-2 lua:text-sm lua:text-gray-900 lua:ring-offset-white lua:placeholder:text-gray-500 lua:focus:outline-hidden lua:focus:ring-2 lua:focus:ring-blue-600 lua:focus:ring-offset-2 lua:disabled:cursor-not-allowed lua:disabled:opacity-50",
+            "lua:flex lua:h-10 lua:w-full lua:items-center lua:justify-between lua:rounded-md lua:border lua:border-input lua:bg-card lua:px-3 lua:py-2 lua:text-sm lua:text-foreground lua:ring-offset-background lua:placeholder:text-muted-foreground lua:focus:outline-hidden lua:focus:ring-2 lua:focus:ring-ring lua:focus:ring-offset-2 lua:disabled:cursor-not-allowed lua:disabled:opacity-50",
             className
           ),
           disabled,
@@ -5948,7 +5944,7 @@ var MultiSelect = React121.forwardRef(
               {
                 className: cn(
                   "lua:line-clamp-1",
-                  value.length === 0 && "lua:text-gray-500"
+                  value.length === 0 && "lua:text-muted-foreground"
                 ),
                 children: displayValue
               }
@@ -5960,7 +5956,7 @@ var MultiSelect = React121.forwardRef(
       /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
         DropdownMenuPrimitive.Content,
         {
-          className: "lua:z-50 lua:max-h-96 lua:w-[var(--radix-dropdown-menu-trigger-width)] lua:overflow-y-auto lua:overflow-x-hidden lua:rounded-md lua:border lua:border-gray-200 lua:bg-white lua:text-gray-900 lua:p-1 lua:shadow-md data-[state=open]:lua:animate-in data-[state=closed]:lua:animate-out data-[state=closed]:lua:fade-out-0 data-[state=open]:lua:fade-in-0 data-[state=closed]:lua:zoom-out-95 data-[state=open]:lua:zoom-in-95",
+          className: "lua:z-50 lua:max-h-96 lua:w-[var(--radix-dropdown-menu-trigger-width)] lua:overflow-y-auto lua:overflow-x-hidden lua:rounded-md lua:border lua:border-border lua:bg-popover lua:text-popover-foreground lua:p-1 lua:shadow-md lua:data-[state=open]:animate-in lua:data-[state=closed]:animate-out lua:data-[state=closed]:fade-out-0 lua:data-[state=open]:fade-in-0 lua:data-[state=closed]:zoom-out-95 lua:data-[state=open]:zoom-in-95",
           sideOffset: 4,
           align: "start",
           role: "listbox",
@@ -5970,7 +5966,7 @@ var MultiSelect = React121.forwardRef(
               /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: "lua:relative lua:flex lua:cursor-default lua:select-none lua:items-center lua:gap-2 lua:rounded-sm lua:px-2 lua:py-2 lua:text-sm lua:outline-hidden lua:transition-colors lua:focus:bg-gray-100 lua:focus:text-gray-900",
+                  className: "lua:relative lua:flex lua:cursor-default lua:select-none lua:items-center lua:gap-2 lua:rounded-sm lua:px-2 lua:py-2 lua:text-sm lua:outline-hidden lua:transition-colors lua:focus:bg-secondary lua:focus:text-foreground",
                   role: "option",
                   "aria-selected": isAllSelected,
                   children: [
@@ -5994,13 +5990,13 @@ var MultiSelect = React121.forwardRef(
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, { className: "lua:-mx-1 lua:my-1 lua:h-px lua:bg-gray-200" })
+              /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, { className: "lua:-mx-1 lua:my-1 lua:h-px lua:bg-border" })
             ] }),
             options.map((option) => /* @__PURE__ */ jsxs(
               "div",
               {
                 className: cn(
-                  "lua:relative lua:flex lua:cursor-default lua:select-none lua:items-center lua:gap-2 lua:rounded-sm lua:px-2 lua:py-2 lua:text-sm lua:outline-hidden lua:transition-colors lua:focus:bg-gray-100 lua:focus:text-gray-900",
+                  "lua:relative lua:flex lua:cursor-default lua:select-none lua:items-center lua:gap-2 lua:rounded-sm lua:px-2 lua:py-2 lua:text-sm lua:outline-hidden lua:transition-colors lua:focus:bg-secondary lua:focus:text-foreground",
                   option.disabled && "lua:pointer-events-none lua:opacity-50"
                 ),
                 role: "option",
@@ -6046,8 +6042,8 @@ var Slider = React121.forwardRef(({ className, ...props }, ref) => /* @__PURE__
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "lua:relative lua:h-2 lua:w-full lua:grow lua:overflow-hidden lua:rounded-full lua:bg-gray-200", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "lua:absolute lua:h-full lua:bg-gradient-to-r lua:from-blue-600 lua:to-purple-600" }) }),
-      /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "lua:block lua:h-5 lua:w-5 lua:rounded-full lua:border-2 lua:border-white lua:bg-purple-600 lua:shadow-lg lua:ring-offset-white lua:transition-all lua:focus-visible:outline-none lua:focus-visible:ring-2 lua:focus-visible:ring-blue-600 lua:focus-visible:ring-offset-2 lua:hover:shadow-xl lua:hover:scale-105 lua:active:scale-95 lua:disabled:bg-gray-200 lua:disabled:pointer-events-none lua:disabled:opacity-50" })
+      /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "lua:relative lua:h-2 lua:w-full lua:grow lua:overflow-hidden lua:rounded-full lua:bg-secondary", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "lua:absolute lua:h-full lua:bg-primary" }) }),
+      /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "lua:block lua:h-5 lua:w-5 lua:rounded-full lua:border-2 lua:border-background lua:bg-primary lua:shadow-lg lua:ring-offset-background lua:transition-all lua:focus-visible:outline-none lua:focus-visible:ring-2 lua:focus-visible:ring-ring lua:focus-visible:ring-offset-2 lua:hover:shadow-xl lua:hover:scale-105 lua:active:scale-95 lua:disabled:bg-muted lua:disabled:pointer-events-none lua:disabled:opacity-50" })
     ]
   }
 ));
@@ -6121,8 +6117,8 @@ function Calendar({
       showOutsideDays,
       className: cn(
         "lua:group/calendar lua:p-1.5 lua:rounded-md [--cell-size:1.5rem] lua:font-onest",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:lua:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:lua:rotate-180`,
+        String.raw`lua:rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`lua:rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className
       ),
       captionLayout,
@@ -6133,7 +6129,7 @@ function Calendar({
       classNames: {
         root: cn("lua:w-fit", defaultClassNames.root),
         months: cn(
-          "lua:relative lua:flex lua:flex-col lua:gap-2 md:lua:flex-row",
+          "lua:relative lua:flex lua:flex-col lua:gap-2 lua:md:flex-row",
           defaultClassNames.months
         ),
         month: cn(
@@ -6163,14 +6159,14 @@ function Calendar({
           defaultClassNames.dropdown
         ),
         caption_label: cn(
-          "lua:select-none lua:font-onest lua:font-semibold lua:text-gray-900",
-          captionLayout === "label" ? "lua:text-sm" : "[&>svg]:lua:text-gray-600 lua:flex lua:h-6 lua:items-center lua:gap-1 lua:rounded-md lua:pl-2 lua:pr-1 lua:text-xs [&>svg]:lua:size-3",
+          "lua:select-none lua:font-onest lua:font-semibold lua:text-foreground",
+          captionLayout === "label" ? "lua:text-sm" : "lua:[&>svg]:text-muted-foreground lua:flex lua:h-6 lua:items-center lua:gap-1 lua:rounded-md lua:pl-2 lua:pr-1 lua:text-xs lua:[&>svg]:size-3",
           defaultClassNames.caption_label
         ),
         table: "lua:w-full lua:border-collapse",
         weekdays: cn("lua:flex", defaultClassNames.weekdays),
         weekday: cn(
-          "lua:text-gray-600 lua:flex-1 lua:select-none lua:text-xs lua:font-onest lua:font-medium",
+          "lua:text-muted-foreground lua:flex-1 lua:select-none lua:text-xs lua:font-onest lua:font-medium",
           defaultClassNames.weekday
         ),
         week: cn("lua:mt-1 lua:flex lua:w-full", defaultClassNames.week),
@@ -6179,26 +6175,26 @@ function Calendar({
           defaultClassNames.week_number_header
         ),
         week_number: cn(
-          "lua:text-gray-600 lua:select-none lua:text-xs lua:font-onest",
+          "lua:text-muted-foreground lua:select-none lua:text-xs lua:font-onest",
           defaultClassNames.week_number
         ),
         day: cn(
-          "lua:relative lua:w-full lua:h-full lua:p-0 lua:text-center lua:group/day lua:aspect-square lua:select-none",
+          "lua:relative lua:w-full lua:h-full lua:p-0 lua:text-center lua:group/day lua:aspect-square lua:select-none lua:text-foreground",
           defaultClassNames.day
         ),
-        range_start: cn("lua:bg-gray-100", defaultClassNames.range_start),
-        range_middle: cn("lua:bg-gray-50", defaultClassNames.range_middle),
-        range_end: cn("lua:bg-gray-100", defaultClassNames.range_end),
+        range_start: cn("lua:bg-secondary", defaultClassNames.range_start),
+        range_middle: cn("lua:bg-muted", defaultClassNames.range_middle),
+        range_end: cn("lua:bg-secondary", defaultClassNames.range_end),
         today: cn(
-          "lua:bg-gray-100 lua:text-gray-900 lua:font-bold",
+          "lua:bg-secondary lua:text-foreground lua:font-bold",
           defaultClassNames.today
         ),
         outside: cn(
-          "lua:text-gray-400 aria-selected:lua:text-gray-400",
+          "lua:text-muted-foreground lua:opacity-50 lua:aria-selected:text-muted-foreground",
           defaultClassNames.outside
         ),
         disabled: cn(
-          "lua:text-gray-400 lua:opacity-50",
+          "lua:text-muted-foreground lua:opacity-50",
           defaultClassNames.disabled
         ),
         hidden: cn("lua:invisible", defaultClassNames.hidden),
@@ -6225,15 +6221,15 @@ var PopoverContent = React121.forwardRef(({ className, align = "center", sideOff
     align,
     sideOffset,
     className: cn(
-      // Base styles - Luaniverse design
-      "lua:z-50 lua:rounded-md lua:border lua:border-gray-200 lua:bg-white lua:shadow-lg lua:font-onest",
+      // Base styles - Luaniverse design with semantic tokens
+      "lua:z-50 lua:rounded-md lua:border lua:border-border lua:bg-popover lua:text-popover-foreground lua:shadow-lg lua:font-onest",
       // Animation
       "lua:transition-all lua:duration-200",
-      "data-[state=open]:lua:animate-in data-[state=open]:lua:fade-in-0 data-[state=open]:lua:zoom-in-95",
-      "data-[state=closed]:lua:animate-out data-[state=closed]:lua:fade-out-0 data-[state=closed]:lua:zoom-out-95",
-      "data-[side=bottom]:lua:slide-in-from-top-2 data-[side=left]:lua:slide-in-from-right-2 data-[side=right]:lua:slide-in-from-left-2 data-[side=top]:lua:slide-in-from-bottom-2",
+      "lua:data-[state=open]:animate-in lua:data-[state=open]:fade-in-0 lua:data-[state=open]:zoom-in-95",
+      "lua:data-[state=closed]:animate-out lua:data-[state=closed]:fade-out-0 lua:data-[state=closed]:zoom-out-95",
+      "lua:data-[side=bottom]:slide-in-from-top-2 lua:data-[side=left]:slide-in-from-right-2 lua:data-[side=right]:slide-in-from-left-2 lua:data-[side=top]:slide-in-from-bottom-2",
       // Focus
-      "focus-visible:lua:outline-none focus-visible:lua:ring-2 focus-visible:lua:ring-gray-900 focus-visible:lua:ring-offset-2",
+      "lua:focus-visible:outline-none lua:focus-visible:ring-2 lua:focus-visible:ring-ring lua:focus-visible:ring-offset-2",
       className
     ),
     ...props
@@ -6243,6 +6239,269 @@ PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // src/safelist.js
 var luaniverseSafelist = [
+  // Semantic Color Tokens - Emphasis (black-based)
+  "lua:bg-emphasis-base",
+  "lua:bg-emphasis-hover",
+  "lua:bg-emphasis-active",
+  "lua:text-emphasis-text",
+  "lua:text-emphasis-text-inverse",
+  "lua:hover:bg-emphasis-base",
+  "lua:hover:bg-emphasis-hover",
+  "lua:hover:bg-emphasis-active",
+  "lua:active:bg-emphasis-base",
+  "lua:active:bg-emphasis-hover",
+  "lua:active:bg-emphasis-active",
+  "lua:focus-visible:bg-emphasis-base",
+  // Semantic Color Tokens - Brand (blue-based)
+  "lua:bg-brand-base",
+  "lua:bg-brand-hover",
+  "lua:bg-brand-active",
+  "lua:text-brand-text",
+  "lua:text-brand-text-inverse",
+  "lua:border-brand-border",
+  "lua:hover:bg-brand-base",
+  "lua:hover:bg-brand-hover",
+  "lua:hover:bg-brand-active",
+  "lua:hover:text-brand-text",
+  "lua:active:bg-brand-base",
+  "lua:active:bg-brand-hover",
+  "lua:active:bg-brand-active",
+  "lua:active:text-brand-text",
+  "lua:focus-visible:bg-brand-base",
+  "lua:focus-visible:border-brand-border",
+  // Semantic Color Tokens - Neutral (gray-based)
+  "lua:bg-neutral-base",
+  "lua:bg-neutral-hover",
+  "lua:bg-neutral-active",
+  "lua:text-neutral-text",
+  "lua:text-neutral-text-muted",
+  "lua:border-neutral-border",
+  "lua:border-neutral-border-strong",
+  "lua:hover:bg-neutral-base",
+  "lua:hover:bg-neutral-hover",
+  "lua:hover:bg-neutral-active",
+  "lua:hover:text-neutral-text",
+  "lua:active:bg-neutral-base",
+  "lua:active:bg-neutral-hover",
+  "lua:active:bg-neutral-active",
+  "lua:focus-visible:bg-neutral-base",
+  // Semantic Color Tokens - Outline
+  "lua:bg-outline-bg",
+  "lua:bg-outline-hover",
+  "lua:bg-outline-active",
+  "lua:border-outline-border",
+  "lua:border-outline-border-hover",
+  "lua:hover:bg-outline-bg",
+  "lua:hover:bg-outline-hover",
+  "lua:hover:bg-outline-active",
+  "lua:active:bg-outline-bg",
+  "lua:active:bg-outline-hover",
+  "lua:active:bg-outline-active",
+  "lua:focus-visible:bg-outline-bg",
+  "lua:focus-visible:border-outline-border-hover",
+  // Semantic Color Tokens - Danger (red-based)
+  "lua:bg-danger-base",
+  "lua:bg-danger-hover",
+  "lua:bg-danger-active",
+  "lua:text-danger-text",
+  "lua:text-danger-text-inverse",
+  "lua:border-danger-base",
+  "lua:hover:bg-danger-base",
+  "lua:hover:bg-danger-hover",
+  "lua:hover:bg-danger-active",
+  "lua:active:bg-danger-base",
+  "lua:active:bg-danger-hover",
+  "lua:active:bg-danger-active",
+  "lua:focus-visible:bg-danger-base",
+  // Semantic Color Tokens - Success (green-based)
+  "lua:bg-success-base",
+  "lua:bg-success-hover",
+  "lua:bg-success-active",
+  "lua:text-success-text",
+  "lua:text-success-text-inverse",
+  "lua:hover:bg-success-base",
+  "lua:hover:bg-success-hover",
+  "lua:hover:bg-success-active",
+  "lua:active:bg-success-base",
+  "lua:active:bg-success-hover",
+  "lua:active:bg-success-active",
+  "lua:focus-visible:bg-success-base",
+  // Semantic Color Tokens - Warning (yellow-based)
+  "lua:bg-warning-base",
+  "lua:bg-warning-hover",
+  "lua:bg-warning-active",
+  "lua:text-warning-text",
+  "lua:text-warning-text-inverse",
+  "lua:hover:bg-warning-base",
+  "lua:hover:bg-warning-hover",
+  "lua:hover:bg-warning-active",
+  "lua:active:bg-warning-base",
+  "lua:active:bg-warning-hover",
+  "lua:active:bg-warning-active",
+  "lua:focus-visible:bg-warning-base",
+  // Semantic Color Tokens - Disabled State
+  "lua:bg-disabled-bg",
+  "lua:text-disabled-text",
+  "lua:border-disabled-border",
+  "lua:disabled:bg-disabled-bg",
+  "lua:disabled:text-disabled-text",
+  "lua:disabled:border-disabled-border",
+  // Semantic Color Tokens - Focus Rings
+  "lua:ring-focus-ring-emphasis",
+  "lua:ring-focus-ring-brand",
+  "lua:ring-focus-ring-danger",
+  "lua:ring-offset-focus-ring-offset",
+  "lua:focus-visible:ring-focus-ring-emphasis",
+  "lua:focus-visible:ring-focus-ring-brand",
+  "lua:focus-visible:ring-focus-ring-danger",
+  "lua:focus-visible:ring-offset-focus-ring-offset",
+  // Dark Mode Variants - Default/Emphasis
+  "lua:dark:bg-gray-50",
+  "lua:dark:bg-gray-100",
+  "lua:dark:bg-gray-200",
+  "lua:dark:text-gray-900",
+  "lua:dark:hover:bg-gray-50",
+  "lua:dark:active:bg-gray-200",
+  "lua:dark:focus-visible:bg-gray-100",
+  "lua:dark:focus-visible:ring-gray-300",
+  "lua:[a&]:dark:hover:bg-gray-50",
+  // Dark Mode Variants - Primary/Brand
+  "lua:dark:bg-blue-500",
+  "lua:dark:bg-blue-600",
+  "lua:dark:bg-blue-700",
+  "lua:dark:text-blue-400",
+  "lua:dark:border-blue-400",
+  "lua:dark:border-blue-600",
+  "lua:dark:border-blue-700",
+  "lua:dark:hover:bg-blue-500",
+  "lua:dark:hover:bg-blue-600",
+  "lua:dark:hover:text-white",
+  "lua:dark:hover:border-blue-600",
+  "lua:dark:active:bg-blue-700",
+  "lua:dark:active:border-blue-700",
+  "lua:dark:focus-visible:bg-blue-600",
+  "lua:dark:focus-visible:ring-blue-400",
+  "lua:[a&]:dark:hover:bg-blue-500",
+  // Dark Mode Variants - Secondary/Neutral
+  "lua:dark:bg-gray-600",
+  "lua:dark:bg-gray-700",
+  "lua:dark:bg-gray-800",
+  "lua:dark:bg-gray-900",
+  "lua:dark:text-gray-100",
+  "lua:dark:text-gray-200",
+  "lua:dark:text-gray-400",
+  "lua:dark:border-gray-600",
+  "lua:dark:border-gray-700",
+  "lua:dark:hover:bg-gray-600",
+  "lua:dark:hover:bg-gray-700",
+  "lua:dark:hover:bg-gray-800",
+  "lua:dark:active:bg-gray-600",
+  "lua:dark:active:bg-gray-700",
+  "lua:dark:focus-visible:bg-gray-800",
+  "lua:dark:focus-visible:bg-gray-900",
+  "lua:dark:focus-visible:border-gray-600",
+  "lua:dark:focus-visible:ring-gray-400",
+  "lua:[a&]:dark:hover:bg-gray-700",
+  "lua:[a&]:dark:hover:bg-gray-800",
+  // Dark Mode Variants - Danger/Destructive
+  "lua:dark:bg-red-500",
+  "lua:dark:bg-red-600",
+  "lua:dark:bg-red-700",
+  "lua:dark:hover:bg-red-500",
+  "lua:dark:active:bg-red-700",
+  "lua:dark:focus-visible:bg-red-600",
+  "lua:dark:focus-visible:ring-red-400",
+  "lua:[a&]:dark:hover:bg-red-500",
+  // Dark Mode Variants - Success
+  "lua:dark:bg-green-500",
+  "lua:dark:bg-green-600",
+  "lua:dark:hover:bg-green-500",
+  "lua:[a&]:dark:hover:bg-green-500",
+  // Dark Mode Variants - Warning
+  "lua:dark:bg-amber-500",
+  "lua:dark:bg-amber-600",
+  "lua:dark:text-gray-900",
+  "lua:dark:hover:bg-amber-500",
+  "lua:[a&]:dark:hover:bg-amber-500",
+  // Dark Mode Variants - Disabled
+  "lua:dark:disabled:bg-white/5",
+  "lua:dark:disabled:text-white/30",
+  // Semantic Color Tokens - Base
+  "lua:bg-background",
+  "lua:text-foreground",
+  // Semantic Color Tokens - Card & Surface
+  "lua:bg-card",
+  "lua:text-card-foreground",
+  "lua:border-border",
+  // Semantic Color Tokens - Popover
+  "lua:bg-popover",
+  "lua:text-popover-foreground",
+  // Semantic Color Tokens - Default (Emphasis - Black/Bold)
+  "lua:bg-default",
+  "lua:text-default-foreground",
+  "lua:bg-default-hover",
+  "lua:hover:bg-default-hover",
+  "lua:bg-default-active",
+  "lua:active:bg-default-active",
+  "lua:[a&]:hover:bg-default-hover",
+  // Semantic Color Tokens - Primary (Brand - Blue)
+  "lua:bg-primary",
+  "lua:text-primary-foreground",
+  "lua:text-primary",
+  "lua:border-primary",
+  "lua:bg-primary-hover",
+  "lua:hover:bg-primary",
+  "lua:hover:bg-primary-hover",
+  "lua:hover:text-primary-foreground",
+  "lua:hover:border-primary",
+  "lua:bg-primary-active",
+  "lua:active:bg-primary-hover",
+  "lua:active:border-primary-hover",
+  "lua:[a&]:hover:bg-primary-hover",
+  // Semantic Color Tokens - Secondary (Neutral - Gray)
+  "lua:bg-secondary",
+  "lua:text-secondary-foreground",
+  "lua:bg-secondary-hover",
+  "lua:hover:bg-secondary",
+  "lua:hover:bg-secondary-hover",
+  "lua:bg-secondary-active",
+  "lua:active:bg-secondary-active",
+  "lua:[a&]:hover:bg-secondary",
+  "lua:[a&]:hover:bg-secondary-hover",
+  // Semantic Color Tokens - Muted
+  "lua:bg-muted",
+  "lua:text-muted-foreground",
+  // Semantic Color Tokens - Accent
+  "lua:bg-accent",
+  "lua:text-accent-foreground",
+  // Semantic Color Tokens - Destructive (Danger - Red)
+  "lua:bg-destructive",
+  "lua:text-destructive-foreground",
+  "lua:bg-destructive-hover",
+  "lua:hover:bg-destructive-hover",
+  "lua:bg-destructive-active",
+  "lua:active:bg-destructive-active",
+  "lua:[a&]:hover:bg-destructive-hover",
+  // Semantic Color Tokens - Success (Green)
+  "lua:bg-success",
+  "lua:text-success-foreground",
+  "lua:bg-success-hover",
+  "lua:hover:bg-success-hover",
+  "lua:[a&]:hover:bg-success-hover",
+  // Semantic Color Tokens - Warning (Amber)
+  "lua:bg-warning",
+  "lua:text-warning-foreground",
+  "lua:bg-warning-hover",
+  "lua:hover:bg-warning-hover",
+  "lua:[a&]:hover:bg-warning-hover",
+  // Semantic Color Tokens - Input & Ring
+  "lua:border-input",
+  "lua:ring-ring",
+  "lua:focus-visible:ring-ring",
+  "lua:focus-visible:ring-2",
+  "lua:focus-visible:ring-offset-2",
+  "lua:disabled:opacity-50",
+  "lua:disabled:pointer-events-none",
   // Dialog positioning
   "left-[50%]",
   "top-[50%]",
@@ -6320,8 +6579,9 @@ var luaniverseSafelist = [
   "lua:lg:border-r-2",
   "lua:min-h-0",
   // Tables
-  "lua:bg-gray-100",
-  "lua:md:hover:bg-gray-50",
+  "lua:relative",
+  "lua:md:hover:bg-muted",
+  "lua:md:data-[state=selected]:bg-secondary",
   "lua:transition-colors",
   "lua:block",
   "lua:md:table-row",
@@ -6329,57 +6589,96 @@ var luaniverseSafelist = [
   "lua:md:table",
   "lua:md:table-header-group",
   "lua:md:table-cell",
+  "lua:md:table-footer-group",
   "lua:[&_tr]:border-none",
+  "lua:[&_tr:last-child]:border-0",
+  "lua:[&>tr]:last:border-b-0",
   "lua:hidden",
   "lua:shadow-sm",
+  "lua:md:shadow-none",
   "lua:text-sm",
   "lua:w-full",
   "lua:caption-bottom",
   "lua:h-11",
   "lua:align-middle",
+  "lua:md:align-middle",
+  "lua:px-4",
   "lua:md:px-4",
+  "lua:py-3",
+  "lua:px-0",
+  "lua:p-4",
+  "lua:md:p-0",
+  "lua:text-left",
   "lua:md:text-left",
-  "lua:md:border-b",
-  "lua:md:border-b-0",
   "lua:font-medium",
   "lua:space-y-4",
+  "lua:md:space-y-0",
   "lua:cursor-pointer",
+  "lua:border-0",
+  "lua:md:border-0",
   "lua:md:border-1",
   "lua:rounded-xl",
+  "lua:rounded-lg",
+  "lua:md:rounded-none",
   "lua:overflow-x-auto",
-  "lua:[&_tr:last-child]:border-0",
-  "last:lua:border-b-0",
+  "lua:last:border-b-0",
   "lua:border-b",
-  "lua:border-gray-100",
-  "lua:md:border-0",
-  "lua:md:border-gray-200",
+  "lua:md:border-b",
+  "lua:md:border-b-0",
+  "lua:border-t",
   "lua:border",
-  "lua:border-gray-200",
+  "lua:md:bg-transparent",
+  "lua:mb-4",
+  "lua:md:mb-0",
+  "lua:mt-4",
+  "lua:md:mt-0",
+  "lua:whitespace-nowrap",
+  "lua:md:whitespace-nowrap",
+  "lua:[&:has([role=checkbox])]:pr-0",
+  "lua:[&>[role=checkbox]]:translate-y-[2px]",
+  "lua:before:text-foreground",
+  "lua:before:content-[attr(data-label)]",
+  "lua:before:float-left",
+  "lua:before:font-normal",
+  "lua:before:mr-4",
+  "lua:before:min-w-[100px]",
+  "lua:md:before:content-none",
+  // IconButton
+  "lua:size-7",
+  "lua:size-10",
+  "lua:size-12",
+  "lua:p-2",
+  "lua:p-3",
   // Checkbox
   "lua:peer",
-  "lua:data-[state=checked]:bg-blue-600",
-  "lua:data-[state=checked]:text-white",
-  "lua:aria-[invalid=true]:border-red-500",
-  "lua:aria-[invalid=true]:ring-red-200",
-  "lua:data-[state=checked]:border-blue-600",
+  "lua:h-4",
+  "lua:w-4",
+  "lua:shrink-0",
+  "lua:rounded",
+  "lua:shadow-xs",
+  "lua:transition-all",
+  "lua:outline-hidden",
+  "lua:data-[state=checked]:bg-primary",
+  "lua:data-[state=checked]:text-primary-foreground",
+  "lua:data-[state=checked]:border-primary",
+  "lua:aria-[invalid=true]:border-destructive",
   "lua:disabled:opacity-50",
   "lua:disabled:cursor-not-allowed",
-  "lua:focus-visible:ring-offset-white",
   "lua:focus-visible:ring-offset-2",
-  "lua:transition-all",
-  "lua:shadow-xs",
-  "lua:shrink-0",
-  "lua:bg-gray-200",
-  "lua:-mx-1",
-  "lua:my-1",
-  "lua:h-px",
+  "lua:transition-none",
+  // Switch
+  "lua:data-[state=checked]:bg-primary",
+  "lua:data-[state=unchecked]:bg-secondary",
+  "lua:data-[state=checked]:translate-x-4",
+  "lua:data-[state=unchecked]:translate-x-0",
   "lua:w-[var(--radix-dropdown-menu-trigger-width)]",
   // tabs
-  "lua:data-[state=active]:text-blue-600",
+  "lua:data-[state=active]:bg-accent-subtle",
+  "lua:data-[state=active]:text-accent-subtle-foreground",
+  "lua:data-[state=active]:hover:bg-accent-subtle-hover",
   "lua:data-[state=active]:border-b-2",
-  "lua:data-[state=active]:border-blue-600",
   "lua:data-[state=active]:-mb-px",
-  "lua:hover:text-gray-900",
+  "lua:hover:bg-secondary",
   "lua:disabled:pointer-events-none",
   "lua:focus-visible:outline-hidden",
   "lua:whitespace-nowrap",
@@ -6388,10 +6687,11 @@ var luaniverseSafelist = [
   "lua:inline-flex",
   "lua:rounded-full",
   "lua:py-1",
-  "lua:data-[state=active]:bg-blue-50",
-  "lua:data-[state=active]:text-blue-800",
-  "lua:data-[state=active]:hover:bg-blue-100",
-  "lua:hover:bg-gray-100",
+  "lua:px-3",
+  "lua:text-sm",
+  "lua:font-medium",
+  "lua:mt-2",
+  "lua:flex-wrap",
   // carousel
   "lua:justify-center",
   "lua:overflow-hidden",
@@ -6422,8 +6722,7 @@ var luaniverseSafelist = [
   "lua:z-50",
   "lua:backdrop-blur-sm",
   "lua:bg-black/80",
-  "lua:data-[state=open]:bg-gray-100",
-  "lua:focus:ring-blue-600",
+  "lua:data-[state=open]:bg-secondary",
   "lua:focus:outline-hidden",
   "lua:hover:opacity-100",
   "lua:transition-opacity",
@@ -6464,14 +6763,10 @@ var luaniverseSafelist = [
   "lua:max-h-96",
   "lua:min-w-32",
   // slider
-  "lua:disabled:bg-gray-200",
+  "lua:disabled:bg-muted",
   "lua:hover:shadow-xl",
   "lua:hover:scale-105",
   "lua:active:scale-95",
-  "lua:bg-gradient-to-r",
-  "lua:from-blue-600",
-  "lua:to-purple-600",
-  "lua:bg-purple-600",
   // input
   "lua:text-gray-600",
   "lua:cursor-not-allowed",
@@ -6487,38 +6782,119 @@ var luaniverseSafelist = [
   "lua:bg-transparent",
   "lua:px-3",
   "lua:text-base",
-  "file:lua:border-0",
-  "file:lua:bg-transparent",
-  "file:lua:text-sm",
-  "file:lua:font-medium",
-  "file:lua:text-gray-900",
-  "placeholder:lua:text-gray-500",
-  "focus-visible:lua:outline-hidden",
-  "focus-visible:lua:ring-2",
-  "focus-visible:lua:ring-offset-2",
-  "focus-visible:lua:ring-offset-white",
+  "lua:file:border-0",
+  "lua:file:bg-transparent",
+  "lua:file:text-sm",
+  "lua:file:font-medium",
+  "lua:file:text-foreground",
+  "lua:placeholder:text-muted-foreground",
+  "lua:focus-visible:outline-hidden",
+  "lua:focus-visible:ring-2",
+  "lua:focus-visible:ring-offset-2",
+  "lua:focus-visible:ring-offset-white",
+  "lua:focus-visible:ring-offset-background",
   "lua:border-gray-300",
-  "focus-visible:lua:ring-blue-600",
+  "lua:border-input",
+  "lua:focus-visible:ring-ring",
   "lua:border-red-600",
-  "focus-visible:lua:ring-red-600",
+  "lua:border-destructive",
+  "lua:focus-visible:ring-destructive",
   "lua:border-green-500",
-  "focus-visible:lua:ring-green-500",
+  "lua:border-success",
+  "lua:focus-visible:ring-success",
   "lua:opacity-50",
-  "placeholder:lua:text-gray-400",
   "lua:pr-10",
-  "md:lua:text-sm",
+  "lua:md:text-sm",
   "lua:right-3",
   "lua:mt-2",
   "lua:text-red-600",
   "lua:text-green-600",
+  "lua:text-success",
+  // Textarea
+  "lua:min-h-16",
+  "lua:resize-none",
+  "lua:resize-y",
+  "lua:resize-x",
+  "lua:resize",
+  "lua:py-2",
+  "lua:duration-200",
   // Tooltip
-  "lua:rounded-lg"
+  "lua:z-50",
+  "lua:overflow-hidden",
+  "lua:px-3",
+  "lua:py-2",
+  "lua:text-xs",
+  "lua:transition-all",
+  "lua:duration-200",
+  "lua:shadow-lg",
+  "lua:rounded-lg",
+  "lua:fill-popover",
+  "lua:stroke-border",
+  // Calendar
+  "lua:aspect-square",
+  "lua:border-collapse",
+  "lua:group/calendar",
+  "lua:group/day",
+  "lua:mt-1",
+  "lua:inset-x-0",
+  "lua:aria-selected:text-muted-foreground",
+  "lua:invisible",
+  "lua:[&>svg]:text-muted-foreground",
+  "lua:[&>svg]:size-3",
+  "lua:pl-2",
+  "lua:pr-1",
+  "lua:ring-offset-background",
+  "lua:placeholder:text-muted-foreground",
+  "lua:line-clamp-1",
+  "lua:md:grid-cols-2",
+  "lua:grid-cols-2",
+  "lua:cursor-not-allowed",
+  "lua:font-semibold",
+  // Dialog
+  "lua:sm:max-w-[425px]",
+  "lua:sm:max-w-[500px]",
+  "lua:grid-cols-4",
+  "lua:col-span-3",
+  "lua:space-y-3",
+  "lua:space-y-2",
+  "lua:py-0.5",
+  // Select
+  "lua:rotate-90",
+  "lua:rotate-270",
+  "lua:data-[state=open]:animate-in",
+  "lua:data-[state=closed]:animate-out",
+  "lua:data-[state=closed]:fade-out-0",
+  "lua:data-[state=open]:fade-in-0",
+  "lua:data-[state=closed]:zoom-out-95",
+  "lua:data-[state=open]:zoom-in-95",
+  "lua:data-disabled:pointer-events-none",
+  "lua:data-disabled:opacity-50",
+  "lua:has-disabled:opacity-50",
+  "lua:[&>span]:line-clamp-1",
+  // Pagination
+  "lua:no-underline",
+  "lua:w-auto",
+  "lua:sm:inline",
+  "lua:active:bg-default-active",
+  // MultiSelect
+  "lua:w-[var(--radix-dropdown-menu-trigger-width)]",
+  "lua:overflow-y-auto",
+  "lua:overflow-x-hidden",
+  "lua:max-h-96",
+  "lua:line-clamp-1",
+  // Popover
+  "lua:w-80",
+  "lua:data-[side=bottom]:slide-in-from-top-2",
+  "lua:data-[side=left]:slide-in-from-right-2",
+  "lua:data-[side=right]:slide-in-from-left-2",
+  "lua:data-[side=top]:slide-in-from-bottom-2",
+  "lua:duration-200"
 ];
 
 // src/tailwind.preset.js
 var luaniversePreset = {
-  // Dark mode disabled globally
-  darkMode: false,
+  // Dark mode enabled using class strategy
+  darkMode: "class",
   // Safelist story-specific arbitrary values that are hard to standardize
   safelist: luaniverseSafelist,
   theme: {