From d99ea8057ea2450208c02d38b853f8c769030e2f Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Thu, 28 May 2026 19:40:55 -0500
Subject: [PATCH] dark theme

---
 client/components/MobileTrackerRow.jsx | 10 ++---
 client/components/StatusBadge.jsx      | 10 ++---
 client/components/SummaryCard.jsx      |  4 +-
 client/components/layout/Layout.jsx    |  2 +-
 client/index.css                       | 52 +++++++++++++-------------
 client/pages/TrackerPage.jsx           | 24 ++++++------
 6 files changed, 51 insertions(+), 51 deletions(-)

diff --git a/client/components/MobileTrackerRow.jsx b/client/components/MobileTrackerRow.jsx
index 887804d..b81d222 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] dark:bg-emerald-400/[0.05]',
-  autodraft: 'bg-sky-500/[0.04] dark:bg-sky-400/[0.04]',
+  paid:      'bg-emerald-500/[0.04] dark:bg-emerald-400/[0.035]',
+  autodraft: 'bg-sky-500/[0.04] dark:bg-sky-400/[0.03]',
   upcoming:  '',
-  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]',
+  due_soon:  'bg-amber-400/[0.07] dark:bg-amber-300/[0.025]',
+  late:      'bg-orange-400/[0.08] dark:bg-orange-300/[0.024]',
+  missed:    'bg-red-400/[0.08] dark:bg-rose-300/[0.018]',
 };
 
 function paymentDateForTrackerMonth(year, month, dueDay) {
diff --git a/client/components/StatusBadge.jsx b/client/components/StatusBadge.jsx
index 5b64891..37366d1 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 dark:text-emerald-300 dark:border-emerald-300/25' },
+  paid:      { label: 'Paid',      cls: 'bg-emerald-500/15 text-emerald-500 border border-emerald-500/30 dark:bg-emerald-300/10 dark:text-emerald-200 dark:border-emerald-300/30' },
   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 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' },
+  due_soon:  { label: 'Due Soon',  cls: 'bg-amber-400/15 text-amber-500 border border-amber-400/30 dark:bg-amber-300/10 dark:text-amber-200 dark:border-amber-300/28' },
+  late:      { label: 'Late',      cls: 'bg-orange-400/15 text-orange-500 border border-orange-400/30 dark:bg-orange-300/10 dark:text-orange-200 dark:border-orange-300/26' },
+  missed:    { label: 'Missed',    cls: 'bg-red-400/15 text-red-500 border border-red-400/30 dark:bg-rose-300/10 dark:text-rose-200 dark:border-rose-300/26' },
+  autodraft: { label: 'Autodraft', cls: 'bg-sky-400/15 text-sky-500 border border-sky-400/30 dark:bg-sky-300/10 dark:text-sky-200 dark:border-sky-300/28' },
   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 eaf4479..38428b8 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-600 dark:text-emerald-300',
+    valueClass: 'text-emerald-600 dark:text-emerald-200',
     activateWhen: (v) => v > 0,
   },
   remaining: {
@@ -36,7 +36,7 @@ const CARD_DEFS = {
     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',
+    valueClass: 'text-red-500 dark:text-rose-200',
     activateWhen: (v) => v > 0,
   },
 };
diff --git a/client/components/layout/Layout.jsx b/client/components/layout/Layout.jsx
index c9db928..855e823 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.10),transparent_34rem),linear-gradient(180deg,oklch(var(--background)),oklch(var(--muted)/0.22))] text-foreground"
+    <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,oklch(var(--primary)/0.08),transparent_32rem),linear-gradient(180deg,oklch(var(--background)),oklch(var(--muted)/0.14))] text-foreground"
       role="main"
       aria-labelledby={mainContentId}
     >
diff --git a/client/index.css b/client/index.css
index cd655a9..312e16e 100644
--- a/client/index.css
+++ b/client/index.css
@@ -69,38 +69,38 @@
   }
 
   .dark {
-    --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;
+    --background: 0.18 0.016 245;
+    --foreground: 0.95 0.006 245;
+    --card: 0.245 0.016 245;
+    --card-foreground: 0.95 0.006 245;
+    --popover: 0.27 0.018 245;
+    --popover-foreground: 0.95 0.006 245;
+    --primary: 0.67 0.18 150;
+    --primary-foreground: 0.14 0.018 150;
+    --secondary: 0.29 0.018 245;
+    --secondary-foreground: 0.92 0.007 245;
+    --muted: 0.285 0.016 245;
+    --muted-foreground: 0.68 0.014 245;
+    --accent: 0.31 0.030 158;
+    --accent-foreground: 0.95 0.006 245;
+    --destructive: 0.66 0.18 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;
+    --border: 0.35 0.018 245;
+    --input: 0.36 0.018 245;
+    --ring: 0.67 0.16 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.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;
+    --sidebar: 0.19 0.014 245;
+    --sidebar-foreground: 0.93 0.006 245;
+    --sidebar-primary: 0.67 0.18 150;
+    --sidebar-primary-foreground: 0.14 0.018 150;
+    --sidebar-accent: 0.29 0.026 158;
+    --sidebar-accent-foreground: 0.93 0.006 245;
+    --sidebar-border: 0.32 0.018 245;
+    --sidebar-ring: 0.67 0.16 150;
   }
 
   * {
diff --git a/client/pages/TrackerPage.jsx b/client/pages/TrackerPage.jsx
index c566607..b12b138 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] dark:bg-emerald-400/[0.05]',
-  autodraft: 'bg-sky-500/[0.04] dark:bg-sky-400/[0.04]',
+  paid:      'bg-emerald-500/[0.04] dark:bg-emerald-400/[0.035]',
+  autodraft: 'bg-sky-500/[0.04] dark:bg-sky-400/[0.03]',
   upcoming:  '',
-  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]',
+  due_soon:  'bg-amber-400/[0.07] dark:bg-amber-300/[0.025]',
+  late:      'bg-orange-400/[0.08] dark:bg-orange-300/[0.024]',
+  missed:    'bg-red-400/[0.08] dark:bg-rose-300/[0.018]',
 };
 
 const STATUS_META = {
-  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' },
+  paid:      { label: 'Paid',      cls: 'bg-emerald-500/15 text-emerald-500 border border-emerald-500/30 dark:bg-emerald-300/10 dark:text-emerald-200 dark:border-emerald-300/30' },
   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 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' },
+  due_soon:  { label: 'Due Soon',  cls: 'bg-amber-400/15 text-amber-500 border border-amber-400/30 dark:bg-amber-300/10 dark:text-amber-200 dark:border-amber-300/28' },
+  late:      { label: 'Late',      cls: 'bg-orange-400/15 text-orange-500 border border-orange-400/30 dark:bg-orange-300/10 dark:text-orange-200 dark:border-orange-300/26' },
+  missed:    { label: 'Missed',    cls: 'bg-red-400/15 text-red-500 border border-red-400/30 dark:bg-rose-300/10 dark:text-rose-200 dark:border-rose-300/26' },
+  autodraft: { label: 'Autodraft', cls: 'bg-sky-400/15 text-sky-500 border border-sky-400/30 dark:bg-sky-300/10 dark:text-sky-200 dark:border-sky-300/28' },
   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-600 dark:text-emerald-300',
+    valueClass: 'text-emerald-600 dark:text-emerald-200',
     activateWhen: (v) => v > 0,
   },
   remaining: {
@@ -151,7 +151,7 @@ const CARD_DEFS = {
     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',
+    valueClass: 'text-red-500 dark:text-rose-200',
     activateWhen: (v) => v > 0,
   },
 };