@mdxui/named 6.0.0 → 6.2.0

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+export { P as Problem, a as ProblemProps, W as WorkflowItem } from '../problem-B2-XszSB.js';
 import { IconType } from 'react-icons';
 
 interface HeroProps {
@@ -93,10 +94,11 @@ interface CTAProps {
     heading?: string;
     subheading?: string;
     buttons?: CTAButton[];
+    /** @deprecated theme-driven now; ignored */
     backgroundColor?: 'light' | 'blue' | 'green' | 'purple' | 'orange';
     className?: string;
 }
-declare function CTA({ heading, subheading, buttons, backgroundColor, className }: CTAProps): react_jsx_runtime.JSX.Element;
+declare function CTA({ heading, subheading, buttons, backgroundColor: _backgroundColor, className }: CTAProps): react_jsx_runtime.JSX.Element;
 
 interface FAQItem {
     question: string;
@@ -110,24 +112,6 @@ interface FAQProps {
 }
 declare function FAQ({ heading, faqs, backgroundColor, className }: FAQProps): react_jsx_runtime.JSX.Element;
 
-interface WorkflowItem {
-    icon: IconType;
-    label: string;
-}
-interface ProblemProps {
-    heading?: string;
-    headingHighlight?: string;
-    workflows?: WorkflowItem[];
-    subheading?: string;
-    subheadingHighlight?: string;
-    highlightColor?: string;
-    marqueeDuration?: string;
-    marqueeGap?: string;
-    backgroundColor?: string;
-    className?: string;
-}
-declare function Problem({ heading: _heading, workflows, subheading, subheadingHighlight, highlightColor, marqueeDuration, marqueeGap, backgroundColor, className, }: ProblemProps): react_jsx_runtime.JSX.Element;
-
 interface NavLink {
     label: string;
     href: string;
@@ -218,4 +202,4 @@ interface IntegrationProps {
 }
 declare function Integration({ title, description, buttonText, buttonHref, leftNode, rightNode, beamAnimations, gridPatternWidth, gridPatternHeight, maxWidth, className, contentOrder, }: IntegrationProps): react_jsx_runtime.JSX.Element;
 
-export { type AnimationConfig, CTA, type CTAButton, type CTAProps, Contact, type ContactProps, FAQ, type FAQItem, type FAQProps, type Feature, type FeatureItem, Features, type FeaturesProps, Footer, type FooterProps, type FormField, Hero, type HeroProps, Integration, type IntegrationNode, type IntegrationProps, type NavLink, Navigation, type NavigationProps, Pricing, type PricingFeature, type PricingProps, type PricingTier, type PricingTierFeature, PricingTiers, type PricingTiersProps, Problem, type ProblemProps, type QuickLink, type SocialLink, type WorkflowItem };
+export { type AnimationConfig, CTA, type CTAButton, type CTAProps, Contact, type ContactProps, FAQ, type FAQItem, type FAQProps, type Feature, type FeatureItem, Features, type FeaturesProps, Footer, type FooterProps, type FormField, Hero, type HeroProps, Integration, type IntegrationNode, type IntegrationProps, type NavLink, Navigation, type NavigationProps, Pricing, type PricingFeature, type PricingProps, type PricingTier, type PricingTierFeature, PricingTiers, type PricingTiersProps, type QuickLink, type SocialLink };

package/dist/components/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: [