@mdxui/named 6.0.0 → 6.2.0

package/dist/index.js

@@ -133,7 +133,7 @@ function Hero({
   ),
   className
 }) {
-  return /* @__PURE__ */ jsx3("section", { className: cn("relative py-12 md:py-16 px-6 lg:px-12 bg-(--color-bg-light)", className), children: /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto p-0 sm:p-16 rounded-none sm:rounded-3xl md:[background:linear-gradient(180deg,var(--color-bg-secondary,#f9f7f6)_0%,rgba(247,244,242,0)_83.55%)]", children: [
+  return /* @__PURE__ */ jsx3("section", { className: cn("relative py-12 md:py-16 px-6 lg:px-12 bg-background", className), children: /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto p-0 sm:p-16 rounded-none sm:rounded-3xl md:[background:linear-gradient(180deg,var(--card)_0%,transparent_83.55%)]", children: [
     /* @__PURE__ */ jsxs("div", { className: "grid lg:grid-cols-2 gap-8 lg:gap-16 items-start mb-16 lg:mb-20", children: [
       /* @__PURE__ */ jsxs("div", { className: "space-y-6 lg:pt-8", children: [
         /* @__PURE__ */ jsx3(ScrollReveal, { direction: "down", delay: 0.1, children: /* @__PURE__ */ jsx3("div", { className: "inline-block", children: /* @__PURE__ */ jsxs(
@@ -142,14 +142,14 @@ function Hero({
             href: badgeHref,
             target: "_blank",
             rel: "noopener noreferrer",
-            className: "inline-flex items-center gap-2.5 px-4 py-2 rounded-full transition-colors border border-black/10 bg-(--color-btn-white)",
+            className: "inline-flex items-center gap-2.5 px-4 py-2 rounded-full transition-colors border border-border bg-card",
             children: [
               /* @__PURE__ */ jsx3("span", { className: "text-base", children: badgeEmoji }),
-              /* @__PURE__ */ jsx3("p", { className: "font-normal text-sm tracking-wide leading-snug text-(--color-text-dark) uppercase", children: badgeText })
+              /* @__PURE__ */ jsx3("p", { className: "font-normal text-sm tracking-wide leading-snug text-foreground uppercase", children: badgeText })
             ]
           }
         ) }) }),
-        /* @__PURE__ */ jsx3(ScrollReveal, { direction: "up", delay: 0.2, children: /* @__PURE__ */ jsx3("h1", { className: "font-normal text-[clamp(56px,6vw,72px)] leading-tight tracking-tight text-(--color-text-dark) font-halant", children: heading }) }),
+        /* @__PURE__ */ jsx3(ScrollReveal, { direction: "up", delay: 0.2, children: /* @__PURE__ */ jsx3("h1", { className: "font-normal text-[clamp(56px,6vw,72px)] leading-tight tracking-tight text-foreground", children: heading }) }),
         /* @__PURE__ */ jsx3(ScrollReveal, { direction: "up", delay: 0.3, children: /* @__PURE__ */ jsx3("p", { className: "text-lg leading-relaxed max-w-lg", children: description }) }),
         /* @__PURE__ */ jsx3(ScrollReveal, { direction: "up", delay: 0.4, trigger: "mount", children: /* @__PURE__ */ jsx3("div", { className: "flex flex-col sm:flex-row gap-3 pt-4", children: /* @__PURE__ */ jsx3(Button, { asChild: true, variant: ctaVariant, children: /* @__PURE__ */ jsxs("a", { href: ctaHref, children: [
           ctaText,
@@ -162,31 +162,30 @@ function Hero({
           src: rightImageSrc,
           alt: rightImageAlt,
           fill: true,
-          className: "object-cover object-left-center",
-          style: { borderRadius: "var(--radius-image)" },
+          className: "object-cover object-left-center rounded-2xl",
           priority: true,
           sizes: rightImageSizes
         }
       ) }) }) }) })
     ] }),
     /* @__PURE__ */ jsxs(ScrollReveal, { direction: "up", delay: 0.4, trigger: "mount", children: [
-      /* @__PURE__ */ jsx3("div", { className: "mt-12", children: /* @__PURE__ */ jsx3("p", { className: "text-base text-(--color-text-muted) text-center", children: marqueeTitle }) }),
+      /* @__PURE__ */ jsx3("div", { className: "mt-12", children: /* @__PURE__ */ jsx3("p", { className: "text-base text-muted-foreground text-center", children: marqueeTitle }) }),
       /* @__PURE__ */ jsxs("div", { className: "relative mt-4 sm:mt-6", children: [
         /* @__PURE__ */ jsx3(
           "div",
           {
             className: "pointer-events-none absolute inset-y-0 left-0 w-20 sm:w-28 z-10",
-            style: { background: "linear-gradient(to right, var(--color-bg-light), transparent)" }
+            style: { background: "linear-gradient(to right, var(--background), transparent)" }
           }
         ),
         /* @__PURE__ */ jsx3(
           "div",
           {
             className: "pointer-events-none absolute inset-y-0 right-0 w-20 sm:w-28 z-10",
-            style: { background: "linear-gradient(to left, var(--color-bg-light), transparent)" }
+            style: { background: "linear-gradient(to left, var(--background), transparent)" }
           }
         ),
-        /* @__PURE__ */ jsx3(Marquee, { className: "relative z-0 py-2 [--gap:1.25rem] sm:[--gap:3rem]", children: marqueeImages.map((src, i) => /* @__PURE__ */ jsx3("img", { src, alt: "Placeholder", className: "h-16 w-16 rounded-xl bg-white/50 p-2" }, `${src}-${i}`)) })
+        /* @__PURE__ */ jsx3(Marquee, { className: "relative z-0 py-2 [--gap:1.25rem] sm:[--gap:3rem]", children: marqueeImages.map((src, i) => /* @__PURE__ */ jsx3("img", { src, alt: "Placeholder", className: "h-16 w-16 rounded-xl bg-card p-2" }, `${src}-${i}`)) })
       ] })
     ] })
   ] }) });
@@ -319,19 +318,19 @@ $.Priya.statusReport({
   }
 ];
 function Features({ heading = "How It Works", description = "Priya handles the repetitive work so you can focus on what matters. Here's how she automates your entire product workflow.", features = defaultFeatures, className }) {
-  return /* @__PURE__ */ jsx5("section", { id: "features", className: cn("flex justify-center items-center pb-0 md:pb-10 bg-(--color-bg-light)", className), children: /* @__PURE__ */ jsxs2("div", { className: "features-gradient flex flex-col items-center w-full relative overflow-visible rounded-[36px] gap-16 h-min max-w-[1400px] py-10 sm:py-20", children: [
+  return /* @__PURE__ */ jsx5("section", { id: "features", className: cn("flex justify-center items-center pb-0 md:pb-10 bg-background", className), children: /* @__PURE__ */ jsxs2("div", { className: "features-gradient flex flex-col items-center w-full relative overflow-visible rounded-[36px] gap-16 h-min max-w-[1400px] py-10 sm:py-20", children: [
     /* @__PURE__ */ jsx5(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsxs2("div", { className: "text-center w-full px-4 md:px-6 space-y-4", children: [
-      /* @__PURE__ */ jsx5("h2", { className: "font-normal text-[clamp(32px,4vw,40px)] leading-tight text-(--color-text-dark) font-halant", children: heading }),
-      /* @__PURE__ */ jsx5("p", { className: "text-base md:text-lg text-(--color-text-muted) max-w-2xl mx-auto", children: description })
+      /* @__PURE__ */ jsx5("h2", { className: "font-normal text-[clamp(32px,4vw,40px)] leading-tight text-foreground", children: heading }),
+      /* @__PURE__ */ jsx5("p", { className: "text-base md:text-lg text-muted-foreground max-w-2xl mx-auto", children: description })
     ] }) }),
-    /* @__PURE__ */ jsx5("div", { className: "w-full px-4 lg:px-18 space-y-10", children: features.map((feature, index) => /* @__PURE__ */ jsx5(ScrollReveal, { direction: "up", delay: index * 0.1, children: /* @__PURE__ */ jsxs2("div", { className: "grid md:grid-cols-2 overflow-hidden bg-(--color-bg-cream) w-full rounded-3xl feature-card-shadow opacity-100 border border-black/5", children: [
+    /* @__PURE__ */ jsx5("div", { className: "w-full px-4 lg:px-18 space-y-10", children: features.map((feature, index) => /* @__PURE__ */ jsx5(ScrollReveal, { direction: "up", delay: index * 0.1, children: /* @__PURE__ */ jsxs2("div", { className: "grid md:grid-cols-2 overflow-hidden bg-card w-full rounded-3xl feature-card-shadow opacity-100 border border-border", children: [
       /* @__PURE__ */ jsxs2("div", { className: "flex flex-col px-6 py-8 lg:px-8 lg:py-12 xl:px-12 xl:py-20", children: [
-        /* @__PURE__ */ jsx5("div", { className: "mb-4", children: /* @__PURE__ */ jsx5("span", { className: "inline-flex size-10 items-center justify-center rounded-lg font-mono text-sm font-medium bg-white dark:bg-white/10 border border-black/10 dark:border-white/20 text-(--color-text-dark)", children: feature.badge }) }),
-        /* @__PURE__ */ jsx5("h3", { className: "mb-3 text-2xl font-medium sm:mb-5 md:text-3xl text-(--color-text-dark)", children: feature.title }),
-        /* @__PURE__ */ jsx5("div", { className: "mb-8 text-sm sm:mb-10 md:text-base text-(--color-text-muted)", children: feature.description }),
+        /* @__PURE__ */ jsx5("div", { className: "mb-4", children: /* @__PURE__ */ jsx5("span", { className: "inline-flex size-10 items-center justify-center rounded-lg font-mono text-sm font-medium bg-card dark:bg-muted border border-border dark:border-border text-foreground", children: feature.badge }) }),
+        /* @__PURE__ */ jsx5("h3", { className: "mb-3 text-2xl font-medium sm:mb-5 md:text-3xl text-foreground", children: feature.title }),
+        /* @__PURE__ */ jsx5("div", { className: "mb-8 text-sm sm:mb-10 md:text-base text-muted-foreground", children: feature.description }),
         /* @__PURE__ */ jsx5("ul", { className: "space-y-2 sm:space-y-3", children: feature.items.map((item, itemIndex) => /* @__PURE__ */ jsxs2("li", { className: "flex gap-x-3 items-start", children: [
-          /* @__PURE__ */ jsx5(CheckCircle, { className: "mt-1 size-4 shrink-0 text-(--color-teal-dark)" }),
-          /* @__PURE__ */ jsx5("p", { className: "text-sm md:text-base text-(--color-text-dark)", children: item.text })
+          /* @__PURE__ */ jsx5(CheckCircle, { className: "mt-1 size-4 shrink-0 text-primary" }),
+          /* @__PURE__ */ jsx5("p", { className: "text-sm md:text-base text-foreground", children: item.text })
         ] }, itemIndex)) })
       ] }),
       /* @__PURE__ */ jsx5("div", { className: "relative order-last md:order-last h-96 md:h-[500px] p-4 md:p-8 lg:p-10", children: /* @__PURE__ */ jsx5(CodeWindow, { code: feature.code }) })
@@ -364,33 +363,33 @@ function Pricing({
   ctaHref = "#contact",
   featuresHeading = "What's included",
   features = defaultFeatures2,
-  backgroundColor = "bg-(--color-bg-light)",
+  backgroundColor = "bg-background",
   securityNote = "Priya only accesses GitHub Issues and Projects\u2014she cannot read your code or secrets.",
   className
 }) {
   return /* @__PURE__ */ jsx6("section", { id: "pricing", className: cn(`pt-12 md:pt-16 pb-10 sm:pb-20 ${backgroundColor}`, className), children: /* @__PURE__ */ jsxs3("div", { className: "max-w-7xl mx-auto p-6 sm:p-16 rounded-none sm:rounded-3xl pricing-gradient", children: [
     /* @__PURE__ */ jsx6(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsxs3("div", { className: "text-center my-16 sm:my-12", children: [
-      /* @__PURE__ */ jsx6("h2", { className: "font-normal text-[clamp(32px,4vw,40px)] leading-tight text-(--color-text-dark) mb-4 font-halant", children: heading }),
-      /* @__PURE__ */ jsx6("p", { className: "text-base text-(--color-text-muted) max-w-2xl mx-auto", children: subheading })
+      /* @__PURE__ */ jsx6("h2", { className: "font-normal text-[clamp(32px,4vw,40px)] leading-tight text-foreground mb-4", children: heading }),
+      /* @__PURE__ */ jsx6("p", { className: "text-base text-muted-foreground max-w-2xl mx-auto", children: subheading })
     ] }) }),
-    /* @__PURE__ */ jsx6(ScrollReveal, { direction: "up", delay: 0.2, children: /* @__PURE__ */ jsxs3("div", { className: "bg-(--color-bg-cream) mx-auto flex w-full md:max-w-md lg:max-w-3xl flex-col rounded-3xl border border-(--color-text-dark)/10 feature-card-shadow p-6 md:p-8 px-6", children: [
+    /* @__PURE__ */ jsx6(ScrollReveal, { direction: "up", delay: 0.2, children: /* @__PURE__ */ jsxs3("div", { className: "bg-card mx-auto flex w-full md:max-w-md lg:max-w-3xl flex-col rounded-3xl border border-border feature-card-shadow p-6 md:p-8 px-6", children: [
       /* @__PURE__ */ jsxs3("div", { className: "text-center", children: [
         /* @__PURE__ */ jsxs3("div", { className: "flex justify-start sm:justify-center items-baseline", children: [
-          /* @__PURE__ */ jsx6("span", { className: "text-3xl font-semibold text-(--color-text-dark)", children: price }),
-          /* @__PURE__ */ jsx6("span", { className: "text-(--color-text-muted) ml-2 text-sm", children: priceUnit })
+          /* @__PURE__ */ jsx6("span", { className: "text-3xl font-semibold text-foreground", children: price }),
+          /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground ml-2 text-sm", children: priceUnit })
         ] }),
-        trialText && /* @__PURE__ */ jsx6("p", { className: "text-left sm:text-center text-(--color-text-muted) mt-3 text-sm", children: trialText }),
+        trialText && /* @__PURE__ */ jsx6("p", { className: "text-left sm:text-center text-muted-foreground mt-3 text-sm", children: trialText }),
         /* @__PURE__ */ jsx6(Button2, { asChild: true, variant: "default", className: "mt-5 w-full md:w-64", children: /* @__PURE__ */ jsx6("a", { href: ctaHref, children: ctaText }) })
       ] }),
       /* @__PURE__ */ jsxs3("div", { className: "mt-8", children: [
-        /* @__PURE__ */ jsx6("p", { className: "text-left sm:text-center text-lg font-semibold text-(--color-text-dark) mb-4", children: featuresHeading }),
+        /* @__PURE__ */ jsx6("p", { className: "text-left sm:text-center text-lg font-semibold text-foreground mb-4", children: featuresHeading }),
         /* @__PURE__ */ jsx6("ul", { className: "grid gap-y-3 gap-x-6 md:grid-cols-2 lg:grid-cols-3 ", children: features.map((feature, index) => /* @__PURE__ */ jsxs3("li", { className: "flex items-start text-left", children: [
-          /* @__PURE__ */ jsx6(Check, { className: "text-(--color-teal-dark) mr-2 size-4 shrink-0" }),
-          /* @__PURE__ */ jsx6("span", { className: "text-(--color-text-dark) text-sm", children: feature.text })
+          /* @__PURE__ */ jsx6(Check, { className: "text-primary mr-2 size-4 shrink-0" }),
+          /* @__PURE__ */ jsx6("span", { className: "text-foreground text-sm", children: feature.text })
         ] }, index)) })
       ] })
     ] }) }),
-    securityNote && /* @__PURE__ */ jsx6(ScrollReveal, { direction: "up", delay: 0.3, children: /* @__PURE__ */ jsx6("div", { className: "text-center mt-8", children: /* @__PURE__ */ jsxs3("p", { className: "text-sm text-(--color-text-muted)", children: [
+    securityNote && /* @__PURE__ */ jsx6(ScrollReveal, { direction: "up", delay: 0.3, children: /* @__PURE__ */ jsx6("div", { className: "text-center mt-8", children: /* @__PURE__ */ jsxs3("p", { className: "text-sm text-muted-foreground", children: [
       /* @__PURE__ */ jsx6("strong", { children: "Your code stays private." }),
       " ",
       securityNote
@@ -440,52 +439,52 @@ function PricingTiers({
   heading = "Simple, transparent pricing",
   subheading = "Start automating your product workflow in minutes. No credit card required to get started.",
   tiers = defaultTiers,
-  backgroundColor = "bg-(--color-bg-light)",
+  backgroundColor = "bg-background",
   securityNote = "Priya only accesses GitHub Issues and Projects\u2014she cannot read your code or secrets.",
   className
 }) {
   return /* @__PURE__ */ jsx7("section", { id: "pricing", className: cn(`pt-12 md:pt-16 pb-10 sm:pb-20 ${backgroundColor}`, className), children: /* @__PURE__ */ jsxs4("div", { className: "max-w-7xl mx-auto p-6 sm:p-16 rounded-none sm:rounded-3xl pricing-gradient", children: [
     /* @__PURE__ */ jsx7(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsxs4("div", { className: "text-center my-16 sm:my-12", children: [
-      /* @__PURE__ */ jsx7("h2", { className: "font-normal text-[clamp(32px,4vw,52px)] leading-tight text-(--color-text-dark) mb-4 font-halant", children: heading }),
-      /* @__PURE__ */ jsx7("p", { className: "text-base text-(--color-text-muted) max-w-2xl mx-auto", children: subheading })
+      /* @__PURE__ */ jsx7("h2", { className: "font-normal text-[clamp(32px,4vw,52px)] leading-tight text-foreground mb-4", children: heading }),
+      /* @__PURE__ */ jsx7("p", { className: "text-base text-muted-foreground max-w-2xl mx-auto", children: subheading })
     ] }) }),
     /* @__PURE__ */ jsx7("ul", { className: "grid gap-6 lg:grid-cols-3 lg:items-stretch", children: tiers.map((tier, index) => /* @__PURE__ */ jsx7("li", { className: tier.featured ? "lg:col-span-2 flex" : "lg:col-span-1 flex", children: /* @__PURE__ */ jsx7(ScrollReveal, { direction: "up", delay: 0.2 + index * 0.1, className: "w-full", children: /* @__PURE__ */ jsx7(
       "div",
       {
-        className: tier.featured ? "bg-(--color-bg-cream) flex w-full h-full flex-col-reverse rounded-3xl border border-(--color-text-dark)/10 feature-card-shadow md:flex-row" : "bg-(--color-bg-cream) w-full h-full rounded-3xl border border-(--color-text-dark)/10 feature-card-shadow p-6 md:p-8",
+        className: tier.featured ? "bg-card flex w-full h-full flex-col-reverse rounded-3xl border border-border feature-card-shadow md:flex-row" : "bg-card w-full h-full rounded-3xl border border-border feature-card-shadow p-6 md:p-8",
         children: tier.featured ? /* @__PURE__ */ jsxs4(Fragment, { children: [
           tier.image && /* @__PURE__ */ jsx7("div", { className: "hidden xl:block xl:w-1/2 pl-6 md:pl-8 py-6 md:py-8", children: /* @__PURE__ */ jsx7("div", { className: "h-full rounded-lg overflow-hidden relative min-h-96", children: /* @__PURE__ */ jsx7(Image2, { src: tier.image, alt: tier.imageAlt || tier.title, fill: true, className: "object-cover", sizes: "(max-width: 1280px) 0vw, 50vw" }) }) }),
           /* @__PURE__ */ jsxs4("div", { className: "flex flex-col p-6 md:p-8 xl:w-1/2", children: [
             /* @__PURE__ */ jsxs4("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsx7("p", { className: "text-lg font-semibold text-(--color-text-dark)", children: tier.title }),
-              /* @__PURE__ */ jsx7("p", { className: "text-(--color-text-muted) mt-3", children: tier.description }),
+              /* @__PURE__ */ jsx7("p", { className: "text-lg font-semibold text-foreground", children: tier.title }),
+              /* @__PURE__ */ jsx7("p", { className: "text-muted-foreground mt-3", children: tier.description }),
               /* @__PURE__ */ jsxs4("div", { className: "mt-6 flex items-baseline", children: [
-                /* @__PURE__ */ jsx7("span", { className: "text-3xl font-semibold text-(--color-text-dark)", children: tier.price }),
-                /* @__PURE__ */ jsx7("span", { className: "text-(--color-text-muted) ml-2 text-sm", children: tier.priceUnit })
+                /* @__PURE__ */ jsx7("span", { className: "text-3xl font-semibold text-foreground", children: tier.price }),
+                /* @__PURE__ */ jsx7("span", { className: "text-muted-foreground ml-2 text-sm", children: tier.priceUnit })
               ] }),
               /* @__PURE__ */ jsx7(Button3, { asChild: true, variant: tier.ctaVariant === "primary" ? "default" : "secondary", className: "mt-5 w-full sm:w-auto", children: /* @__PURE__ */ jsx7("a", { href: tier.ctaHref || "#", children: tier.ctaText }) })
             ] }),
             /* @__PURE__ */ jsx7("div", { className: "mt-8", children: /* @__PURE__ */ jsx7("ul", { className: "space-y-2", children: tier.features.map((feature, featureIndex) => /* @__PURE__ */ jsxs4("li", { className: "flex items-start", children: [
-              /* @__PURE__ */ jsx7(Check2, { className: "text-(--color-teal-dark) mr-2 size-4 shrink-0" }),
-              /* @__PURE__ */ jsx7("span", { className: "text-(--color-text-dark) text-sm", children: feature.text })
+              /* @__PURE__ */ jsx7(Check2, { className: "text-primary mr-2 size-4 shrink-0" }),
+              /* @__PURE__ */ jsx7("span", { className: "text-foreground text-sm", children: feature.text })
             ] }, featureIndex)) }) })
           ] })
         ] }) : /* @__PURE__ */ jsx7("div", { className: "flex h-full flex-col", children: /* @__PURE__ */ jsxs4("div", { children: [
-          /* @__PURE__ */ jsx7("p", { className: "text-lg font-semibold text-(--color-text-dark)", children: tier.title }),
-          /* @__PURE__ */ jsx7("p", { className: "text-(--color-text-muted) mt-3", children: tier.description }),
+          /* @__PURE__ */ jsx7("p", { className: "text-lg font-semibold text-foreground", children: tier.title }),
+          /* @__PURE__ */ jsx7("p", { className: "text-muted-foreground mt-3", children: tier.description }),
           /* @__PURE__ */ jsxs4("div", { className: "mt-6 flex items-baseline", children: [
-            /* @__PURE__ */ jsx7("span", { className: "text-3xl font-semibold text-(--color-text-dark)", children: tier.price }),
-            /* @__PURE__ */ jsx7("span", { className: "text-(--color-text-muted) ml-2 text-sm", children: tier.priceUnit })
+            /* @__PURE__ */ jsx7("span", { className: "text-3xl font-semibold text-foreground", children: tier.price }),
+            /* @__PURE__ */ jsx7("span", { className: "text-muted-foreground ml-2 text-sm", children: tier.priceUnit })
           ] }),
           /* @__PURE__ */ jsx7(Button3, { asChild: true, variant: tier.ctaVariant === "primary" ? "default" : "secondary", className: "mt-5 w-full sm:w-auto", children: /* @__PURE__ */ jsx7("a", { href: tier.ctaHref || "#", children: tier.ctaText }) }),
           /* @__PURE__ */ jsx7("div", { className: "mt-8", children: /* @__PURE__ */ jsx7("ul", { className: "space-y-2", children: tier.features.map((feature, featureIndex) => /* @__PURE__ */ jsxs4("li", { className: "flex items-start", children: [
-            /* @__PURE__ */ jsx7(Check2, { className: "text-(--color-teal-dark) mr-2 size-4 shrink-0" }),
-            /* @__PURE__ */ jsx7("span", { className: "text-(--color-text-dark) text-sm", children: feature.text })
+            /* @__PURE__ */ jsx7(Check2, { className: "text-primary mr-2 size-4 shrink-0" }),
+            /* @__PURE__ */ jsx7("span", { className: "text-foreground text-sm", children: feature.text })
           ] }, featureIndex)) }) })
         ] }) })
       }
     ) }) }, index)) }),
-    securityNote && /* @__PURE__ */ jsx7(ScrollReveal, { direction: "up", delay: 0.4, children: /* @__PURE__ */ jsx7("div", { className: "text-center mt-8", children: /* @__PURE__ */ jsxs4("p", { className: "text-sm text-(--color-text-muted)", children: [
+    securityNote && /* @__PURE__ */ jsx7(ScrollReveal, { direction: "up", delay: 0.4, children: /* @__PURE__ */ jsx7("div", { className: "text-center mt-8", children: /* @__PURE__ */ jsxs4("p", { className: "text-sm text-muted-foreground", children: [
       /* @__PURE__ */ jsx7("strong", { children: "Your code stays private." }),
       " ",
       securityNote
@@ -505,18 +504,11 @@ var defaultButtons = [
     showArrow: true
   }
 ];
-var backgroundColorMap = {
-  light: "bg-(--color-btn-white)",
-  blue: "bg-(--color-blue-light)",
-  green: "bg-(--color-green-light)",
-  purple: "bg-(--color-purple-light)",
-  orange: "bg-(--color-orange-light)"
-};
-function CTA({ heading = "Ready to Save 15 Hours Per Week?", subheading = "Setup with Github \u2013 takes 5 minutes.", buttons = defaultButtons, backgroundColor = "blue", className }) {
-  const bgClass = backgroundColorMap[backgroundColor];
+function CTA({ heading = "Ready to Save 15 Hours Per Week?", subheading = "Setup with Github \u2013 takes 5 minutes.", buttons = defaultButtons, backgroundColor: _backgroundColor, className }) {
+  const bgClass = "bg-card";
   return /* @__PURE__ */ jsx8("section", { className: cn(`py-20 md:py-32 px-4 md:px-6 ${bgClass}`, className), children: /* @__PURE__ */ jsx8("div", { className: "max-w-3xl mx-auto text-center", children: /* @__PURE__ */ jsx8(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsxs5("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ jsx8("h2", { className: "font-normal text-(--color-text-dark) text-[clamp(32px,5vw,52px)] leading-tight tracking-tight font-halant", children: heading }),
-    /* @__PURE__ */ jsx8("p", { className: "max-w-2xl mx-auto text-[clamp(16px,2vw,18px)] leading-relaxed text-(--color-text-muted)", children: subheading }),
+    /* @__PURE__ */ jsx8("h2", { className: "font-normal text-foreground text-[clamp(32px,5vw,52px)] leading-tight tracking-tight", children: heading }),
+    /* @__PURE__ */ jsx8("p", { className: "max-w-2xl mx-auto text-[clamp(16px,2vw,18px)] leading-relaxed text-muted-foreground", children: subheading }),
     /* @__PURE__ */ jsx8("div", { className: "flex flex-col sm:flex-row gap-3 justify-center items-center pt-4", children: buttons.map((button, index) => /* @__PURE__ */ jsx8(Button4, { asChild: true, variant: button.variant === "primary" ? "default" : "secondary", children: /* @__PURE__ */ jsxs5("a", { href: button.href, children: [
       button.text,
       button.showArrow && /* @__PURE__ */ jsx8(HiArrowRight, { className: "w-4 h-4" })
@@ -553,12 +545,12 @@ var defaultFaqs = [
     answer: "Yes, Priya is SOC 2 Type II certified and HIPAA compliant, ensuring your data is handled with the highest security and privacy standards."
   }
 ];
-function FAQ({ heading = "FAQs", faqs = defaultFaqs, backgroundColor = "bg-(--color-bg-light)", className }) {
+function FAQ({ heading = "FAQs", faqs = defaultFaqs, backgroundColor = "bg-background", className }) {
   return /* @__PURE__ */ jsx9("section", { id: "faq", className: cn(`py-20 px-6 lg:px-12 ${backgroundColor}`, className), children: /* @__PURE__ */ jsxs6("div", { className: "max-w-4xl mx-auto", children: [
-    /* @__PURE__ */ jsx9(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsx9("div", { className: "text-center mb-12", children: /* @__PURE__ */ jsx9("h2", { className: "font-normal text-[clamp(32px,4vw,52px)] leading-tight text-(--color-text-dark) mb-4 font-halant", children: heading }) }) }),
-    /* @__PURE__ */ jsx9(Accordion, { type: "single", collapsible: true, className: "space-y-4", children: faqs.map((faq, index) => /* @__PURE__ */ jsx9(ScrollReveal, { direction: "up", delay: 0.15 + index * 0.05, children: /* @__PURE__ */ jsxs6(AccordionItem, { value: `item-${index}`, className: "rounded-xl px-6 border border-black/5 bg-(--color-btn-white) card-shadow/50", children: [
-      /* @__PURE__ */ jsx9(AccordionTrigger, { className: "hover:no-underline py-5 text-base font-medium text-(--color-text-dark)", children: faq.question }),
-      /* @__PURE__ */ jsx9(AccordionContent, { className: "pb-5 text-sm text-(--color-text-dark)/70 leading-relaxed", children: faq.answer })
+    /* @__PURE__ */ jsx9(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsx9("div", { className: "text-center mb-12", children: /* @__PURE__ */ jsx9("h2", { className: "font-normal text-[clamp(32px,4vw,52px)] leading-tight text-foreground mb-4", children: heading }) }) }),
+    /* @__PURE__ */ jsx9(Accordion, { type: "single", collapsible: true, className: "space-y-4", children: faqs.map((faq, index) => /* @__PURE__ */ jsx9(ScrollReveal, { direction: "up", delay: 0.15 + index * 0.05, children: /* @__PURE__ */ jsxs6(AccordionItem, { value: `item-${index}`, className: "rounded-xl px-6 border border-border bg-card shadow-sm", children: [
+      /* @__PURE__ */ jsx9(AccordionTrigger, { className: "hover:no-underline py-5 text-base font-medium text-foreground", children: faq.question }),
+      /* @__PURE__ */ jsx9(AccordionContent, { className: "pb-5 text-sm text-muted-foreground leading-relaxed", children: faq.answer })
     ] }) }, index)) })
   ] }) });
 }
@@ -577,27 +569,27 @@ var defaultWorkflows = [
   { icon: FaLightbulb, label: "Feature requests" }
 ];
 function Problem({
-  heading: _heading = "Product managers <strong>spend 15+ hours</strong> per week on busywork",
+  heading = "Product managers <strong>spend 15+ hours</strong> per week on busywork",
   workflows = defaultWorkflows,
   subheading = "What if all of that just... ",
   subheadingHighlight = "happened automatically?",
-  highlightColor = "bg-(--color-green-light)",
+  highlightColor = "bg-primary/20",
   marqueeDuration = "30s",
   marqueeGap = "0.5rem",
-  backgroundColor = "bg-(--color-bg-light)",
+  backgroundColor = "bg-background",
   className
 }) {
   return /* @__PURE__ */ jsx10("section", { id: "problem", className: cn(`py-20 md:pb-32 px-6 lg:px-12 ${backgroundColor}`, className), children: /* @__PURE__ */ jsx10("div", { className: "max-w-4xl mx-auto", children: /* @__PURE__ */ jsxs7("div", { className: "text-center space-y-8", children: [
-    /* @__PURE__ */ jsx10(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsxs7("h2", { className: "font-normal text-[clamp(36px,4vw,40px)] leading-tight text-(--color-text-dark)", children: [
-      /* @__PURE__ */ jsx10("span", { className: "block md:inline", children: "Product managers" }),
-      " ",
-      /* @__PURE__ */ jsx10("span", { className: "block md:inline", children: /* @__PURE__ */ jsx10("strong", { children: "spend 15+ hours" }) }),
-      " ",
-      /* @__PURE__ */ jsx10("span", { className: "block md:inline", children: "per week on busywork" })
-    ] }) }),
+    /* @__PURE__ */ jsx10(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsx10(
+      "h2",
+      {
+        className: "font-normal text-[clamp(36px,4vw,40px)] leading-tight text-foreground",
+        dangerouslySetInnerHTML: { __html: heading }
+      }
+    ) }),
     /* @__PURE__ */ jsx10(ScrollReveal, { direction: "none", delay: 0.2, children: /* @__PURE__ */ jsxs7("div", { className: "relative py-6", children: [
-      /* @__PURE__ */ jsx10("div", { className: "absolute left-0 top-0 bottom-0 w-32 bg-gradient-to-r from-(--color-bg-light) to-transparent z-10 pointer-events-none" }),
-      /* @__PURE__ */ jsx10("div", { className: "absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-(--color-bg-light) to-transparent z-10 pointer-events-none" }),
+      /* @__PURE__ */ jsx10("div", { className: "absolute left-0 top-0 bottom-0 w-32 bg-gradient-to-r from-background to-transparent z-10 pointer-events-none" }),
+      /* @__PURE__ */ jsx10("div", { className: "absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-background to-transparent z-10 pointer-events-none" }),
       /* @__PURE__ */ jsx10(
         Marquee,
         {
@@ -606,14 +598,14 @@ function Problem({
             "--duration": marqueeDuration,
             "--gap": marqueeGap
           },
-          children: workflows.map((workflow, index) => /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2.5 pl-1.5 pr-3.5 py-1.5 bg-(--color-bg-cream) border border-(--color-text-dark)/10 rounded-full", children: [
-            /* @__PURE__ */ jsx10("div", { className: "flex items-center justify-center w-7 h-7 rounded-full bg-(--color-bg-light)", children: /* @__PURE__ */ jsx10(workflow.icon, { className: "w-3.5 h-3.5 text-(--color-text-dark)" }) }),
-            /* @__PURE__ */ jsx10("span", { className: "text-sm text-(--color-text-dark) whitespace-nowrap", children: workflow.label })
+          children: workflows.map((workflow, index) => /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2.5 pl-1.5 pr-3.5 py-1.5 bg-card border border-border rounded-full", children: [
+            /* @__PURE__ */ jsx10("div", { className: "flex items-center justify-center w-7 h-7 rounded-full bg-background", children: /* @__PURE__ */ jsx10(workflow.icon, { className: "w-3.5 h-3.5 text-foreground" }) }),
+            /* @__PURE__ */ jsx10("span", { className: "text-sm text-foreground whitespace-nowrap", children: workflow.label })
           ] }, index))
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx10(ScrollReveal, { direction: "up", delay: 0.3, children: /* @__PURE__ */ jsx10("div", { className: "pt-2 md:pt-4", children: /* @__PURE__ */ jsxs7("h3", { className: "font-normal text-[clamp(26px,3.5vw,32px)] leading-tight text-(--color-text-dark)", children: [
+    /* @__PURE__ */ jsx10(ScrollReveal, { direction: "up", delay: 0.3, children: /* @__PURE__ */ jsx10("div", { className: "pt-2 md:pt-4", children: /* @__PURE__ */ jsxs7("h3", { className: "font-normal text-[clamp(26px,3.5vw,32px)] leading-tight text-foreground", children: [
       subheading,
       /* @__PURE__ */ jsxs7("span", { className: "relative inline-block", children: [
         /* @__PURE__ */ jsx10("span", { className: "relative z-10", children: subheadingHighlight }),
@@ -675,15 +667,15 @@ function Navigation({
       className: cn(
         "z-50 w-full transition-all duration-300",
         sticky && "sticky top-0",
-        showScrollEffect && isScrolled ? "bg-(--color-bg-light)/95 backdrop-blur-md" : "bg-(--color-bg-light)",
+        showScrollEffect && isScrolled ? "bg-background/95 backdrop-blur-md" : "bg-background",
         className
       ),
       children: /* @__PURE__ */ jsxs8("div", { className: cn(maxWidthClass, "mx-auto px-6 lg:px-12 py-4"), children: [
         /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx11("div", { className: "flex items-center", children: /* @__PURE__ */ jsx11(Link, { href: logoHref, className: "flex items-center", children: typeof logo === "string" ? /* @__PURE__ */ jsx11("span", { className: "text-3xl font-base text-(--color-text-dark) font-halant", children: logo }) : logo }) }),
-          links && links.length > 0 && /* @__PURE__ */ jsx11("div", { className: "hidden lg:flex items-center gap-8", children: links.map((link) => /* @__PURE__ */ jsx11("a", { href: link.href, className: "text-sm text-(--color-text-dark) hover:opacity-60 transition-opacity", children: link.label }, link.href)) }),
+          /* @__PURE__ */ jsx11("div", { className: "flex items-center", children: /* @__PURE__ */ jsx11(Link, { href: logoHref, className: "flex items-center", children: typeof logo === "string" ? /* @__PURE__ */ jsx11("span", { className: "text-3xl font-base text-foreground", children: logo }) : logo }) }),
+          links && links.length > 0 && /* @__PURE__ */ jsx11("div", { className: "hidden lg:flex items-center gap-8", children: links.map((link) => /* @__PURE__ */ jsx11("a", { href: link.href, className: "text-sm text-foreground hover:opacity-60 transition-opacity", children: link.label }, link.href)) }),
           ctaText && ctaHref && /* @__PURE__ */ jsx11("div", { className: "hidden lg:flex items-center", children: /* @__PURE__ */ jsx11(Button5, { asChild: true, variant: ctaVariant, children: /* @__PURE__ */ jsx11("a", { href: ctaHref, children: ctaText }) }) }),
-          /* @__PURE__ */ jsx11("button", { className: "lg:hidden p-2 text-(--color-text-dark)", onClick: () => setMobileMenuOpen(!mobileMenuOpen), "aria-label": "Toggle menu", children: mobileMenuOpen ? /* @__PURE__ */ jsx11(X, { className: "w-6 h-6" }) : /* @__PURE__ */ jsx11(Menu, { className: "w-6 h-6" }) })
+          /* @__PURE__ */ jsx11("button", { className: "lg:hidden p-2 text-foreground", onClick: () => setMobileMenuOpen(!mobileMenuOpen), "aria-label": "Toggle menu", children: mobileMenuOpen ? /* @__PURE__ */ jsx11(X, { className: "w-6 h-6" }) : /* @__PURE__ */ jsx11(Menu, { className: "w-6 h-6" }) })
         ] }),
         /* @__PURE__ */ jsx11(AnimatePresence, { children: mobileMenuOpen && /* @__PURE__ */ jsx11(
           motion2.div,
@@ -693,8 +685,8 @@ function Navigation({
             exit: { opacity: 0, height: 0 },
             transition: { duration: 0.3, ease: "easeInOut" },
             className: "lg:hidden overflow-hidden",
-            children: /* @__PURE__ */ jsx11("div", { className: "mt-4 py-4 rounded-xl bg-(--color-btn-white)", children: /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-4 px-6", children: [
-              links.map((link) => /* @__PURE__ */ jsx11("a", { href: link.href, className: "py-2 text-(--color-text-dark) hover:opacity-70 transition-colors", onClick: () => setMobileMenuOpen(false), children: link.label }, link.href)),
+            children: /* @__PURE__ */ jsx11("div", { className: "mt-4 py-4 rounded-xl bg-card", children: /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-4 px-6", children: [
+              links.map((link) => /* @__PURE__ */ jsx11("a", { href: link.href, className: "py-2 text-foreground hover:opacity-70 transition-colors", onClick: () => setMobileMenuOpen(false), children: link.label }, link.href)),
               ctaText && ctaHref && /* @__PURE__ */ jsx11(Button5, { asChild: true, variant: ctaVariant, className: "mt-2", onClick: () => setMobileMenuOpen(false), children: /* @__PURE__ */ jsx11("a", { href: ctaHref, children: ctaText }) })
             ] }) })
           }
@@ -740,11 +732,11 @@ function Footer({
     }
     form.reset();
   };
-  return /* @__PURE__ */ jsx12("footer", { className: cn("py-16 px-6 lg:px-12 bg-[#111011] text-white", className), children: /* @__PURE__ */ jsxs9("div", { className: "max-w-7xl mx-auto", children: [
+  return /* @__PURE__ */ jsx12("footer", { className: cn("py-16 px-6 lg:px-12 bg-card text-card-foreground", className), children: /* @__PURE__ */ jsxs9("div", { className: "max-w-7xl mx-auto", children: [
     /* @__PURE__ */ jsxs9("div", { className: "grid md:grid-cols-5 gap-12 mb-12", children: [
       /* @__PURE__ */ jsxs9("div", { className: "md:col-span-2", children: [
-        /* @__PURE__ */ jsx12(Link2, { href: "/", className: "inline-block mb-4", children: /* @__PURE__ */ jsx12("div", { className: "text-3xl font-base text-white font-halant", children: logo }) }),
-        /* @__PURE__ */ jsx12("p", { className: "max-w-md text-sm leading-relaxed text-white/70 mb-6", children: description }),
+        /* @__PURE__ */ jsx12(Link2, { href: "/", className: "inline-block mb-4", children: /* @__PURE__ */ jsx12("div", { className: "text-3xl font-base text-card-foreground", children: logo }) }),
+        /* @__PURE__ */ jsx12("p", { className: "max-w-md text-sm leading-relaxed text-muted-foreground mb-6", children: description }),
         /* @__PURE__ */ jsx12("div", { className: "flex items-center gap-4", children: socialLinks.map((link) => {
           const Icon = link.icon;
           return /* @__PURE__ */ jsx12(
@@ -753,7 +745,7 @@ function Footer({
               href: link.href,
               target: "_blank",
               rel: "noopener noreferrer",
-              className: "text-white/70 transition-colors hover:text-white",
+              className: "text-muted-foreground transition-colors hover:text-card-foreground",
               "aria-label": link.label,
               children: /* @__PURE__ */ jsx12(Icon, { className: "w-5 h-5" })
             },
@@ -762,11 +754,11 @@ function Footer({
         }) })
       ] }),
       /* @__PURE__ */ jsxs9("div", { children: [
-        /* @__PURE__ */ jsx12("h3", { className: "font-semibold text-base mb-4 text-white", children: "Quick Links" }),
-        /* @__PURE__ */ jsx12("ul", { className: "space-y-2", children: quickLinks.map((link) => /* @__PURE__ */ jsx12("li", { children: /* @__PURE__ */ jsx12(Link2, { href: link.href, className: "text-sm text-white/70 transition-colors hover:text-white", children: link.label }) }, link.label)) })
+        /* @__PURE__ */ jsx12("h3", { className: "font-semibold text-base mb-4 text-card-foreground", children: "Quick Links" }),
+        /* @__PURE__ */ jsx12("ul", { className: "space-y-2", children: quickLinks.map((link) => /* @__PURE__ */ jsx12("li", { children: /* @__PURE__ */ jsx12(Link2, { href: link.href, className: "text-sm text-muted-foreground transition-colors hover:text-card-foreground", children: link.label }) }, link.label)) })
       ] }),
       /* @__PURE__ */ jsx12("div", { className: "w-full md:col-span-2 md:flex md:flex-col md:items-end", children: /* @__PURE__ */ jsxs9("div", { className: "w-full md:max-w-sm", children: [
-        /* @__PURE__ */ jsx12("h3", { className: "font-semibold text-base mb-4 text-white", children: contactTitle }),
+        /* @__PURE__ */ jsx12("h3", { className: "font-semibold text-base mb-4 text-card-foreground", children: contactTitle }),
         /* @__PURE__ */ jsxs9("form", { onSubmit: handleEmailSubmit, className: "relative", children: [
           /* @__PURE__ */ jsx12(
             Input,
@@ -775,14 +767,14 @@ function Footer({
               name: "email",
               placeholder: emailPlaceholder,
               required: true,
-              className: "w-full bg-white/10 border-white/20 text-white placeholder:text-white/50 pr-12"
+              className: "w-full bg-muted border-border text-card-foreground placeholder:text-muted-foreground pr-12"
             }
           ),
           /* @__PURE__ */ jsx12(
             "button",
             {
               type: "submit",
-              className: "absolute right-1 top-1/2 -translate-y-1/2 bg-white text-gray-900 hover:bg-white/90 active:bg-[#111011] active:text-white px-3 py-3 rounded-md transition-colors",
+              className: "absolute right-1 top-1/2 -translate-y-1/2 bg-card text-foreground hover:bg-card active:bg-card active:text-card-foreground px-3 py-3 rounded-md transition-colors",
               "aria-label": "Submit email",
               children: /* @__PURE__ */ jsx12(FaArrowRight, { className: "w-3 h-3" })
             }
@@ -790,7 +782,7 @@ function Footer({
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx12("div", { className: "border-t border-white/10 pt-8", children: /* @__PURE__ */ jsx12("div", { className: "flex flex-col md:flex-row justify-between items-center gap-4", children: /* @__PURE__ */ jsx12("p", { className: "text-sm text-white/60", children: copyrightText }) }) })
+    /* @__PURE__ */ jsx12("div", { className: "border-t border-border pt-8", children: /* @__PURE__ */ jsx12("div", { className: "flex flex-col md:flex-row justify-between items-center gap-4", children: /* @__PURE__ */ jsx12("p", { className: "text-sm text-muted-foreground", children: copyrightText }) }) })
   ] }) });
 }
 
@@ -827,7 +819,7 @@ function Contact({
   successMessage = "Thanks for reaching out! I'll get back to you within 24 hours.",
   errorMessage = "Hmm, something went wrong. Mind trying again?",
   onSubmit,
-  backgroundColor = "bg-(--color-bg-light)",
+  backgroundColor = "bg-background",
   className
 }) {
   const [isSubmitting, setIsSubmitting] = useState2(false);
@@ -858,25 +850,25 @@ function Contact({
   };
   return /* @__PURE__ */ jsx13("section", { className: cn(`relative py-12 md:py-32 px-6 lg:px-12 ${backgroundColor}`, className), children: /* @__PURE__ */ jsxs10("div", { className: "max-w-3xl mx-auto", children: [
     /* @__PURE__ */ jsx13(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsxs10("div", { className: "mb-14 text-center", children: [
-      /* @__PURE__ */ jsx13("h1", { className: "font-normal text-[clamp(32px,4vw,40px)] leading-tight text-(--color-text-dark) mb-4", children: heading }),
-      /* @__PURE__ */ jsx13("p", { className: "text-base text-(--color-text-muted) max-w-2xl mx-auto", children: subheading })
+      /* @__PURE__ */ jsx13("h1", { className: "font-normal text-[clamp(32px,4vw,40px)] leading-tight text-foreground mb-4", children: heading }),
+      /* @__PURE__ */ jsx13("p", { className: "text-base text-muted-foreground max-w-2xl mx-auto", children: subheading })
     ] }) }),
     /* @__PURE__ */ jsx13(ScrollReveal, { direction: "up", delay: 0.2, children: /* @__PURE__ */ jsxs10(
       "form",
       {
         onSubmit: handleSubmit,
-        className: "mx-auto flex max-w-lg flex-col gap-6 bg-(--color-bg-cream) p-6 md:p-8 rounded-3xl border border-(--color-text-dark)/10 feature-card-shadow",
+        className: "mx-auto flex max-w-lg flex-col gap-6 bg-card p-6 md:p-8 rounded-3xl border border-border feature-card-shadow",
         children: [
           fields.map((field) => /* @__PURE__ */ jsxs10("div", { className: "grid w-full items-center gap-2", children: [
-            /* @__PURE__ */ jsxs10(Label, { htmlFor: field.id, className: "text-(--color-text-dark)", children: [
+            /* @__PURE__ */ jsxs10(Label, { htmlFor: field.id, className: "text-foreground", children: [
               field.label,
-              field.required && /* @__PURE__ */ jsx13("span", { className: "text-red-500 ml-1", children: "*" })
+              field.required && /* @__PURE__ */ jsx13("span", { className: "text-destructive ml-1", children: "*" })
             ] }),
             field.type === "textarea" ? /* @__PURE__ */ jsx13(Textarea, { id: field.id, placeholder: field.placeholder, required: field.required, onChange: handleChange, className: "min-h-[120px]" }) : /* @__PURE__ */ jsx13(Input2, { type: field.type, id: field.id, placeholder: field.placeholder, required: field.required, onChange: handleChange })
           ] }, field.id)),
           /* @__PURE__ */ jsx13(Button6, { type: "submit", className: "w-full", disabled: isSubmitting, children: isSubmitting ? "Submitting..." : submitButtonText }),
-          submitStatus === "success" && /* @__PURE__ */ jsx13("p", { className: "text-green-600 text-sm text-center", children: successMessage }),
-          submitStatus === "error" && /* @__PURE__ */ jsx13("p", { className: "text-red-600 text-sm text-center", children: errorMessage })
+          submitStatus === "success" && /* @__PURE__ */ jsx13("p", { className: "text-primary text-sm text-center", children: successMessage }),
+          submitStatus === "error" && /* @__PURE__ */ jsx13("p", { className: "text-destructive text-sm text-center", children: errorMessage })
         ]
       }
     ) })
@@ -1020,7 +1012,7 @@ function GridPattern({
     "svg",
     {
       "aria-hidden": "true",
-      className: cn("pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30", className),
+      className: cn("pointer-events-none absolute inset-0 h-full w-full fill-muted-foreground/20 stroke-muted-foreground/20", className),
       ...props,
       children: [
         /* @__PURE__ */ jsx15("defs", { children: /* @__PURE__ */ jsx15("pattern", { id, width, height, patternUnits: "userSpaceOnUse", x, y, children: /* @__PURE__ */ jsx15("path", { d: `M.5 ${height}V.5H${width}`, fill: "none", strokeDasharray }) }) }),
@@ -1040,7 +1032,7 @@ var Square = forwardRef(({ className, children }, ref) => {
     "div",
     {
       ref,
-      className: cn("z-10 flex size-16 items-center justify-center rounded-lg bg-(--color-btn-white) border border-(--color-btn-border) p-3 integration-square-shadow", className),
+      className: cn("z-10 flex size-16 items-center justify-center rounded-lg bg-card border border-border p-3 integration-square-shadow", className),
       children
     }
   );
@@ -1091,7 +1083,7 @@ function Integration({
         return /* @__PURE__ */ jsx16("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx16(Image3, { src: node.content, alt: node.alt || "Integration", fill: true, className: "object-cover rounded-lg" }) });
       }
       if (node.type === "icon" && typeof node.content === "string") {
-        return /* @__PURE__ */ jsx16("div", { className: cn("text-gray-900 dark:text-white", node.className), children: node.content });
+        return /* @__PURE__ */ jsx16("div", { className: cn("text-foreground", node.className), children: node.content });
       }
       return node.content;
     })();
@@ -1110,8 +1102,8 @@ function Integration({
     "7xl": "max-w-7xl"
   };
   const content = /* @__PURE__ */ jsxs13("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ jsx16(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsx16("h2", { className: "font-normal text-[clamp(32px,4vw,40px)] leading-tight text-(--color-text-dark)", children: title }) }),
-    /* @__PURE__ */ jsx16(ScrollReveal, { direction: "up", delay: 0.2, children: /* @__PURE__ */ jsx16("p", { className: "text-base text-(--color-text-muted) max-w-lg", children: description }) }),
+    /* @__PURE__ */ jsx16(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsx16("h2", { className: "font-normal text-[clamp(32px,4vw,40px)] leading-tight text-foreground", children: title }) }),
+    /* @__PURE__ */ jsx16(ScrollReveal, { direction: "up", delay: 0.2, children: /* @__PURE__ */ jsx16("p", { className: "text-base text-muted-foreground max-w-lg", children: description }) }),
     buttonText && buttonHref && /* @__PURE__ */ jsx16(ScrollReveal, { direction: "up", delay: 0.3, children: /* @__PURE__ */ jsx16(Button7, { asChild: true, variant: "default", children: /* @__PURE__ */ jsx16("a", { href: buttonHref, children: buttonText }) }) })
   ] });
   const animation = /* @__PURE__ */ jsx16(ScrollReveal, { direction: contentOrder === "left" ? "right" : "left", delay: 0.2, children: /* @__PURE__ */ jsxs13("div", { className: "relative flex aspect-square max-w-md mx-auto w-full items-center justify-center overflow-hidden rounded-lg", ref: containerRef, children: [
@@ -1143,7 +1135,7 @@ function Integration({
       index
     ))
   ] }) });
-  return /* @__PURE__ */ jsx16("section", { className: cn("pt-10 sm:pt-0 px-8 lg:px-24 bg-(--color-bg-light)", className), children: /* @__PURE__ */ jsx16("div", { className: cn(maxWidthClasses[maxWidth], "mx-auto"), children: /* @__PURE__ */ jsx16("div", { className: "grid lg:grid-cols-2 gap-1 items-center", children: contentOrder === "left" ? /* @__PURE__ */ jsxs13(Fragment2, { children: [
+  return /* @__PURE__ */ jsx16("section", { className: cn("pt-10 sm:pt-0 px-8 lg:px-24 bg-background", className), children: /* @__PURE__ */ jsx16("div", { className: cn(maxWidthClasses[maxWidth], "mx-auto"), children: /* @__PURE__ */ jsx16("div", { className: "grid lg:grid-cols-2 gap-1 items-center", children: contentOrder === "left" ? /* @__PURE__ */ jsxs13(Fragment2, { children: [
     content,
     animation
   ] }) : /* @__PURE__ */ jsxs13(Fragment2, { children: [