@almadar/ui 2.24.5 → 2.24.8

package/dist/marketing/index.cjs

@@ -2638,28 +2638,28 @@ var marginYStyles = {
 };
 var bgStyles = {
   transparent: "bg-transparent",
-  primary: "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-  secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
-  muted: "bg-[var(--color-muted)] text-[var(--color-foreground)]",
-  accent: "bg-[var(--color-accent)] text-[var(--color-accent-foreground)]",
-  surface: "bg-[var(--color-card)]",
-  overlay: "bg-[var(--color-card)]/80 backdrop-blur-sm"
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  muted: "bg-muted text-foreground",
+  accent: "bg-accent text-accent-foreground",
+  surface: "bg-card",
+  overlay: "bg-card/80 backdrop-blur-sm"
 };
 var roundedStyles = {
   none: "rounded-none",
-  sm: "rounded-[var(--radius-sm)]",
-  md: "rounded-[var(--radius-md)]",
-  lg: "rounded-[var(--radius-lg)]",
-  xl: "rounded-[var(--radius-xl)]",
-  "2xl": "rounded-[var(--radius-xl)]",
-  full: "rounded-[var(--radius-full)]"
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-xl",
+  full: "rounded-full"
 };
 var shadowStyles = {
   none: "shadow-none",
-  sm: "shadow-[var(--shadow-sm)]",
-  md: "shadow-[var(--shadow-main)]",
-  lg: "shadow-[var(--shadow-lg)]",
-  xl: "shadow-[var(--shadow-lg)]"
+  sm: "shadow-sm",
+  md: "shadow",
+  lg: "shadow-lg",
+  xl: "shadow-lg"
 };
 var displayStyles = {
   block: "block",
@@ -2747,7 +2747,7 @@ var Box = React5__default.default.forwardRef(
           // Background
           bgStyles[bg],
           // Border - uses theme variables
-          border && "border-[length:var(--border-width)] border-[var(--color-border)]",
+          border && "border-[length:var(--border-width)] border-border",
           // Rounded
           roundedStyles[rounded],
           // Shadow
@@ -2854,30 +2854,30 @@ var Stack = ({
 var VStack = (props) => /* @__PURE__ */ jsxRuntime.jsx(Stack, { direction: "vertical", ...props });
 var HStack = (props) => /* @__PURE__ */ jsxRuntime.jsx(Stack, { direction: "horizontal", ...props });
 var variantStyles = {
-  h1: "text-4xl font-bold tracking-tight text-[var(--color-foreground)]",
-  h2: "text-3xl font-bold tracking-tight text-[var(--color-foreground)]",
-  h3: "text-2xl font-bold text-[var(--color-foreground)]",
-  h4: "text-xl font-bold text-[var(--color-foreground)]",
-  h5: "text-lg font-bold text-[var(--color-foreground)]",
-  h6: "text-base font-bold text-[var(--color-foreground)]",
-  heading: "text-2xl font-bold text-[var(--color-foreground)]",
-  subheading: "text-lg font-semibold text-[var(--color-foreground)]",
-  body1: "text-base font-normal text-[var(--color-foreground)]",
-  body2: "text-sm font-normal text-[var(--color-foreground)]",
-  body: "text-base font-normal text-[var(--color-foreground)]",
-  caption: "text-xs font-normal text-[var(--color-muted-foreground)]",
-  overline: "text-xs uppercase tracking-wide font-bold text-[var(--color-muted-foreground)]",
-  small: "text-sm font-normal text-[var(--color-foreground)]",
-  large: "text-lg font-medium text-[var(--color-foreground)]",
-  label: "text-sm font-medium text-[var(--color-foreground)]"
+  h1: "text-4xl font-bold tracking-tight text-foreground",
+  h2: "text-3xl font-bold tracking-tight text-foreground",
+  h3: "text-2xl font-bold text-foreground",
+  h4: "text-xl font-bold text-foreground",
+  h5: "text-lg font-bold text-foreground",
+  h6: "text-base font-bold text-foreground",
+  heading: "text-2xl font-bold text-foreground",
+  subheading: "text-lg font-semibold text-foreground",
+  body1: "text-base font-normal text-foreground",
+  body2: "text-sm font-normal text-foreground",
+  body: "text-base font-normal text-foreground",
+  caption: "text-xs font-normal text-muted-foreground",
+  overline: "text-xs uppercase tracking-wide font-bold text-muted-foreground",
+  small: "text-sm font-normal text-foreground",
+  large: "text-lg font-medium text-foreground",
+  label: "text-sm font-medium text-foreground"
 };
 var colorStyles = {
-  primary: "text-[var(--color-foreground)]",
-  secondary: "text-[var(--color-muted-foreground)]",
-  muted: "text-[var(--color-muted-foreground)]",
-  error: "text-[var(--color-error)]",
-  success: "text-[var(--color-success)]",
-  warning: "text-[var(--color-warning)]",
+  primary: "text-foreground",
+  secondary: "text-muted-foreground",
+  muted: "text-muted-foreground",
+  error: "text-error",
+  success: "text-success",
+  warning: "text-warning",
   inherit: "text-inherit"
 };
 var weightStyles = {
@@ -3040,49 +3040,49 @@ var Icon = ({
 Icon.displayName = "Icon";
 var variantStyles2 = {
   primary: [
-    "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
+    "bg-primary text-primary-foreground",
     "border-none",
-    "shadow-[var(--shadow-sm)]",
-    "hover:bg-[var(--color-primary-hover)] hover:shadow-[var(--shadow-hover)]",
-    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
+    "shadow-sm",
+    "hover:bg-primary-hover hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
   ].join(" "),
   secondary: [
-    "bg-[var(--color-muted)] text-[var(--color-foreground)]",
-    "border-none",
-    "hover:bg-[var(--color-muted-foreground)]/15 hover:text-[var(--color-foreground)]",
+    "bg-transparent text-accent",
+    "border border-accent",
+    "hover:bg-accent hover:text-white hover:border-accent",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   ghost: [
-    "bg-transparent text-[var(--color-muted-foreground)]",
-    "hover:text-[var(--color-foreground)] hover:bg-[var(--color-muted)]",
+    "bg-transparent text-muted-foreground",
+    "hover:text-foreground hover:bg-muted",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   danger: [
-    "bg-[var(--color-surface)] text-[var(--color-error)]",
-    "border-[length:var(--border-width)] border-[var(--color-error)]",
-    "shadow-[var(--shadow-sm)]",
-    "hover:bg-[var(--color-error)] hover:text-[var(--color-error-foreground)] hover:shadow-[var(--shadow-hover)]",
-    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
+    "bg-surface text-error",
+    "border-[length:var(--border-width)] border-error",
+    "shadow-sm",
+    "hover:bg-error hover:text-error-foreground hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
   ].join(" "),
   success: [
-    "bg-[var(--color-surface)] text-[var(--color-success)]",
-    "border-[length:var(--border-width)] border-[var(--color-success)]",
-    "shadow-[var(--shadow-sm)]",
-    "hover:bg-[var(--color-success)] hover:text-[var(--color-success-foreground)] hover:shadow-[var(--shadow-hover)]",
-    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
+    "bg-surface text-success",
+    "border-[length:var(--border-width)] border-success",
+    "shadow-sm",
+    "hover:bg-success hover:text-success-foreground hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
   ].join(" "),
   warning: [
-    "bg-[var(--color-surface)] text-[var(--color-warning)]",
-    "border-[length:var(--border-width)] border-[var(--color-warning)]",
-    "shadow-[var(--shadow-sm)]",
-    "hover:bg-[var(--color-warning)] hover:text-[var(--color-warning-foreground)] hover:shadow-[var(--shadow-hover)]",
-    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
+    "bg-surface text-warning",
+    "border-[length:var(--border-width)] border-warning",
+    "shadow-sm",
+    "hover:bg-warning hover:text-warning-foreground hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
   ].join(" "),
   // "default" is an alias for secondary
   default: [
-    "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
-    "border-[length:var(--border-width-thin)] border-[var(--color-border)]",
-    "hover:bg-[var(--color-secondary-hover)]",
+    "bg-secondary text-secondary-foreground",
+    "border-[length:var(--border-width-thin)] border-border",
+    "hover:bg-secondary-hover",
     "active:scale-[var(--active-scale)]"
   ].join(" ")
 };
@@ -3153,9 +3153,10 @@ var Button = React5__default.default.forwardRef(
         className: cn(
           "inline-flex items-center justify-center gap-2",
           "font-[var(--font-weight-medium)]",
-          "rounded-[var(--radius-sm)]",
+          "rounded-sm",
+          "cursor-pointer",
           "transition-all duration-[var(--transition-normal)]",
-          "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-[var(--color-ring)] focus:ring-offset-[length:var(--focus-ring-offset)]",
+          "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-offset-[length:var(--focus-ring-offset)]",
           "disabled:opacity-50 disabled:cursor-not-allowed",
           variantStyles2[variant],
           sizeStyles2[size],
@@ -3176,34 +3177,34 @@ var Button = React5__default.default.forwardRef(
 Button.displayName = "Button";
 var variantStyles3 = {
   default: [
-    "bg-[var(--color-muted)] text-[var(--color-foreground)]",
-    "border-[length:var(--border-width-thin)] border-[var(--color-border)]"
+    "bg-muted text-foreground",
+    "border-[length:var(--border-width-thin)] border-border"
   ].join(" "),
-  primary: "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-  secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
   success: [
-    "bg-[var(--color-surface)] text-[var(--color-success)]",
-    "border-[length:var(--border-width)] border-[var(--color-success)]"
+    "bg-surface text-success",
+    "border-[length:var(--border-width)] border-success"
   ].join(" "),
   warning: [
-    "bg-[var(--color-surface)] text-[var(--color-warning)]",
-    "border-[length:var(--border-width)] border-[var(--color-warning)]"
+    "bg-surface text-warning",
+    "border-[length:var(--border-width)] border-warning"
   ].join(" "),
   danger: [
-    "bg-[var(--color-surface)] text-[var(--color-error)]",
-    "border-[length:var(--border-width)] border-[var(--color-error)]"
+    "bg-surface text-error",
+    "border-[length:var(--border-width)] border-error"
   ].join(" "),
   error: [
-    "bg-[var(--color-surface)] text-[var(--color-error)]",
-    "border-[length:var(--border-width)] border-[var(--color-error)]"
+    "bg-surface text-error",
+    "border-[length:var(--border-width)] border-error"
   ].join(" "),
   info: [
-    "bg-[var(--color-surface)] text-[var(--color-info)]",
-    "border-[length:var(--border-width)] border-[var(--color-info)]"
+    "bg-surface text-info",
+    "border-[length:var(--border-width)] border-info"
   ].join(" "),
   neutral: [
-    "bg-[var(--color-muted)] text-[var(--color-muted-foreground)]",
-    "border-[length:var(--border-width-thin)] border-[var(--color-border)]"
+    "bg-muted text-muted-foreground",
+    "border-[length:var(--border-width-thin)] border-border"
   ].join(" ")
 };
 var sizeStyles3 = {
@@ -3223,7 +3224,7 @@ var Badge = React5__default.default.forwardRef(
       {
         ref,
         className: cn(
-          "inline-flex items-center gap-1 font-bold rounded-[var(--radius-sm)]",
+          "inline-flex items-center gap-1 font-bold rounded-sm",
           variantStyles3[variant],
           sizeStyles3[size],
           className
@@ -3240,34 +3241,34 @@ var Badge = React5__default.default.forwardRef(
 Badge.displayName = "Badge";
 var variantStyles4 = {
   default: [
-    "bg-[var(--color-card)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-[var(--shadow-sm)]",
+    "bg-card",
+    "border-[length:var(--border-width)] border-border",
+    "shadow-sm",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
+    "hover:shadow-lg hover:-translate-y-0.5"
   ].join(" "),
   bordered: [
-    "bg-[var(--color-card)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-[var(--shadow-sm)]",
+    "bg-card",
+    "border-[length:var(--border-width)] border-border",
+    "shadow-sm",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
+    "hover:shadow-lg hover:-translate-y-0.5"
   ].join(" "),
   elevated: [
-    "bg-[var(--color-card)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-[var(--shadow-main)]",
+    "bg-card",
+    "border-[length:var(--border-width)] border-border",
+    "shadow",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
+    "hover:shadow-lg hover:-translate-y-0.5"
   ].join(" "),
   // Interactive variant with theme-specific hover effects
   interactive: [
-    "bg-[var(--color-card)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-[var(--shadow-main)]",
+    "bg-card",
+    "border-[length:var(--border-width)] border-border",
+    "shadow",
     "cursor-pointer",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-[var(--shadow-hover)]"
+    "hover:shadow-lg"
   ].join(" ")
 };
 var paddingStyles2 = {
@@ -3278,9 +3279,9 @@ var paddingStyles2 = {
 };
 var shadowStyles2 = {
   none: "shadow-none",
-  sm: "shadow-[var(--shadow-sm)]",
-  md: "shadow-[var(--shadow-main)]",
-  lg: "shadow-[var(--shadow-lg)]"
+  sm: "shadow-sm",
+  md: "shadow",
+  lg: "shadow-lg"
 };
 var Card = React5__default.default.forwardRef(
   ({
@@ -3298,7 +3299,7 @@ var Card = React5__default.default.forwardRef(
       {
         ref,
         className: cn(
-          "rounded-[var(--radius-md)]",
+          "rounded-md",
           "transition-all duration-[var(--transition-normal)]",
           variantStyles4[variant],
           paddingStyles2[padding],
@@ -3308,8 +3309,8 @@ var Card = React5__default.default.forwardRef(
         ...props,
         children: [
           (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
-            title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg text-[var(--color-card-foreground)] font-[var(--font-weight-bold)]", children: title }),
-            subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[var(--color-muted-foreground)] mt-1", children: subtitle })
+            title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg text-card-foreground font-[var(--font-weight-bold)]", children: title }),
+            subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-1", children: subtitle })
           ] }),
           children
         ]
@@ -3325,7 +3326,7 @@ var CardTitle = React5__default.default.forwardRef(({ className, ...props }, ref
   {
     ref,
     className: cn(
-      "text-lg text-[var(--color-card-foreground)]",
+      "text-lg text-card-foreground",
       "font-[var(--font-weight-bold)]",
       className
     ),
@@ -3362,7 +3363,7 @@ var Divider = ({
       "div",
       {
         className: cn(
-          "w-0 h-full border-l border-[var(--color-border)]",
+          "w-0 h-full border-l border-border",
           variantStyles5[variant],
           className
         ),
@@ -3383,17 +3384,17 @@ var Divider = ({
             "div",
             {
               className: cn(
-                "flex-1 h-0 border-t border-[var(--color-border)]",
+                "flex-1 h-0 border-t border-border",
                 variantStyles5[variant]
               )
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-[var(--color-foreground)] font-bold uppercase tracking-wide", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground font-bold uppercase tracking-wide", children: label }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: cn(
-                "flex-1 h-0 border-t border-[var(--color-border)]",
+                "flex-1 h-0 border-t border-border",
                 variantStyles5[variant]
               )
             }
@@ -3406,7 +3407,7 @@ var Divider = ({
     "div",
     {
       className: cn(
-        "w-full h-0 border-t border-[var(--color-border)] my-4",
+        "w-full h-0 border-t border-border my-4",
         variantStyles5[variant],
         className
       ),
@@ -3481,8 +3482,8 @@ var Spacer = ({
 };
 var backgroundClasses = {
   default: "",
-  alt: "bg-[var(--color-surface)]",
-  dark: "bg-[var(--color-foreground)] text-[var(--color-background)]",
+  alt: "bg-surface",
+  dark: "bg-foreground text-background",
   gradient: [
     "bg-gradient-to-b",
     "from-[var(--color-primary)]/5",
@@ -3531,9 +3532,9 @@ var InstallBox = ({
       Box,
       {
         className: cn(
-          "bg-[var(--color-foreground)]",
-          "rounded-[var(--radius-md)]",
-          "border-[length:var(--border-width)] border-[var(--color-border)]"
+          "bg-foreground",
+          "rounded-md",
+          "border-[length:var(--border-width)] border-border"
         ),
         padding: "md",
         children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "center", children: [
@@ -3541,7 +3542,7 @@ var InstallBox = ({
             Typography,
             {
               variant: "body2",
-              className: "font-mono flex-1 min-w-0 text-[var(--color-background)] select-all",
+              className: "font-mono flex-1 min-w-0 text-background select-all",
               truncate: true,
               children: command
             }
@@ -3552,7 +3553,7 @@ var InstallBox = ({
               variant: "ghost",
               size: "md",
               onClick: handleCopy,
-              className: "flex-shrink-0 text-[var(--color-background)] hover:text-[var(--color-background)]",
+              className: "flex-shrink-0 text-background hover:text-background",
               children: copied ? "Copied!" : "Copy"
             }
           )
@@ -3571,7 +3572,7 @@ var MarketingImage = ({ src, alt, className }) => /* @__PURE__ */ jsxRuntime.jsx
   Box,
   {
     className: cn(
-      "overflow-hidden rounded-[var(--radius-lg)] bg-cover bg-center bg-no-repeat",
+      "overflow-hidden rounded-lg bg-cover bg-center bg-no-repeat",
       className
     ),
     style: { backgroundImage: `url(${src})` },
@@ -3606,7 +3607,7 @@ var HeroSection = ({
       align: isCenter ? "center" : "left",
       className: cn(
         "max-w-3xl leading-tight",
-        isDark && "text-[var(--color-background)]"
+        isDark && "text-background"
       ),
       children: [
         title,
@@ -3616,7 +3617,7 @@ var HeroSection = ({
           {
             as: "span",
             variant: "h1",
-            className: "text-[var(--color-primary)]",
+            className: "text-primary",
             children: titleAccent
           }
         )
@@ -3629,7 +3630,7 @@ var HeroSection = ({
       align: isCenter ? "center" : "left",
       className: cn(
         "max-w-3xl leading-tight",
-        isDark && "text-[var(--color-background)]"
+        isDark && "text-background"
       ),
       children: title
     }
@@ -3743,10 +3744,10 @@ var CTABanner = ({
     {
       className: cn(
         "py-16",
-        background === "alt" && "bg-[var(--color-surface)]",
-        background === "dark" && "bg-[var(--color-surface)]",
-        background === "gradient" && "bg-[var(--color-surface)]",
-        background === "primary" && "bg-[var(--color-surface)]",
+        background === "alt" && "bg-surface",
+        background === "dark" && "bg-surface",
+        background === "gradient" && "bg-surface",
+        background === "primary" && "bg-surface",
         className
       ),
       children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3813,7 +3814,7 @@ var FeatureCard = ({
         {
           name: icon,
           size: iconSizeMap[size],
-          className: "text-[var(--color-accent,#06b6d4)]"
+          className: "text-accent"
         }
       );
     }
@@ -3830,7 +3831,7 @@ var FeatureCard = ({
       variant,
       padding: size,
       className: cn(
-        variant === "interactive" && "hover:border-[var(--color-primary)]",
+        variant === "interactive" && "hover:border-primary",
         className
       ),
       onClick: variant === "interactive" && href ? handleLinkClick : void 0,
@@ -3844,7 +3845,7 @@ var FeatureCard = ({
             variant: "ghost",
             size: "sm",
             onClick: handleLinkClick,
-            className: "text-[var(--color-primary)] -ml-2",
+            className: "text-primary -ml-2",
             children: linkLabel
           }
         )
@@ -3932,10 +3933,10 @@ var PricingCard = ({
         "flex flex-col h-full",
         "hover:-translate-y-1 transition-all",
         highlighted && [
-          "border-[length:2px] border-[var(--color-primary)]",
-          "shadow-[var(--shadow-lg)]",
+          "border-[length:2px] border-primary",
+          "shadow-lg",
           "scale-[1.05]",
-          "ring-2 ring-[var(--color-primary)]"
+          "ring-2 ring-primary"
         ],
         className
       ),
@@ -3946,7 +3947,7 @@ var PricingCard = ({
           Typography,
           {
             variant: "h2",
-            className: "text-[var(--color-primary)] font-bold",
+            className: "text-primary font-bold",
             children: price
           }
         ),
@@ -3958,7 +3959,7 @@ var PricingCard = ({
             {
               icon: LucideIcons.Check,
               size: "sm",
-              className: "flex-shrink-0 text-[var(--color-success)]"
+              className: "flex-shrink-0 text-success"
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", children: feature })
@@ -4013,7 +4014,7 @@ var SplitSection = ({
         {
           name: "check",
           size: "sm",
-          className: "text-[var(--color-primary)] flex-shrink-0 mt-0.5"
+          className: "text-primary flex-shrink-0 mt-0.5"
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", children: bullet })
@@ -4023,7 +4024,7 @@ var SplitSection = ({
     Box,
     {
       className: cn(
-        "flex-1 min-w-0 min-h-[240px] rounded-[var(--radius-md)]",
+        "flex-1 min-w-0 min-h-[240px] rounded-md",
         "bg-cover bg-center"
       ),
       style: { backgroundImage: `url(${image.src})` },
@@ -4037,7 +4038,7 @@ var SplitSection = ({
     {
       className: cn(
         "w-full",
-        background === "alt" ? "bg-[var(--color-muted)]" : "bg-[var(--color-background)]",
+        background === "alt" ? "bg-muted" : "bg-background",
         className
       ),
       padding: "lg",
@@ -4057,9 +4058,9 @@ var StepCircle = ({ step, index }) => {
         className: cn(
           "w-10 h-10 rounded-full flex-shrink-0",
           "flex items-center justify-center",
-          "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]"
+          "bg-primary text-primary-foreground"
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: step.icon, size: "sm", className: "text-[var(--color-primary-foreground)]" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: step.icon, size: "sm", className: "text-primary-foreground" })
       }
     );
   }
@@ -4069,9 +4070,9 @@ var StepCircle = ({ step, index }) => {
       className: cn(
         "w-10 h-10 rounded-full flex-shrink-0",
         "flex items-center justify-center",
-        "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]"
+        "bg-primary text-primary-foreground"
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-sm text-[var(--color-primary-foreground)] leading-none", children: step.number ?? index + 1 })
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-sm text-primary-foreground leading-none", children: step.number ?? index + 1 })
     }
   );
 };
@@ -4086,7 +4087,7 @@ var StepFlow = ({
     return /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(React5__default.default.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", align: "center", children: [
         /* @__PURE__ */ jsxRuntime.jsx(StepCircle, { step, index }),
-        showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-px h-8 bg-[var(--color-border)]" })
+        showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-px h-8 bg-border" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", className: "flex-1 pt-1", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", children: step.title }),
@@ -4114,7 +4115,7 @@ var StatsGrid = ({
       Typography,
       {
         variant: "h2",
-        className: "font-bold text-[var(--color-primary)]",
+        className: "font-bold text-primary",
         children: stat.value
       }
     ),
@@ -4229,7 +4230,7 @@ var ShowcaseCard = ({
           {
             className: cn(
               "w-full aspect-video bg-cover bg-center",
-              "rounded-t-[var(--radius-md)]"
+              "rounded-t-md"
             ),
             style: { backgroundImage: `url(${image.src})` },
             role: "img",
@@ -4268,10 +4269,10 @@ var statusSizeClasses = {
   xl: "w-4 h-4"
 };
 var statusClasses = {
-  online: "bg-[var(--color-success)]",
-  offline: "bg-[var(--color-muted-foreground)]",
-  away: "bg-[var(--color-warning)]",
-  busy: "bg-[var(--color-error)]"
+  online: "bg-success",
+  offline: "bg-muted-foreground",
+  away: "bg-warning",
+  busy: "bg-error"
 };
 var badgeSizeClasses = {
   xs: "w-3 h-3 text-[8px]",
@@ -4306,7 +4307,7 @@ var Avatar = ({
   const hasImage = !!src;
   const hasInitials = !!initials;
   const hasIcon = !!Icon2;
-  const getInitialsBackground = () => "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]";
+  const getInitialsBackground = () => "bg-primary text-primary-foreground";
   const isClickable = action || onClick;
   const handleClick = () => {
     if (action) {
@@ -4320,7 +4321,7 @@ var Avatar = ({
       {
         className: cn(
           "relative inline-flex items-center justify-center",
-          "bg-[var(--color-muted)] border-[length:var(--border-width)] border-[var(--color-border)]",
+          "bg-muted border-[length:var(--border-width)] border-border",
           "overflow-hidden",
           sizeClasses2[size],
           isClickable && "cursor-pointer hover:bg-[var(--color-surface-hover)] transition-colors",
@@ -4353,7 +4354,7 @@ var Avatar = ({
           Icon2,
           {
             className: cn(
-              "text-[var(--color-foreground)]",
+              "text-foreground",
               iconSizeClasses[size]
             )
           }
@@ -4361,7 +4362,7 @@ var Avatar = ({
           LucideIcons.User,
           {
             className: cn(
-              "text-[var(--color-foreground)]",
+              "text-foreground",
               iconSizeClasses[size]
             )
           }
@@ -4372,7 +4373,7 @@ var Avatar = ({
       "div",
       {
         className: cn(
-          "absolute bottom-0 right-0 border-2 border-[var(--color-card)]",
+          "absolute bottom-0 right-0 border-2 border-card",
           statusClasses[status],
           statusSizeClasses[size]
         ),
@@ -4384,8 +4385,8 @@ var Avatar = ({
       {
         className: cn(
           "absolute -top-1 -right-1 flex items-center justify-center",
-          "bg-[var(--color-primary)] text-[var(--color-primary-foreground)] font-bold",
-          "border-2 border-[var(--color-card)]",
+          "bg-primary text-primary-foreground font-bold",
+          "border-2 border-card",
           badgeSizeClasses[size]
         ),
         "aria-label": `Badge: ${badge}`,
@@ -4451,7 +4452,7 @@ var CaseStudyCard = ({
         variant: "ghost",
         size: "sm",
         onClick: handleClick,
-        className: "text-[var(--color-primary)] -ml-2",
+        className: "text-primary -ml-2",
         children: [
           linkLabel,
           " \u2192"
@@ -4494,8 +4495,8 @@ var MarketingFooter = ({
     {
       as: "footer",
       className: cn(
-        "bg-[var(--color-foreground)] text-[var(--color-background)]",
-        "border-t border-[var(--color-border)]",
+        "bg-surface",
+        "border-t border-border",
         "pt-12 pb-8 px-4",
         className
       ),
@@ -4507,7 +4508,7 @@ var MarketingFooter = ({
               Typography,
               {
                 variant: "body2",
-                className: "font-semibold text-[var(--color-background)] mb-1",
+                className: "font-semibold text-foreground mb-1",
                 children: col.title
               }
             ),
@@ -4517,8 +4518,8 @@ var MarketingFooter = ({
                 href: item.href,
                 className: cn(
                   "text-sm no-underline",
-                  "text-[var(--color-background)]/60",
-                  "hover:text-[var(--color-accent)]",
+                  "text-foreground/60",
+                  "hover:text-accent",
                   "transition-colors duration-150"
                 ),
                 target: item.href.startsWith("http") ? "_blank" : void 0,
@@ -4533,7 +4534,7 @@ var MarketingFooter = ({
           Typography,
           {
             variant: "caption",
-            className: "text-[var(--color-background)]/30 text-center w-full pt-6",
+            className: "text-foreground/30 text-center w-full pt-6",
             children: copyright
           }
         )
@@ -4566,7 +4567,7 @@ var PullQuote = ({
     Box,
     {
       className: cn(
-        "border-l-4 border-l-[var(--color-primary)]",
+        "border-l-4 border-l-primary",
         "pl-6 py-2 my-6",
         className
       ),
@@ -4574,7 +4575,7 @@ var PullQuote = ({
         Typography,
         {
           variant: "large",
-          className: "italic text-[var(--color-foreground)] opacity-90",
+          className: "italic text-foreground opacity-90",
           children
         }
       )
@@ -4650,7 +4651,7 @@ var AnimatedCounter = ({
       Typography,
       {
         variant: "h2",
-        className: "text-[var(--color-primary)] font-bold tabular-nums",
+        className: "text-primary font-bold tabular-nums",
         children: hasAnimated ? displayValue : "0"
       }
     ),