diff --git a/client/components/MobileTrackerRow.jsx b/client/components/MobileTrackerRow.jsx
index 27056e1..887804d 100644
--- a/client/components/MobileTrackerRow.jsx
+++ b/client/components/MobileTrackerRow.jsx
@@ -13,12 +13,12 @@ const MONTHS = [
 ];
 
 const ROW_STATUS_CLS = {
-  paid:      'bg-emerald-500/[0.04]',
-  autodraft: 'bg-sky-500/[0.04]',
+  paid:      'bg-emerald-500/[0.04] dark:bg-emerald-400/[0.05]',
+  autodraft: 'bg-sky-500/[0.04] dark:bg-sky-400/[0.04]',
   upcoming:  '',
-  due_soon:  'bg-amber-400/[0.07] dark:bg-amber-400/[0.05]',
-  late:      'bg-orange-400/[0.08] dark:bg-orange-400/[0.05]',
-  missed:    'bg-red-400/[0.08] dark:bg-rose-400/[0.05]',
+  due_soon:  'bg-amber-400/[0.07] dark:bg-amber-300/[0.035]',
+  late:      'bg-orange-400/[0.08] dark:bg-orange-300/[0.035]',
+  missed:    'bg-red-400/[0.08] dark:bg-rose-300/[0.03]',
 };
 
 function paymentDateForTrackerMonth(year, month, dueDay) {
diff --git a/client/components/StatusBadge.jsx b/client/components/StatusBadge.jsx
index c96efd3..5b64891 100644
--- a/client/components/StatusBadge.jsx
+++ b/client/components/StatusBadge.jsx
@@ -2,12 +2,12 @@ import React, { useMemo } from 'react';
 import { cn } from '@/lib/utils';
 
 const STATUS_META = {
-  paid:      { label: 'Paid',      cls: 'bg-emerald-500/15 text-emerald-500 border border-emerald-500/30' },
+  paid:      { label: 'Paid',      cls: 'bg-emerald-500/15 text-emerald-500 border border-emerald-500/30 dark:text-emerald-300 dark:border-emerald-300/25' },
   upcoming:  { label: 'Upcoming',  cls: 'bg-secondary text-muted-foreground border border-border' },
-  due_soon:  { label: 'Due Soon',  cls: 'bg-amber-400/15 text-amber-500 border border-amber-400/30' },
-  late:      { label: 'Late',      cls: 'bg-orange-400/15 text-orange-500 border border-orange-400/30 dark:bg-orange-400/10 dark:text-orange-300 dark:border-orange-400/20' },
-  missed:    { label: 'Missed',    cls: 'bg-red-400/15 text-red-500 border border-red-400/30 dark:bg-rose-400/10 dark:text-rose-300 dark:border-rose-400/20' },
-  autodraft: { label: 'Autodraft', cls: 'bg-sky-400/15 text-sky-500 border border-sky-400/30' },
+  due_soon:  { label: 'Due Soon',  cls: 'bg-amber-400/15 text-amber-500 border border-amber-400/30 dark:text-amber-300 dark:border-amber-300/25' },
+  late:      { label: 'Late',      cls: 'bg-orange-400/15 text-orange-500 border border-orange-400/30 dark:bg-orange-300/10 dark:text-orange-300 dark:border-orange-300/22' },
+  missed:    { label: 'Missed',    cls: 'bg-red-400/15 text-red-500 border border-red-400/30 dark:bg-rose-300/10 dark:text-rose-300 dark:border-rose-300/22' },
+  autodraft: { label: 'Autodraft', cls: 'bg-sky-400/15 text-sky-500 border border-sky-400/30 dark:text-sky-300 dark:border-sky-300/25' },
   skipped:   { label: 'Skipped',   cls: 'bg-muted text-muted-foreground border border-border' },
 };
 
diff --git a/client/components/SummaryCard.jsx b/client/components/SummaryCard.jsx
index c3f5556..eaf4479 100644
--- a/client/components/SummaryCard.jsx
+++ b/client/components/SummaryCard.jsx
@@ -19,7 +19,7 @@ const CARD_DEFS = {
     bar: 'from-emerald-500 to-emerald-300',
     glow: 'shadow-[0_4px_20px_rgba(16,185,129,0.15)]',
     borderActive: 'border-emerald-400/40',
-    valueClass: 'text-emerald-500',
+    valueClass: 'text-emerald-600 dark:text-emerald-300',
     activateWhen: (v) => v > 0,
   },
   remaining: {
@@ -33,10 +33,10 @@ const CARD_DEFS = {
   overdue:   {
     label: 'Overdue',
     icon: AlertCircle,
-    bar: 'from-rose-500 to-orange-400',
-    glow: 'shadow-[0_4px_20px_rgba(239,68,68,0.12)]',
-    borderActive: 'border-red-400/40',
-    valueClass: 'text-red-500',
+    bar: 'from-rose-400 to-orange-300',
+    glow: 'shadow-[0_4px_20px_rgba(251,113,133,0.10)]',
+    borderActive: 'border-rose-400/35',
+    valueClass: 'text-red-500 dark:text-rose-300',
     activateWhen: (v) => v > 0,
   },
 };
diff --git a/client/components/layout/Layout.jsx b/client/components/layout/Layout.jsx
index b7a9bd9..c9db928 100644
--- a/client/components/layout/Layout.jsx
+++ b/client/components/layout/Layout.jsx
@@ -3,7 +3,7 @@ import AppNavigation from './Sidebar';
 
 export default function Layout({ mainContentId }) {
   return (
-    <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,oklch(var(--primary)/0.06),transparent_34rem),linear-gradient(180deg,oklch(var(--background)),oklch(var(--muted)/0.18))] text-foreground"
+    <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,oklch(var(--primary)/0.10),transparent_34rem),linear-gradient(180deg,oklch(var(--background)),oklch(var(--muted)/0.22))] text-foreground"
       role="main"
       aria-labelledby={mainContentId}
     >
diff --git a/client/index.css b/client/index.css
index dbc604d..cd655a9 100644
--- a/client/index.css
+++ b/client/index.css
@@ -69,38 +69,38 @@
   }
 
   .dark {
-    --background: 0.20 0.008 250;
-    --foreground: 0.91 0.006 250;
-    --card: 0.24 0.009 250;
-    --card-foreground: 0.91 0.006 250;
-    --popover: 0.27 0.009 250;
-    --popover-foreground: 0.91 0.006 250;
-    --primary: 0.62 0.20 276;
-    --primary-foreground: 0.98 0.004 250;
-    --secondary: 0.28 0.012 255;
-    --secondary-foreground: 0.88 0.006 250;
-    --muted: 0.27 0.008 250;
-    --muted-foreground: 0.62 0.010 250;
-    --accent: 0.30 0.015 265;
-    --accent-foreground: 0.91 0.006 250;
-    --destructive: 0.65 0.18 22;
-    --destructive-foreground: 0.98 0.004 250;
-    --border: 0.32 0.009 250;
-    --input: 0.32 0.009 250;
-    --ring: 0.55 0.16 276;
+    --background: 0.22 0.012 245;
+    --foreground: 0.94 0.006 245;
+    --card: 0.27 0.012 245;
+    --card-foreground: 0.94 0.006 245;
+    --popover: 0.30 0.012 245;
+    --popover-foreground: 0.94 0.006 245;
+    --primary: 0.68 0.15 150;
+    --primary-foreground: 0.16 0.010 245;
+    --secondary: 0.33 0.014 250;
+    --secondary-foreground: 0.91 0.006 245;
+    --muted: 0.32 0.012 250;
+    --muted-foreground: 0.72 0.012 245;
+    --accent: 0.35 0.018 160;
+    --accent-foreground: 0.94 0.006 245;
+    --destructive: 0.68 0.16 26;
+    --destructive-foreground: 0.98 0.004 245;
+    --border: 0.38 0.012 245;
+    --input: 0.38 0.012 245;
+    --ring: 0.66 0.14 150;
     --chart-1: 0.55 0.22 270;
     --chart-2: 0.62 0.14 150;
     --chart-3: 0.65 0.18 310;
     --chart-4: 0.62 0.16 130;
     --chart-5: 0.58 0.18 255;
-    --sidebar: 0.17 0.007 250;
-    --sidebar-foreground: 0.88 0.006 250;
-    --sidebar-primary: 0.62 0.20 276;
-    --sidebar-primary-foreground: 0.98 0.004 250;
-    --sidebar-accent: 0.25 0.009 250;
-    --sidebar-accent-foreground: 0.88 0.006 250;
-    --sidebar-border: 0.26 0.008 250;
-    --sidebar-ring: 0.62 0.20 276;
+    --sidebar: 0.20 0.010 245;
+    --sidebar-foreground: 0.92 0.006 245;
+    --sidebar-primary: 0.68 0.15 150;
+    --sidebar-primary-foreground: 0.16 0.010 245;
+    --sidebar-accent: 0.30 0.014 160;
+    --sidebar-accent-foreground: 0.92 0.006 245;
+    --sidebar-border: 0.34 0.012 245;
+    --sidebar-ring: 0.66 0.14 150;
   }
 
   * {
diff --git a/client/pages/TrackerPage.jsx b/client/pages/TrackerPage.jsx
index fb415b8..c566607 100644
--- a/client/pages/TrackerPage.jsx
+++ b/client/pages/TrackerPage.jsx
@@ -49,21 +49,21 @@ function paymentDateForTrackerMonth(year, month, dueDay) {
 }
 
 const ROW_STATUS_CLS = {
-  paid:      'bg-emerald-500/[0.04]',
-  autodraft: 'bg-sky-500/[0.04]',
+  paid:      'bg-emerald-500/[0.04] dark:bg-emerald-400/[0.05]',
+  autodraft: 'bg-sky-500/[0.04] dark:bg-sky-400/[0.04]',
   upcoming:  '',
-  due_soon:  'bg-amber-400/[0.07] dark:bg-amber-400/[0.05]',
-  late:      'bg-orange-400/[0.08] dark:bg-orange-400/[0.05]',
-  missed:    'bg-red-400/[0.08] dark:bg-rose-400/[0.05]',
+  due_soon:  'bg-amber-400/[0.07] dark:bg-amber-300/[0.035]',
+  late:      'bg-orange-400/[0.08] dark:bg-orange-300/[0.035]',
+  missed:    'bg-red-400/[0.08] dark:bg-rose-300/[0.03]',
 };
 
 const STATUS_META = {
-  paid:      { label: 'Paid',      cls: 'bg-emerald-500/15 text-emerald-500 border border-emerald-500/30' },
+  paid:      { label: 'Paid',      cls: 'bg-emerald-500/15 text-emerald-500 border border-emerald-500/30 dark:text-emerald-300 dark:border-emerald-300/25' },
   upcoming:  { label: 'Upcoming',  cls: 'bg-secondary text-muted-foreground border border-border' },
-  due_soon:  { label: 'Due Soon',  cls: 'bg-amber-400/15 text-amber-500 border border-amber-400/30' },
-  late:      { label: 'Late',      cls: 'bg-orange-400/15 text-orange-500 border border-orange-400/30' },
-  missed:    { label: 'Missed',    cls: 'bg-red-400/15 text-red-500 border border-red-400/30' },
-  autodraft: { label: 'Autodraft', cls: 'bg-sky-400/15 text-sky-500 border border-sky-400/30' },
+  due_soon:  { label: 'Due Soon',  cls: 'bg-amber-400/15 text-amber-500 border border-amber-400/30 dark:text-amber-300 dark:border-amber-300/25' },
+  late:      { label: 'Late',      cls: 'bg-orange-400/15 text-orange-500 border border-orange-400/30 dark:bg-orange-300/10 dark:text-orange-300 dark:border-orange-300/22' },
+  missed:    { label: 'Missed',    cls: 'bg-red-400/15 text-red-500 border border-red-400/30 dark:bg-rose-300/10 dark:text-rose-300 dark:border-rose-300/22' },
+  autodraft: { label: 'Autodraft', cls: 'bg-sky-400/15 text-sky-500 border border-sky-400/30 dark:text-sky-300 dark:border-sky-300/25' },
   skipped:   { label: 'Skipped',   cls: 'bg-muted text-muted-foreground border border-border' },
 };
 
@@ -134,7 +134,7 @@ const CARD_DEFS = {
     bar: 'from-emerald-500 to-emerald-300',
     glow: 'shadow-[0_4px_20px_rgba(16,185,129,0.15)]',
     borderActive: 'border-emerald-400/40',
-    valueClass: 'text-emerald-500',
+    valueClass: 'text-emerald-600 dark:text-emerald-300',
     activateWhen: (v) => v > 0,
   },
   remaining: {
@@ -148,10 +148,10 @@ const CARD_DEFS = {
   overdue:   {
     label: 'Overdue',
     icon: AlertCircle,
-    bar: 'from-rose-500 to-orange-400',
-    glow: 'shadow-[0_4px_20px_rgba(239,68,68,0.12)]',
-    borderActive: 'border-red-400/40',
-    valueClass: 'text-red-500',
+    bar: 'from-rose-400 to-orange-300',
+    glow: 'shadow-[0_4px_20px_rgba(251,113,133,0.10)]',
+    borderActive: 'border-rose-400/35',
+    valueClass: 'text-red-500 dark:text-rose-300',
     activateWhen: (v) => v > 0,
   },
 };