chore: switch accent palette to Hostinger violet, drop emerald green

The legal brief on third-party trademark use says: avoid the WhatsApp
teal/green palette and any visual treatment that could read as a
WhatsApp/Meta product. Emerald-500 was used as the primary brand colour
across hero, CTAs, sidebar, charts, badges, and the favicon — close
enough in hue to WhatsApp's signature green to muddy the line.

Swapping to Tailwind violet (which matches the Hostinger brand purple
#7c3aed) makes the visual identity unambiguously ours.

Scope:
- Mechanical Tailwind class swap: emerald-* → violet-* across src/.
- src/app/globals.css: --primary, --ring, --sidebar-primary, --sidebar-ring,
  --chart-1 oklch tokens swapped from emerald (oklch 0.696 0.17 162) to
  Hostinger-aligned violet (oklch 0.526 0.247 293).
- src/app/icon.tsx: favicon background #10b981 → #7c3aed.
- src/app/opengraph-image.tsx: badge bg, accent text, gradient.
- src/components/landing/hero.tsx + cta-banner.tsx: radial-gradient hex.
- src/components/landing/mock/analytics-mock.tsx: marketing chart line.
- src/components/dashboard/conversations-chart.tsx + response-time-chart.tsx:
  "Outgoing" series colour. Distinguishable from "Incoming" blue at a
  glance; we can revisit the chart pair later for stronger colourblind
  contrast (separate concern).
- README.md: license badge colour parameter.

Out of scope:
- src/components/settings/tag-manager.tsx still offers "Emerald" as one
  of the user-pickable contact-tag colours alongside Blue / Yellow / Red
  / etc. — that's a user data choice, not a brand mark.

Contrast check: white text on #7c3aed measures ~4.78:1 (WCAG AA passing
for normal body text). Violet-400 (#a78bfa) on slate-950 measures ~10:1
for accent text, well clear of AA.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

README.md

@@ -4,7 +4,7 @@
 > pipelines, broadcasts, and no-code automations. Fork it, brand it,
 > host it.
 
-[![License: MIT](https://img.shields.io/badge/License-MIT-emerald.svg)](./LICENSE)
+[![License: MIT](https://img.shields.io/badge/License-MIT-violet.svg)](./LICENSE)
 [![CI](https://github.com/ArnasDon/wacrm/actions/workflows/ci.yml/badge.svg)](https://github.com/ArnasDon/wacrm/actions/workflows/ci.yml)
 [![Next.js 16](https://img.shields.io/badge/Next.js-16-black?logo=nextdotjs)](https://nextjs.org)
 [![Supabase](https://img.shields.io/badge/Supabase-Postgres%20%2B%20Auth-3ecf8e?logo=supabase)](https://supabase.com)

src/app/(auth)/forgot-password/page.tsx

@@ -46,8 +46,8 @@ export default function ForgotPasswordPage() {
       <div className="flex min-h-screen items-center justify-center bg-slate-950 px-4">
         <Card className="w-full max-w-md border-slate-800 bg-slate-900">
           <CardHeader className="items-center text-center">
-            <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-500/10">
+            <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-violet-500/10">
-              <CheckCircle className="h-6 w-6 text-emerald-500" />
+              <CheckCircle className="h-6 w-6 text-violet-500" />
             </div>
             <CardTitle className="text-xl text-white">
               Check your email
@@ -77,8 +77,8 @@ export default function ForgotPasswordPage() {
     <div className="flex min-h-screen items-center justify-center bg-slate-950 px-4">
       <Card className="w-full max-w-md border-slate-800 bg-slate-900">
         <CardHeader className="items-center text-center">
-          <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-500/10">
+          <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-violet-500/10">
-            <MessageSquare className="h-6 w-6 text-emerald-500" />
+            <MessageSquare className="h-6 w-6 text-violet-500" />
           </div>
           <CardTitle className="text-xl text-white">Reset password</CardTitle>
           <CardDescription className="text-slate-400">
@@ -104,14 +104,14 @@ export default function ForgotPasswordPage() {
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 required
-                className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-emerald-500 focus-visible:ring-emerald-500/20"
+                className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-violet-500 focus-visible:ring-violet-500/20"
               />
             </div>
 
             <Button
               type="submit"
               disabled={loading}
-              className="mt-2 h-10 w-full bg-emerald-600 text-white hover:bg-emerald-500 disabled:opacity-50"
+              className="mt-2 h-10 w-full bg-violet-600 text-white hover:bg-violet-500 disabled:opacity-50"
             >
               {loading ? "Sending..." : "Send reset link"}
             </Button>

src/app/(auth)/login/page.tsx

@@ -47,8 +47,8 @@ export default function LoginPage() {
     <div className="flex min-h-screen items-center justify-center bg-slate-950 px-4">
       <Card className="w-full max-w-md border-slate-800 bg-slate-900">
         <CardHeader className="items-center text-center">
-          <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-500/10">
+          <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-violet-500/10">
-            <MessageSquare className="h-6 w-6 text-emerald-500" />
+            <MessageSquare className="h-6 w-6 text-violet-500" />
           </div>
           <CardTitle className="text-xl text-white">Welcome back</CardTitle>
           <CardDescription className="text-slate-400">
@@ -74,7 +74,7 @@ export default function LoginPage() {
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 required
-                className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-emerald-500 focus-visible:ring-emerald-500/20"
+                className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-violet-500 focus-visible:ring-violet-500/20"
               />
             </div>
 
@@ -85,7 +85,7 @@ export default function LoginPage() {
                 </Label>
                 <Link
                   href="/forgot-password"
-                  className="text-sm text-emerald-500 hover:text-emerald-400"
+                  className="text-sm text-violet-500 hover:text-violet-400"
                 >
                   Forgot password?
                 </Link>
@@ -97,14 +97,14 @@ export default function LoginPage() {
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 required
-                className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-emerald-500 focus-visible:ring-emerald-500/20"
+                className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-violet-500 focus-visible:ring-violet-500/20"
               />
             </div>
 
             <Button
               type="submit"
               disabled={loading}
-              className="mt-2 h-10 w-full bg-emerald-600 text-white hover:bg-emerald-500 disabled:opacity-50"
+              className="mt-2 h-10 w-full bg-violet-600 text-white hover:bg-violet-500 disabled:opacity-50"
             >
               {loading ? "Signing in..." : "Sign in"}
             </Button>
@@ -114,7 +114,7 @@ export default function LoginPage() {
             Don&apos;t have an account?{" "}
             <Link
               href="/signup"
-              className="text-emerald-500 hover:text-emerald-400"
+              className="text-violet-500 hover:text-violet-400"
             >
               Create account
             </Link>

src/app/(auth)/signup/page.tsx

@@ -66,8 +66,8 @@ export default function SignupPage() {
       <div className="flex min-h-screen items-center justify-center bg-slate-950 px-4">
         <Card className="w-full max-w-md border-slate-800 bg-slate-900">
           <CardHeader className="items-center text-center">
-            <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-500/10">
+            <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-violet-500/10">
-              <CheckCircle className="h-6 w-6 text-emerald-500" />
+              <CheckCircle className="h-6 w-6 text-violet-500" />
             </div>
             <CardTitle className="text-xl text-white">
               Check your email
@@ -97,8 +97,8 @@ export default function SignupPage() {
     <div className="flex min-h-screen items-center justify-center bg-slate-950 px-4">
       <Card className="w-full max-w-md border-slate-800 bg-slate-900">
         <CardHeader className="items-center text-center">
-          <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-500/10">
+          <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-violet-500/10">
-            <MessageSquare className="h-6 w-6 text-emerald-500" />
+            <MessageSquare className="h-6 w-6 text-violet-500" />
           </div>
           <CardTitle className="text-xl text-white">Create account</CardTitle>
           <CardDescription className="text-slate-400">
@@ -124,7 +124,7 @@ export default function SignupPage() {
                 value={fullName}
                 onChange={(e) => setFullName(e.target.value)}
                 required
-                className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-emerald-500 focus-visible:ring-emerald-500/20"
+                className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-violet-500 focus-visible:ring-violet-500/20"
               />
             </div>
 
@@ -139,7 +139,7 @@ export default function SignupPage() {
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 required
-                className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-emerald-500 focus-visible:ring-emerald-500/20"
+                className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-violet-500 focus-visible:ring-violet-500/20"
               />
             </div>
 
@@ -154,7 +154,7 @@ export default function SignupPage() {
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 required
-                className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-emerald-500 focus-visible:ring-emerald-500/20"
+                className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-violet-500 focus-visible:ring-violet-500/20"
               />
             </div>
 
@@ -169,14 +169,14 @@ export default function SignupPage() {
                 value={confirmPassword}
                 onChange={(e) => setConfirmPassword(e.target.value)}
                 required
-                className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-emerald-500 focus-visible:ring-emerald-500/20"
+                className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-violet-500 focus-visible:ring-violet-500/20"
               />
             </div>
 
             <Button
               type="submit"
               disabled={loading}
-              className="mt-2 h-10 w-full bg-emerald-600 text-white hover:bg-emerald-500 disabled:opacity-50"
+              className="mt-2 h-10 w-full bg-violet-600 text-white hover:bg-violet-500 disabled:opacity-50"
             >
               {loading ? "Creating account..." : "Create account"}
             </Button>
@@ -186,7 +186,7 @@ export default function SignupPage() {
             Already have an account?{" "}
             <Link
               href="/login"
-              className="text-emerald-500 hover:text-emerald-400"
+              className="text-violet-500 hover:text-violet-400"
             >
               Sign in
             </Link>

src/app/(dashboard)/automations/[id]/edit/page.tsx

@@ -54,7 +54,7 @@ export default function EditAutomationPage({
         <p className="text-sm text-red-400">{error}</p>
         <button
           onClick={() => router.push("/automations")}
-          className="text-sm text-emerald-400 hover:text-emerald-300"
+          className="text-sm text-violet-400 hover:text-violet-300"
         >
           Back to Automations
         </button>
@@ -65,7 +65,7 @@ export default function EditAutomationPage({
   if (!initial) {
     return (
       <div className="flex h-screen items-center justify-center">
-        <Loader2 className="h-6 w-6 animate-spin text-emerald-500" />
+        <Loader2 className="h-6 w-6 animate-spin text-violet-500" />
       </div>
     )
   }

src/app/(dashboard)/automations/[id]/logs/page.tsx

@@ -76,7 +76,7 @@ export default function AutomationLogsPage({
   if (!automation || logs === null) {
     return (
       <div className="flex h-64 items-center justify-center">
-        <Loader2 className="h-6 w-6 animate-spin text-emerald-500" />
+        <Loader2 className="h-6 w-6 animate-spin text-violet-500" />
       </div>
     )
   }
@@ -167,7 +167,7 @@ export default function AutomationLogsPage({
 function StatusBadge({ status }: { status: AutomationLog["status"] }) {
   const classes =
     status === "success"
-      ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-300"
+      ? "border-violet-500/30 bg-violet-500/10 text-violet-300"
       : status === "partial"
       ? "border-amber-500/30 bg-amber-500/10 text-amber-300"
       : "border-red-500/30 bg-red-500/10 text-red-300"
@@ -190,7 +190,7 @@ function StepRow({ result }: { result: AutomationLogStepResult }) {
       <span
         className={cn(
           "mt-0.5 flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full",
-          ok ? "bg-emerald-500/20 text-emerald-400" : "bg-red-500/20 text-red-400",
+          ok ? "bg-violet-500/20 text-violet-400" : "bg-red-500/20 text-red-400",
         )}
         aria-hidden
       >

src/app/(dashboard)/automations/page.tsx

@@ -146,7 +146,7 @@ export default function AutomationsPage() {
   if (automations === null) {
     return (
       <div className="flex h-64 items-center justify-center">
-        <Loader2 className="h-6 w-6 animate-spin text-emerald-500" />
+        <Loader2 className="h-6 w-6 animate-spin text-violet-500" />
       </div>
     )
   }
@@ -164,7 +164,7 @@ export default function AutomationsPage() {
         </div>
         <Button
           onClick={() => router.push("/automations/new")}
-          className="bg-emerald-600 text-white hover:bg-emerald-700"
+          className="bg-violet-600 text-white hover:bg-violet-700"
         >
           <Plus className="h-4 w-4" />
           Create Automation
@@ -182,9 +182,9 @@ export default function AutomationsPage() {
                 <button
                   key={slug}
                   onClick={() => startFromTemplate(slug)}
-                  className="group flex flex-col items-start rounded-xl border border-slate-800 bg-slate-900 p-4 text-left transition-colors hover:border-emerald-500/50 hover:bg-slate-900/80"
+                  className="group flex flex-col items-start rounded-xl border border-slate-800 bg-slate-900 p-4 text-left transition-colors hover:border-violet-500/50 hover:bg-slate-900/80"
                 >
-                  <div className="mb-3 flex h-9 w-9 items-center justify-center rounded-lg bg-emerald-500/10 text-emerald-400 group-hover:bg-emerald-500/15">
+                  <div className="mb-3 flex h-9 w-9 items-center justify-center rounded-lg bg-violet-500/10 text-violet-400 group-hover:bg-violet-500/15">
                     <Icon className="h-5 w-5" />
                   </div>
                   <div className="text-sm font-semibold text-white">{t.name}</div>
@@ -198,8 +198,8 @@ export default function AutomationsPage() {
 
       {automations.length === 0 ? (
         <div className="flex h-48 flex-col items-center justify-center rounded-xl border border-dashed border-slate-800 bg-slate-900/40">
-          <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-500/10">
+          <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-violet-500/10">
-            <Zap className="h-6 w-6 text-emerald-500" />
+            <Zap className="h-6 w-6 text-violet-500" />
           </div>
           <p className="mt-3 text-sm font-medium text-white">No automations yet</p>
           <p className="mt-1 text-xs text-slate-400">
@@ -275,10 +275,10 @@ function AutomationCard({
     <li className="rounded-xl border border-slate-800 bg-slate-900 transition-colors hover:border-slate-700">
       <div className="flex items-center gap-4 p-4">
         <div
-          className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-emerald-500/10"
+          className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-violet-500/10"
           aria-hidden
         >
-          <Zap className="h-5 w-5 text-emerald-400" />
+          <Zap className="h-5 w-5 text-violet-400" />
         </div>
 
         <button
@@ -292,8 +292,8 @@ function AutomationCard({
             </span>
             {automation.is_active && (
               <span className="relative flex h-2 w-2" aria-label="active">
-                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
+                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-violet-400 opacity-75" />
-                <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500" />
+                <span className="relative inline-flex h-2 w-2 rounded-full bg-violet-500" />
               </span>
             )}
           </div>

src/app/(dashboard)/broadcasts/[id]/page.tsx

@@ -246,7 +246,7 @@ export default function BroadcastDetailPage() {
   if (loading) {
     return (
       <div className="flex h-64 items-center justify-center">
-        <Loader2 className="h-6 w-6 animate-spin text-emerald-500" />
+        <Loader2 className="h-6 w-6 animate-spin text-violet-500" />
       </div>
     );
   }
@@ -265,7 +265,7 @@ export default function BroadcastDetailPage() {
   const status = getBroadcastStatus(broadcast.status);
 
   const funnelSteps: FunnelStep[] = [
-    { label: 'Sent', value: broadcast.sent_count, color: 'bg-emerald-500' },
+    { label: 'Sent', value: broadcast.sent_count, color: 'bg-violet-500' },
     { label: 'Delivered', value: broadcast.delivered_count, color: 'bg-teal-500' },
     { label: 'Read', value: broadcast.read_count, color: 'bg-blue-500' },
     { label: 'Replied', value: broadcast.replied_count, color: 'bg-indigo-500' },
@@ -361,7 +361,7 @@ export default function BroadcastDetailPage() {
           value={broadcast.sent_count}
           total={broadcast.total_recipients}
           icon={<Send className="h-4 w-4" />}
-          color="bg-emerald-500/10 text-emerald-400"
+          color="bg-violet-500/10 text-violet-400"
         />
         <StatCard
           label="Delivered"
@@ -423,7 +423,7 @@ export default function BroadcastDetailPage() {
                 <DropdownMenuItem
                   onClick={() => setStatusFilter('all')}
                   className={
-                    statusFilter === 'all' ? 'text-emerald-400' : 'text-slate-300'
+                    statusFilter === 'all' ? 'text-violet-400' : 'text-slate-300'
                   }
                 >
                   All statuses
@@ -434,7 +434,7 @@ export default function BroadcastDetailPage() {
                     onClick={() => setStatusFilter(s)}
                     className={
                       statusFilter === s
-                        ? 'text-emerald-400'
+                        ? 'text-violet-400'
                         : 'text-slate-300'
                     }
                   >

src/app/(dashboard)/broadcasts/new/page.tsx

@@ -140,9 +140,9 @@ export default function NewBroadcastPage() {
                 <div
                   className={`flex h-8 w-8 items-center justify-center rounded-full text-xs font-medium transition-all ${
                     isCompleted
-                      ? 'bg-emerald-500 text-white'
+                      ? 'bg-violet-500 text-white'
                       : isActive
-                        ? 'border-2 border-emerald-500 bg-emerald-500/10 text-emerald-400'
+                        ? 'border-2 border-violet-500 bg-violet-500/10 text-violet-400'
                         : 'border border-slate-700 bg-slate-800 text-slate-500'
                   }`}
                 >
@@ -150,7 +150,7 @@ export default function NewBroadcastPage() {
                 </div>
                 <span
                   className={`hidden text-sm font-medium sm:block ${
-                    isActive ? 'text-white' : isCompleted ? 'text-emerald-400' : 'text-slate-500'
+                    isActive ? 'text-white' : isCompleted ? 'text-violet-400' : 'text-slate-500'
                   }`}
                 >
                   {step.label}
@@ -159,7 +159,7 @@ export default function NewBroadcastPage() {
               {index < steps.length - 1 && (
                 <div
                   className={`mx-3 h-px flex-1 ${
-                    index < currentStep ? 'bg-emerald-500' : 'bg-slate-800'
+                    index < currentStep ? 'bg-violet-500' : 'bg-slate-800'
                   }`}
                 />
               )}

src/app/(dashboard)/broadcasts/page.tsx

@@ -35,7 +35,7 @@ function RateCell({
 }: {
   value: number;
   total: number;
-  /** Tailwind bg class for the fill, e.g. "bg-emerald-500" */
+  /** Tailwind bg class for the fill, e.g. "bg-violet-500" */
   color: string;
 }) {
   const pct = percent(value, total);
@@ -128,7 +128,7 @@ export default function BroadcastsPage() {
   if (loading) {
     return (
       <div className="flex h-64 items-center justify-center">
-        <Loader2 className="h-6 w-6 animate-spin text-emerald-500" />
+        <Loader2 className="h-6 w-6 animate-spin text-violet-500" />
       </div>
     );
   }
@@ -154,7 +154,7 @@ export default function BroadcastsPage() {
           aria-label="Broadcast in progress"
           className="broadcast-indeterminate fixed inset-x-0 top-0 z-40 h-0.5 overflow-hidden bg-slate-800"
         >
-          <div className="broadcast-indeterminate-bar h-0.5 bg-emerald-500" />
+          <div className="broadcast-indeterminate-bar h-0.5 bg-violet-500" />
           <style jsx>{`
             .broadcast-indeterminate-bar {
               width: 33%;
@@ -183,7 +183,7 @@ export default function BroadcastsPage() {
         </div>
         <Button
           onClick={() => router.push('/broadcasts/new')}
-          className="bg-emerald-600 text-white hover:bg-emerald-700"
+          className="bg-violet-600 text-white hover:bg-violet-700"
         >
           <Plus className="h-4 w-4" />
           New Broadcast
@@ -199,7 +199,7 @@ export default function BroadcastsPage() {
           </p>
           <Button
             onClick={() => router.push('/broadcasts/new')}
-            className="mt-4 bg-emerald-600 text-white hover:bg-emerald-700"
+            className="mt-4 bg-violet-600 text-white hover:bg-violet-700"
           >
             <Plus className="h-4 w-4" />
             New Broadcast
@@ -243,7 +243,7 @@ export default function BroadcastsPage() {
                       <RateCell
                         value={broadcast.delivered_count}
                         total={broadcast.total_recipients}
-                        color="bg-emerald-500"
+                        color="bg-violet-500"
                       />
                     </TableCell>
                     <TableCell className="hidden lg:table-cell">

src/app/(dashboard)/contacts/page.tsx

@@ -226,7 +226,7 @@ export default function ContactsPage() {
           </Button>
           <Button
             onClick={openAddForm}
-            className="bg-emerald-600 hover:bg-emerald-700 text-white"
+            className="bg-violet-600 hover:bg-violet-700 text-white"
           >
             <Plus className="size-4" />
             Add Contact
@@ -269,7 +269,7 @@ export default function ContactsPage() {
               <TableRow className="border-slate-800">
                 <TableCell colSpan={7} className="text-center py-12">
                   <div className="flex flex-col items-center gap-2">
-                    <Loader2 className="size-6 animate-spin text-emerald-500" />
+                    <Loader2 className="size-6 animate-spin text-violet-500" />
                     <p className="text-sm text-slate-500">Loading contacts...</p>
                   </div>
                 </TableCell>

src/app/(dashboard)/dashboard-shell.tsx

@@ -29,7 +29,7 @@ function DashboardShellInner({ children }: { children: React.ReactNode }) {
     return (
       <div className="flex h-screen items-center justify-center bg-slate-950">
         <div className="flex flex-col items-center gap-3">
-          <div className="h-8 w-8 animate-spin rounded-full border-2 border-emerald-500 border-t-transparent" />
+          <div className="h-8 w-8 animate-spin rounded-full border-2 border-violet-500 border-t-transparent" />
           <p className="text-sm text-slate-400">Loading...</p>
         </div>
       </div>

src/app/(dashboard)/pipelines/page.tsx

@@ -302,7 +302,7 @@ export default function PipelinesPage() {
             <DropdownMenuTrigger
               className="inline-flex items-center gap-2 rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-white hover:bg-slate-800 transition-colors data-[popup-open]:bg-slate-800"
             >
-              <GitBranch className="h-4 w-4 text-emerald-500" />
+              <GitBranch className="h-4 w-4 text-violet-500" />
               <span className="font-semibold">
                 {selectedPipeline?.name ?? "Select Pipeline"}
               </span>
@@ -323,7 +323,7 @@ export default function PipelinesPage() {
                   onClick={() => setSelectedPipelineId(p.id)}
                   className={
                     p.id === selectedPipelineId
-                      ? "text-emerald-400"
+                      ? "text-violet-400"
                       : "text-slate-300"
                   }
                 >
@@ -357,7 +357,7 @@ export default function PipelinesPage() {
           <Button
             onClick={() => handleAddDeal()}
             disabled={!selectedPipelineId || stages.length === 0}
-            className="bg-emerald-600 text-white hover:bg-emerald-700"
+            className="bg-violet-600 text-white hover:bg-violet-700"
           >
             <Plus className="mr-1 h-4 w-4" />
             Add Deal
@@ -377,7 +377,7 @@ export default function PipelinesPage() {
           </p>
           <Button
             onClick={() => setNewPipelineOpen(true)}
-            className="mt-4 bg-emerald-600 text-white hover:bg-emerald-700"
+            className="mt-4 bg-violet-600 text-white hover:bg-violet-700"
           >
             <Plus className="mr-1 h-4 w-4" />
             Create Pipeline
@@ -428,7 +428,7 @@ export default function PipelinesPage() {
             <Button
               onClick={handleCreatePipeline}
               disabled={creating || !newPipelineName.trim()}
-              className="bg-emerald-600 text-white hover:bg-emerald-700"
+              className="bg-violet-600 text-white hover:bg-violet-700"
             >
               {creating ? "Creating..." : "Create Pipeline"}
             </Button>

src/app/(dashboard)/settings/page.tsx

@@ -48,28 +48,28 @@ export default function SettingsPage() {
         <TabsList className="bg-slate-900 border border-slate-700">
           <TabsTrigger
             value="profile"
-            className="data-active:bg-slate-800 data-active:text-emerald-400 text-slate-400"
+            className="data-active:bg-slate-800 data-active:text-violet-400 text-slate-400"
           >
             <User className="size-4" />
             Profile
           </TabsTrigger>
           <TabsTrigger
             value="whatsapp"
-            className="data-active:bg-slate-800 data-active:text-emerald-400 text-slate-400"
+            className="data-active:bg-slate-800 data-active:text-violet-400 text-slate-400"
           >
             <Settings className="size-4" />
             WhatsApp Config
           </TabsTrigger>
           <TabsTrigger
             value="templates"
-            className="data-active:bg-slate-800 data-active:text-emerald-400 text-slate-400"
+            className="data-active:bg-slate-800 data-active:text-violet-400 text-slate-400"
           >
             <MessageSquare className="size-4" />
             Templates
           </TabsTrigger>
           <TabsTrigger
             value="tags"
-            className="data-active:bg-slate-800 data-active:text-emerald-400 text-slate-400"
+            className="data-active:bg-slate-800 data-active:text-violet-400 text-slate-400"
           >
             <Tag className="size-4" />
             Tags

src/app/docs/[slug]/page.tsx

@@ -37,7 +37,7 @@ export default async function DocPage({ params }: DocPageProps) {
 
   return (
     <article className="mx-auto w-full max-w-3xl">
-      <p className="text-xs font-semibold uppercase tracking-wider text-emerald-400">
+      <p className="text-xs font-semibold uppercase tracking-wider text-violet-400">
         {doc.section}
       </p>
       <div

src/app/docs/page.tsx

@@ -12,7 +12,7 @@ export default async function DocsIndexPage() {
 
   return (
     <article className="mx-auto w-full max-w-3xl">
-      <p className="text-xs font-semibold uppercase tracking-wider text-emerald-400">
+      <p className="text-xs font-semibold uppercase tracking-wider text-violet-400">
         Documentation
       </p>
       <h1 className="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl">
@@ -45,7 +45,7 @@ export default async function DocsIndexPage() {
                       {p.description}
                     </p>
                   )}
-                  <span className="mt-4 inline-flex items-center gap-1.5 text-xs font-medium text-emerald-400 transition-colors group-hover:text-emerald-300">
+                  <span className="mt-4 inline-flex items-center gap-1.5 text-xs font-medium text-violet-400 transition-colors group-hover:text-violet-300">
                     Read
                     <ArrowRight className="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
                   </span>

src/app/globals.css

@@ -55,7 +55,7 @@
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.18 0.01 260);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.696 0.17 162);
+  --primary: oklch(0.526 0.247 293);
   --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.22 0.01 260);
   --secondary-foreground: oklch(0.985 0 0);
@@ -66,8 +66,8 @@
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.28 0.01 260);
   --input: oklch(0.28 0.01 260);
-  --ring: oklch(0.696 0.17 162);
+  --ring: oklch(0.526 0.247 293);
-  --chart-1: oklch(0.696 0.17 162);
+  --chart-1: oklch(0.526 0.247 293);
   --chart-2: oklch(0.556 0 0);
   --chart-3: oklch(0.439 0 0);
   --chart-4: oklch(0.371 0 0);
@@ -75,12 +75,12 @@
   --radius: 0.625rem;
   --sidebar: oklch(0.16 0.01 260);
   --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.696 0.17 162);
+  --sidebar-primary: oklch(0.526 0.247 293);
   --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.22 0.01 260);
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(0.28 0.01 260);
-  --sidebar-ring: oklch(0.696 0.17 162);
+  --sidebar-ring: oklch(0.526 0.247 293);
 }
 
 @layer base {

src/app/icon.tsx

@@ -1,9 +1,9 @@
 import { ImageResponse } from "next/og";
 
-// Replaces the default Next.js favicon with the WaCRM mark — emerald
+// Replaces the default Next.js favicon with the brand mark — Hostinger
-// rounded square + white chat-bubble glyph — matching the sidebar
+// violet rounded square + white chat-square glyph — matching the
-// logo in `src/components/layout/sidebar.tsx`. Next.js renders this
+// sidebar logo in `src/components/layout/sidebar.tsx`. Next.js renders
-// at build time and auto-injects <link rel="icon"> into <head>.
+// this at build time and auto-injects <link rel="icon"> into <head>.
 //
 // This route takes precedence over src/app/favicon.ico, which is the
 // Next.js default and can stay on disk harmlessly (or be removed).
@@ -22,7 +22,7 @@ export default function Icon() {
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          background: "#10b981", // emerald-500
+          background: "#7c3aed", // violet-600 (Hostinger-aligned purple)
           borderRadius: 6,
         }}
       >

src/app/opengraph-image.tsx

@@ -38,7 +38,7 @@ export default async function Image() {
           justifyContent: 'center',
           padding: 80,
           background:
-            'linear-gradient(135deg, #020617 0%, #0f172a 55%, #064e3b 100%)',
+            'linear-gradient(135deg, #020617 0%, #0f172a 55%, #2e1065 100%)',
           color: 'white',
           fontFamily: 'sans-serif',
         }}
@@ -49,7 +49,7 @@ export default async function Image() {
               width: 64,
               height: 64,
               borderRadius: 14,
-              background: '#10b981',
+              background: '#7c3aed',
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
@@ -78,7 +78,7 @@ export default async function Image() {
           }}
         >
           <span>Run your WhatsApp business from&nbsp;</span>
-          <span style={{ color: '#34d399' }}>one inbox.</span>
+          <span style={{ color: '#a78bfa' }}>one inbox.</span>
         </div>
 
         <div

src/components/automations/automation-builder.tsx

@@ -77,17 +77,17 @@ interface StepMeta {
 }
 
 const STEP_META: Record<AutomationStepType, StepMeta> = {
-  send_message: { label: "Send Message", icon: MessageSquare, border: "border-l-emerald-500" },
+  send_message: { label: "Send Message", icon: MessageSquare, border: "border-l-violet-500" },
-  send_template: { label: "Send Template", icon: FileText, border: "border-l-emerald-500" },
+  send_template: { label: "Send Template", icon: FileText, border: "border-l-violet-500" },
-  add_tag: { label: "Add Tag", icon: Tag, border: "border-l-emerald-500" },
+  add_tag: { label: "Add Tag", icon: Tag, border: "border-l-violet-500" },
-  remove_tag: { label: "Remove Tag", icon: TagIcon, border: "border-l-emerald-500" },
+  remove_tag: { label: "Remove Tag", icon: TagIcon, border: "border-l-violet-500" },
-  assign_conversation: { label: "Assign Conversation", icon: UserCheck, border: "border-l-emerald-500" },
+  assign_conversation: { label: "Assign Conversation", icon: UserCheck, border: "border-l-violet-500" },
-  update_contact_field: { label: "Update Contact Field", icon: PencilLine, border: "border-l-emerald-500" },
+  update_contact_field: { label: "Update Contact Field", icon: PencilLine, border: "border-l-violet-500" },
-  create_deal: { label: "Create Deal", icon: Briefcase, border: "border-l-emerald-500" },
+  create_deal: { label: "Create Deal", icon: Briefcase, border: "border-l-violet-500" },
   wait: { label: "Wait", icon: Hourglass, border: "border-l-slate-500" },
   condition: { label: "Condition (If/Else)", icon: GitBranch, border: "border-l-amber-500" },
-  send_webhook: { label: "Send Webhook", icon: Webhook, border: "border-l-emerald-500" },
+  send_webhook: { label: "Send Webhook", icon: Webhook, border: "border-l-violet-500" },
-  close_conversation: { label: "Close Conversation", icon: CircleSlash, border: "border-l-emerald-500" },
+  close_conversation: { label: "Close Conversation", icon: CircleSlash, border: "border-l-violet-500" },
 }
 
 const ADDABLE_STEPS: AutomationStepType[] = [
@@ -275,7 +275,7 @@ export function AutomationBuilder({ initial }: { initial: BuilderInitial }) {
         <Button
           onClick={save}
           disabled={saving}
-          className="bg-emerald-600 text-white hover:bg-emerald-700"
+          className="bg-violet-600 text-white hover:bg-violet-700"
         >
           {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
           {isEditing ? "Save" : "Save Draft"}
@@ -356,7 +356,7 @@ function TriggerCard({
               <select
                 value={type}
                 onChange={(e) => onTypeChange(e.target.value as AutomationTriggerType)}
-                className="w-full rounded-md border border-slate-700 bg-slate-800 px-2 py-1.5 text-sm text-white focus:border-emerald-500 focus:outline-none"
+                className="w-full rounded-md border border-slate-700 bg-slate-800 px-2 py-1.5 text-sm text-white focus:border-violet-500 focus:outline-none"
               >
                 {TRIGGER_OPTIONS.map((o) => (
                   <option key={o.value} value={o.value}>
@@ -637,7 +637,7 @@ function ConditionBranches({
     // cram each branch to ~170px which is too narrow for the nested
     // cards. Two-column grid returns on sm+.
     <div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
-      <BranchColumn label="Yes" color="text-emerald-400">
+      <BranchColumn label="Yes" color="text-violet-400">
         <StepList {...props} steps={yes} parentPath={yesPath} />
       </BranchColumn>
       <BranchColumn label="No" color="text-rose-400">
@@ -670,7 +670,7 @@ function AddButton({ onPick }: { onPick: (t: AutomationStepType) => void }) {
       <div className="h-4 w-[2px] bg-slate-700" aria-hidden />
       <DropdownMenu>
         <DropdownMenuTrigger
-          className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-dashed border-slate-700 bg-slate-950 text-slate-400 transition-colors hover:border-emerald-500 hover:bg-emerald-500/10 hover:text-emerald-400 data-[popup-open]:border-emerald-500 data-[popup-open]:bg-emerald-500/20 data-[popup-open]:text-emerald-400"
+          className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-dashed border-slate-700 bg-slate-950 text-slate-400 transition-colors hover:border-violet-500 hover:bg-violet-500/10 hover:text-violet-400 data-[popup-open]:border-violet-500 data-[popup-open]:bg-violet-500/20 data-[popup-open]:text-violet-400"
           aria-label="Add step"
         >
           <Plus className="h-4 w-4" />

src/components/broadcasts/step1-choose-template.tsx

@@ -48,7 +48,7 @@ export function Step1ChooseTemplate({ selectedTemplate, onSelect, onNext, onBack
   if (loading) {
     return (
       <div className="flex h-64 items-center justify-center">
-        <Loader2 className="h-6 w-6 animate-spin text-emerald-500" />
+        <Loader2 className="h-6 w-6 animate-spin text-violet-500" />
       </div>
     );
   }
@@ -88,7 +88,7 @@ export function Step1ChooseTemplate({ selectedTemplate, onSelect, onNext, onBack
                 onClick={() => onSelect(template)}
                 className={`flex flex-col gap-3 rounded-xl border p-4 text-left transition-all ${
                   isSelected
-                    ? 'border-emerald-500 bg-emerald-500/5 ring-1 ring-emerald-500/30'
+                    ? 'border-violet-500 bg-violet-500/5 ring-1 ring-violet-500/30'
                     : 'border-slate-800 bg-slate-900/50 hover:border-slate-700 hover:bg-slate-900'
                 }`}
               >
@@ -123,7 +123,7 @@ export function Step1ChooseTemplate({ selectedTemplate, onSelect, onNext, onBack
         <Button
           onClick={onNext}
           disabled={!selectedTemplate}
-          className="bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-50"
+          className="bg-violet-600 text-white hover:bg-violet-700 disabled:opacity-50"
         >
           Next
           <ArrowRight className="h-4 w-4" />

src/components/broadcasts/step2-select-audience.tsx

@@ -279,14 +279,14 @@ export function Step2SelectAudience({
               }
               className={`flex items-start gap-3 rounded-xl border p-4 text-left transition-all ${
                 isSelected
-                  ? 'border-emerald-500 bg-emerald-500/5 ring-1 ring-emerald-500/30'
+                  ? 'border-violet-500 bg-violet-500/5 ring-1 ring-violet-500/30'
                   : 'border-slate-800 bg-slate-900/50 hover:border-slate-700'
               }`}
             >
               <div
                 className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${
                   isSelected
-                    ? 'bg-emerald-500/10 text-emerald-400'
+                    ? 'bg-violet-500/10 text-violet-400'
                     : 'bg-slate-800 text-slate-400'
                 }`}
               >
@@ -307,7 +307,7 @@ export function Step2SelectAudience({
         <div className="rounded-xl border border-slate-800 bg-slate-900/50 p-4">
           <p className="mb-3 text-sm font-medium text-white">Select Tags</p>
           {loadingTags ? (
-            <Loader2 className="h-5 w-5 animate-spin text-emerald-500" />
+            <Loader2 className="h-5 w-5 animate-spin text-violet-500" />
           ) : tags.length === 0 ? (
             <p className="text-xs text-slate-400">
               No tags found. Create tags in Settings.
@@ -322,7 +322,7 @@ export function Step2SelectAudience({
                     onClick={() => toggleTag(tag.id)}
                     className={`inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium transition-all ${
                       isSelected
-                        ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400'
+                        ? 'border-violet-500/30 bg-violet-500/10 text-violet-400'
                         : 'border-slate-700 bg-slate-800 text-slate-300 hover:border-slate-600'
                     }`}
                   >
@@ -343,7 +343,7 @@ export function Step2SelectAudience({
         <div className="space-y-3 rounded-xl border border-slate-800 bg-slate-900/50 p-4">
           <p className="text-sm font-medium text-white">Custom Field Filter</p>
           {loadingFields ? (
-            <Loader2 className="h-5 w-5 animate-spin text-emerald-500" />
+            <Loader2 className="h-5 w-5 animate-spin text-violet-500" />
           ) : customFields.length === 0 ? (
             <p className="text-xs text-slate-400">
               No custom fields defined. Create one in Settings → Custom Fields.
@@ -353,7 +353,7 @@ export function Step2SelectAudience({
               <select
                 value={audience.customField?.fieldId ?? ''}
                 onChange={(e) => updateCustomField({ fieldId: e.target.value })}
-                className="h-9 rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
+                className="h-9 rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500"
               >
                 <option value="">Select field…</option>
                 {customFields.map((f) => (
@@ -369,7 +369,7 @@ export function Step2SelectAudience({
                     operator: e.target.value as CustomFieldOperator,
                   })
                 }
-                className="h-9 rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
+                className="h-9 rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500"
               >
                 {OPERATOR_OPTIONS.map((op) => (
                   <option key={op.value} value={op.value}>
@@ -382,7 +382,7 @@ export function Step2SelectAudience({
                 value={audience.customField?.value ?? ''}
                 onChange={(e) => updateCustomField({ value: e.target.value })}
                 placeholder="Value"
-                className="h-9 rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none placeholder:text-slate-500 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
+                className="h-9 rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none placeholder:text-slate-500 focus:border-violet-500 focus:ring-1 focus:ring-violet-500"
               />
             </div>
           )}
@@ -431,12 +431,12 @@ export function Step2SelectAudience({
         <p className="mb-2 text-sm font-medium text-white">Audience Summary</p>
         {loadingCount ? (
           <div className="flex items-center gap-2">
-            <Loader2 className="h-4 w-4 animate-spin text-emerald-500" />
+            <Loader2 className="h-4 w-4 animate-spin text-violet-500" />
             <span className="text-xs text-slate-400">Calculating…</span>
           </div>
         ) : estimatedCount !== null ? (
           <div className="flex items-center gap-2">
-            <Users className="h-4 w-4 text-emerald-400" />
+            <Users className="h-4 w-4 text-violet-400" />
             <span className="text-sm text-white">
               {estimatedCount.toLocaleString()}
             </span>
@@ -461,7 +461,7 @@ export function Step2SelectAudience({
         <Button
           onClick={onNext}
           disabled={!isValid}
-          className="bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-50"
+          className="bg-violet-600 text-white hover:bg-violet-700 disabled:opacity-50"
         >
           Next
           <ArrowRight className="h-4 w-4" />

src/components/broadcasts/step3-personalize.tsx

@@ -211,7 +211,7 @@ export function Step3Personalize({
                 className="rounded-xl border border-slate-800 bg-slate-900/50 p-4"
               >
                 <div className="mb-3 flex items-center gap-2">
-                  <span className="inline-flex items-center rounded-md bg-emerald-500/10 px-2 py-0.5 text-xs font-mono font-medium text-emerald-400">
+                  <span className="inline-flex items-center rounded-md bg-violet-500/10 px-2 py-0.5 text-xs font-mono font-medium text-violet-400">
                     {placeholder}
                   </span>
                 </div>
@@ -313,16 +313,16 @@ export function Step3Personalize({
           sees approximately what the recipient will see. */}
       <div className="rounded-xl border border-slate-800 bg-slate-900/50 p-4">
         <div className="mb-3 flex items-center gap-2">
-          <Eye className="h-4 w-4 text-emerald-400" />
+          <Eye className="h-4 w-4 text-violet-400" />
           <p className="text-sm font-medium text-white">Live Preview</p>
           <span className="text-xs text-slate-500">({previewLabel})</span>
           {loadingPreview && (
-            <Loader2 className="h-3.5 w-3.5 animate-spin text-emerald-500" />
+            <Loader2 className="h-3.5 w-3.5 animate-spin text-violet-500" />
           )}
         </div>
         <div className="rounded-lg bg-[#0e1a12] p-3">
-          <div className="ml-auto max-w-[85%] rounded-lg bg-emerald-700/30 px-3 py-2 shadow-sm">
+          <div className="ml-auto max-w-[85%] rounded-lg bg-violet-700/30 px-3 py-2 shadow-sm">
-            <p className="whitespace-pre-wrap text-sm text-emerald-50">
+            <p className="whitespace-pre-wrap text-sm text-violet-50">
               {previewText}
             </p>
           </div>
@@ -351,7 +351,7 @@ export function Step3Personalize({
         <Button
           onClick={onNext}
           disabled={unmappedKeys.length > 0}
-          className="bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-50"
+          className="bg-violet-600 text-white hover:bg-violet-700 disabled:opacity-50"
         >
           Next
           <ArrowRight className="h-4 w-4" />

src/components/broadcasts/step4-schedule-send.tsx

@@ -127,10 +127,10 @@ export function Step4ScheduleSend({
             <p className="text-xs text-slate-400">Estimated Reach</p>
             <div className="flex items-center gap-1.5">
               {loadingReach ? (
-                <Loader2 className="h-3 w-3 animate-spin text-emerald-500" />
+                <Loader2 className="h-3 w-3 animate-spin text-violet-500" />
               ) : (
                 <>
-                  <Users className="h-3.5 w-3.5 text-emerald-400" />
+                  <Users className="h-3.5 w-3.5 text-violet-400" />
                   <p className="font-medium text-white">{estimatedReach.toLocaleString()}</p>
                 </>
               )}
@@ -151,11 +151,11 @@ export function Step4ScheduleSend({
             onClick={() => setTiming('now')}
             className={`flex items-start gap-3 rounded-xl border p-4 text-left transition-all ${
               timing === 'now'
-                ? 'border-emerald-500 bg-emerald-500/5 ring-1 ring-emerald-500/30'
+                ? 'border-violet-500 bg-violet-500/5 ring-1 ring-violet-500/30'
                 : 'border-slate-800 bg-slate-900/50 hover:border-slate-700'
             }`}
           >
-            <Send className={`mt-0.5 h-4 w-4 ${timing === 'now' ? 'text-emerald-400' : 'text-slate-400'}`} />
+            <Send className={`mt-0.5 h-4 w-4 ${timing === 'now' ? 'text-violet-400' : 'text-slate-400'}`} />
             <div>
               <p className="text-sm font-medium text-white">Send Immediately</p>
               <p className="mt-0.5 text-xs text-slate-400">Start sending right away</p>
@@ -180,17 +180,17 @@ export function Step4ScheduleSend({
 
       {/* Processing overlay */}
       {isProcessing && (
-        <div className="rounded-xl border border-emerald-500/20 bg-emerald-500/5 p-4">
+        <div className="rounded-xl border border-violet-500/20 bg-violet-500/5 p-4">
           <div className="mb-2 flex items-center justify-between">
             <div className="flex items-center gap-2">
-              <Loader2 className="h-4 w-4 animate-spin text-emerald-500" />
+              <Loader2 className="h-4 w-4 animate-spin text-violet-500" />
               <p className="text-sm font-medium text-white">Sending broadcast...</p>
             </div>
-            <span className="text-xs font-medium text-emerald-400">{progress}%</span>
+            <span className="text-xs font-medium text-violet-400">{progress}%</span>
           </div>
           <div className="h-1.5 w-full rounded-full bg-slate-800">
             <div
-              className="h-1.5 rounded-full bg-emerald-500 transition-all duration-300"
+              className="h-1.5 rounded-full bg-violet-500 transition-all duration-300"
               style={{ width: `${progress}%` }}
             />
           </div>
@@ -226,7 +226,7 @@ export function Step4ScheduleSend({
             render={
               <Button
                 disabled={!name.trim() || isProcessing}
-                className="bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-50"
+                className="bg-violet-600 text-white hover:bg-violet-700 disabled:opacity-50"
               />
             }
           >
@@ -257,7 +257,7 @@ export function Step4ScheduleSend({
                   setShowConfirm(false);
                   onSend();
                 }}
-                className="bg-emerald-600 text-white hover:bg-emerald-700"
+                className="bg-violet-600 text-white hover:bg-violet-700"
               >
                 <Send className="h-4 w-4" />
                 Confirm & Send

src/components/contacts/contact-detail-view.tsx

@@ -331,7 +331,7 @@ export function ContactDetailView({
       >
         {loading || !contact ? (
           <div className="flex items-center justify-center h-full">
-            <Loader2 className="size-6 animate-spin text-emerald-500" />
+            <Loader2 className="size-6 animate-spin text-violet-500" />
           </div>
         ) : (
           <div className="flex flex-col h-full">
@@ -339,7 +339,7 @@ export function ContactDetailView({
             <SheetHeader className="p-4 border-b border-slate-700/50">
               <div className="flex items-center gap-3">
                 <Avatar className="size-12 bg-slate-800 border border-slate-700">
-                  <AvatarFallback className="bg-emerald-500/10 text-emerald-400 text-sm font-medium">
+                  <AvatarFallback className="bg-violet-500/10 text-violet-400 text-sm font-medium">
                     {getInitials(contact.name)}
                   </AvatarFallback>
                 </Avatar>
@@ -353,12 +353,12 @@ export function ContactDetailView({
                   <div className="flex flex-wrap items-center gap-3 mt-1.5 text-xs text-slate-400">
                     <button
                       onClick={copyPhone}
-                      className="flex items-center gap-1 hover:text-emerald-400 transition-colors cursor-pointer"
+                      className="flex items-center gap-1 hover:text-violet-400 transition-colors cursor-pointer"
                     >
                       <Phone className="size-3" />
                       {contact.phone}
                       {copiedPhone ? (
-                        <Check className="size-3 text-emerald-400" />
+                        <Check className="size-3 text-violet-400" />
                       ) : (
                         <Copy className="size-3" />
                       )}
@@ -385,31 +385,31 @@ export function ContactDetailView({
               <TabsList className="bg-slate-800/50 border-b border-slate-700 mx-4 mt-3">
                 <TabsTrigger
                   value="details"
-                  className="data-active:bg-slate-800 data-active:text-emerald-400 text-slate-400"
+                  className="data-active:bg-slate-800 data-active:text-violet-400 text-slate-400"
                 >
                   Details
                 </TabsTrigger>
                 <TabsTrigger
                   value="tags"
-                  className="data-active:bg-slate-800 data-active:text-emerald-400 text-slate-400"
+                  className="data-active:bg-slate-800 data-active:text-violet-400 text-slate-400"
                 >
                   Tags
                 </TabsTrigger>
                 <TabsTrigger
                   value="notes"
-                  className="data-active:bg-slate-800 data-active:text-emerald-400 text-slate-400"
+                  className="data-active:bg-slate-800 data-active:text-violet-400 text-slate-400"
                 >
                   Notes
                 </TabsTrigger>
                 <TabsTrigger
                   value="custom"
-                  className="data-active:bg-slate-800 data-active:text-emerald-400 text-slate-400"
+                  className="data-active:bg-slate-800 data-active:text-violet-400 text-slate-400"
                 >
                   Custom Fields
                 </TabsTrigger>
                 <TabsTrigger
                   value="deals"
-                  className="data-active:bg-slate-800 data-active:text-emerald-400 text-slate-400"
+                  className="data-active:bg-slate-800 data-active:text-violet-400 text-slate-400"
                 >
                   Deals
                 </TabsTrigger>
@@ -455,7 +455,7 @@ export function ContactDetailView({
                   <Button
                     onClick={saveDetails}
                     disabled={savingDetails}
-                    className="bg-emerald-600 hover:bg-emerald-700 text-white w-full"
+                    className="bg-violet-600 hover:bg-violet-700 text-white w-full"
                     size="sm"
                   >
                     {savingDetails ? (
@@ -489,7 +489,7 @@ export function ContactDetailView({
                             disabled={savingTags}
                             className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-medium transition-all cursor-pointer ${
                               selected
-                                ? 'ring-2 ring-emerald-500 ring-offset-1 ring-offset-slate-900'
+                                ? 'ring-2 ring-violet-500 ring-offset-1 ring-offset-slate-900'
                                 : 'opacity-50 hover:opacity-80'
                             }`}
                             style={{
@@ -519,7 +519,7 @@ export function ContactDetailView({
                   <Button
                     onClick={addNote}
                     disabled={!newNote.trim() || savingNote}
-                    className="bg-emerald-600 hover:bg-emerald-700 text-white"
+                    className="bg-violet-600 hover:bg-violet-700 text-white"
                     size="sm"
                   >
                     {savingNote ? (
@@ -605,7 +605,7 @@ export function ContactDetailView({
                     <Button
                       onClick={saveCustomFields}
                       disabled={savingCustom}
-                      className="bg-emerald-600 hover:bg-emerald-700 text-white w-full"
+                      className="bg-violet-600 hover:bg-violet-700 text-white w-full"
                       size="sm"
                     >
                       {savingCustom ? (
@@ -623,7 +623,7 @@ export function ContactDetailView({
               <TabsContent value="deals" className="flex-1 overflow-y-auto px-4 py-3">
                 {loadingDeals ? (
                   <div className="flex items-center justify-center py-8">
-                    <Loader2 className="size-5 animate-spin text-emerald-500" />
+                    <Loader2 className="size-5 animate-spin text-violet-500" />
                   </div>
                 ) : deals.length === 0 ? (
                   <p className="text-xs text-slate-500">No deals yet</p>
@@ -663,7 +663,7 @@ export function ContactDetailView({
                             <span
                               className={
                                 deal.status === 'won'
-                                  ? 'text-emerald-400'
+                                  ? 'text-violet-400'
                                   : 'text-red-400'
                               }
                             >

src/components/contacts/contact-form.tsx

@@ -245,7 +245,7 @@ export function ContactForm({
                       onClick={() => toggleTag(tag.id)}
                       className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors cursor-pointer ${
                         selected
-                          ? 'ring-2 ring-emerald-500 ring-offset-1 ring-offset-slate-900'
+                          ? 'ring-2 ring-violet-500 ring-offset-1 ring-offset-slate-900'
                           : 'opacity-60 hover:opacity-100'
                       }`}
                       style={{
@@ -274,7 +274,7 @@ export function ContactForm({
             <Button
               type="submit"
               disabled={saving}
-              className="bg-emerald-600 hover:bg-emerald-700 text-white"
+              className="bg-violet-600 hover:bg-violet-700 text-white"
             >
               {saving && <Loader2 className="size-4 animate-spin" />}
               {isEdit ? 'Update' : 'Create'}

src/components/contacts/import-modal.tsx

@@ -196,11 +196,11 @@ export function ImportModal({ open, onOpenChange, onImported }: ImportModalProps
           {/* Upload area */}
           <div
             onClick={() => fileInputRef.current?.click()}
-            className="flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-slate-700 p-6 cursor-pointer hover:border-emerald-500/50 transition-colors"
+            className="flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-slate-700 p-6 cursor-pointer hover:border-violet-500/50 transition-colors"
           >
             {file ? (
               <>
-                <FileText className="size-8 text-emerald-400" />
+                <FileText className="size-8 text-violet-400" />
                 <p className="text-sm text-slate-300">{file.name}</p>
                 <p className="text-xs text-slate-500">
                   {parsedRows.length} row{parsedRows.length !== 1 ? 's' : ''} detected
@@ -269,7 +269,7 @@ export function ImportModal({ open, onOpenChange, onImported }: ImportModalProps
               <p className="text-sm font-medium text-white">Import Complete</p>
               <div className="flex items-center gap-4">
                 {result.imported > 0 && (
-                  <div className="flex items-center gap-1.5 text-emerald-400 text-sm">
+                  <div className="flex items-center gap-1.5 text-violet-400 text-sm">
                     <CheckCircle className="size-4" />
                     {result.imported} imported
                   </div>
@@ -299,7 +299,7 @@ export function ImportModal({ open, onOpenChange, onImported }: ImportModalProps
               type="button"
               disabled={parsedRows.length === 0 || importing}
               onClick={handleImport}
-              className="bg-emerald-600 hover:bg-emerald-700 text-white"
+              className="bg-violet-600 hover:bg-violet-700 text-white"
             >
               {importing && <Loader2 className="size-4 animate-spin" />}
               Import {parsedRows.length > 0 ? `${parsedRows.length} Contacts` : ''}

src/components/dashboard/activity-feed.tsx

@@ -32,7 +32,7 @@ interface KindTheme {
 
 const KIND_THEME: Record<ActivityKind, KindTheme> = {
   message: { icon: MessageSquare, badge: 'bg-blue-500/10 text-blue-400' },
-  contact: { icon: UserPlus, badge: 'bg-emerald-500/10 text-emerald-400' },
+  contact: { icon: UserPlus, badge: 'bg-violet-500/10 text-violet-400' },
   deal: { icon: Briefcase, badge: 'bg-violet-500/10 text-violet-400' },
   broadcast: { icon: Radio, badge: 'bg-amber-500/10 text-amber-400' },
   automation: { icon: Zap, badge: 'bg-rose-500/10 text-rose-400' },
@@ -59,7 +59,7 @@ export function ActivityFeed({ items, loading }: ActivityFeedProps) {
         <h2 className="text-sm font-semibold text-white">Recent Activity</h2>
         <Link
           href="/inbox"
-          className="text-xs font-medium text-emerald-400 hover:text-emerald-300"
+          className="text-xs font-medium text-violet-400 hover:text-violet-300"
         >
           View all →
         </Link>

src/components/dashboard/conversations-chart.tsx

@@ -87,7 +87,7 @@ export function ConversationsChart({ series, loading, range, onRangeChange }: Co
 
       <footer className="flex items-center gap-4 border-t border-slate-800 px-5 py-3 text-xs text-slate-400">
         <LegendDot color="#3b82f6" label="Incoming" />
-        <LegendDot color="#10b981" label="Outgoing" />
+        <LegendDot color="#7c3aed" label="Outgoing" />
       </footer>
     </section>
   )
@@ -238,11 +238,11 @@ function LineSvg({
           ) : null,
         )}
 
-        {/* Outgoing polyline (emerald) */}
+        {/* Outgoing polyline (violet) */}
         <path
           d={outgoingPath}
           fill="none"
-          stroke="#10b981"
+          stroke="#7c3aed"
           strokeWidth={2}
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -269,7 +269,7 @@ function LineSvg({
               strokeDasharray="3 3"
             />
             <circle cx={hoverX} cy={yFor(data[hover.idx].incoming)} r={3.5} fill="#3b82f6" />
-            <circle cx={hoverX} cy={yFor(data[hover.idx].outgoing)} r={3.5} fill="#10b981" />
+            <circle cx={hoverX} cy={yFor(data[hover.idx].outgoing)} r={3.5} fill="#7c3aed" />
           </g>
         )}
       </svg>
@@ -289,8 +289,8 @@ function LineSvg({
               <span className="inline-block h-1.5 w-1.5 rounded-full bg-blue-500" />
               {hovered.incoming} incoming
             </span>
-            <span className="flex items-center gap-1.5 text-emerald-300">
+            <span className="flex items-center gap-1.5 text-violet-300">
-              <span className="inline-block h-1.5 w-1.5 rounded-full bg-emerald-500" />
+              <span className="inline-block h-1.5 w-1.5 rounded-full bg-violet-500" />
               {hovered.outgoing} outgoing
             </span>
           </div>

src/components/dashboard/metric-card.tsx

@@ -43,7 +43,7 @@ export function MetricCard({ title, value, icon: Icon, delta, subtitle }: Metric
 function DeltaRow({ sign, label }: { sign: number; label: string }) {
   const tone =
     sign > 0
-      ? 'text-emerald-400'
+      ? 'text-violet-400'
       : sign < 0
       ? 'text-red-400'
       : 'text-slate-500'

src/components/dashboard/quick-actions.tsx

@@ -16,7 +16,7 @@ interface Action {
 }
 
 const ACTIONS: Action[] = [
-  { label: 'New Contact', href: '/contacts', icon: UserPlus, tint: 'text-emerald-400' },
+  { label: 'New Contact', href: '/contacts', icon: UserPlus, tint: 'text-violet-400' },
   { label: 'New Deal', href: '/pipelines', icon: Briefcase, tint: 'text-blue-400' },
   { label: 'New Broadcast', href: '/broadcasts/new', icon: Radio, tint: 'text-amber-400' },
   { label: 'New Automation', href: '/automations/new', icon: Zap, tint: 'text-violet-400' },

src/components/dashboard/response-time-chart.tsx

@@ -158,7 +158,7 @@ function Bars({
               width={barW}
               height={muted ? 2 : Math.max(1, h)}
               rx={4}
-              fill={muted ? 'rgb(51 65 85)' : '#10b981'}
+              fill={muted ? 'rgb(51 65 85)' : '#7c3aed'}
               opacity={muted ? 0.6 : 1}
             >
               <title>

src/components/docs/shell.tsx

@@ -33,7 +33,7 @@ export function DocsShell({ pages, children }: DocsShellProps) {
               {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
             </button>
             <Link href="/" className="flex items-center gap-2" aria-label="WaCRM home">
-              <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500">
+              <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-violet-500">
                 <MessageSquare className="h-4 w-4 text-white" />
               </span>
               <span className="text-lg font-semibold text-white">WaCRM</span>
@@ -61,7 +61,7 @@ export function DocsShell({ pages, children }: DocsShellProps) {
             </a>
             <Link
               href="/signup"
-              className="inline-flex items-center justify-center rounded-lg bg-emerald-500 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-emerald-400"
+              className="inline-flex items-center justify-center rounded-lg bg-violet-500 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-violet-400"
             >
               Get started
             </Link>

src/components/docs/sidebar.tsx

@@ -51,7 +51,7 @@ export function DocsSidebar({ pages, onNavigate }: DocsSidebarProps) {
                     className={cn(
                       'block rounded-md px-3 py-1.5 transition-colors',
                       active
-                        ? 'bg-emerald-500/10 text-emerald-300'
+                        ? 'bg-violet-500/10 text-violet-300'
                         : 'text-slate-400 hover:bg-slate-800/60 hover:text-white',
                     )}
                   >

src/components/inbox/contact-sidebar.tsx

@@ -156,7 +156,7 @@ export function ContactSidebar({ contact }: ContactSidebarProps) {
               <Phone className="h-4 w-4 text-slate-500" />
               <span className="flex-1 text-left">{contact.phone}</span>
               {copied ? (
-                <Check className="h-3 w-3 text-emerald-400" />
+                <Check className="h-3 w-3 text-violet-400" />
               ) : (
                 <Copy className="h-3 w-3 text-slate-600" />
               )}
@@ -259,11 +259,11 @@ export function ContactSidebar({ contact }: ContactSidebarProps) {
                   onChange={(e) => setNewNote(e.target.value)}
                   placeholder="Add a note..."
                   rows={2}
-                  className="flex-1 resize-none rounded-lg border border-slate-700 bg-slate-800 px-3 py-2 text-xs text-white placeholder-slate-500 outline-none focus:border-emerald-500/50"
+                  className="flex-1 resize-none rounded-lg border border-slate-700 bg-slate-800 px-3 py-2 text-xs text-white placeholder-slate-500 outline-none focus:border-violet-500/50"
                 />
                 <Button
                   size="sm"
-                  className="h-auto bg-emerald-600 px-2 hover:bg-emerald-500"
+                  className="h-auto bg-violet-600 px-2 hover:bg-violet-500"
                   onClick={handleAddNote}
                   disabled={!newNote.trim() || addingNote}
                 >

src/components/inbox/conversation-list.tsx

@@ -24,7 +24,7 @@ interface ConversationListProps {
 }
 
 const STATUS_COLORS: Record<ConversationStatus, string> = {
-  open: "bg-emerald-500",
+  open: "bg-violet-500",
   pending: "bg-amber-500",
   closed: "bg-slate-500",
 };
@@ -145,7 +145,7 @@ export function ConversationList({
             value={search}
             onChange={handleSearchChange}
             placeholder="Search conversations..."
-            className="border-slate-700 bg-slate-800 pl-9 text-sm text-white placeholder-slate-500 focus:border-emerald-500/50"
+            className="border-slate-700 bg-slate-800 pl-9 text-sm text-white placeholder-slate-500 focus:border-violet-500/50"
           />
         </div>
 
@@ -165,7 +165,7 @@ export function ConversationList({
                 className={cn(
                   "text-sm",
                   filter === opt.value
-                    ? "text-emerald-400"
+                    ? "text-violet-400"
                     : "text-slate-300"
                 )}
               >
@@ -180,7 +180,7 @@ export function ConversationList({
       <ScrollArea className="flex-1">
         {loading ? (
           <div className="flex items-center justify-center py-12">
-            <div className="h-5 w-5 animate-spin rounded-full border-2 border-emerald-500 border-t-transparent" />
+            <div className="h-5 w-5 animate-spin rounded-full border-2 border-violet-500 border-t-transparent" />
           </div>
         ) : filtered.length === 0 ? (
           <div className="px-4 py-12 text-center">
@@ -233,7 +233,7 @@ function ConversationItem({
       onClick={handleClick}
       className={cn(
         "flex w-full items-start gap-3 px-3 py-3 text-left transition-colors hover:bg-slate-800/50",
-        isActive && "border-l-2 border-emerald-500 bg-slate-800/70"
+        isActive && "border-l-2 border-violet-500 bg-slate-800/70"
       )}
     >
       {/* Avatar */}
@@ -263,7 +263,7 @@ function ConversationItem({
           </p>
           <div className="flex shrink-0 items-center gap-1.5">
             {conversation.unread_count > 0 && (
-              <span className="flex h-4 min-w-4 items-center justify-center rounded-full bg-emerald-500 px-1 text-[10px] font-bold text-white">
+              <span className="flex h-4 min-w-4 items-center justify-center rounded-full bg-violet-500 px-1 text-[10px] font-bold text-white">
                 {conversation.unread_count}
               </span>
             )}

src/components/inbox/message-bubble.tsx

@@ -93,7 +93,7 @@ function MediaImage({ url, alt }: { url: string; alt: string }) {
   if (loading) {
     return (
       <div className="flex h-40 w-60 items-center justify-center rounded-lg bg-slate-700">
-        <div className="h-5 w-5 animate-spin rounded-full border-2 border-emerald-500 border-t-transparent" />
+        <div className="h-5 w-5 animate-spin rounded-full border-2 border-violet-500 border-t-transparent" />
       </div>
     );
   }
@@ -185,7 +185,7 @@ function MessageContent({ message }: { message: Message }) {
     case "template":
       return (
         <div>
-          <span className="mb-1 inline-flex items-center gap-1 rounded bg-emerald-500/20 px-1.5 py-0.5 text-[10px] font-medium text-emerald-400">
+          <span className="mb-1 inline-flex items-center gap-1 rounded bg-violet-500/20 px-1.5 py-0.5 text-[10px] font-medium text-violet-400">
             <LayoutTemplate className="h-3 w-3" />
             Template
           </span>
@@ -226,7 +226,7 @@ export function MessageBubble({ message }: MessageBubbleProps) {
         className={cn(
           "relative max-w-[75%] rounded-2xl px-3 py-2",
           isAgent
-            ? "rounded-br-md bg-emerald-600 text-white"
+            ? "rounded-br-md bg-violet-600 text-white"
             : "rounded-bl-md bg-slate-800 text-slate-100"
         )}
       >

src/components/inbox/message-composer.tsx

@@ -107,14 +107,14 @@ export function MessageComposer({
           disabled={sessionExpired}
           rows={1}
           className={cn(
-            "flex-1 resize-none rounded-xl border border-slate-700 bg-slate-800 px-4 py-2.5 text-sm text-white placeholder-slate-500 outline-none transition-colors focus:border-emerald-500/50",
+            "flex-1 resize-none rounded-xl border border-slate-700 bg-slate-800 px-4 py-2.5 text-sm text-white placeholder-slate-500 outline-none transition-colors focus:border-violet-500/50",
             sessionExpired && "cursor-not-allowed opacity-50"
           )}
         />
 
         <Button
           size="sm"
-          className="h-9 w-9 shrink-0 bg-emerald-600 p-0 hover:bg-emerald-500 disabled:opacity-40"
+          className="h-9 w-9 shrink-0 bg-violet-600 p-0 hover:bg-violet-500 disabled:opacity-40"
           disabled={!text.trim() || sessionExpired || sending}
           onClick={handleSend}
         >

src/components/inbox/message-thread.tsx

@@ -67,7 +67,7 @@ function groupMessagesByDate(messages: Message[]) {
 }
 
 const STATUS_OPTIONS: { label: string; value: ConversationStatus; color: string }[] = [
-  { label: "Open", value: "open", color: "text-emerald-400" },
+  { label: "Open", value: "open", color: "text-violet-400" },
   { label: "Pending", value: "pending", color: "text-amber-400" },
   { label: "Closed", value: "closed", color: "text-slate-400" },
 ];
@@ -319,7 +319,7 @@ export function MessageThread({
             variant="outline"
             className={cn(
               "ml-1 hidden gap-1 border-slate-700 text-[10px] sm:inline-flex sm:ml-2",
-              sessionInfo.expired ? "text-red-400" : "text-emerald-400"
+              sessionInfo.expired ? "text-red-400" : "text-violet-400"
             )}
           >
             <Clock className="h-3 w-3" />
@@ -369,7 +369,7 @@ export function MessageThread({
       <div ref={scrollRef} className="flex-1 overflow-y-auto px-4 py-4">
         {loading ? (
           <div className="flex items-center justify-center py-12">
-            <div className="h-5 w-5 animate-spin rounded-full border-2 border-emerald-500 border-t-transparent" />
+            <div className="h-5 w-5 animate-spin rounded-full border-2 border-violet-500 border-t-transparent" />
           </div>
         ) : messages.length === 0 ? (
           <div className="flex flex-col items-center justify-center py-12">

src/components/landing/cta-banner.tsx

@@ -10,10 +10,10 @@ export function CtaBanner() {
   return (
     <Section className="py-16 sm:py-20">
       <div
-        className="relative overflow-hidden rounded-2xl border border-emerald-500/20 bg-slate-900/70 px-6 py-16 text-center sm:px-12 sm:py-20"
+        className="relative overflow-hidden rounded-2xl border border-violet-500/20 bg-slate-900/70 px-6 py-16 text-center sm:px-12 sm:py-20"
         style={{
           background:
-            'radial-gradient(800px circle at 50% -40%, rgb(16 185 129 / 0.18), transparent 60%), linear-gradient(to bottom, rgb(15 23 42 / 0.9), rgb(15 23 42 / 0.7))',
+            'radial-gradient(800px circle at 50% -40%, rgb(139 92 246 / 0.18), transparent 60%), linear-gradient(to bottom, rgb(15 23 42 / 0.9), rgb(15 23 42 / 0.7))',
         }}
       >
         <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
@@ -25,7 +25,7 @@ export function CtaBanner() {
         <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
           <Link
             href="/signup"
-            className="inline-flex items-center gap-2 rounded-lg bg-emerald-500 px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-emerald-400"
+            className="inline-flex items-center gap-2 rounded-lg bg-violet-500 px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-violet-400"
           >
             Get started free
             <ArrowRight className="h-4 w-4" />

src/components/landing/faq.tsx

@@ -31,7 +31,7 @@ export function FAQ() {
                 <ChevronDown
                   className={cn(
                     'h-4 w-4 flex-shrink-0 text-slate-500 transition-transform',
-                    isOpen && 'rotate-180 text-emerald-400',
+                    isOpen && 'rotate-180 text-violet-400',
                   )}
                 />
               </button>

src/components/landing/feature-spotlight.tsx

@@ -37,7 +37,7 @@ export function FeatureSpotlight({
         )}
       >
         <div>
-          <p className="text-xs font-semibold uppercase tracking-wider text-emerald-400">
+          <p className="text-xs font-semibold uppercase tracking-wider text-violet-400">
             {eyebrow}
           </p>
           <h3 className="mt-3 text-2xl font-bold tracking-tight text-white sm:text-3xl">
@@ -50,7 +50,7 @@ export function FeatureSpotlight({
             <ul className="mt-5 space-y-2.5">
               {bullets.map((b) => (
                 <li key={b} className="flex items-start gap-2.5 text-sm text-slate-300">
-                  <Check className="mt-0.5 h-4 w-4 flex-shrink-0 text-emerald-400" />
+                  <Check className="mt-0.5 h-4 w-4 flex-shrink-0 text-violet-400" />
                   <span>{b}</span>
                 </li>
               ))}

src/components/landing/features-grid.tsx

@@ -32,7 +32,7 @@ const FEATURES: Feature[] = [
     description:
       'Tags, custom fields, notes, and automatic deduplication. Import existing contacts from CSV.',
     icon: Users,
-    tint: 'text-emerald-400 bg-emerald-500/10',
+    tint: 'text-violet-400 bg-violet-500/10',
   },
   {
     title: 'Sales pipelines',

src/components/landing/footer.tsx

@@ -8,7 +8,7 @@ export function Footer() {
       <div className="mx-auto grid w-full max-w-7xl grid-cols-2 gap-8 px-6 py-12 sm:grid-cols-5">
         <div className="col-span-2 sm:col-span-2">
           <Link href="/" className="flex items-center gap-2" aria-label="WaCRM home">
-            <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500">
+            <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-violet-500">
               <MessageSquare className="h-4 w-4 text-white" />
             </span>
             <span className="text-lg font-semibold text-white">WaCRM</span>

src/components/landing/hero.tsx

@@ -17,20 +17,20 @@ export function Hero() {
         className="pointer-events-none absolute inset-0 -z-10 opacity-60"
         style={{
           background:
-            'radial-gradient(800px circle at 70% -10%, rgb(16 185 129 / 0.18), transparent 60%), radial-gradient(600px circle at 10% 30%, rgb(59 130 246 / 0.08), transparent 60%)',
+            'radial-gradient(800px circle at 70% -10%, rgb(139 92 246 / 0.18), transparent 60%), radial-gradient(600px circle at 10% 30%, rgb(59 130 246 / 0.08), transparent 60%)',
         }}
       />
 
       <div className="mx-auto grid w-full max-w-7xl grid-cols-1 items-center gap-12 px-6 py-20 sm:py-28 lg:grid-cols-2 lg:gap-16">
         <div>
           <div className="inline-flex items-center gap-2 rounded-full border border-slate-800 bg-slate-900/60 px-3 py-1 text-xs text-slate-300">
-            <ShieldCheck className="h-3.5 w-3.5 text-emerald-400" />
+            <ShieldCheck className="h-3.5 w-3.5 text-violet-400" />
             Built on the official WhatsApp Business API
           </div>
 
           <h1 className="mt-5 text-4xl font-bold tracking-tight text-white sm:text-5xl lg:text-6xl">
             Run your WhatsApp business from{' '}
-            <span className="text-emerald-400">one inbox.</span>
+            <span className="text-violet-400">one inbox.</span>
           </h1>
 
           <p className="mt-5 max-w-xl text-base text-slate-400 sm:text-lg">
@@ -42,7 +42,7 @@ export function Hero() {
           <div className="mt-8 flex flex-wrap items-center gap-3">
             <Link
               href="/signup"
-              className="inline-flex items-center gap-2 rounded-lg bg-emerald-500 px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-emerald-400"
+              className="inline-flex items-center gap-2 rounded-lg bg-violet-500 px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-violet-400"
             >
               Get started
               <ArrowRight className="h-4 w-4" />
@@ -57,15 +57,15 @@ export function Hero() {
 
           <div className="mt-8 flex flex-wrap items-center gap-x-6 gap-y-2 text-xs text-slate-500">
             <span className="flex items-center gap-1.5">
-              <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
+              <span className="h-1.5 w-1.5 rounded-full bg-violet-500" />
               No credit card required
             </span>
             <span className="flex items-center gap-1.5">
-              <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
+              <span className="h-1.5 w-1.5 rounded-full bg-violet-500" />
               Live in 30 minutes
             </span>
             <span className="flex items-center gap-1.5">
-              <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
+              <span className="h-1.5 w-1.5 rounded-full bg-violet-500" />
               Your data, your Supabase
             </span>
           </div>

src/components/landing/how-it-works.tsx

@@ -43,7 +43,7 @@ export function HowItWorks() {
               className="relative rounded-xl border border-slate-800 bg-slate-900/40 p-6"
             >
               <div className="flex items-start justify-between">
-                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-500/10 text-emerald-400">
+                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-violet-500/10 text-violet-400">
                   <Icon className="h-5 w-5" />
                 </div>
                 <span

src/components/landing/mock/analytics-mock.tsx

@@ -47,7 +47,7 @@ export function AnalyticsMock() {
               </div>
               <div
                 className={`text-[10px] tabular-nums ${
-                  s.positive ? 'text-emerald-400' : 'text-red-400'
+                  s.positive ? 'text-violet-400' : 'text-red-400'
                 }`}
               >
                 {s.delta}
@@ -67,7 +67,7 @@ export function AnalyticsMock() {
                 Incoming
               </span>
               <span className="inline-flex items-center gap-1 text-[9px] text-slate-500">
-                <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
+                <span className="h-1.5 w-1.5 rounded-full bg-violet-500" />
                 Outgoing
               </span>
             </div>
@@ -89,7 +89,7 @@ export function AnalyticsMock() {
                 strokeDasharray="3 3"
               />
             ))}
-            <path d={path(outgoing)} fill="none" stroke="#10b981" strokeWidth={1.5} />
+            <path d={path(outgoing)} fill="none" stroke="#7c3aed" strokeWidth={1.5} />
             <path d={path(incoming)} fill="none" stroke="#3b82f6" strokeWidth={1.5} />
           </svg>
         </div>

src/components/landing/mock/automation-mock.tsx

@@ -19,8 +19,8 @@ export function AutomationMock() {
       kind: 'action',
       label: 'Send "Hi! 👋 Thanks for reaching out."',
       icon: MessageSquare,
-      accent: 'border-l-emerald-500',
+      accent: 'border-l-violet-500',
-      badgeClass: 'bg-emerald-500/10 text-emerald-400',
+      badgeClass: 'bg-violet-500/10 text-violet-400',
       kindLabel: 'ACTION',
     },
     {

src/components/landing/mock/inbox-mock.tsx

@@ -33,16 +33,16 @@ export function InboxMock() {
             <div
               key={i}
               className={`flex items-start gap-2 px-3 py-2.5 ${
-                c.active ? 'border-l-2 border-emerald-500 bg-slate-800/60' : 'border-l-2 border-transparent'
+                c.active ? 'border-l-2 border-violet-500 bg-slate-800/60' : 'border-l-2 border-transparent'
               }`}
             >
-              <span className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-emerald-500/10 text-[10px] font-medium text-emerald-400">
+              <span className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-violet-500/10 text-[10px] font-medium text-violet-400">
                 {c.name[0]}
               </span>
               <div className="min-w-0 flex-1">
                 <div className="flex items-center justify-between gap-2">
                   <span className="truncate text-xs font-medium text-white">{c.name}</span>
-                  {c.unread && <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />}
+                  {c.unread && <span className="h-1.5 w-1.5 rounded-full bg-violet-500" />}
                 </div>
                 <p className="truncate text-[10px] text-slate-500">{c.preview}</p>
               </div>
@@ -53,14 +53,14 @@ export function InboxMock() {
         {/* Thread */}
         <div className="flex min-h-[280px] flex-col bg-slate-950">
           <div className="flex items-center gap-2 border-b border-slate-800 px-4 py-2.5">
-            <span className="flex h-7 w-7 items-center justify-center rounded-full bg-emerald-500/10 text-[10px] font-medium text-emerald-400">
+            <span className="flex h-7 w-7 items-center justify-center rounded-full bg-violet-500/10 text-[10px] font-medium text-violet-400">
               A
             </span>
             <div>
               <div className="text-xs font-medium text-white">Aisha</div>
               <div className="text-[10px] text-slate-500">+44 7700 900123</div>
             </div>
-            <div className="ml-auto inline-flex items-center gap-1 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-2 py-0.5 text-[10px] text-emerald-300">
+            <div className="ml-auto inline-flex items-center gap-1 rounded-full border border-violet-500/30 bg-violet-500/10 px-2 py-0.5 text-[10px] text-violet-300">
               Open
             </div>
           </div>
@@ -69,7 +69,7 @@ export function InboxMock() {
             <div className="mr-auto max-w-[75%] rounded-2xl rounded-bl-sm bg-slate-800 px-3 py-2 text-xs text-slate-200">
               Hi! Is the kit available in large?
             </div>
-            <div className="ml-auto max-w-[75%] rounded-2xl rounded-br-sm bg-emerald-500 px-3 py-2 text-xs text-white">
+            <div className="ml-auto max-w-[75%] rounded-2xl rounded-br-sm bg-violet-500 px-3 py-2 text-xs text-white">
               Yes — shipping today 📦
             </div>
             <div className="mr-auto max-w-[75%] rounded-2xl rounded-bl-sm bg-slate-800 px-3 py-2 text-xs text-slate-200">
@@ -85,7 +85,7 @@ export function InboxMock() {
               type="button"
               tabIndex={-1}
               aria-hidden
-              className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500 text-white"
+              className="flex h-8 w-8 items-center justify-center rounded-lg bg-violet-500 text-white"
             >
               <MessageSquare className="h-3.5 w-3.5" />
             </button>

src/components/landing/mock/pipeline-mock.tsx

@@ -23,7 +23,7 @@ export function PipelineMock() {
     },
     {
       name: 'Won',
-      color: 'bg-emerald-500',
+      color: 'bg-violet-500',
       deals: [{ title: 'Lagoon Spa', value: '$3,200' }],
     },
   ]

src/components/landing/nav.tsx

@@ -61,7 +61,7 @@ export function LandingNav() {
     >
       <div className="mx-auto flex h-16 w-full max-w-7xl items-center justify-between px-6">
         <Link href="/" className="flex items-center gap-2" aria-label="WaCRM home">
-          <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500">
+          <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-violet-500">
             <MessageSquare className="h-4 w-4 text-white" />
           </span>
           <span className="text-lg font-semibold text-white">WaCRM</span>
@@ -145,7 +145,7 @@ function NavCtas({ auth, mobile = false }: { auth: AuthState; mobile?: boolean }
   )
   const primary = cn(
     btnBase,
-    'bg-emerald-500 text-white hover:bg-emerald-400',
+    'bg-violet-500 text-white hover:bg-violet-400',
     mobile && 'justify-center',
   )
 

src/components/landing/open-source.tsx

@@ -32,7 +32,7 @@ export function OpenSource() {
             Clone or fork the repository, tweak the code, ship your own build.
             MIT-style freedom with the full CRM underneath.
           </p>
-          <span className="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-emerald-400 transition-colors group-hover:text-emerald-300">
+          <span className="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-violet-400 transition-colors group-hover:text-violet-300">
             ArnasDon/wacrm
             <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
           </span>
@@ -42,14 +42,14 @@ export function OpenSource() {
           href={HOSTINGER_URL}
           target="_blank"
           rel="noopener noreferrer"
-          className="group flex flex-col rounded-xl border border-emerald-500/20 bg-slate-900/40 p-6 transition-colors hover:border-emerald-500/40 hover:bg-slate-900/70"
+          className="group flex flex-col rounded-xl border border-violet-500/20 bg-slate-900/40 p-6 transition-colors hover:border-violet-500/40 hover:bg-slate-900/70"
         >
-          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-500/10 text-emerald-400">
+          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-violet-500/10 text-violet-400">
             <Server className="h-5 w-5" />
           </div>
           <h3 className="mt-4 flex flex-wrap items-center gap-2 text-base font-semibold text-white">
             Deploy on Hostinger
-            <span className="rounded-full bg-emerald-500/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-emerald-400">
+            <span className="rounded-full bg-violet-500/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-violet-400">
               Recommended
             </span>
           </h3>
@@ -58,7 +58,7 @@ export function OpenSource() {
             Managed Node.js Hosting and WaCRM is live in a few minutes. No
             servers to patch.
           </p>
-          <span className="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-emerald-400 transition-colors group-hover:text-emerald-300">
+          <span className="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-violet-400 transition-colors group-hover:text-violet-300">
             Managed Node.js Hosting
             <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
           </span>
@@ -70,7 +70,7 @@ export function OpenSource() {
           href="/docs"
           className="group inline-flex items-center gap-2 rounded-lg border border-slate-800 bg-slate-900/40 px-5 py-3 text-sm font-medium text-slate-200 transition-colors hover:border-slate-700 hover:bg-slate-900/70 hover:text-white"
         >
-          <BookOpen className="h-4 w-4 text-emerald-400" />
+          <BookOpen className="h-4 w-4 text-violet-400" />
           Read the full documentation
           <ArrowRight className="h-4 w-4 text-slate-400 transition-transform group-hover:translate-x-0.5 group-hover:text-slate-200" />
         </Link>

src/components/landing/section.tsx

@@ -54,7 +54,7 @@ export function SectionHeader({
   return (
     <div className={cn(base, max, 'mb-12')}>
       {eyebrow && (
-        <p className="mb-3 text-xs font-semibold uppercase tracking-wider text-emerald-400">
+        <p className="mb-3 text-xs font-semibold uppercase tracking-wider text-violet-400">
           {eyebrow}
         </p>
       )}

src/components/layout/header.tsx

@@ -80,7 +80,7 @@ export function Header({ onOpenSidebar }: HeaderProps) {
                 alt={profile.full_name ?? "Avatar"}
               />
             ) : null}
-            <AvatarFallback className="bg-emerald-500/10 text-sm font-medium text-emerald-500">
+            <AvatarFallback className="bg-violet-500/10 text-sm font-medium text-violet-500">
               {initial}
             </AvatarFallback>
           </Avatar>

src/components/layout/sidebar.tsx

@@ -111,7 +111,7 @@ export function Sidebar({ open = false, onClose }: SidebarProps) {
             close button is hidden since the sidebar is always-visible. */}
         <div className="flex h-14 shrink-0 items-center justify-between gap-2 border-b border-slate-800 px-4">
           <Link href="/dashboard" className="flex items-center gap-2">
-            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500">
+            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-violet-500">
               <MessageSquare className="h-4 w-4 text-white" />
             </div>
             <span className="text-lg font-semibold text-white">WaCRM</span>
@@ -145,7 +145,7 @@ export function Sidebar({ open = false, onClose }: SidebarProps) {
                       // Taller on mobile so fingers can hit the row reliably (≥44px).
                       "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors lg:py-2",
                       isActive
-                        ? "bg-emerald-500/10 text-emerald-500"
+                        ? "bg-violet-500/10 text-violet-500"
                         : "text-slate-400 hover:bg-slate-800 hover:text-white",
                     )}
                   >
@@ -156,8 +156,8 @@ export function Sidebar({ open = false, onClose }: SidebarProps) {
                         aria-label={`${totalUnread} unread conversation${totalUnread === 1 ? "" : "s"}`}
                         className="relative flex h-2 w-2"
                       >
-                        <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
+                        <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-violet-400 opacity-75" />
-                        <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500" />
+                        <span className="relative inline-flex h-2 w-2 rounded-full bg-violet-500" />
                       </span>
                     )}
                   </Link>
@@ -178,7 +178,7 @@ export function Sidebar({ open = false, onClose }: SidebarProps) {
                     className={cn(
                       "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors lg:py-2",
                       isActive
-                        ? "bg-emerald-500/10 text-emerald-500"
+                        ? "bg-violet-500/10 text-violet-500"
                         : "text-slate-400 hover:bg-slate-800 hover:text-white",
                     )}
                   >
@@ -202,7 +202,7 @@ export function Sidebar({ open = false, onClose }: SidebarProps) {
                     alt={profile.full_name ?? "Avatar"}
                   />
                 ) : null}
-                <AvatarFallback className="bg-emerald-500/10 text-sm font-medium text-emerald-500">
+                <AvatarFallback className="bg-violet-500/10 text-sm font-medium text-violet-500">
                   {profile?.full_name?.charAt(0)?.toUpperCase() ??
                     profile?.email?.charAt(0)?.toUpperCase() ??
                     "U"}

src/components/pipelines/deal-card.tsx

@@ -65,7 +65,7 @@ export function DealCard({ deal, stage, onEdit, isOverlay }: DealCardProps) {
           {deal.title}
         </h4>
         {deal.status === "won" && (
-          <span className="inline-flex shrink-0 items-center gap-1 rounded-full bg-emerald-500/15 px-2 py-0.5 text-[10px] font-semibold text-emerald-400">
+          <span className="inline-flex shrink-0 items-center gap-1 rounded-full bg-violet-500/15 px-2 py-0.5 text-[10px] font-semibold text-violet-400">
             <Check className="h-3 w-3" />
             Won
           </span>
@@ -87,7 +87,7 @@ export function DealCard({ deal, stage, onEdit, isOverlay }: DealCardProps) {
       </div>
 
       <div className="mt-2 flex items-center justify-between">
-        <span className="text-sm font-bold text-emerald-400">
+        <span className="text-sm font-bold text-violet-400">
           {formatCurrency(deal.value, deal.currency)}
         </span>
         {deal.expected_close_date && (
@@ -102,7 +102,7 @@ export function DealCard({ deal, stage, onEdit, isOverlay }: DealCardProps) {
         <div className="mt-2 flex items-center justify-end">
           <span
             title={assigneeLabel}
-            className="flex h-5 w-5 items-center justify-center rounded-full bg-emerald-500/15 text-[10px] font-semibold text-emerald-400"
+            className="flex h-5 w-5 items-center justify-center rounded-full bg-violet-500/15 text-[10px] font-semibold text-violet-400"
           >
             {initials(assigneeLabel)}
           </span>

src/components/pipelines/deal-form.tsx

@@ -264,7 +264,7 @@ export function DealForm({
               <select
                 value={contactId}
                 onChange={(e) => setContactId(e.target.value)}
-                className="h-9 w-full rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
+                className="h-9 w-full rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500"
               >
                 <option value="">Select a contact</option>
                 {contacts.map((c) => (
@@ -277,7 +277,7 @@ export function DealForm({
               {linkedConversation && (
                 <Link
                   href="/inbox"
-                  className="mt-1 inline-flex items-center gap-1.5 self-start rounded-md bg-emerald-500/10 px-2 py-1 text-xs text-emerald-400 hover:bg-emerald-500/20"
+                  className="mt-1 inline-flex items-center gap-1.5 self-start rounded-md bg-violet-500/10 px-2 py-1 text-xs text-violet-400 hover:bg-violet-500/20"
                 >
                   <MessageSquare className="h-3 w-3" />
                   Link to Conversation
@@ -304,7 +304,7 @@ export function DealForm({
                 <select
                   value={currency}
                   onChange={(e) => setCurrency(e.target.value)}
-                  className="h-9 w-full rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none focus:border-emerald-500"
+                  className="h-9 w-full rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none focus:border-violet-500"
                 >
                   <option value="USD">USD</option>
                   <option value="EUR">EUR</option>
@@ -328,7 +328,7 @@ export function DealForm({
               <select
                 value={stageId}
                 onChange={(e) => setStageId(e.target.value)}
-                className="h-9 w-full rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none focus:border-emerald-500"
+                className="h-9 w-full rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none focus:border-violet-500"
               >
                 {stages.map((s) => (
                   <option key={s.id} value={s.id}>
@@ -343,7 +343,7 @@ export function DealForm({
               <select
                 value={assignedTo}
                 onChange={(e) => setAssignedTo(e.target.value)}
-                className="h-9 w-full rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none focus:border-emerald-500"
+                className="h-9 w-full rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none focus:border-violet-500"
               >
                 <option value="">Unassigned</option>
                 {profiles.map((p) => (
@@ -374,7 +374,7 @@ export function DealForm({
                     type="button"
                     onClick={() => handleStatusChange("won")}
                     disabled={!!statusAction || deal.status === "won"}
-                    className="flex-1 bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-50"
+                    className="flex-1 bg-violet-600 text-white hover:bg-violet-700 disabled:opacity-50"
                   >
                     {statusAction === "won" ? (
                       <Loader2 className="h-4 w-4 animate-spin" />
@@ -428,7 +428,7 @@ export function DealForm({
               <Button
                 onClick={handleSave}
                 disabled={saving || !title.trim() || !contactId || !stageId}
-                className="flex-1 bg-emerald-600 text-white hover:bg-emerald-700"
+                className="flex-1 bg-violet-600 text-white hover:bg-violet-700"
               >
                 {saving ? "Saving..." : deal ? "Save Changes" : "Create Deal"}
               </Button>

src/components/pipelines/pipeline-analytics.tsx

@@ -107,7 +107,7 @@ export function PipelineAnalytics({ stages, deals }: PipelineAnalyticsProps) {
           tooltip="Count of every deal in this pipeline that isn't marked as Lost. Won deals are still included."
         />
         <Metric
-          icon={<DollarSign className="h-4 w-4 text-emerald-400" />}
+          icon={<DollarSign className="h-4 w-4 text-violet-400" />}
           label="Pipeline Value"
           value={formatCurrency(stats.totalValue)}
           tooltip="Sum of the dollar values of all deals in this pipeline, excluding deals marked as Lost."
@@ -125,7 +125,7 @@ export function PipelineAnalytics({ stages, deals }: PipelineAnalyticsProps) {
           tooltip="Expected revenue: each open deal's value × its stage probability. First stage ≈ 10%, stages progress up to 90%, Won = 100%. Lost deals are excluded."
         />
         <Metric
-          icon={<Trophy className="h-4 w-4 text-emerald-400" />}
+          icon={<Trophy className="h-4 w-4 text-violet-400" />}
           label="Won This Month"
           value={String(stats.wonThisMonth)}
           tooltip="Deals marked as Won since the first day of the current month."

src/components/pipelines/pipeline-board.tsx

@@ -206,7 +206,7 @@ function StageColumn({
         ref={setNodeRef}
         className={`mt-3 flex flex-1 flex-col gap-2 rounded-lg transition-all ${
           isOver
-            ? "bg-emerald-500/5 outline outline-2 outline-dashed outline-emerald-400 outline-offset-2"
+            ? "bg-violet-500/5 outline outline-2 outline-dashed outline-violet-400 outline-offset-2"
             : ""
         }`}
       >

src/components/pipelines/pipeline-settings.tsx

@@ -349,7 +349,7 @@ export function PipelineSettings({
               <Button
                 onClick={handleSave}
                 disabled={saving || !name.trim()}
-                className="bg-emerald-600 text-white hover:bg-emerald-700"
+                className="bg-violet-600 text-white hover:bg-violet-700"
               >
                 {saving ? "Saving..." : "Save Changes"}
               </Button>

src/components/settings/password-form.tsx

@@ -84,7 +84,7 @@ export function PasswordForm() {
     <Card className="bg-slate-900/40 border-slate-800">
       <CardHeader>
         <CardTitle className="flex items-center gap-2 text-white">
-          <KeyRound className="size-4 text-emerald-400" />
+          <KeyRound className="size-4 text-violet-400" />
           Password
         </CardTitle>
         <CardDescription className="text-slate-400">

src/components/settings/profile-form.tsx

@@ -227,7 +227,7 @@ export function ProfileForm() {
               {currentAvatar ? (
                 <AvatarImage src={currentAvatar} alt={fullName || 'Avatar'} />
               ) : null}
-              <AvatarFallback className="bg-emerald-500/10 text-base text-emerald-400">
+              <AvatarFallback className="bg-violet-500/10 text-base text-violet-400">
                 {initial}
               </AvatarFallback>
             </Avatar>

src/components/settings/sessions-card.tsx

@@ -52,7 +52,7 @@ export function SessionsCard() {
       <Card className="bg-slate-900/40 border-slate-800">
         <CardHeader>
           <CardTitle className="flex items-center gap-2 text-white">
-            <LogOut className="size-4 text-emerald-400" />
+            <LogOut className="size-4 text-violet-400" />
             Active sessions
           </CardTitle>
           <CardDescription className="text-slate-400">

src/components/settings/tag-manager.tsx

@@ -142,7 +142,7 @@ export function TagManager() {
   if (loading) {
     return (
       <div className="flex items-center justify-center py-12">
-        <Loader2 className="size-6 animate-spin text-emerald-500" />
+        <Loader2 className="size-6 animate-spin text-violet-500" />
       </div>
     );
   }
@@ -160,7 +160,7 @@ export function TagManager() {
             setSelectedColor(PRESET_COLORS[3].value);
             setDialogOpen(true);
           }}
-          className="bg-emerald-600 hover:bg-emerald-700 text-white"
+          className="bg-violet-600 hover:bg-violet-700 text-white"
         >
           <Plus className="size-4" />
           New Tag
@@ -281,7 +281,7 @@ export function TagManager() {
             <Button
               onClick={handleCreate}
               disabled={saving}
-              className="bg-emerald-600 hover:bg-emerald-700 text-white"
+              className="bg-violet-600 hover:bg-violet-700 text-white"
             >
               {saving ? (
                 <>

src/components/settings/template-manager.tsx

@@ -40,7 +40,7 @@ const categoryColors: Record<string, string> = {
 const statusColors: Record<string, string> = {
   Draft: 'bg-slate-600/20 text-slate-400 border-slate-600/30',
   Pending: 'bg-yellow-600/20 text-yellow-400 border-yellow-600/30',
-  Approved: 'bg-emerald-600/20 text-emerald-400 border-emerald-600/30',
+  Approved: 'bg-violet-600/20 text-violet-400 border-violet-600/30',
   Rejected: 'bg-red-600/20 text-red-400 border-red-600/30',
 };
 
@@ -246,7 +246,7 @@ export function TemplateManager() {
   if (loading) {
     return (
       <div className="flex items-center justify-center py-12">
-        <Loader2 className="size-6 animate-spin text-emerald-500" />
+        <Loader2 className="size-6 animate-spin text-violet-500" />
       </div>
     );
   }
@@ -280,7 +280,7 @@ export function TemplateManager() {
               setForm(emptyForm);
               setDialogOpen(true);
             }}
-            className="bg-emerald-600 hover:bg-emerald-700 text-white"
+            className="bg-violet-600 hover:bg-violet-700 text-white"
           >
             <Plus className="size-4" />
             New Template
@@ -456,7 +456,7 @@ export function TemplateManager() {
             <Button
               onClick={handleSave}
               disabled={saving}
-              className="bg-emerald-600 hover:bg-emerald-700 text-white"
+              className="bg-violet-600 hover:bg-violet-700 text-white"
             >
               {saving ? (
                 <>

src/components/settings/whatsapp-config.tsx

@@ -265,7 +265,7 @@ export function WhatsAppConfig() {
   if (loading) {
     return (
       <div className="flex items-center justify-center py-12">
-        <Loader2 className="size-6 animate-spin text-emerald-500" />
+        <Loader2 className="size-6 animate-spin text-violet-500" />
       </div>
     );
   }
@@ -315,7 +315,7 @@ export function WhatsAppConfig() {
         <Alert className="bg-slate-900 border-slate-700">
           <div className="flex items-center gap-2">
             {connectionStatus === 'connected' ? (
-              <CheckCircle2 className="size-4 text-emerald-500" />
+              <CheckCircle2 className="size-4 text-violet-500" />
             ) : (
               <XCircle className="size-4 text-red-500" />
             )}
@@ -444,7 +444,7 @@ export function WhatsAppConfig() {
           <Button
             onClick={handleSave}
             disabled={saving}
-            className="bg-emerald-600 hover:bg-emerald-700 text-white"
+            className="bg-violet-600 hover:bg-violet-700 text-white"
           >
             {saving ? (
               <>
@@ -510,13 +510,13 @@ export function WhatsAppConfig() {
               <AccordionItem className="border-slate-700">
                 <AccordionTrigger className="text-slate-300 hover:text-white hover:no-underline">
                   <span className="flex items-center gap-2">
-                    <span className="flex size-5 items-center justify-center rounded-full bg-emerald-600 text-xs font-bold text-white">1</span>
+                    <span className="flex size-5 items-center justify-center rounded-full bg-violet-600 text-xs font-bold text-white">1</span>
                     Create a Meta App
                   </span>
                 </AccordionTrigger>
                 <AccordionContent className="text-slate-400">
                   <ol className="list-decimal list-inside space-y-1 text-sm">
-                    <li>Go to <span className="text-emerald-400">developers.facebook.com</span></li>
+                    <li>Go to <span className="text-violet-400">developers.facebook.com</span></li>
                     <li>Click &quot;My Apps&quot; and then &quot;Create App&quot;</li>
                     <li>Select &quot;Business&quot; as the app type</li>
                     <li>Fill in app details and create</li>
@@ -527,7 +527,7 @@ export function WhatsAppConfig() {
               <AccordionItem className="border-slate-700">
                 <AccordionTrigger className="text-slate-300 hover:text-white hover:no-underline">
                   <span className="flex items-center gap-2">
-                    <span className="flex size-5 items-center justify-center rounded-full bg-emerald-600 text-xs font-bold text-white">2</span>
+                    <span className="flex size-5 items-center justify-center rounded-full bg-violet-600 text-xs font-bold text-white">2</span>
                     Add WhatsApp Product
                   </span>
                 </AccordionTrigger>
@@ -543,7 +543,7 @@ export function WhatsAppConfig() {
               <AccordionItem className="border-slate-700">
                 <AccordionTrigger className="text-slate-300 hover:text-white hover:no-underline">
                   <span className="flex items-center gap-2">
-                    <span className="flex size-5 items-center justify-center rounded-full bg-emerald-600 text-xs font-bold text-white">3</span>
+                    <span className="flex size-5 items-center justify-center rounded-full bg-violet-600 text-xs font-bold text-white">3</span>
                     Get API Credentials
                   </span>
                 </AccordionTrigger>
@@ -560,7 +560,7 @@ export function WhatsAppConfig() {
               <AccordionItem className="border-slate-700">
                 <AccordionTrigger className="text-slate-300 hover:text-white hover:no-underline">
                   <span className="flex items-center gap-2">
-                    <span className="flex size-5 items-center justify-center rounded-full bg-emerald-600 text-xs font-bold text-white">4</span>
+                    <span className="flex size-5 items-center justify-center rounded-full bg-violet-600 text-xs font-bold text-white">4</span>
                     Configure Webhooks
                   </span>
                 </AccordionTrigger>
@@ -581,7 +581,7 @@ export function WhatsAppConfig() {
                 href="https://developers.facebook.com/docs/whatsapp/cloud-api/get-started"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="inline-flex items-center gap-1.5 text-sm text-emerald-400 hover:text-emerald-300 transition-colors"
+                className="inline-flex items-center gap-1.5 text-sm text-violet-400 hover:text-violet-300 transition-colors"
               >
                 <ExternalLink className="size-3.5" />
                 Meta WhatsApp API Documentation

src/components/ui/switch.tsx

@@ -15,9 +15,9 @@ function Switch({
       data-slot="switch"
       className={cn(
         "inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950",
         "disabled:cursor-not-allowed disabled:opacity-50",
-        "data-[checked]:bg-emerald-500 data-[unchecked]:bg-slate-700",
+        "data-[checked]:bg-violet-500 data-[unchecked]:bg-slate-700",
         className,
       )}
       {...props}

src/lib/automations/trigger-meta.ts

@@ -21,7 +21,7 @@ export const TRIGGER_META: Record<AutomationTriggerType, TriggerMeta> = {
   },
   new_contact_created: {
     label: 'New Contact',
-    pillClass: 'border-emerald-500/30 bg-emerald-500/10 text-emerald-300',
+    pillClass: 'border-violet-500/30 bg-violet-500/10 text-violet-300',
   },
   conversation_assigned: {
     label: 'Conversation Assigned',

src/lib/broadcast-status.ts

@@ -36,7 +36,7 @@ export const broadcastStatusConfig: Record<BroadcastStatus, StatusDisplay> = {
   },
   sent: {
     label: "Sent",
-    classes: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20",
+    classes: "bg-violet-500/10 text-violet-400 border-violet-500/20",
   },
   failed: {
     label: "Failed",
@@ -55,11 +55,11 @@ export const recipientStatusConfig: Record<RecipientStatus, StatusDisplay> = {
   },
   delivered: {
     label: "Delivered",
-    classes: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20",
+    classes: "bg-violet-500/10 text-violet-400 border-violet-500/20",
   },
   read: {
     label: "Read",
-    classes: "bg-emerald-500/10 text-emerald-300 border-emerald-500/20",
+    classes: "bg-violet-500/10 text-violet-300 border-violet-500/20",
   },
   replied: {
     label: "Replied",

src/lib/docs/content.ts

@@ -71,9 +71,9 @@ const CLASSES = {
   ul: 'my-3 pl-6 list-disc marker:text-slate-500 text-slate-300 leading-relaxed space-y-1.5',
   ol: 'my-3 pl-6 list-decimal marker:text-slate-500 text-slate-300 leading-relaxed space-y-1.5',
   li: 'pl-1',
-  blockquote: 'my-4 rounded-r-lg border-l-4 border-emerald-500 bg-emerald-500/5 px-4 py-3 text-slate-200',
+  blockquote: 'my-4 rounded-r-lg border-l-4 border-violet-500 bg-violet-500/5 px-4 py-3 text-slate-200',
   hr: 'my-8 border-t border-slate-800',
-  a: 'text-emerald-400 underline decoration-transparent underline-offset-2 transition-colors hover:decoration-emerald-500/60',
+  a: 'text-violet-400 underline decoration-transparent underline-offset-2 transition-colors hover:decoration-violet-500/60',
   codespan: 'rounded-md border border-slate-700 bg-slate-800 px-1.5 py-0.5 text-[0.85em] font-mono text-slate-100',
   pre: 'my-5 overflow-x-auto rounded-lg border border-slate-800 bg-slate-900/80 p-4 text-[0.825rem] leading-relaxed font-mono text-slate-100',
   table: 'my-5 block w-full overflow-x-auto rounded-lg border border-slate-800 text-sm',