diff --git a/src/components/admin/AbandonedCartDashboard.tsx b/src/components/admin/AbandonedCartDashboard.tsx
index 8aeee58..c12707f 100644
--- a/src/components/admin/AbandonedCartDashboard.tsx
+++ b/src/components/admin/AbandonedCartDashboard.tsx
@@ -5,11 +5,11 @@ import { getAbandonedCarts, manuallyCloseAbandonedCart, resendAbandonedCartEmail
 
 type Props = { brandId: string };
 
-const STATUS_LABELS: Record<string, { en: string; es?: string; color: string }> = {
-  active: { en: "Active", color: "bg-blue-900/40 text-blue-400 border border-blue-800" },
-  recovered: { en: "Recovered", color: "bg-emerald-900/40 text-emerald-400 border border-emerald-800" },
-  expired: { en: "Expired", color: "bg-zinc-800 text-zinc-400 border border-zinc-700" },
-  manually_closed: { en: "Manually Closed", color: "bg-amber-900/40 text-amber-400 border border-amber-800" },
+const STATUS_LABELS: Record<string, { en: string; color: string }> = {
+  active: { en: "Active", color: "bg-blue-50 text-blue-700 border border-blue-200" },
+  recovered: { en: "Recovered", color: "bg-green-50 text-green-700 border border-green-200" },
+  expired: { en: "Expired", color: "bg-stone-100 text-stone-500 border border-stone-200" },
+  manually_closed: { en: "Manually Closed", color: "bg-amber-50 text-amber-700 border border-amber-200" },
 };
 
 const STEP_LABELS: Record<number, string> = {
@@ -21,10 +21,10 @@ const STEP_LABELS: Record<number, string> = {
 
 function CartItemRow({ item }: { item: { name: string; quantity: number; unit_price: number } }) {
   return (
-    <tr className="border-t border-zinc-800/60">
-      <td className="px-4 py-2 text-sm text-zinc-200">{item.name}</td>
-      <td className="px-4 py-2 text-sm text-zinc-400 text-right">{item.quantity}</td>
-      <td className="px-4 py-2 text-sm text-zinc-400 text-right">${Number(item.unit_price).toFixed(2)}</td>
+    <tr className="border-t border-[var(--admin-border)]">
+      <td className="px-4 py-2 text-sm text-[var(--admin-text-primary)]">{item.name}</td>
+      <td className="px-4 py-2 text-sm text-[var(--admin-text-muted)] text-right">{item.quantity}</td>
+      <td className="px-4 py-2 text-sm text-[var(--admin-text-muted)] text-right">${Number(item.unit_price).toFixed(2)}</td>
     </tr>
   );
 }
@@ -82,14 +82,14 @@ export default function AbandonedCartDashboard({ brandId }: Props) {
       {/* Stats row */}
       <div className="grid grid-cols-4 gap-4">
         {[
-          { label: "Total", value: stats.total, color: "text-zinc-100" },
-          { label: "Active", value: stats.active, color: "text-blue-400" },
-          { label: "Recovered", value: stats.recovered, color: "text-emerald-400" },
-          { label: "Expired", value: stats.expired, color: "text-zinc-400" },
+          { label: "Total", value: stats.total, color: "text-[var(--admin-text-primary)]" },
+          { label: "Active", value: stats.active, color: "text-blue-600" },
+          { label: "Recovered", value: stats.recovered, color: "text-green-600" },
+          { label: "Expired", value: stats.expired, color: "text-[var(--admin-text-muted)]" },
         ].map(s => (
-          <div key={s.label} className="bg-zinc-900 border border-zinc-800 rounded-2xl p-4 text-center">
+          <div key={s.label} className="bg-white border border-[var(--admin-border)] rounded-2xl p-4 text-center">
             <p className={`text-2xl font-black ${s.color}`}>{s.value}</p>
-            <p className="text-xs text-zinc-500 uppercase tracking-widest mt-1">{s.label}</p>
+            <p className="text-xs text-[var(--admin-text-muted)] uppercase tracking-widest mt-1">{s.label}</p>
           </div>
         ))}
       </div>
@@ -97,13 +97,13 @@ export default function AbandonedCartDashboard({ brandId }: Props) {
       {/* Filter + refresh + pagination */}
       <div className="flex items-center gap-3">
         <button onClick={load} disabled={loading}
-          className="text-xs font-semibold text-violet-400 hover:text-violet-300 transition-colors">
+          className="text-xs font-semibold text-[var(--admin-accent)] hover:text-[var(--admin-accent)]/80 transition-colors">
           {loading ? "Loading..." : "↻ Refresh"}
         </button>
         <div className="flex gap-2 ml-auto">
           {(["all", "active", "recovered"] as const).map(f => (
             <button key={f} onClick={() => setFilter(f)}
-              className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition-all ${filter === f ? "bg-violet-600 text-white" : "bg-zinc-800 text-zinc-400 hover:text-zinc-200"}`}>
+              className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition-all ${filter === f ? "bg-[var(--admin-accent)] text-white" : "bg-stone-100 text-[var(--admin-text-secondary)] hover:bg-stone-200"}`}>
               {f.charAt(0).toUpperCase() + f.slice(1)}
             </button>
           ))}
@@ -111,12 +111,12 @@ export default function AbandonedCartDashboard({ brandId }: Props) {
         {totalPages > 1 && (
           <div className="flex items-center gap-1 ml-2">
             <button onClick={() => setPage(p => Math.max(0, p - 1))} disabled={page === 0}
-              className="flex h-7 w-7 items-center justify-center rounded border border-zinc-700 text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800 disabled:opacity-30 disabled:cursor-not-allowed transition-colors">
+              className="flex h-7 w-7 items-center justify-center rounded border border-[var(--admin-border)] text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)] hover:bg-stone-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors">
               <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" /></svg>
             </button>
-            <span className="text-xs text-zinc-500 px-1">{page + 1}/{totalPages}</span>
+            <span className="text-xs text-[var(--admin-text-muted)] px-1">{page + 1}/{totalPages}</span>
             <button onClick={() => setPage(p => Math.min(totalPages - 1, p + 1))} disabled={page >= totalPages - 1}
-              className="flex h-7 w-7 items-center justify-center rounded border border-zinc-700 text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800 disabled:opacity-30 disabled:cursor-not-allowed transition-colors">
+              className="flex h-7 w-7 items-center justify-center rounded border border-[var(--admin-border)] text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)] hover:bg-stone-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors">
               <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" /></svg>
             </button>
           </div>
@@ -125,14 +125,14 @@ export default function AbandonedCartDashboard({ brandId }: Props) {
 
       {/* Carts table */}
       {filteredCarts.length === 0 ? (
-        <div className="bg-zinc-900 border border-zinc-800 rounded-2xl py-16 text-center">
-          <p className="text-zinc-600 text-sm">No abandoned carts{filter !== "all" ? ` (${filter})` : ""}</p>
+        <div className="bg-white border border-[var(--admin-border)] rounded-2xl py-16 text-center">
+          <p className="text-[var(--admin-text-muted)] text-sm">No abandoned carts{filter !== "all" ? ` (${filter})` : ""}</p>
         </div>
       ) : (
-        <div className="bg-zinc-900 border border-zinc-800 rounded-2xl overflow-hidden">
+        <div className="bg-white border border-[var(--admin-border)] rounded-2xl overflow-hidden">
           <table className="w-full text-sm">
             <thead>
-              <tr className="text-xs text-zinc-500 uppercase tracking-widest border-b border-zinc-800">
+              <tr className="text-xs text-[var(--admin-text-muted)] uppercase tracking-widest border-b border-[var(--admin-border)]">
                 <th className="text-left px-5 py-3 font-medium">Contact</th>
                 <th className="text-left px-5 py-3 font-medium">Items</th>
                 <th className="text-left px-5 py-3 font-medium">Total</th>
@@ -146,35 +146,35 @@ export default function AbandonedCartDashboard({ brandId }: Props) {
               {paginatedCarts.map(c => {
                 const meta = STATUS_LABELS[c.status] ?? STATUS_LABELS.active;
                 return (
-                  <tr key={c.id} className="border-t border-zinc-800/60 hover:bg-zinc-800/30 transition-colors">
+                  <tr key={c.id} className="border-t border-[var(--admin-border)] hover:bg-stone-50 transition-colors">
                     <td className="px-5 py-3.5">
                       <div>
-                        <p className="text-zinc-200 font-medium text-sm">{c.contact_name ?? "—"}</p>
-                        <p className="text-zinc-500 text-xs">{c.contact_email}</p>
+                        <p className="text-[var(--admin-text-primary)] font-medium text-sm">{c.contact_name ?? "—"}</p>
+                        <p className="text-[var(--admin-text-muted)] text-xs">{c.contact_email}</p>
                       </div>
                     </td>
-                    <td className="px-5 py-3.5 text-zinc-400 text-xs">{c.cart_snapshot.item_count} items</td>
-                    <td className="px-5 py-3.5 text-zinc-200 font-semibold text-sm">${Number(c.cart_snapshot.subtotal).toFixed(2)}</td>
+                    <td className="px-5 py-3.5 text-[var(--admin-text-muted)] text-xs">{c.cart_snapshot.item_count} items</td>
+                    <td className="px-5 py-3.5 text-[var(--admin-text-primary)] font-semibold text-sm">${Number(c.cart_snapshot.subtotal).toFixed(2)}</td>
                     <td className="px-5 py-3.5">
-                      <span className="text-xs text-zinc-500">{STEP_LABELS[c.sequence_step] ?? c.sequence_step}</span>
+                      <span className="text-xs text-[var(--admin-text-muted)]">{STEP_LABELS[c.sequence_step] ?? c.sequence_step}</span>
                     </td>
                     <td className="px-5 py-3.5">
                       <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ${meta.color}`}>
                         {meta.en}
                       </span>
                     </td>
-                    <td className="px-5 py-3.5 text-zinc-500 text-xs">{new Date(c.created_at).toLocaleDateString()}</td>
+                    <td className="px-5 py-3.5 text-[var(--admin-text-muted)] text-xs">{new Date(c.created_at).toLocaleDateString()}</td>
                     <td className="px-5 py-3.5 text-right">
                       <div className="flex items-center justify-end gap-2">
                         <button onClick={() => setSelectedCart(c)}
-                          className="text-xs text-zinc-400 hover:text-zinc-200 px-2 py-1 rounded-lg hover:bg-zinc-800 transition-all">View</button>
+                          className="text-xs text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)] px-2 py-1 rounded-lg hover:bg-stone-100 transition-all">View</button>
                         {c.status === "active" && (
                           <button onClick={() => handleClose(c.id)} disabled={closing}
-                            className="text-xs text-amber-400 hover:text-amber-300 px-2 py-1 rounded-lg hover:bg-amber-900/20 transition-all">Close</button>
+                            className="text-xs text-amber-600 hover:text-amber-700 px-2 py-1 rounded-lg hover:bg-amber-50 transition-all">Close</button>
                         )}
                         {c.status === "active" && (
                           <button onClick={() => handleResend(c.id)} disabled={resending === c.id}
-                            className="text-xs text-violet-400 hover:text-violet-300 px-2 py-1 rounded-lg hover:bg-violet-900/20 transition-all">
+                            className="text-xs text-[var(--admin-accent)] hover:text-[var(--admin-accent)]/80 px-2 py-1 rounded-lg hover:bg-stone-100 transition-all">
                             {resending === c.id ? "..." : "Resend"}
                           </button>
                         )}
@@ -190,34 +190,34 @@ export default function AbandonedCartDashboard({ brandId }: Props) {
 
       {/* Cart detail modal */}
       {cart && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm"
           onClick={() => setSelectedCart(null)}>
-          <div className="bg-zinc-900 border border-zinc-700 rounded-2xl w-full max-w-lg shadow-2xl"
+          <div className="bg-white border border-[var(--admin-border)] rounded-2xl w-full max-w-lg shadow-xl"
             onClick={e => e.stopPropagation()}>
-            <div className="px-6 py-4 border-b border-zinc-800 flex items-center justify-between">
+            <div className="px-6 py-4 border-b border-[var(--admin-border)] flex items-center justify-between">
               <div>
-                <h3 className="text-lg font-bold text-zinc-100">Abandoned Cart</h3>
-                <p className="text-xs text-zinc-500">{cart.contact_email}</p>
+                <h3 className="text-lg font-bold text-[var(--admin-text-primary)]">Abandoned Cart</h3>
+                <p className="text-xs text-[var(--admin-text-muted)]">{cart.contact_email}</p>
               </div>
-              <button onClick={() => setSelectedCart(null)} className="text-zinc-500 hover:text-zinc-200 text-xl leading-none">&times;</button>
+              <button onClick={() => setSelectedCart(null)} className="text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)] text-xl leading-none">&times;</button>
             </div>
             <div className="p-6 space-y-4">
-              <div className="flex items-start gap-3 bg-zinc-800/50 rounded-xl p-3">
+              <div className="flex items-start gap-3 bg-stone-50 rounded-xl p-3">
                 <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ${STATUS_LABELS[cart.status]?.color ?? ""}`}>
                   {STATUS_LABELS[cart.status]?.en ?? cart.status}
                 </span>
                 <div className="flex-1">
-                  <p className="text-sm text-zinc-200 font-medium">{cart.contact_name ?? "—"}</p>
-                  <p className="text-xs text-zinc-500">{cart.contact_email}</p>
-                  <p className="text-xs text-zinc-600 mt-1">Step: {STEP_LABELS[cart.sequence_step] ?? cart.sequence_step}</p>
+                  <p className="text-sm text-[var(--admin-text-primary)] font-medium">{cart.contact_name ?? "—"}</p>
+                  <p className="text-xs text-[var(--admin-text-muted)]">{cart.contact_email}</p>
+                  <p className="text-xs text-[var(--admin-text-muted)] mt-1">Step: {STEP_LABELS[cart.sequence_step] ?? cart.sequence_step}</p>
                 </div>
               </div>
 
               <div>
-                <p className="text-xs font-semibold uppercase tracking-widest text-zinc-500 mb-2">Cart Items</p>
+                <p className="text-xs font-semibold uppercase tracking-widest text-[var(--admin-text-muted)] mb-2">Cart Items</p>
                 <table className="w-full text-sm">
                   <thead>
-                    <tr className="text-xs text-zinc-600 border-b border-zinc-800">
+                    <tr className="text-xs text-[var(--admin-text-muted)] border-b border-[var(--admin-border)]">
                       <th className="text-left pb-2 font-medium">Item</th>
                       <th className="text-right pb-2 font-medium">Qty</th>
                       <th className="text-right pb-2 font-medium">Price</th>
@@ -229,19 +229,19 @@ export default function AbandonedCartDashboard({ brandId }: Props) {
                     ))}
                   </tbody>
                   <tfoot>
-                    <tr className="border-t border-zinc-700">
-                      <td className="pt-2 text-zinc-200 font-semibold" colSpan={2}>Total</td>
-                      <td className="pt-2 text-zinc-200 font-bold text-right">${Number(cart.cart_snapshot.subtotal).toFixed(2)}</td>
+                    <tr className="border-t border-[var(--admin-border)]">
+                      <td className="pt-2 text-[var(--admin-text-primary)] font-semibold" colSpan={2}>Total</td>
+                      <td className="pt-2 text-[var(--admin-text-primary)] font-bold text-right">${Number(cart.cart_snapshot.subtotal).toFixed(2)}</td>
                     </tr>
                   </tfoot>
                 </table>
               </div>
 
               {cart.last_email_sent_at && (
-                <p className="text-xs text-zinc-500">Last email sent: {new Date(cart.last_email_sent_at).toLocaleString()}</p>
+                <p className="text-xs text-[var(--admin-text-muted)]">Last email sent: {new Date(cart.last_email_sent_at).toLocaleString()}</p>
               )}
               {cart.next_email_at && (
-                <p className="text-xs text-zinc-500">Next email: {new Date(cart.next_email_at).toLocaleString()}</p>
+                <p className="text-xs text-[var(--admin-text-muted)]">Next email: {new Date(cart.next_email_at).toLocaleString()}</p>
               )}
             </div>
           </div>
@@ -249,4 +249,4 @@ export default function AbandonedCartDashboard({ brandId }: Props) {
       )}
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/admin/WelcomeSequenceDashboard.tsx b/src/components/admin/WelcomeSequenceDashboard.tsx
index 0c99dd1..74df868 100644
--- a/src/components/admin/WelcomeSequenceDashboard.tsx
+++ b/src/components/admin/WelcomeSequenceDashboard.tsx
@@ -6,10 +6,10 @@ import { getWelcomeSequence, resendWelcomeEmail, type WelcomeSequenceEntry } fro
 type Props = { brandId: string };
 
 const STATUS_LABELS: Record<string, { en: string; color: string }> = {
-  active: { en: "Active", color: "bg-blue-900/40 text-blue-400 border border-blue-800" },
-  completed: { en: "Completed", color: "bg-emerald-900/40 text-emerald-400 border border-emerald-800" },
-  unsubscribed: { en: "Unsubscribed", color: "bg-red-900/40 text-red-400 border border-red-800" },
-  bounced: { en: "Bounced", color: "bg-amber-900/40 text-amber-400 border border-amber-800" },
+  active: { en: "Active", color: "bg-blue-50 text-blue-700 border border-blue-200" },
+  completed: { en: "Completed", color: "bg-green-50 text-green-700 border border-green-200" },
+  unsubscribed: { en: "Unsubscribed", color: "bg-red-50 text-red-700 border border-red-200" },
+  bounced: { en: "Bounced", color: "bg-amber-50 text-amber-700 border border-amber-200" },
 };
 
 const STEP_LABELS: Record<number, string> = {
@@ -62,14 +62,14 @@ export default function WelcomeSequenceDashboard({ brandId }: Props) {
       {/* Stats */}
       <div className="grid grid-cols-4 gap-4">
         {[
-          { label: "Total", value: stats.total, color: "text-zinc-100" },
-          { label: "Active", value: stats.active, color: "text-blue-400" },
-          { label: "Completed", value: stats.completed, color: "text-emerald-400" },
-          { label: "Unsubscribed", value: stats.unsubscribed, color: "text-red-400" },
+          { label: "Total", value: stats.total, color: "text-[var(--admin-text-primary)]" },
+          { label: "Active", value: stats.active, color: "text-blue-600" },
+          { label: "Completed", value: stats.completed, color: "text-green-600" },
+          { label: "Unsubscribed", value: stats.unsubscribed, color: "text-red-600" },
         ].map(s => (
-          <div key={s.label} className="bg-zinc-900 border border-zinc-800 rounded-2xl p-4 text-center">
+          <div key={s.label} className="bg-white border border-[var(--admin-border)] rounded-2xl p-4 text-center">
             <p className={`text-2xl font-black ${s.color}`}>{s.value}</p>
-            <p className="text-xs text-zinc-500 uppercase tracking-widest mt-1">{s.label}</p>
+            <p className="text-xs text-[var(--admin-text-muted)] uppercase tracking-widest mt-1">{s.label}</p>
           </div>
         ))}
       </div>
@@ -77,13 +77,13 @@ export default function WelcomeSequenceDashboard({ brandId }: Props) {
       {/* Filter + refresh + pagination */}
       <div className="flex items-center gap-3">
         <button onClick={load} disabled={loading}
-          className="text-xs font-semibold text-violet-400 hover:text-violet-300 transition-colors">
+          className="text-xs font-semibold text-[var(--admin-accent)] hover:text-[var(--admin-accent)]/80 transition-colors">
           {loading ? "Loading..." : "↻ Refresh"}
         </button>
         <div className="flex gap-2 ml-auto">
           {(["all", "active", "completed"] as const).map(f => (
             <button key={f} onClick={() => setFilter(f)}
-              className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition-all ${filter === f ? "bg-violet-600 text-white" : "bg-zinc-800 text-zinc-400 hover:text-zinc-200"}`}>
+              className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition-all ${filter === f ? "bg-[var(--admin-accent)] text-white" : "bg-stone-100 text-[var(--admin-text-secondary)] hover:bg-stone-200"}`}>
               {f.charAt(0).toUpperCase() + f.slice(1)}
             </button>
           ))}
@@ -91,12 +91,12 @@ export default function WelcomeSequenceDashboard({ brandId }: Props) {
         {totalPages > 1 && (
           <div className="flex items-center gap-1 ml-2">
             <button onClick={() => setPage(p => Math.max(0, p - 1))} disabled={page === 0}
-              className="flex h-7 w-7 items-center justify-center rounded border border-zinc-700 text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800 disabled:opacity-30 disabled:cursor-not-allowed transition-colors">
+              className="flex h-7 w-7 items-center justify-center rounded border border-[var(--admin-border)] text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)] hover:bg-stone-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors">
               <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" /></svg>
             </button>
-            <span className="text-xs text-zinc-500 px-1">{page + 1}/{totalPages}</span>
+            <span className="text-xs text-[var(--admin-text-muted)] px-1">{page + 1}/{totalPages}</span>
             <button onClick={() => setPage(p => Math.min(totalPages - 1, p + 1))} disabled={page >= totalPages - 1}
-              className="flex h-7 w-7 items-center justify-center rounded border border-zinc-700 text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800 disabled:opacity-30 disabled:cursor-not-allowed transition-colors">
+              className="flex h-7 w-7 items-center justify-center rounded border border-[var(--admin-border)] text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)] hover:bg-stone-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors">
               <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" /></svg>
             </button>
           </div>
@@ -105,14 +105,14 @@ export default function WelcomeSequenceDashboard({ brandId }: Props) {
 
       {/* Table */}
       {filtered.length === 0 ? (
-        <div className="bg-zinc-900 border border-zinc-800 rounded-2xl py-16 text-center">
-          <p className="text-zinc-600 text-sm">No entries{filter !== "all" ? ` (${filter})` : ""}</p>
+        <div className="bg-white border border-[var(--admin-border)] rounded-2xl py-16 text-center">
+          <p className="text-[var(--admin-text-muted)] text-sm">No entries{filter !== "all" ? ` (${filter})` : ""}</p>
         </div>
       ) : (
-        <div className="bg-zinc-900 border border-zinc-800 rounded-2xl overflow-hidden">
+        <div className="bg-white border border-[var(--admin-border)] rounded-2xl overflow-hidden">
           <table className="w-full text-sm">
             <thead>
-              <tr className="text-xs text-zinc-500 uppercase tracking-widest border-b border-zinc-800">
+              <tr className="text-xs text-[var(--admin-text-muted)] uppercase tracking-widest border-b border-[var(--admin-border)]">
                 <th className="text-left px-5 py-3 font-medium">Contact</th>
                 <th className="text-left px-5 py-3 font-medium">Language</th>
                 <th className="text-left px-5 py-3 font-medium">Step</th>
@@ -124,22 +124,22 @@ export default function WelcomeSequenceDashboard({ brandId }: Props) {
             </thead>
             <tbody>
               {paginatedEntries.map(e => {
-                const meta = STATUS_LABELS[e.status] ?? { en: e.status, color: "bg-zinc-800 text-zinc-400" };
+                const meta = STATUS_LABELS[e.status] ?? { en: e.status, color: "bg-stone-100 text-stone-500 border border-stone-200" };
                 return (
-                  <tr key={e.id} className="border-t border-zinc-800/60 hover:bg-zinc-800/30 transition-colors">
+                  <tr key={e.id} className="border-t border-[var(--admin-border)] hover:bg-stone-50 transition-colors">
                     <td className="px-5 py-3.5">
                       <div>
-                        <p className="text-zinc-200 font-medium text-sm">{e.contact_name ?? "—"}</p>
-                        <p className="text-zinc-500 text-xs">{e.contact_email}</p>
+                        <p className="text-[var(--admin-text-primary)] font-medium text-sm">{e.contact_name ?? "—"}</p>
+                        <p className="text-[var(--admin-text-muted)] text-xs">{e.contact_email}</p>
                       </div>
                     </td>
                     <td className="px-5 py-3.5">
-                      <span className="text-xs font-mono text-zinc-400 uppercase">{e.locale}</span>
+                      <span className="text-xs font-mono text-[var(--admin-text-muted)] uppercase">{e.locale}</span>
                     </td>
-                    <td className="px-5 py-3.5 text-xs text-zinc-400">
+                    <td className="px-5 py-3.5 text-xs text-[var(--admin-text-muted)]">
                       {STEP_LABELS[e.sequence_step] ?? e.sequence_step}
                       {e.next_email_at && e.status === "active" && (
-                        <span className="block text-zinc-600 text-[10px]">Next: {new Date(e.next_email_at).toLocaleString()}</span>
+                        <span className="block text-[var(--admin-text-muted)] text-[10px]">Next: {new Date(e.next_email_at).toLocaleString()}</span>
                       )}
                     </td>
                     <td className="px-5 py-3.5">
@@ -147,14 +147,14 @@ export default function WelcomeSequenceDashboard({ brandId }: Props) {
                         {meta.en}
                       </span>
                     </td>
-                    <td className="px-5 py-3.5 text-zinc-500 text-xs">{new Date(e.created_at).toLocaleDateString()}</td>
-                    <td className="px-5 py-3.5 text-zinc-500 text-xs">
+                    <td className="px-5 py-3.5 text-[var(--admin-text-muted)] text-xs">{new Date(e.created_at).toLocaleDateString()}</td>
+                    <td className="px-5 py-3.5 text-[var(--admin-text-muted)] text-xs">
                       {e.last_email_sent_at ? new Date(e.last_email_sent_at).toLocaleString() : "—"}
                     </td>
                     <td className="px-5 py-3.5 text-right">
                       {e.status !== "unsubscribed" && (
                         <button onClick={() => handleResend(e.id)} disabled={resending === e.id}
-                          className="text-xs text-violet-400 hover:text-violet-300 px-2 py-1 rounded-lg hover:bg-violet-900/20 transition-all">
+                          className="text-xs text-[var(--admin-accent)] hover:text-[var(--admin-accent)]/80 px-2 py-1 rounded-lg hover:bg-stone-100 transition-all">
                           {resending === e.id ? "..." : "Resend"}
                         </button>
                       )}
@@ -168,4 +168,4 @@ export default function WelcomeSequenceDashboard({ brandId }: Props) {
       )}
     </div>
   );
-}
+}
\ No newline at end of file