diff --git a/apps/dashboard/src/app/(auth)/layout.tsx b/apps/dashboard/src/app/(auth)/layout.tsx
index 3cce9bb..b4e0602 100644
--- a/apps/dashboard/src/app/(auth)/layout.tsx
+++ b/apps/dashboard/src/app/(auth)/layout.tsx
@@ -1,7 +1,7 @@
 export default function AuthLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="relative min-h-screen overflow-hidden bg-background">
-      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(16,185,129,0.12),transparent_36%),radial-gradient(circle_at_bottom_right,rgba(59,130,246,0.12),transparent_30%)]" />
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,var(--status-success-bg),transparent_36%),radial-gradient(circle_at_bottom_right,var(--status-info-bg),transparent_30%)]" />
       <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/40 to-transparent" />
       <div className="relative">{children}</div>
     </div>
diff --git a/apps/dashboard/src/app/globals.css b/apps/dashboard/src/app/globals.css
index 3c9d68b..4b2ff09 100644
--- a/apps/dashboard/src/app/globals.css
+++ b/apps/dashboard/src/app/globals.css
@@ -70,6 +70,37 @@
   --color-sidebar-primary: var(--sidebar-primary);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar: var(--sidebar);
+
+  /* ── Dark mode page tokens ── */
+  --color-bg-page: var(--bg-page);
+  --color-bg-card: var(--bg-card);
+  --color-bg-sidebar: var(--bg-sidebar);
+  --color-text-primary: var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
+  --color-border-color: var(--border-color);
+  --color-input-bg: var(--input-bg);
+  --color-input-border: var(--input-border);
+  --color-code-bg: var(--code-bg);
+
+  /* ── Chart theming tokens ── */
+  --color-chart-tick: var(--chart-tick);
+  --color-chart-grid: var(--chart-grid);
+  --color-chart-tooltip-bg: var(--chart-tooltip-bg);
+  --color-chart-tooltip-text: var(--chart-tooltip-text);
+
+  /* ── Status tokens ── */
+  --color-status-success-bg: var(--status-success-bg);
+  --color-status-success-text: var(--status-success-text);
+  --color-status-warning-bg: var(--status-warning-bg);
+  --color-status-warning-text: var(--status-warning-text);
+  --color-status-error-bg: var(--status-error-bg);
+  --color-status-error-text: var(--status-error-text);
+  --color-status-info-bg: var(--status-info-bg);
+  --color-status-info-text: var(--status-info-text);
+  --color-status-purple-bg: var(--status-purple-bg);
+  --color-status-purple-text: var(--status-purple-text);
+  --color-status-amber-bg: var(--status-amber-bg);
+  --color-status-amber-text: var(--status-amber-text);
 }
 
 @layer base {
@@ -90,6 +121,38 @@
 :root {
   --header-height: 3.5rem;
 
+  /* ── Dark mode specific tokens (dark-first) ── */
+  --bg-page: #0B1628;
+  --bg-card: #1A2332;
+  --bg-sidebar: #0F1D2E;
+  --text-primary: #F8F9FA;
+  --text-secondary: #6C757D;
+  --border-color: #2D3748;
+  --input-bg: #1A2332;
+  --input-border: #2D3748;
+  --code-bg: #0B1628;
+
+  /* ── Chart theming tokens ── */
+  --chart-tick: #F8F9FA;
+  --chart-grid: rgba(248, 249, 250, 0.08);
+  --chart-tooltip-bg: #1A2332;
+  --chart-tooltip-text: #F8F9FA;
+  --chart-tooltip-border: #2D3748;
+
+  /* ── Semantic status tokens ── */
+  --status-success-bg: rgba(34, 197, 94, 0.12);
+  --status-success-text: #4ade80;
+  --status-warning-bg: rgba(245, 158, 11, 0.12);
+  --status-warning-text: #fbbf24;
+  --status-error-bg: rgba(239, 68, 68, 0.12);
+  --status-error-text: #f87171;
+  --status-info-bg: rgba(59, 130, 246, 0.12);
+  --status-info-text: #60a5fa;
+  --status-purple-bg: rgba(168, 85, 247, 0.12);
+  --status-purple-text: #c084fc;
+  --status-amber-bg: rgba(245, 158, 11, 0.12);
+  --status-amber-text: #fbbf24;
+
   /* Sidebar uses Useroutr ink tiers for dark-first design */
   --sidebar: var(--ink2);
   --sidebar-foreground: var(--lead);
@@ -102,6 +165,35 @@
 }
 
 .light {
+  --bg-page: #FFFFFF;
+  --bg-card: #F8F9FA;
+  --bg-sidebar: #F3F4F6;
+  --text-primary: #1A202C;
+  --text-secondary: #6B7280;
+  --border-color: #E2E8F0;
+  --input-bg: #FFFFFF;
+  --input-border: #D1D5DB;
+  --code-bg: #F1F5F9;
+
+  --chart-tick: #1A202C;
+  --chart-grid: rgba(0, 0, 0, 0.08);
+  --chart-tooltip-bg: #FFFFFF;
+  --chart-tooltip-text: #1A202C;
+  --chart-tooltip-border: #E2E8F0;
+
+  --status-success-bg: rgba(34, 197, 94, 0.1);
+  --status-success-text: #16a34a;
+  --status-warning-bg: rgba(245, 158, 11, 0.1);
+  --status-warning-text: #d97706;
+  --status-error-bg: rgba(239, 68, 68, 0.1);
+  --status-error-text: #dc2626;
+  --status-info-bg: rgba(59, 130, 246, 0.1);
+  --status-info-text: #2563eb;
+  --status-purple-bg: rgba(168, 85, 247, 0.1);
+  --status-purple-text: #7c3aed;
+  --status-amber-bg: rgba(245, 158, 11, 0.1);
+  --status-amber-text: #d97706;
+
   --sidebar: oklch(0.975 0.003 265);
   --sidebar-foreground: oklch(0.15 0.01 265);
   --sidebar-primary: var(--blue);
@@ -113,14 +205,14 @@
 }
 
 .dark {
-  --sidebar: hsl(240 5.9% 10%);
-  --sidebar-foreground: hsl(240 4.8% 95.9%);
-  --sidebar-primary: hsl(224.3 76.3% 48%);
-  --sidebar-primary-foreground: hsl(0 0% 100%);
-  --sidebar-accent: hsl(240 3.7% 15.9%);
-  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
-  --sidebar-border: hsl(240 3.7% 15.9%);
-  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+  --sidebar: var(--bg-sidebar);
+  --sidebar-foreground: var(--text-primary);
+  --sidebar-primary: var(--blue);
+  --sidebar-primary-foreground: #FFFFFF;
+  --sidebar-accent: #1E293B;
+  --sidebar-accent-foreground: var(--text-primary);
+  --sidebar-border: var(--border-color);
+  --sidebar-ring: var(--blue2);
 }
 
 /* ── Modern card surface ── */
diff --git a/apps/dashboard/src/app/layout.tsx b/apps/dashboard/src/app/layout.tsx
index 11fb4c1..ba1fb9f 100644
--- a/apps/dashboard/src/app/layout.tsx
+++ b/apps/dashboard/src/app/layout.tsx
@@ -6,6 +6,7 @@ import { QueryProvider } from "@/providers/QueryProvider";
 import { AuthProvider } from "@/providers/AuthProvider";
 import "./globals.css";
 import { ToastProvider } from "@useroutr/ui";
+import { TooltipProvider } from "@/components/ui/tooltip";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -34,12 +35,21 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `(function(){try{var p=localStorage.getItem("useroutr-theme");var t=p==="dark"?"dark":p==="light"?"light":window.matchMedia("(prefers-color-scheme:dark)").matches?"dark":"light";document.documentElement.classList.add(t)}catch(e){}})()`,
+          }}
+        />
+      </head>
       <body className={`${inter.variable} ${openSans.variable} antialiased`}>
         <ThemeProvider>
           <QueryProvider>
             <Suspense>
               <AuthProvider>
-                <ToastProvider>{children}</ToastProvider>
+                <TooltipProvider>
+                  <ToastProvider>{children}</ToastProvider>
+                </TooltipProvider>
               </AuthProvider>
             </Suspense>
           </QueryProvider>
diff --git a/apps/dashboard/src/components/analytics/AnalyticsDashboard.tsx b/apps/dashboard/src/components/analytics/AnalyticsDashboard.tsx
index b183228..f4d692f 100644
--- a/apps/dashboard/src/components/analytics/AnalyticsDashboard.tsx
+++ b/apps/dashboard/src/components/analytics/AnalyticsDashboard.tsx
@@ -111,9 +111,9 @@ const PERIOD_OPTIONS: Array<{ value: Period; label: string }> = [
 ];
 
 const PAYMENT_COLORS: Record<PaymentMethod, string> = {
-  card: "#3b82f6",
-  crypto: "#14b8a6",
-  bank: "#f59e0b",
+  card: "var(--blue)",
+  crypto: "var(--teal)",
+  bank: "var(--amber)",
 };
 
 const WEEKDAY_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
@@ -782,7 +782,7 @@ function RevenueChart({
                 x2={width}
                 y1={y}
                 y2={y}
-                stroke="rgba(148,163,184,0.22)"
+                stroke="var(--chart-grid)"
                 strokeDasharray="4 6"
               />
             );
@@ -806,7 +806,7 @@ function RevenueChart({
                   width={barWidth}
                   height={barHeight}
                   rx={8}
-                  fill={active ? "#1d4ed8" : "#3b82f6"}
+                  fill={active ? "var(--blue)" : "var(--blue2)"}
                   opacity={active ? 1 : 0.82}
                 />
                 <text
@@ -814,7 +814,7 @@ function RevenueChart({
                   y={height - 18}
                   textAnchor="middle"
                   fontSize="11"
-                  fill="rgba(100,116,139,1)"
+                  fill="var(--chart-tick)"
                 >
                   {point.label}
                 </text>
@@ -826,13 +826,13 @@ function RevenueChart({
                       width={106}
                       height={30}
                       rx={10}
-                      fill="rgba(15,23,42,0.95)"
+                      fill="var(--chart-tooltip-bg)"
                     />
                     <text
                       x={Math.max(18, x - 18)}
                       y={Math.max(28, y - 18)}
                       fontSize="11"
-                      fill="#ffffff"
+                      fill="var(--chart-tooltip-text)"
                     >
                       {formatCompactMoney(point.amount)}
                     </text>
@@ -880,7 +880,7 @@ function PaymentMethodCard({
               cy="70"
               r={radius}
               fill="none"
-              stroke="rgba(148,163,184,0.18)"
+              stroke="var(--chart-grid)"
               strokeWidth="20"
             />
             {segments.map((segment) => {
@@ -983,8 +983,8 @@ function ConversionCard({
         >
           <defs>
             <linearGradient id="conversion-fill-dashboard" x1="0" x2="0" y1="0" y2="1">
-              <stop offset="0%" stopColor="rgba(20,184,166,0.35)" />
-              <stop offset="100%" stopColor="rgba(20,184,166,0.02)" />
+              <stop offset="0%" stopColor="var(--teal)" stopOpacity={0.35} />
+              <stop offset="100%" stopColor="var(--teal)" stopOpacity={0.02} />
             </linearGradient>
           </defs>
           <path
@@ -994,7 +994,7 @@ function ConversionCard({
           <path
             d={path}
             fill="none"
-            stroke="#14b8a6"
+            stroke="var(--teal)"
             strokeWidth="3"
             strokeLinecap="round"
             strokeLinejoin="round"
@@ -1058,7 +1058,7 @@ function FailureHeatmap({
   const maxCount = Math.max(...byHour.map((cell) => cell.count), 1);
   const getColor = (count: number) => {
     const alpha = count / maxCount;
-    return `rgba(239,68,68,${0.1 + alpha * 0.75})`;
+    return `color-mix(in srgb, var(--red) ${Math.round((0.1 + alpha * 0.75) * 100)}%, transparent)`;
   };
 
   return (
diff --git a/apps/dashboard/src/components/invoices/InvoiceDetailSheet.tsx b/apps/dashboard/src/components/invoices/InvoiceDetailSheet.tsx
index 3d7e594..060eac1 100644
--- a/apps/dashboard/src/components/invoices/InvoiceDetailSheet.tsx
+++ b/apps/dashboard/src/components/invoices/InvoiceDetailSheet.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { useState } from "react";
 import {
@@ -34,15 +34,15 @@ import { SendInvoiceModal } from "./SendInvoiceModal";
 import { InvoicePdfPreview } from "./InvoicePdfPreview";
 import type { Invoice, InvoiceStatus } from "@/hooks/useInvoices";
 
-// ── Status badge ───────────────────────────────────────────────────────────────
+// ── Status badge ───────────────────────────────────────────────────────────────
 
 const STATUS_CONFIG: Record<InvoiceStatus, { label: string; className: string }> = {
   DRAFT: { label: "Draft", className: "bg-muted text-muted-foreground" },
-  SENT: { label: "Sent", className: "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300" },
-  VIEWED: { label: "Viewed", className: "bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300" },
-  PARTIALLY_PAID: { label: "Partially Paid", className: "bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300" },
-  PAID: { label: "Paid", className: "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300" },
-  OVERDUE: { label: "Overdue", className: "bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300" },
+  SENT: { label: "Sent", className: "bg-status-info-bg text-status-info-text" },
+  VIEWED: { label: "Viewed", className: "bg-status-purple-bg text-status-purple-text" },
+  PARTIALLY_PAID: { label: "Partially Paid", className: "bg-status-amber-bg text-status-amber-text" },
+  PAID: { label: "Paid", className: "bg-status-success-bg text-status-success-text" },
+  OVERDUE: { label: "Overdue", className: "bg-status-error-bg text-status-error-text" },
   CANCELLED: { label: "Cancelled", className: "bg-muted text-muted-foreground" },
 };
 
@@ -55,7 +55,7 @@ function StatusBadge({ status }: { status: InvoiceStatus }) {
   );
 }
 
-// ── Activity timeline ─────────────────────────────────────────────────────────
+// ── Activity timeline ─────────────────────────────────────────────────────────
 
 interface TimelineEvent {
   key: string;
@@ -239,7 +239,7 @@ function ActivityTimeline({ invoice }: { invoice: Invoice }) {
   );
 }
 
-// ── Props ──────────────────────────────────────────────────────────────────────
+// ── Props ──────────────────────────────────────────────────────────────────────
 
 interface InvoiceDetailSheetProps {
   invoice: Invoice | null;
@@ -254,7 +254,7 @@ interface InvoiceDetailSheetProps {
   isSendPending?: boolean;
 }
 
-// ── Helpers ────────────────────────────────────────────────────────────────────
+// ── Helpers ────────────────────────────────────────────────────────────────────
 
 function fmtCurrency(amount: string | number, currency: string) {
   const num = typeof amount === "string" ? parseFloat(amount) : amount;
@@ -263,7 +263,7 @@ function fmtCurrency(amount: string | number, currency: string) {
 }
 
 function fmtDate(iso?: string | null) {
-  if (!iso) return "—";
+  if (!iso) return "—";
   return new Date(iso).toLocaleDateString("en-US", {
     year: "numeric",
     month: "long",
@@ -271,7 +271,7 @@ function fmtDate(iso?: string | null) {
   });
 }
 
-// ── Component ──────────────────────────────────────────────────────────────────
+// ── Component ──────────────────────────────────────────────────────────────────
 
 export function InvoiceDetailSheet({
   invoice,
@@ -305,7 +305,7 @@ export function InvoiceDetailSheet({
     <>
       <Sheet open={open} onOpenChange={onOpenChange}>
         <SheetContent className="w-full sm:max-w-[520px] flex flex-col gap-0 p-0 overflow-hidden">
-          {/* ── Header ── */}
+          {/* ── Header ── */}
           <SheetHeader className="px-6 py-4 border-b border-border shrink-0">
             <div className="flex items-start justify-between gap-3 pr-6">
               <div className="space-y-1.5 min-w-0">
@@ -334,7 +334,7 @@ export function InvoiceDetailSheet({
             </div>
           </SheetHeader>
 
-          {/* ── Scrollable body ── */}
+          {/* ── Scrollable body ── */}
           <div className="flex-1 overflow-y-auto">
             <div className="px-6 py-5 space-y-6">
 
@@ -402,7 +402,7 @@ export function InvoiceDetailSheet({
                     </p>
                     <p
                       className={`text-sm font-medium ${
-                        invoice.status === "OVERDUE" ? "text-red-600" : "text-foreground"
+                        invoice.status === "OVERDUE" ? "text-status-error-text" : "text-foreground"
                       }`}
                     >
                       {fmtDate(invoice.dueDate)}
@@ -412,7 +412,7 @@ export function InvoiceDetailSheet({
                 {invoice.paidAt && (
                   <div className="space-y-1">
                     <p className="text-xs text-muted-foreground">Paid On</p>
-                    <p className="text-sm font-medium text-green-600">{fmtDate(invoice.paidAt)}</p>
+                    <p className="text-sm font-medium text-status-success-text">{fmtDate(invoice.paidAt)}</p>
                   </div>
                 )}
               </section>
@@ -464,8 +464,8 @@ export function InvoiceDetailSheet({
                 {discount > 0 && (
                   <div className="flex justify-between text-muted-foreground">
                     <span>Discount</span>
-                    <span className="tabular-nums text-green-600">
-                      −{fmtCurrency(discount, invoice.currency)}
+                    <span className="tabular-nums text-status-success-text">
+                      −{fmtCurrency(discount, invoice.currency)}
                     </span>
                   </div>
                 )}
@@ -476,7 +476,7 @@ export function InvoiceDetailSheet({
                 </div>
                 {amountPaid > 0 && (
                   <>
-                    <div className="flex justify-between text-green-600 text-xs">
+                    <div className="flex justify-between text-status-success-text text-xs">
                       <span>Amount Paid</span>
                       <span className="tabular-nums">{fmtCurrency(amountPaid, invoice.currency)}</span>
                     </div>
@@ -494,10 +494,10 @@ export function InvoiceDetailSheet({
                   <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                     Payment Details
                   </h3>
-                  <div className="rounded-lg border border-border bg-green-50/50 dark:bg-green-900/10 p-4 space-y-2 text-sm">
+                  <div className="rounded-lg border border-border bg-status-success-bg p-4 space-y-2 text-sm">
                     <div className="flex items-center gap-2">
-                      <CheckCircle2 className="h-4 w-4 text-green-600 shrink-0" />
-                      <span className="font-medium text-green-700 dark:text-green-400">
+                      <CheckCircle2 className="h-4 w-4 text-status-success-text shrink-0" />
+                      <span className="font-medium text-status-success-text">
                         {invoice.status === "PAID" ? "Fully paid" : "Partially paid"}
                       </span>
                     </div>
@@ -517,7 +517,7 @@ export function InvoiceDetailSheet({
                       {amountDue > 0 && (
                         <div className="space-y-0.5">
                           <p className="text-xs text-muted-foreground">Balance due</p>
-                          <p className="font-semibold text-amber-600">
+                          <p className="font-semibold text-status-amber-text">
                             {fmtCurrency(amountDue, invoice.currency)}
                           </p>
                         </div>
@@ -554,7 +554,7 @@ export function InvoiceDetailSheet({
             </div>
           </div>
 
-          {/* ── Footer actions ── */}
+          {/* ── Footer actions ── */}
           <div className="shrink-0 border-t border-border px-6 py-4 space-y-2">
             {/* Primary row: Edit + Send */}
             {isDraft && (
@@ -615,7 +615,7 @@ export function InvoiceDetailSheet({
         </SheetContent>
       </Sheet>
 
-      {/* ── Send modal (rendered outside sheet to avoid z-index nesting issues) ── */}
+      {/* ── Send modal (rendered outside sheet to avoid z-index nesting issues) ── */}
       <SendInvoiceModal
         invoice={invoice}
         open={sendModalOpen}
@@ -624,7 +624,7 @@ export function InvoiceDetailSheet({
         isSending={isSendPending}
       />
 
-      {/* ── PDF preview dialog ── */}
+      {/* ── PDF preview dialog ── */}
       <InvoicePdfPreview
         invoice={invoice}
         open={pdfPreviewOpen}
diff --git a/apps/dashboard/src/components/invoices/InvoiceDrawer.tsx b/apps/dashboard/src/components/invoices/InvoiceDrawer.tsx
index 494c5a7..b3d0aa1 100644
--- a/apps/dashboard/src/components/invoices/InvoiceDrawer.tsx
+++ b/apps/dashboard/src/components/invoices/InvoiceDrawer.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { useState, useCallback } from "react";
 import { z } from "zod";
@@ -18,14 +18,14 @@ import {
 } from "@useroutr/ui";
 import type { CreateInvoiceInput, Invoice } from "@/hooks/useInvoices";
 
-// ── Validation schema ──────────────────────────────────────────────────────────
+// ── Validation schema ──────────────────────────────────────────────────────────
 
 const LineItemSchema = z.object({
   description: z.string().min(1, "Description is required"),
   qty: z.number({ invalid_type_error: "Must be a number" }).positive("Qty > 0"),
   unitPrice: z
     .number({ invalid_type_error: "Must be a number" })
-    .nonnegative("Price ≥ 0"),
+    .nonnegative("Price ≥ 0"),
 });
 
 const InvoiceSchema = z.object({
@@ -44,7 +44,7 @@ const InvoiceSchema = z.object({
 
 type FormErrors = Partial<Record<string, string>>;
 
-// ── Line item helpers ──────────────────────────────────────────────────────────
+// ── Line item helpers ──────────────────────────────────────────────────────────
 
 interface LineItemRow {
   id: string;
@@ -80,7 +80,7 @@ function computeTotals(
   return { subtotal, taxAmount, total };
 }
 
-// ── Props ──────────────────────────────────────────────────────────────────────
+// ── Props ──────────────────────────────────────────────────────────────────────
 
 interface InvoiceDrawerProps {
   open: boolean;
@@ -92,7 +92,7 @@ interface InvoiceDrawerProps {
   isLoading?: boolean;
 }
 
-// ── Component ──────────────────────────────────────────────────────────────────
+// ── Component ──────────────────────────────────────────────────────────────────
 
 export function InvoiceDrawer({
   open,
@@ -104,12 +104,12 @@ export function InvoiceDrawer({
 }: InvoiceDrawerProps) {
   const isEditing = !!invoice;
 
-  // ── Customer fields ──────────────────────────────────────────────────────────
+  // ── Customer fields ──────────────────────────────────────────────────────────
   const [customerEmail, setCustomerEmail] = useState(invoice?.customerEmail ?? "");
   const [customerName, setCustomerName] = useState(invoice?.customerName ?? "");
   const [invoiceNumber, setInvoiceNumber] = useState(invoice?.invoiceNumber ?? "");
 
-  // ── Line items ───────────────────────────────────────────────────────────────
+  // ── Line items ───────────────────────────────────────────────────────────────
   const [rows, setRows] = useState<LineItemRow[]>(() => {
     if (invoice?.lineItems?.length) {
       return invoice.lineItems.map((li) => ({
@@ -122,7 +122,7 @@ export function InvoiceDrawer({
     return [emptyRow()];
   });
 
-  // ── Pricing ──────────────────────────────────────────────────────────────────
+  // ── Pricing ──────────────────────────────────────────────────────────────────
   const [currency, setCurrency] = useState(invoice?.currency ?? "USD");
   const [taxRate, setTaxRate] = useState(
     invoice?.taxRate ? String(Number(invoice.taxRate) * 100) : "",
@@ -131,21 +131,21 @@ export function InvoiceDrawer({
     invoice?.discount ? String(Number(invoice.discount)) : "",
   );
 
-  // ── Meta ─────────────────────────────────────────────────────────────────────
+  // ── Meta ─────────────────────────────────────────────────────────────────────
   const [dueDate, setDueDate] = useState(
     invoice?.dueDate ? invoice.dueDate.split("T")[0] : "",
   );
   const [notes, setNotes] = useState(invoice?.notes ?? "");
 
-  // ── Errors ───────────────────────────────────────────────────────────────────
+  // ── Errors ───────────────────────────────────────────────────────────────────
   const [errors, setErrors] = useState<FormErrors>({});
 
-  // ── Computed totals ───────────────────────────────────────────────────────────
+  // ── Computed totals ───────────────────────────────────────────────────────────
   const taxRatePct = parseFloat(taxRate) || 0;
   const discountAmt = parseFloat(discount) || 0;
   const { subtotal, taxAmount, total } = computeTotals(rows, taxRatePct, discountAmt);
 
-  // ── Row handlers ──────────────────────────────────────────────────────────────
+  // ── Row handlers ──────────────────────────────────────────────────────────────
   const addRow = () => setRows((prev) => [...prev, emptyRow()]);
 
   const removeRow = useCallback((id: string) => {
@@ -166,7 +166,7 @@ export function InvoiceDrawer({
     [],
   );
 
-  // ── Validation ────────────────────────────────────────────────────────────────
+  // ── Validation ────────────────────────────────────────────────────────────────
   const validate = (): CreateInvoiceInput | null => {
     const lineItemsForValidation = rows.map(rowToItem);
 
@@ -259,7 +259,7 @@ export function InvoiceDrawer({
           </DialogDescription>
         </DialogHeader>
 
-        {/* ── Scrollable body ── */}
+        {/* ── Scrollable body ── */}
         <div className="flex-1 overflow-y-auto space-y-5 py-1 pr-1">
 
           {/* Client details */}
@@ -466,7 +466,7 @@ export function InvoiceDrawer({
               {discountAmt > 0 && (
                 <div className="flex justify-between text-muted-foreground">
                   <span>Discount</span>
-                  <span className="text-green-600">−{fmtCurrency(discountAmt)}</span>
+                  <span className="text-status-success-text">−{fmtCurrency(discountAmt)}</span>
                 </div>
               )}
               <Separator className="my-1" />
@@ -496,7 +496,7 @@ export function InvoiceDrawer({
               </Label>
               <textarea
                 id="inv-notes"
-                placeholder="Payment terms, thank you note, instructions…"
+                placeholder="Payment terms, thank you note, instructions…"
                 value={notes}
                 onChange={(e) => setNotes(e.target.value)}
                 rows={3}
@@ -506,7 +506,7 @@ export function InvoiceDrawer({
           </section>
         </div>
 
-        {/* ── Footer ── */}
+        {/* ── Footer ── */}
         <DialogFooter className="mt-4 gap-2 sm:gap-0">
           <Button
             type="button"
diff --git a/apps/dashboard/src/components/invoices/InvoicesTable.tsx b/apps/dashboard/src/components/invoices/InvoicesTable.tsx
index ae5b706..ad16032 100644
--- a/apps/dashboard/src/components/invoices/InvoicesTable.tsx
+++ b/apps/dashboard/src/components/invoices/InvoicesTable.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { useState } from "react";
 import {
@@ -25,15 +25,15 @@ import {
 } from "@/components/ui/dropdown-menu";
 import type { Invoice, InvoiceStatus } from "@/hooks/useInvoices";
 
-// ── Status badge ───────────────────────────────────────────────────────────────
+// ── Status badge ───────────────────────────────────────────────────────────────
 
 const STATUS_CONFIG: Record<InvoiceStatus, { label: string; className: string }> = {
   DRAFT: { label: "Draft", className: "bg-muted text-muted-foreground" },
-  SENT: { label: "Sent", className: "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300" },
-  VIEWED: { label: "Viewed", className: "bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300" },
-  PARTIALLY_PAID: { label: "Partial", className: "bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300" },
-  PAID: { label: "Paid", className: "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300" },
-  OVERDUE: { label: "Overdue", className: "bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300" },
+  SENT: { label: "Sent", className: "bg-status-info-bg text-status-info-text" },
+  VIEWED: { label: "Viewed", className: "bg-status-purple-bg text-status-purple-text" },
+  PARTIALLY_PAID: { label: "Partial", className: "bg-status-amber-bg text-status-amber-text" },
+  PAID: { label: "Paid", className: "bg-status-success-bg text-status-success-text" },
+  OVERDUE: { label: "Overdue", className: "bg-status-error-bg text-status-error-text" },
   CANCELLED: { label: "Cancelled", className: "bg-muted text-muted-foreground line-through" },
 };
 
@@ -46,7 +46,7 @@ function StatusBadge({ status }: { status: InvoiceStatus }) {
   );
 }
 
-// ── Sort indicator ─────────────────────────────────────────────────────────────
+// ── Sort indicator ─────────────────────────────────────────────────────────────
 
 function SortIcon({ col, sortBy, sortOrder }: { col: string; sortBy?: string; sortOrder?: "asc" | "desc" }) {
   if (sortBy !== col) return <ChevronsUpDown className="h-3 w-3 opacity-40" />;
@@ -55,7 +55,7 @@ function SortIcon({ col, sortBy, sortOrder }: { col: string; sortBy?: string; so
     : <ChevronDown className="h-3 w-3" />;
 }
 
-// ── Skeleton row ───────────────────────────────────────────────────────────────
+// ── Skeleton row ───────────────────────────────────────────────────────────────
 
 function SkeletonRow() {
   return (
@@ -68,7 +68,7 @@ function SkeletonRow() {
   );
 }
 
-// ── Empty state ────────────────────────────────────────────────────────────────
+// ── Empty state ────────────────────────────────────────────────────────────────
 
 function EmptyState({ onCreate }: { onCreate: () => void }) {
   return (
@@ -89,7 +89,7 @@ function EmptyState({ onCreate }: { onCreate: () => void }) {
   );
 }
 
-// ── Props ──────────────────────────────────────────────────────────────────────
+// ── Props ──────────────────────────────────────────────────────────────────────
 
 interface InvoicesTableProps {
   invoices: Invoice[];
@@ -107,7 +107,7 @@ interface InvoicesTableProps {
   onCreate: () => void;
 }
 
-// ── Sortable header cell ──────────────────────────────────────────────────────
+// ── Sortable header cell ──────────────────────────────────────────────────────
 
 function SortableHeader({
   label,
@@ -135,7 +135,7 @@ function SortableHeader({
   );
 }
 
-// ── Main component ────────────────────────────────────────────────────────────
+// ── Main component ────────────────────────────────────────────────────────────
 
 export function InvoicesTable({
   invoices,
@@ -162,7 +162,7 @@ export function InvoicesTable({
   };
 
   const fmtDate = (iso?: string) => {
-    if (!iso) return "—";
+    if (!iso) return "—";
     return new Date(iso).toLocaleDateString("en-US", {
       year: "numeric",
       month: "short",
@@ -245,12 +245,12 @@ export function InvoicesTable({
                     {fmtCurrency(inv.total, inv.currency)}
                   </span>
                   {parseFloat(inv.amountPaid ?? "0") > 0 && inv.status !== "PAID" && (
-                    <span className="text-xs text-green-600">
+                    <span className="text-xs text-status-success-text">
                       +{fmtCurrency(inv.amountPaid, inv.currency)} paid
                     </span>
                   )}
                   {inv.status === "PARTIALLY_PAID" && (
-                    <span className="text-xs text-amber-600">
+                    <span className="text-xs text-status-amber-text">
                       {fmtCurrency(String(amountDue), inv.currency)} due
                     </span>
                   )}
@@ -262,7 +262,7 @@ export function InvoicesTable({
                 {/* Due date */}
                 <span
                   className={`text-sm tabular-nums ${
-                    inv.status === "OVERDUE" ? "text-red-600 font-medium" : "text-muted-foreground"
+                    inv.status === "OVERDUE" ? "text-status-error-text font-medium" : "text-muted-foreground"
                   }`}
                 >
                   {fmtDate(inv.dueDate)}
diff --git a/apps/dashboard/src/components/layout/Topbar.tsx b/apps/dashboard/src/components/layout/Topbar.tsx
index d844289..7d813b2 100644
--- a/apps/dashboard/src/components/layout/Topbar.tsx
+++ b/apps/dashboard/src/components/layout/Topbar.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Bell, Moon, Search, Sun, LogOut, Settings, User } from "lucide-react";
+import { Bell, Moon, Monitor, Search, Sun, LogOut, Settings, User } from "lucide-react";
 import { useTheme } from "@/providers/ThemeProvider";
 import { useAuth } from "@/providers/AuthProvider";
 import {
@@ -17,7 +17,7 @@ interface TopbarProps {
 }
 
 export function Topbar({ title }: TopbarProps) {
-  const { theme, toggleTheme } = useTheme();
+  const { preference, toggleTheme } = useTheme();
   const { merchant, logout } = useAuth();
 
   const initials = merchant?.name
@@ -47,11 +47,21 @@ export function Topbar({ title }: TopbarProps) {
         <button
           onClick={toggleTheme}
           className="rounded-md p-2 text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+          aria-label={`Theme: ${preference}`}
+          title={
+            preference === "light"
+              ? "Light mode — click for dark"
+              : preference === "dark"
+                ? "Dark mode — click for system"
+                : "System mode — click for light"
+          }
         >
-          {theme === "dark" ? (
+          {preference === "dark" ? (
+            <Moon className="size-5" />
+          ) : preference === "light" ? (
             <Sun className="size-5" />
           ) : (
-            <Moon className="size-5" />
+            <Monitor className="size-5" />
           )}
         </button>
 
diff --git a/apps/dashboard/src/components/links/LinkCreatedModal.tsx b/apps/dashboard/src/components/links/LinkCreatedModal.tsx
index bef92d9..fbf060d 100644
--- a/apps/dashboard/src/components/links/LinkCreatedModal.tsx
+++ b/apps/dashboard/src/components/links/LinkCreatedModal.tsx
@@ -105,7 +105,7 @@ export function LinkCreatedModal({
             {/* QR Code Preview */}
             <div className="space-y-2">
               <Label>QR Code</Label>
-              <div className="flex items-center justify-center rounded-lg border border-[var(--border)] bg-white p-4">
+              <div className="flex items-center justify-center rounded-lg border border-[var(--border)] bg-card p-4">
                 <QRCodeSVG
                   value={linkUrl}
                   size={150}
diff --git a/apps/dashboard/src/components/links/QRCodeModal.tsx b/apps/dashboard/src/components/links/QRCodeModal.tsx
index d028b60..e7d8e98 100644
--- a/apps/dashboard/src/components/links/QRCodeModal.tsx
+++ b/apps/dashboard/src/components/links/QRCodeModal.tsx
@@ -79,7 +79,7 @@ export function QRCodeModal({ open, onOpenChange, url, linkName }: QRCodeModalPr
         </DialogHeader>
 
         <div className="flex flex-col items-center justify-center py-4">
-          <div className="rounded-lg border border-[var(--border)] bg-white p-4 shadow-sm">
+          <div className="rounded-lg border border-[var(--border)] bg-card p-4 shadow-sm">
             <QRCodeSVG
               value={url}
               size={200}
diff --git a/apps/dashboard/src/components/overview/GreetingHeader.tsx b/apps/dashboard/src/components/overview/GreetingHeader.tsx
index 30a8e90..0a5b34a 100644
--- a/apps/dashboard/src/components/overview/GreetingHeader.tsx
+++ b/apps/dashboard/src/components/overview/GreetingHeader.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { useMemo } from "react";
 import { motion } from "framer-motion";
@@ -29,14 +29,14 @@ export function GreetingHeader({
     >
       <div>
         <h1 className="text-2xl font-bold tracking-tight text-foreground">
-          {greeting}, {merchantName} 👋
+          {greeting}, {merchantName} 👋
         </h1>
         <p className="mt-1 text-sm text-muted-foreground">
           Here&apos;s what&apos;s happening with your business today.
         </p>
       </div>
       <div className="hidden items-center gap-2 rounded-full border bg-card px-3 py-1.5 text-xs font-medium text-muted-foreground sm:flex">
-        <Activity className="h-3 w-3 text-emerald-500" />
+        <Activity className="h-3 w-3 text-status-success-text" />
         Live
       </div>
     </motion.div>
diff --git a/apps/dashboard/src/components/overview/MetricCard.tsx b/apps/dashboard/src/components/overview/MetricCard.tsx
index f820716..ad4d813 100644
--- a/apps/dashboard/src/components/overview/MetricCard.tsx
+++ b/apps/dashboard/src/components/overview/MetricCard.tsx
@@ -96,8 +96,8 @@ export function MetricCard({
             <div
               className={`inline-flex w-fit items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold ${
                 isPositive
-                  ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
-                  : "bg-red-500/10 text-red-600 dark:text-red-400"
+                  ? "bg-status-success-bg text-status-success-text"
+                  : "bg-status-error-bg text-status-error-text"
               }`}
             >
               {isPositive ? (
@@ -122,7 +122,7 @@ export function MetricCard({
                   <Line
                     type="monotone"
                     dataKey="v"
-                    stroke={isPositive ? "var(--success, #22c55e)" : "var(--destructive, #ef4444)"}
+                    stroke={isPositive ? "var(--success)" : "var(--destructive)"}
                     strokeWidth={2}
                     dot={false}
                     animationDuration={400}
diff --git a/apps/dashboard/src/components/site-header.tsx b/apps/dashboard/src/components/site-header.tsx
index 294634a..951d3a6 100644
--- a/apps/dashboard/src/components/site-header.tsx
+++ b/apps/dashboard/src/components/site-header.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { usePathname } from "next/navigation";
-import { Bell, Moon, SidebarIcon, Sun } from "lucide-react";
+import { Bell, Moon, Monitor, SidebarIcon, Sun } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
@@ -14,6 +14,11 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { useTheme } from "@/providers/ThemeProvider";
 
 const routeLabels: Record<string, string> = {
@@ -32,7 +37,7 @@ const routeLabels: Record<string, string> = {
 
 export function SiteHeader() {
   const { toggleSidebar } = useSidebar();
-  const { theme, toggleTheme } = useTheme();
+  const { preference, toggleTheme } = useTheme();
   const pathname = usePathname();
 
   const segments = pathname.split("/").filter(Boolean);
@@ -80,18 +85,32 @@ export function SiteHeader() {
           <Button variant="ghost" size="icon" className="h-8 w-8">
             <Bell className="size-4" />
           </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-8 w-8"
-            onClick={toggleTheme}
-          >
-            {theme === "dark" ? (
-              <Sun className="size-4" />
-            ) : (
-              <Moon className="size-4" />
-            )}
-          </Button>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={toggleTheme}
+                aria-label={`Theme: ${preference}`}
+              >
+                {preference === "dark" ? (
+                  <Moon className="size-4" />
+                ) : preference === "light" ? (
+                  <Sun className="size-4" />
+                ) : (
+                  <Monitor className="size-4" />
+                )}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              {preference === "light"
+                ? "Light mode — click for dark"
+                : preference === "dark"
+                  ? "Dark mode — click for system"
+                  : "System mode — click for light"}
+            </TooltipContent>
+          </Tooltip>
         </div>
       </div>
     </header>
diff --git a/apps/dashboard/src/providers/ThemeProvider.tsx b/apps/dashboard/src/providers/ThemeProvider.tsx
index c9a8990..82d3ceb 100644
--- a/apps/dashboard/src/providers/ThemeProvider.tsx
+++ b/apps/dashboard/src/providers/ThemeProvider.tsx
@@ -1,38 +1,84 @@
 "use client";
 
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useState, useCallback } from "react";
 
-type Theme = "light" | "dark";
+type ThemePreference = "light" | "dark" | "system";
+type ResolvedTheme = "light" | "dark";
 
 interface ThemeContextValue {
-  theme: Theme;
+  /** The user's preference: light, dark, or system */
+  preference: ThemePreference;
+  /** The resolved theme applied to the DOM: light or dark */
+  theme: ResolvedTheme;
+  /** Cycle through light → dark → system */
   toggleTheme: () => void;
-  setTheme: (theme: Theme) => void;
+  /** Set an explicit preference */
+  setPreference: (preference: ThemePreference) => void;
 }
 
 const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
 
+const STORAGE_KEY = "useroutr-theme";
+
+function resolveTheme(preference: ThemePreference): ResolvedTheme {
+  if (preference === "system") {
+    if (typeof window === "undefined") return "light";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  return preference;
+}
+
+function applyThemeToDOM(theme: ResolvedTheme) {
+  const root = document.documentElement;
+  root.classList.remove("light", "dark");
+  root.classList.add(theme);
+}
+
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  const [theme, setTheme] = useState<Theme>("light");
+  const [preference, setPreferenceState] = useState<ThemePreference>("system");
+  const [theme, setTheme] = useState<ResolvedTheme>("light");
 
+  // Initialize from localStorage or system preference
   useEffect(() => {
-    const stored = localStorage.getItem("useroutr-theme") as Theme | null;
-    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    const initial = stored ?? (prefersDark ? "dark" : "light");
-    setTheme(initial);
+    const stored = localStorage.getItem(STORAGE_KEY) as ThemePreference | null;
+    const initial: ThemePreference = stored ?? "system";
+    setPreferenceState(initial);
+    const resolved = resolveTheme(initial);
+    setTheme(resolved);
+    applyThemeToDOM(resolved);
   }, []);
 
+  // Listen for system preference changes when in "system" mode
   useEffect(() => {
-    const root = document.documentElement;
-    root.classList.remove("light", "dark");
-    root.classList.add(theme);
-    localStorage.setItem("useroutr-theme", theme);
-  }, [theme]);
+    if (preference !== "system") return;
+
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = (e: MediaQueryListEvent) => {
+      const resolved: ResolvedTheme = e.matches ? "dark" : "light";
+      setTheme(resolved);
+      applyThemeToDOM(resolved);
+    };
+
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [preference]);
+
+  const setPreference = useCallback((pref: ThemePreference) => {
+    setPreferenceState(pref);
+    localStorage.setItem(STORAGE_KEY, pref);
+    const resolved = resolveTheme(pref);
+    setTheme(resolved);
+    applyThemeToDOM(resolved);
+  }, []);
 
-  const toggleTheme = () => setTheme((t) => (t === "light" ? "dark" : "light"));
+  const toggleTheme = useCallback(() => {
+    setPreference(
+      preference === "light" ? "dark" : preference === "dark" ? "system" : "light"
+    );
+  }, [preference, setPreference]);
 
   return (
-    <ThemeContext.Provider value={{ theme, toggleTheme, setTheme }}>
+    <ThemeContext.Provider value={{ preference, theme, toggleTheme, setPreference }}>
       {children}
     </ThemeContext.Provider>
   );
diff --git a/package.json b/package.json
index 16314b3..65907f4 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,6 @@
     "@nestjs/jwt": "^11.0.2",
     "@nestjs/passport": "^11.0.0",
     "@openzeppelin/contracts": "^5.6.1",
-    "lightningcss-darwin-arm64": "^1.32.0",
     "passport": "^0.7.0",
     "passport-jwt": "^4.0.1"
   },