From 47de301f777e85584ef95f9744f8da6cd81046c1 Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Sat, 27 Dec 2025 12:12:10 -0800
Subject: [PATCH] style: Dark/Light mode contrast audit

- Boost text contrast in both themes
- Strengthen border visibility (subtle borders now visible)
- Convert 39 files from hardcoded dark:/light: to CSS vars
- Tertiary text now more readable on both backgrounds
---
 .../src/components/BatchTransitionModal.tsx   | 18 +++++-----
 frontend/src/components/ErrorBoundary.tsx     |  6 ++--
 frontend/src/components/TaskTemplateModal.tsx | 26 +++++++-------
 frontend/src/components/WeightLogModal.tsx    | 22 ++++++------
 frontend/src/components/aura/Navbar.tsx       |  4 +--
 .../components/dashboard/RoomStatusCard.tsx   |  8 ++---
 frontend/src/components/dev/DevTools.tsx      |  8 ++---
 .../src/components/heatmap/BedTooltip.tsx     |  4 +--
 .../components/heatmap/GrowRoomHeatmap.tsx    |  2 +-
 .../src/components/heatmap/HealthLegend.tsx   |  4 +--
 .../ipm/BatchHealthHistoryModal.tsx           | 12 +++----
 frontend/src/components/layout/MobileNav.tsx  |  2 +-
 frontend/src/components/layout/PageHeader.tsx |  4 +--
 .../components/messaging/ShiftNotesWidget.tsx | 14 ++++----
 .../components/tasks/CompleteTaskModal.tsx    | 10 +++---
 .../src/components/tasks/CreateTaskModal.tsx  | 36 +++++++++----------
 .../components/tasks/TasksDueTodayWidget.tsx  |  2 +-
 .../touchpoints/QuickLogButtons.tsx           |  2 +-
 .../touchpoints/TouchPointModal.tsx           | 22 ++++++------
 frontend/src/components/ui/BottomSheet.tsx    |  8 ++---
 frontend/src/components/ui/CommandPalette.tsx | 20 +++++------
 frontend/src/components/ui/DataTable.tsx      |  4 +--
 .../src/components/ui/LinearPrimitives.tsx    |  6 ++--
 frontend/src/components/ui/PhotoUpload.tsx    |  2 +-
 frontend/src/components/ui/PullToRefresh.tsx  |  2 +-
 frontend/src/components/ui/Skeleton.tsx       | 10 +++---
 frontend/src/components/ui/SwipeableRow.tsx   |  2 +-
 frontend/src/components/ui/VisitorBadge.tsx   |  8 ++---
 frontend/src/index.css                        | 32 ++++++++---------
 frontend/src/pages/AuditLogPage.tsx           |  4 +--
 frontend/src/pages/BatchDetailPage.tsx        | 10 +++---
 frontend/src/pages/BatchesPage.tsx            |  2 +-
 frontend/src/pages/MetrcDashboardPage.tsx     |  4 +--
 frontend/src/pages/RoomsPage.tsx              |  8 ++---
 frontend/src/pages/SuppliesPage.tsx           |  8 ++---
 frontend/src/pages/TasksPage.tsx              |  6 ++--
 frontend/src/pages/VisitorManagementPage.tsx  |  4 +--
 frontend/src/templates/PageTemplate.tsx       |  8 ++---
 frontend/src/templates/WidgetTemplate.tsx     |  4 +--
 39 files changed, 179 insertions(+), 179 deletions(-)

diff --git a/frontend/src/components/BatchTransitionModal.tsx b/frontend/src/components/BatchTransitionModal.tsx
index 2ca857b..8ba1d49 100644
--- a/frontend/src/components/BatchTransitionModal.tsx
+++ b/frontend/src/components/BatchTransitionModal.tsx
@@ -55,8 +55,8 @@ export default function BatchTransitionModal({ batch, onClose, onSuccess }: Tran
 
     return (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-fade-in">
-            <div className="bg-white dark:bg-slate-800 w-full max-w-md rounded-2xl shadow-2xl overflow-hidden animate-scale-in">
-                <div className="p-6 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center">
+            <div className="bg-[var(--color-bg-elevated)] w-full max-w-md rounded-2xl shadow-2xl overflow-hidden animate-scale-in">
+                <div className="p-6 border-b border-[var(--color-border-default)] flex justify-between items-center">
                     <h2 className="text-xl font-bold dark:text-white">Transition Batch</h2>
                     <button onClick={onClose} className="text-[var(--color-text-tertiary)] hover:text-slate-700 dark:hover:text-slate-300">
                         <X size={24} />
@@ -64,7 +64,7 @@ export default function BatchTransitionModal({ batch, onClose, onSuccess }: Tran
                 </div>
 
                 <form onSubmit={handleSubmit} className="p-6 space-y-6">
-                    <div className="bg-[var(--color-bg-tertiary)] p-4 rounded-xl border border-slate-200 dark:border-slate-700">
+                    <div className="bg-[var(--color-bg-tertiary)] p-4 rounded-xl border border-[var(--color-border-default)]">
                         <div className="flex items-center gap-3 mb-2">
                             <Sprout className="text-[var(--color-primary)] dark:text-emerald-400" size={20} />
                             <span className="font-semibold text-[var(--color-text-primary)]">{batch.name}</span>
@@ -77,11 +77,11 @@ export default function BatchTransitionModal({ batch, onClose, onSuccess }: Tran
                     </div>
 
                     <div>
-                        <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">New Stage</label>
+                        <label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-2">New Stage</label>
                         <select
                             value={targetStage}
                             onChange={(e) => setTargetStage(e.target.value as any)}
-                            className="w-full p-3 rounded-lg bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 dark:text-white"
+                            className="w-full p-3 rounded-lg bg-[var(--color-bg-elevated)] border border-[var(--color-border-default)] dark:text-white"
                         >
                             {STAGES.map(stage => (
                                 <option key={stage.id} value={stage.id}>{stage.label}</option>
@@ -90,7 +90,7 @@ export default function BatchTransitionModal({ batch, onClose, onSuccess }: Tran
                     </div>
 
                     <div>
-                        <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+                        <label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-2">
                             <div className="flex items-center gap-2">
                                 <Home size={16} />
                                 Move to Room
@@ -99,7 +99,7 @@ export default function BatchTransitionModal({ batch, onClose, onSuccess }: Tran
                         <select
                             value={targetRoomId}
                             onChange={(e) => setTargetRoomId(e.target.value)}
-                            className="w-full p-3 rounded-lg bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 dark:text-white"
+                            className="w-full p-3 rounded-lg bg-[var(--color-bg-elevated)] border border-[var(--color-border-default)] dark:text-white"
                         >
                             <option value="">Keep current room ({batch.room?.name || 'Unassigned'})</option>
                             {rooms.map(room => (
@@ -110,12 +110,12 @@ export default function BatchTransitionModal({ batch, onClose, onSuccess }: Tran
 
                     <div className="grid grid-cols-2 gap-4">
                         <div>
-                            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Plant Count</label>
+                            <label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-2">Plant Count</label>
                             <input
                                 type="number"
                                 value={metadata.plantCount}
                                 onChange={(e) => setMetadata({ ...metadata, plantCount: parseInt(e.target.value) || 0 })}
-                                className="w-full p-3 rounded-lg bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 dark:text-white"
+                                className="w-full p-3 rounded-lg bg-[var(--color-bg-elevated)] border border-[var(--color-border-default)] dark:text-white"
                             />
                         </div>
                     </div>
diff --git a/frontend/src/components/ErrorBoundary.tsx b/frontend/src/components/ErrorBoundary.tsx
index bde7dd4..3827b9e 100644
--- a/frontend/src/components/ErrorBoundary.tsx
+++ b/frontend/src/components/ErrorBoundary.tsx
@@ -49,7 +49,7 @@ export class ErrorBoundary extends Component<Props, State> {
 
             return (
                 <div className="min-h-screen bg-[var(--color-bg-tertiary)] flex items-center justify-center p-6">
-                    <div className="max-w-md w-full bg-white dark:bg-slate-800 rounded-2xl shadow-xl p-8 text-center">
+                    <div className="max-w-md w-full bg-[var(--color-bg-elevated)] rounded-2xl shadow-xl p-8 text-center">
                         <div className="w-16 h-16 mx-auto bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mb-6">
                             <AlertTriangle size={32} className="text-red-600 dark:text-red-400" />
                         </div>
@@ -68,7 +68,7 @@ export class ErrorBoundary extends Component<Props, State> {
                                 <summary className="cursor-pointer text-sm text-[var(--color-text-tertiary)] hover:text-slate-700 dark:hover:text-slate-300">
                                     Technical Details
                                 </summary>
-                                <pre className="mt-2 p-3 bg-slate-100 dark:bg-slate-700 rounded-lg text-xs text-red-600 dark:text-red-400 overflow-auto max-h-32">
+                                <pre className="mt-2 p-3 bg-[var(--color-bg-tertiary)] rounded-lg text-xs text-red-600 dark:text-red-400 overflow-auto max-h-32">
                                     {this.state.error.toString()}
                                     {this.state.errorInfo?.componentStack}
                                 </pre>
@@ -85,7 +85,7 @@ export class ErrorBoundary extends Component<Props, State> {
                             </button>
                             <button
                                 onClick={this.handleGoHome}
-                                className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-200 font-medium rounded-xl transition-colors"
+                                className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-[var(--color-text-secondary)]late-200 font-medium rounded-xl transition-colors"
                             >
                                 <Home size={18} />
                                 Go Home
diff --git a/frontend/src/components/TaskTemplateModal.tsx b/frontend/src/components/TaskTemplateModal.tsx
index 29362bf..99887f5 100644
--- a/frontend/src/components/TaskTemplateModal.tsx
+++ b/frontend/src/components/TaskTemplateModal.tsx
@@ -50,8 +50,8 @@ export default function TaskTemplateModal({ template, onClose, onSuccess }: Task
 
     return (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-fade-in">
-            <div className="bg-white dark:bg-slate-800 w-full max-w-lg rounded-2xl shadow-2xl overflow-hidden animate-scale-in flex flex-col max-h-[90vh]">
-                <div className="p-6 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center">
+            <div className="bg-[var(--color-bg-elevated)] w-full max-w-lg rounded-2xl shadow-2xl overflow-hidden animate-scale-in flex flex-col max-h-[90vh]">
+                <div className="p-6 border-b border-[var(--color-border-default)] flex justify-between items-center">
                     <div className="flex items-center gap-2">
                         <FileText className="text-[var(--color-primary)] dark:text-emerald-400" size={24} />
                         <h2 className="text-xl font-bold dark:text-white">
@@ -65,12 +65,12 @@ export default function TaskTemplateModal({ template, onClose, onSuccess }: Task
 
                 <form onSubmit={handleSubmit} className="p-6 space-y-6 overflow-y-auto flex-1">
                     <div>
-                        <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Title</label>
+                        <label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-2">Title</label>
                         <input
                             type="text"
                             value={formData.title}
                             onChange={(e) => setFormData({ ...formData, title: e.target.value })}
-                            className="w-full p-3 rounded-lg bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 dark:text-white"
+                            className="w-full p-3 rounded-lg bg-[var(--color-bg-elevated)] border border-[var(--color-border-default)] dark:text-white"
                             placeholder="e.g. Daily Veg Watering"
                             required
                         />
@@ -78,11 +78,11 @@ export default function TaskTemplateModal({ template, onClose, onSuccess }: Task
 
                     <div className="grid grid-cols-2 gap-4">
                         <div>
-                            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Room Type</label>
+                            <label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-2">Room Type</label>
                             <select
                                 value={formData.roomType}
                                 onChange={(e) => setFormData({ ...formData, roomType: e.target.value })}
-                                className="w-full p-3 rounded-lg bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 dark:text-white"
+                                className="w-full p-3 rounded-lg bg-[var(--color-bg-elevated)] border border-[var(--color-border-default)] dark:text-white"
                             >
                                 {ROOM_TYPES.map(type => (
                                     <option key={type} value={type}>{type}</option>
@@ -90,39 +90,39 @@ export default function TaskTemplateModal({ template, onClose, onSuccess }: Task
                             </select>
                         </div>
                         <div>
-                            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Est. Minutes</label>
+                            <label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-2">Est. Minutes</label>
                             <input
                                 type="number"
                                 value={formData.estimatedMinutes}
                                 onChange={(e) => setFormData({ ...formData, estimatedMinutes: parseInt(e.target.value) || 0 })}
-                                className="w-full p-3 rounded-lg bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 dark:text-white"
+                                className="w-full p-3 rounded-lg bg-[var(--color-bg-elevated)] border border-[var(--color-border-default)] dark:text-white"
                             />
                         </div>
                     </div>
 
                     <div>
-                        <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Description / Instructions</label>
+                        <label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-2">Description / Instructions</label>
                         <textarea
                             value={formData.description}
                             onChange={(e) => setFormData({ ...formData, description: e.target.value })}
-                            className="w-full p-3 rounded-lg bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 dark:text-white h-32 resize-none"
+                            className="w-full p-3 rounded-lg bg-[var(--color-bg-elevated)] border border-[var(--color-border-default)] dark:text-white h-32 resize-none"
                             placeholder="Detailed SOP instructions..."
                         />
                     </div>
 
                     <div>
-                        <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Materials (comma separated)</label>
+                        <label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-2">Materials (comma separated)</label>
                         <input
                             type="text"
                             value={materialsInput}
                             onChange={(e) => setMaterialsInput(e.target.value)}
-                            className="w-full p-3 rounded-lg bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 dark:text-white"
+                            className="w-full p-3 rounded-lg bg-[var(--color-bg-elevated)] border border-[var(--color-border-default)] dark:text-white"
                             placeholder="e.g. 5gal buckets, bamboo stakes, twist ties"
                         />
                     </div>
                 </form>
 
-                <div className="p-6 border-t border-slate-200 dark:border-slate-700 bg-[var(--color-bg-tertiary)]/50">
+                <div className="p-6 border-t border-[var(--color-border-default)] bg-[var(--color-bg-tertiary)]/50">
                     <button
                         onClick={handleSubmit}
                         disabled={isSubmitting}
diff --git a/frontend/src/components/WeightLogModal.tsx b/frontend/src/components/WeightLogModal.tsx
index 83507f1..40147a0 100644
--- a/frontend/src/components/WeightLogModal.tsx
+++ b/frontend/src/components/WeightLogModal.tsx
@@ -45,8 +45,8 @@ export default function WeightLogModal({ batch, onClose, onSuccess }: WeightLogM
 
     return (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-fade-in">
-            <div className="bg-white dark:bg-slate-800 w-full max-w-md rounded-2xl shadow-2xl overflow-hidden animate-scale-in">
-                <div className="p-6 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center">
+            <div className="bg-[var(--color-bg-elevated)] w-full max-w-md rounded-2xl shadow-2xl overflow-hidden animate-scale-in">
+                <div className="p-6 border-b border-[var(--color-border-default)] flex justify-between items-center">
                     <div className="flex items-center gap-2">
                         <Scale className="text-[var(--color-primary)] dark:text-emerald-400" size={24} />
                         <h2 className="text-xl font-bold dark:text-white">Log Weight</h2>
@@ -57,17 +57,17 @@ export default function WeightLogModal({ batch, onClose, onSuccess }: WeightLogM
                 </div>
 
                 <form onSubmit={handleSubmit} className="p-6 space-y-6">
-                    <div className="bg-[var(--color-bg-tertiary)] p-4 rounded-xl border border-slate-200 dark:border-slate-700">
+                    <div className="bg-[var(--color-bg-tertiary)] p-4 rounded-xl border border-[var(--color-border-default)]">
                         <h3 className="font-semibold text-[var(--color-text-primary)]">{batch.name}</h3>
                         <p className="text-sm text-[var(--color-text-tertiary)]">{batch.strain}</p>
                     </div>
 
                     <div>
-                        <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Weight Type</label>
+                        <label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-2">Weight Type</label>
                         <select
                             value={weightType}
                             onChange={(e) => setWeightType(e.target.value)}
-                            className="w-full p-3 rounded-lg bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 dark:text-white"
+                            className="w-full p-3 rounded-lg bg-[var(--color-bg-elevated)] border border-[var(--color-border-default)] dark:text-white"
                         >
                             {WEIGHT_TYPES.map(type => (
                                 <option key={type.id} value={type.id}>{type.label}</option>
@@ -77,23 +77,23 @@ export default function WeightLogModal({ batch, onClose, onSuccess }: WeightLogM
 
                     <div className="grid grid-cols-2 gap-4">
                         <div>
-                            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Weight</label>
+                            <label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-2">Weight</label>
                             <input
                                 type="number"
                                 step="0.01"
                                 value={weight}
                                 onChange={(e) => setWeight(e.target.value)}
-                                className="w-full p-3 rounded-lg bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 dark:text-white"
+                                className="w-full p-3 rounded-lg bg-[var(--color-bg-elevated)] border border-[var(--color-border-default)] dark:text-white"
                                 placeholder="0.00"
                                 required
                             />
                         </div>
                         <div>
-                            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Unit</label>
+                            <label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-2">Unit</label>
                             <select
                                 value={unit}
                                 onChange={(e) => setUnit(e.target.value)}
-                                className="w-full p-3 rounded-lg bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 dark:text-white"
+                                className="w-full p-3 rounded-lg bg-[var(--color-bg-elevated)] border border-[var(--color-border-default)] dark:text-white"
                             >
                                 <option value="lbs">lbs</option>
                                 <option value="g">grams</option>
@@ -104,11 +104,11 @@ export default function WeightLogModal({ batch, onClose, onSuccess }: WeightLogM
                     </div>
 
                     <div>
-                        <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Notes</label>
+                        <label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-2">Notes</label>
                         <textarea
                             value={notes}
                             onChange={(e) => setNotes(e.target.value)}
-                            className="w-full p-3 rounded-lg bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 dark:text-white h-24 resize-none"
+                            className="w-full p-3 rounded-lg bg-[var(--color-bg-elevated)] border border-[var(--color-border-default)] dark:text-white h-24 resize-none"
                             placeholder="Optional notes..."
                         />
                     </div>
diff --git a/frontend/src/components/aura/Navbar.tsx b/frontend/src/components/aura/Navbar.tsx
index 7e3ed25..14a0931 100644
--- a/frontend/src/components/aura/Navbar.tsx
+++ b/frontend/src/components/aura/Navbar.tsx
@@ -82,7 +82,7 @@ export function Navbar({ onOpenMobileMenu }: NavbarProps) {
                         {/* Search Mock */}
                         <button
                             onClick={() => dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }))}
-                            className="hidden md:flex items-center gap-3 px-4 py-2 text-xs font-bold text-[var(--color-text-tertiary)] bg-slate-100/50 hover:bg-white dark:bg-slate-900/50 dark:hover:bg-slate-800 transition-all rounded-full border border-slate-200/50 dark:border-slate-800 group"
+                            className="hidden md:flex items-center gap-3 px-4 py-2 text-xs font-bold text-[var(--color-text-tertiary)] bg-slate-100/50 hover:bg-[var(--color-bg-elevated)]/50 dark:hover:bg-slate-800 transition-all rounded-full border border-slate-200/50 dark:border-slate-800 group"
                         >
                             <Search size={12} className="group-hover:text-indigo-500 transition-colors" />
                             <span className="uppercase tracking-widest">Search...</span>
@@ -152,7 +152,7 @@ function UserDropdown() {
                         transition={{ duration: 0.1 }}
                         className="absolute top-full right-0 mt-3 w-64 p-3 bg-white/95 dark:bg-slate-900/95 backdrop-blur-2xl border border-[var(--color-border-subtle)] rounded-2xl shadow-2xl z-50 ring-1 ring-black/5"
                     >
-                        <div className="px-3 py-3 border-b border-slate-100 dark:border-slate-800 mb-2">
+                        <div className="px-3 py-3 border-b border-[var(--color-border-subtle)] mb-2">
                             <p className="text-xs font-bold text-[var(--color-text-tertiary)] uppercase tracking-widest mb-1">Authenticated</p>
                             <p className="text-sm font-bold text-[var(--color-text-primary)] truncate">
                                 {user?.name || 'Administrator'}
diff --git a/frontend/src/components/dashboard/RoomStatusCard.tsx b/frontend/src/components/dashboard/RoomStatusCard.tsx
index 86dd4d3..efd4314 100644
--- a/frontend/src/components/dashboard/RoomStatusCard.tsx
+++ b/frontend/src/components/dashboard/RoomStatusCard.tsx
@@ -94,16 +94,16 @@ export function RoomStatusCard({ name, phase, status, metrics, tasks, strains }:
                 </div>
 
                 {/* Footer / Tasks */}
-                <div className="pt-4 border-t border-slate-100 dark:border-slate-800/50 flex items-center justify-between">
+                <div className="pt-4 border-t border-[var(--color-border-subtle)]/50 flex items-center justify-between">
                     <div className="flex items-center gap-4">
                         <div className="flex items-center gap-1.5 text-xs text-[var(--color-text-tertiary)]">
                             <Clock size={12} />
-                            <span className="font-bold text-slate-700 dark:text-slate-300">{tasks.due}</span>
+                            <span className="font-bold text-[var(--color-text-secondary)]">{tasks.due}</span>
                             <span>Pending</span>
                         </div>
                         <div className="flex items-center gap-1.5 text-xs text-[var(--color-text-tertiary)]">
                             <CheckCircle2 size={12} className="text-[var(--color-primary)]" />
-                            <span className="font-bold text-slate-700 dark:text-slate-300">{tasks.completed}</span>
+                            <span className="font-bold text-[var(--color-text-secondary)]">{tasks.completed}</span>
                             <span>Done</span>
                         </div>
                     </div>
@@ -126,7 +126,7 @@ export function RoomStatusCard({ name, phase, status, metrics, tasks, strains }:
 
 function MetricItem({ icon, label, value, status }: { icon: React.ReactNode, label: string, value: string, status: 'ok' | 'warning' | 'critical' }) {
     return (
-        <div className="bg-[var(--color-bg-tertiary)]/50 p-2.5 rounded-xl border border-slate-100 dark:border-slate-800/50">
+        <div className="bg-[var(--color-bg-tertiary)]/50 p-2.5 rounded-xl border border-[var(--color-border-subtle)]/50">
             <div className="flex items-center gap-1.5 mb-1">
                 {icon}
                 <span className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-widest">{label}</span>
diff --git a/frontend/src/components/dev/DevTools.tsx b/frontend/src/components/dev/DevTools.tsx
index 5cddf1e..ad29c1c 100644
--- a/frontend/src/components/dev/DevTools.tsx
+++ b/frontend/src/components/dev/DevTools.tsx
@@ -100,7 +100,7 @@ export function DevTools() {
 
             {/* Panel */}
             {isOpen && (
-                <div className="absolute bottom-14 right-0 w-72 bg-white dark:bg-slate-800 rounded-xl shadow-2xl border border-slate-200 dark:border-slate-700 overflow-hidden animate-scale-in">
+                <div className="absolute bottom-14 right-0 w-72 bg-[var(--color-bg-elevated)] rounded-xl shadow-2xl border border-[var(--color-border-default)] overflow-hidden animate-scale-in">
                     {/* Header */}
                     <div className="bg-[var(--color-warning)] text-white px-4 py-3 flex items-center justify-between">
                         <div className="flex items-center gap-2">
@@ -113,7 +113,7 @@ export function DevTools() {
                     </div>
 
                     {/* Current User */}
-                    <div className="px-4 py-3 border-b border-slate-200 dark:border-slate-700">
+                    <div className="px-4 py-3 border-b border-[var(--color-border-default)]">
                         <p className="text-[10px] uppercase text-[var(--color-text-tertiary)] font-semibold mb-1">Current User</p>
                         {user ? (
                             <div className="flex items-center justify-between">
@@ -169,7 +169,7 @@ export function DevTools() {
 
                     {/* Demo Actions */}
                     {user && ['OWNER', 'ADMIN'].includes(user.role) && (
-                        <div className="px-4 py-3 border-t border-slate-200 dark:border-slate-700">
+                        <div className="px-4 py-3 border-t border-[var(--color-border-default)]">
                             <p className="text-[10px] uppercase text-[var(--color-text-tertiary)] font-semibold mb-2">Demo Actions</p>
                             <button
                                 onClick={handleReseedPlants}
@@ -199,7 +199,7 @@ export function DevTools() {
                     )}
 
                     {/* Footer */}
-                    <div className="px-4 py-2 bg-[var(--color-bg-tertiary)] border-t border-slate-200 dark:border-slate-700">
+                    <div className="px-4 py-2 bg-[var(--color-bg-tertiary)] border-t border-[var(--color-border-default)]">
                         <p className="text-[10px] text-[var(--color-text-tertiary)] text-center">
                             🚧 Testing Environment Only
                         </p>
diff --git a/frontend/src/components/heatmap/BedTooltip.tsx b/frontend/src/components/heatmap/BedTooltip.tsx
index d0b4213..3405447 100644
--- a/frontend/src/components/heatmap/BedTooltip.tsx
+++ b/frontend/src/components/heatmap/BedTooltip.tsx
@@ -48,7 +48,7 @@ export default function BedTooltip({ bed, position, onClose }: BedTooltipProps)
     return (
         <div
             ref={tooltipRef}
-            className="fixed z-50 bg-white dark:bg-slate-800 rounded-lg shadow-2xl border border-slate-200 dark:border-slate-700 p-4 min-w-[280px]"
+            className="fixed z-50 bg-[var(--color-bg-elevated)] rounded-lg shadow-2xl border border-[var(--color-border-default)] p-4 min-w-[280px]"
             style={{
                 left: position.x + 10,
                 top: position.y + 10,
@@ -134,7 +134,7 @@ export default function BedTooltip({ bed, position, onClose }: BedTooltipProps)
             )}
 
             {/* Actions */}
-            <div className="mt-3 pt-3 border-t border-slate-200 dark:border-slate-700">
+            <div className="mt-3 pt-3 border-t border-[var(--color-border-default)]">
                 <button className="text-sm text-[var(--color-primary)] dark:text-emerald-400 hover:underline">
                     View Details →
                 </button>
diff --git a/frontend/src/components/heatmap/GrowRoomHeatmap.tsx b/frontend/src/components/heatmap/GrowRoomHeatmap.tsx
index 0462c1a..150d9f1 100644
--- a/frontend/src/components/heatmap/GrowRoomHeatmap.tsx
+++ b/frontend/src/components/heatmap/GrowRoomHeatmap.tsx
@@ -140,7 +140,7 @@ export default function GrowRoomHeatmap({ roomId }: GrowRoomHeatmapProps) {
             <HealthLegend />
 
             {/* Grid */}
-            <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
+            <div className="bg-[var(--color-bg-elevated)] rounded-xl shadow-lg p-6">
                 <FloorGrid
                     floor={currentFloor}
                     rows={layout.grid.rows}
diff --git a/frontend/src/components/heatmap/HealthLegend.tsx b/frontend/src/components/heatmap/HealthLegend.tsx
index 3bcb50a..4fe5baa 100644
--- a/frontend/src/components/heatmap/HealthLegend.tsx
+++ b/frontend/src/components/heatmap/HealthLegend.tsx
@@ -14,8 +14,8 @@ export default function HealthLegend() {
     ];
 
     return (
-        <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-4">
-            <h3 className="text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
+        <div className="bg-[var(--color-bg-elevated)] rounded-lg shadow p-4">
+            <h3 className="text-sm font-semibold text-[var(--color-text-secondary)] mb-3">
                 Health Score Legend
             </h3>
             <div className="flex flex-wrap gap-3">
diff --git a/frontend/src/components/ipm/BatchHealthHistoryModal.tsx b/frontend/src/components/ipm/BatchHealthHistoryModal.tsx
index 700e047..f84d214 100644
--- a/frontend/src/components/ipm/BatchHealthHistoryModal.tsx
+++ b/frontend/src/components/ipm/BatchHealthHistoryModal.tsx
@@ -37,8 +37,8 @@ export default function BatchHealthHistoryModal({ batch, onClose }: BatchHealthH
 
     return (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-fade-in">
-            <div className="bg-white dark:bg-slate-900 w-full max-w-2xl rounded-2xl shadow-2xl overflow-hidden animate-scale-in flex flex-col max-h-[90vh]">
-                <div className="p-6 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center shrink-0">
+            <div className="bg-[var(--color-bg-elevated)] w-full max-w-2xl rounded-2xl shadow-2xl overflow-hidden animate-scale-in flex flex-col max-h-[90vh]">
+                <div className="p-6 border-b border-[var(--color-border-default)] flex justify-between items-center shrink-0">
                     <div className="flex items-center gap-2">
                         <History className="text-[var(--color-text-tertiary)]" size={24} />
                         <h2 className="text-xl font-bold dark:text-white">Batch Health History</h2>
@@ -48,7 +48,7 @@ export default function BatchHealthHistoryModal({ batch, onClose }: BatchHealthH
                     </button>
                 </div>
 
-                <div className="p-4 bg-slate-50 dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 shrink-0">
+                <div className="p-4 bg-[var(--color-bg-tertiary)] border-b border-[var(--color-border-default)] shrink-0">
                     <h3 className="font-bold text-[var(--color-text-primary)]">{batch.name}</h3>
                     <p className="text-sm text-[var(--color-text-tertiary)]">{batch.strain} &bull; {batch.room?.name || 'No Room'}</p>
                 </div>
@@ -59,14 +59,14 @@ export default function BatchHealthHistoryModal({ batch, onClose }: BatchHealthH
                     ) : history.length === 0 ? (
                         <div className="text-center text-[var(--color-text-tertiary)] py-10 italic">No health or maintenance records found.</div>
                     ) : (
-                        <div className="relative border-l-2 border-slate-200 dark:border-slate-700 ml-4 space-y-8">
+                        <div className="relative border-l-2 border-[var(--color-border-default)] ml-4 space-y-8">
                             {history.map((record) => (
                                 <div key={record.id} className="relative pl-8">
                                     <div className={`absolute -left-[9px] top-0 w-4 h-4 rounded-full border-2 border-white dark:border-slate-900 ${record.issuesObserved ? 'bg-red-500' :
                                             record.type === 'IPM' ? 'bg-orange-400' : 'bg-slate-300 dark:bg-slate-600'
                                         }`} />
 
-                                    <div className="bg-white dark:bg-slate-800 p-4 rounded-xl border border-slate-100 dark:border-slate-700 shadow-sm">
+                                    <div className="bg-[var(--color-bg-elevated)] p-4 rounded-xl border border-slate-100 dark:border-slate-700 shadow-sm">
                                         <div className="flex justify-between items-start mb-2">
                                             <div className="flex items-center gap-2">
                                                 {getIcon(record.type, record.issuesObserved)}
@@ -98,7 +98,7 @@ export default function BatchHealthHistoryModal({ batch, onClose }: BatchHealthH
                                                     ISSUE DETECTED
                                                 </span>
                                                 {record.issueType && (
-                                                    <span className="text-xs bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 px-2 py-1 rounded">
+                                                    <span className="text-xs bg-[var(--color-bg-tertiary)] text-slate-600 dark:text-slate-300 px-2 py-1 rounded">
                                                         {record.issueType}
                                                     </span>
                                                 )}
diff --git a/frontend/src/components/layout/MobileNav.tsx b/frontend/src/components/layout/MobileNav.tsx
index bb6087e..f9b8f7f 100644
--- a/frontend/src/components/layout/MobileNav.tsx
+++ b/frontend/src/components/layout/MobileNav.tsx
@@ -17,7 +17,7 @@ export function MobileNav({ onMoreClick }: MobileNavProps) {
 
     return (
         <nav
-            className="md:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-slate-800 border-t border-slate-200 dark:border-slate-700 z-50"
+            className="md:hidden fixed bottom-0 left-0 right-0 bg-[var(--color-bg-elevated)] border-t border-[var(--color-border-default)] z-50"
             style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}
         >
             <div className="flex items-center justify-around px-2 py-1">
diff --git a/frontend/src/components/layout/PageHeader.tsx b/frontend/src/components/layout/PageHeader.tsx
index cc53eb7..a97a2f8 100644
--- a/frontend/src/components/layout/PageHeader.tsx
+++ b/frontend/src/components/layout/PageHeader.tsx
@@ -94,8 +94,8 @@ export function PageHeaderButton({
 }) {
     const variants = {
         primary: 'bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-white shadow-sm',
-        secondary: 'bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 text-[var(--color-text-primary)]',
-        ghost: 'hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300'
+        secondary: 'bg-[var(--color-bg-tertiary)] hover:bg-slate-200 dark:hover:bg-slate-600 text-[var(--color-text-primary)]',
+        ghost: 'hover:bg-slate-100 dark:hover:bg-slate-700 text-[var(--color-text-secondary)]'
     };
 
     return (
diff --git a/frontend/src/components/messaging/ShiftNotesWidget.tsx b/frontend/src/components/messaging/ShiftNotesWidget.tsx
index 2b25fd0..27f87b7 100644
--- a/frontend/src/components/messaging/ShiftNotesWidget.tsx
+++ b/frontend/src/components/messaging/ShiftNotesWidget.tsx
@@ -15,7 +15,7 @@ interface ShiftNotesWidgetProps {
 }
 
 const IMPORTANCE_CONFIG: Record<string, { color: string; bgColor: string; label: string }> = {
-    LOW: { color: 'text-[var(--color-text-tertiary)]', bgColor: 'bg-slate-100 dark:bg-slate-700', label: 'Low' },
+    LOW: { color: 'text-[var(--color-text-tertiary)]', bgColor: 'bg-[var(--color-bg-tertiary)]', label: 'Low' },
     NORMAL: { color: 'text-[var(--color-accent)]', bgColor: 'bg-blue-50 dark:bg-blue-900/30', label: 'Normal' },
     HIGH: { color: 'text-[var(--color-warning)]', bgColor: 'bg-amber-50 dark:bg-amber-900/30', label: 'High' },
     URGENT: { color: 'text-red-500', bgColor: 'bg-red-50 dark:bg-red-900/30', label: 'Urgent' }
@@ -100,10 +100,10 @@ export default function ShiftNotesWidget({
     const urgentNotes = notes.filter(n => n.importance === 'URGENT' || n.importance === 'HIGH');
 
     return (
-        <div className={`bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden ${className}`}>
+        <div className={`bg-[var(--color-bg-elevated)] rounded-xl border border-[var(--color-border-default)] overflow-hidden ${className}`}>
             {/* Header */}
             <div
-                className="p-4 border-b border-slate-200 dark:border-slate-700 flex items-center justify-between cursor-pointer"
+                className="p-4 border-b border-[var(--color-border-default)] flex items-center justify-between cursor-pointer"
                 onClick={() => compact && setExpanded(!expanded)}
             >
                 <div className="flex items-center gap-3">
@@ -143,14 +143,14 @@ export default function ShiftNotesWidget({
 
             {/* Create Form */}
             {showCreate && expanded && (
-                <form onSubmit={handleSubmit} className="p-4 bg-[var(--color-bg-tertiary)]/50 border-b border-slate-200 dark:border-slate-700">
+                <form onSubmit={handleSubmit} className="p-4 bg-[var(--color-bg-tertiary)]/50 border-b border-[var(--color-border-default)]">
                     <div className="space-y-3">
                         <textarea
                             value={newNote.content}
                             onChange={(e) => setNewNote({ ...newNote, content: e.target.value })}
                             placeholder="Add a note for the next shift..."
                             rows={3}
-                            className="w-full px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800 text-sm resize-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                            className="w-full px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-600 bg-[var(--color-bg-elevated)] text-sm resize-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                             autoFocus
                         />
                         <div className="flex items-center justify-between">
@@ -223,7 +223,7 @@ export default function ShiftNotesWidget({
                                             )}
                                         </div>
                                         <div className="flex-1 min-w-0">
-                                            <p className="text-sm text-slate-700 dark:text-slate-200 whitespace-pre-wrap">
+                                            <p className="text-sm text-[var(--color-text-secondary)]late-200 whitespace-pre-wrap">
                                                 {note.content}
                                             </p>
                                             <div className="flex items-center gap-3 mt-2 text-xs text-[var(--color-text-tertiary)]">
@@ -259,7 +259,7 @@ export default function ShiftNotesWidget({
 
             {/* View All Link */}
             {expanded && notes.length > 0 && (
-                <div className="p-3 border-t border-slate-200 dark:border-slate-700 text-center">
+                <div className="p-3 border-t border-[var(--color-border-default)] text-center">
                     <button className="text-sm text-indigo-600 hover:text-indigo-700 font-medium">
                         View All Notes
                     </button>
diff --git a/frontend/src/components/tasks/CompleteTaskModal.tsx b/frontend/src/components/tasks/CompleteTaskModal.tsx
index ead1d2e..2d6c735 100644
--- a/frontend/src/components/tasks/CompleteTaskModal.tsx
+++ b/frontend/src/components/tasks/CompleteTaskModal.tsx
@@ -28,8 +28,8 @@ export default function CompleteTaskModal({ task, onClose, onSuccess }: Complete
 
     return (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-fade-in">
-            <div className="bg-white dark:bg-slate-900 w-full max-w-md rounded-2xl shadow-2xl overflow-hidden animate-scale-in">
-                <div className="p-6 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center">
+            <div className="bg-[var(--color-bg-elevated)] w-full max-w-md rounded-2xl shadow-2xl overflow-hidden animate-scale-in">
+                <div className="p-6 border-b border-[var(--color-border-default)] flex justify-between items-center">
                     <h2 className="text-xl font-bold dark:text-white flex items-center gap-2">
                         <CheckCircle className="text-[var(--color-primary)]" />
                         Complete Task
@@ -40,7 +40,7 @@ export default function CompleteTaskModal({ task, onClose, onSuccess }: Complete
                 </div>
 
                 <form onSubmit={handleSubmit} className="p-6 space-y-4">
-                    <div className="bg-slate-50 dark:bg-slate-800 p-4 rounded-xl border border-slate-200 dark:border-slate-700">
+                    <div className="bg-[var(--color-bg-tertiary)] p-4 rounded-xl border border-[var(--color-border-default)]">
                         <h3 className="font-bold text-[var(--color-text-primary)]">{task.title}</h3>
                         {task.description && (
                             <p className="text-sm text-[var(--color-text-tertiary)] mt-1">{task.description}</p>
@@ -48,13 +48,13 @@ export default function CompleteTaskModal({ task, onClose, onSuccess }: Complete
                     </div>
 
                     <div>
-                        <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+                        <label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-2">
                             Completion Notes (Optional)
                         </label>
                         <textarea
                             value={notes}
                             onChange={(e) => setNotes(e.target.value)}
-                            className="w-full p-3 rounded-lg bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 dark:text-white h-32 resize-none"
+                            className="w-full p-3 rounded-lg bg-[var(--color-bg-elevated)] border border-[var(--color-border-default)] dark:text-white h-32 resize-none"
                             placeholder="e.g. Used 50gal instead of 40gal..."
                         />
                     </div>
diff --git a/frontend/src/components/tasks/CreateTaskModal.tsx b/frontend/src/components/tasks/CreateTaskModal.tsx
index 65b158a..79105e6 100644
--- a/frontend/src/components/tasks/CreateTaskModal.tsx
+++ b/frontend/src/components/tasks/CreateTaskModal.tsx
@@ -115,9 +115,9 @@ export default function CreateTaskModal({
 
     return (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-in fade-in duration-200">
-            <div className="bg-white dark:bg-slate-900 w-full max-w-lg rounded-2xl shadow-xl overflow-hidden flex flex-col max-h-[90vh]">
+            <div className="bg-[var(--color-bg-elevated)] w-full max-w-lg rounded-2xl shadow-xl overflow-hidden flex flex-col max-h-[90vh]">
 
-                <div className="p-4 border-b border-slate-100 dark:border-slate-800 flex justify-between items-center">
+                <div className="p-4 border-b border-[var(--color-border-subtle)] flex justify-between items-center">
                     <h2 className="text-xl font-bold text-[var(--color-text-primary)]">New Task</h2>
                     <button onClick={onClose} className="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full">
                         <X size={20} className="text-[var(--color-text-tertiary)]" />
@@ -127,14 +127,14 @@ export default function CreateTaskModal({
                 <form onSubmit={handleSubmit} className="flex-1 overflow-y-auto p-4 space-y-4">
 
                     {/* Template Selection */}
-                    <div className="bg-slate-50 dark:bg-slate-800/50 p-3 rounded-xl border border-dashed border-slate-300 dark:border-slate-700">
+                    <div className="bg-[var(--color-bg-tertiary)]/50 p-3 rounded-xl border border-dashed border-slate-300 dark:border-slate-700">
                         <label className="block text-xs font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider mb-2 flex items-center gap-2">
                             <FileText size={14} /> Quick Fill from Template
                         </label>
                         <select
                             value={selectedTemplateId}
                             onChange={(e) => handleTemplateChange(e.target.value)}
-                            className="w-full p-2 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg text-sm text-[var(--color-text-primary)]"
+                            className="w-full p-2 bg-[var(--color-bg-elevated)] border border-[var(--color-border-default)] rounded-lg text-sm text-[var(--color-text-primary)]"
                         >
                             <option value="">-- Start Blank --</option>
                             {templates.map(t => (
@@ -144,23 +144,23 @@ export default function CreateTaskModal({
                     </div>
 
                     <div>
-                        <label className="block text-sm font-bold text-slate-700 dark:text-slate-300 mb-1">Task Title *</label>
+                        <label className="block text-sm font-bold text-[var(--color-text-secondary)] mb-1">Task Title *</label>
                         <input
                             required
                             value={title}
                             onChange={e => setTitle(e.target.value)}
                             placeholder="e.g. Water Room A"
-                            className="w-full p-3 bg-slate-50 dark:bg-slate-800 border-none rounded-xl text-[var(--color-text-primary)] focus:ring-2 focus:ring-emerald-500"
+                            className="w-full p-3 bg-[var(--color-bg-tertiary)] border-none rounded-xl text-[var(--color-text-primary)] focus:ring-2 focus:ring-emerald-500"
                         />
                     </div>
 
                     <div className="grid grid-cols-2 gap-4">
                         <div>
-                            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Priority</label>
+                            <label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-1">Priority</label>
                             <select
                                 value={priority}
                                 onChange={e => setPriority(e.target.value)}
-                                className="w-full p-3 bg-slate-50 dark:bg-slate-800 border-none rounded-xl text-[var(--color-text-primary)]"
+                                className="w-full p-3 bg-[var(--color-bg-tertiary)] border-none rounded-xl text-[var(--color-text-primary)]"
                             >
                                 <option value="LOW">Low</option>
                                 <option value="MEDIUM">Medium</option>
@@ -169,25 +169,25 @@ export default function CreateTaskModal({
                             </select>
                         </div>
                         <div>
-                            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Due Date</label>
+                            <label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-1">Due Date</label>
                             <input
                                 type="date"
                                 required
                                 value={dueDate}
                                 onChange={e => setDueDate(e.target.value)}
-                                className="w-full p-3 bg-slate-50 dark:bg-slate-800 border-none rounded-xl text-[var(--color-text-primary)]"
+                                className="w-full p-3 bg-[var(--color-bg-tertiary)] border-none rounded-xl text-[var(--color-text-primary)]"
                             />
                         </div>
                     </div>
 
                     <div>
-                        <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1 flex items-center gap-2">
+                        <label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-1 flex items-center gap-2">
                             <User size={16} /> Assign To
                         </label>
                         <select
                             value={assigneeId}
                             onChange={e => setAssigneeId(e.target.value)}
-                            className="w-full p-3 bg-slate-50 dark:bg-slate-800 border-none rounded-xl text-[var(--color-text-primary)]"
+                            className="w-full p-3 bg-[var(--color-bg-tertiary)] border-none rounded-xl text-[var(--color-text-primary)]"
                         >
                             <option value="">-- Unassigned --</option>
                             {users.map(u => (
@@ -198,13 +198,13 @@ export default function CreateTaskModal({
 
                     <div className="grid grid-cols-2 gap-4">
                         <div>
-                            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1 flex items-center gap-2">
+                            <label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-1 flex items-center gap-2">
                                 <MapPin size={16} /> Room (Optional)
                             </label>
                             <select
                                 value={roomId}
                                 onChange={e => setRoomId(e.target.value)}
-                                className="w-full p-3 bg-slate-50 dark:bg-slate-800 border-none rounded-xl text-[var(--color-text-primary)]"
+                                className="w-full p-3 bg-[var(--color-bg-tertiary)] border-none rounded-xl text-[var(--color-text-primary)]"
                             >
                                 <option value="">-- None --</option>
                                 {rooms.map(r => (
@@ -213,13 +213,13 @@ export default function CreateTaskModal({
                             </select>
                         </div>
                         <div>
-                            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1 flex items-center gap-2">
+                            <label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-1 flex items-center gap-2">
                                 <Box size={16} /> Batch (Optional)
                             </label>
                             <select
                                 value={batchId}
                                 onChange={e => setBatchId(e.target.value)}
-                                className="w-full p-3 bg-slate-50 dark:bg-slate-800 border-none rounded-xl text-[var(--color-text-primary)]"
+                                className="w-full p-3 bg-[var(--color-bg-tertiary)] border-none rounded-xl text-[var(--color-text-primary)]"
                             >
                                 <option value="">-- None --</option>
                                 {batches.map(b => (
@@ -230,13 +230,13 @@ export default function CreateTaskModal({
                     </div>
 
                     <div>
-                        <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Description / Notes</label>
+                        <label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-1">Description / Notes</label>
                         <textarea
                             value={description}
                             onChange={e => setDescription(e.target.value)}
                             rows={3}
                             placeholder="Details about the task..."
-                            className="w-full p-3 bg-slate-50 dark:bg-slate-800 border-none rounded-xl text-[var(--color-text-primary)] resize-none"
+                            className="w-full p-3 bg-[var(--color-bg-tertiary)] border-none rounded-xl text-[var(--color-text-primary)] resize-none"
                         />
                     </div>
 
diff --git a/frontend/src/components/tasks/TasksDueTodayWidget.tsx b/frontend/src/components/tasks/TasksDueTodayWidget.tsx
index 21727bd..9333114 100644
--- a/frontend/src/components/tasks/TasksDueTodayWidget.tsx
+++ b/frontend/src/components/tasks/TasksDueTodayWidget.tsx
@@ -42,7 +42,7 @@ export default function TasksDueTodayWidget({ userId }: TasksDueTodayWidgetProps
     if (tasks.length === 0) return null;
 
     return (
-        <div className="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
+        <div className="bg-[var(--color-bg-elevated)] rounded-2xl shadow-sm border border-[var(--color-border-default)] p-6">
             <div className="flex justify-between items-center mb-4">
                 <h3 className="text-lg font-bold text-[var(--color-text-primary)] flex items-center gap-2">
                     <List className="text-[var(--color-primary)]" />
diff --git a/frontend/src/components/touchpoints/QuickLogButtons.tsx b/frontend/src/components/touchpoints/QuickLogButtons.tsx
index a8d48a1..cba9345 100644
--- a/frontend/src/components/touchpoints/QuickLogButtons.tsx
+++ b/frontend/src/components/touchpoints/QuickLogButtons.tsx
@@ -110,7 +110,7 @@ export function QuickLogBar({ batchId, batchName, onSuccess, compact = false }:
     }
 
     return (
-        <div className="flex items-center gap-1 bg-slate-100 dark:bg-slate-700 rounded-lg p-1">
+        <div className="flex items-center gap-1 bg-[var(--color-bg-tertiary)] rounded-lg p-1">
             {QUICK_ACTIONS.map(action => {
                 const Icon = action.icon;
                 const isLoading = loading === action.type;
diff --git a/frontend/src/components/touchpoints/TouchPointModal.tsx b/frontend/src/components/touchpoints/TouchPointModal.tsx
index ece5e95..e830614 100644
--- a/frontend/src/components/touchpoints/TouchPointModal.tsx
+++ b/frontend/src/components/touchpoints/TouchPointModal.tsx
@@ -70,10 +70,10 @@ export default function TouchPointModal({ isOpen, onClose, preselectedBatchId, o
 
     return (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-in fade-in duration-200">
-            <div className="bg-white dark:bg-slate-900 w-full max-w-md rounded-2xl shadow-xl overflow-hidden flex flex-col max-h-[90vh]">
+            <div className="bg-[var(--color-bg-elevated)] w-full max-w-md rounded-2xl shadow-xl overflow-hidden flex flex-col max-h-[90vh]">
 
                 {/* Header */}
-                <div className="p-4 border-b border-slate-100 dark:border-slate-800 flex justify-between items-center">
+                <div className="p-4 border-b border-[var(--color-border-subtle)] flex justify-between items-center">
                     <h2 className="text-xl font-bold text-[var(--color-text-primary)]">Log Plant Touch</h2>
                     <button onClick={onClose} className="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full">
                         <X size={20} className="text-[var(--color-text-tertiary)]" />
@@ -86,13 +86,13 @@ export default function TouchPointModal({ isOpen, onClose, preselectedBatchId, o
                     {/* Batch Selection (if not preselected) */}
                     {!preselectedBatchId && (
                         <div>
-                            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+                            <label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-2">
                                 Select Batch
                             </label>
                             <select
                                 value={selectedBatchId}
                                 onChange={(e) => setSelectedBatchId(e.target.value)}
-                                className="w-full p-3 bg-slate-50 dark:bg-slate-800 border-none rounded-xl text-[var(--color-text-primary)] focus:ring-2 focus:ring-emerald-500"
+                                className="w-full p-3 bg-[var(--color-bg-tertiary)] border-none rounded-xl text-[var(--color-text-primary)] focus:ring-2 focus:ring-emerald-500"
                             >
                                 <option value="">-- Select Batch --</option>
                                 {batches.map(b => (
@@ -104,7 +104,7 @@ export default function TouchPointModal({ isOpen, onClose, preselectedBatchId, o
 
                     {/* Touch Type Grid */}
                     <div>
-                        <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+                        <label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-2">
                             Action Type
                         </label>
                         <div className="grid grid-cols-3 gap-3">
@@ -113,8 +113,8 @@ export default function TouchPointModal({ isOpen, onClose, preselectedBatchId, o
                                     key={type}
                                     onClick={() => setSelectedType(type)}
                                     className={`flex flex-col items-center justify-center p-3 rounded-xl gap-2 transition-all ${selectedType === type
-                                        ? 'ring-2 ring-emerald-500 ring-offset-2 dark:ring-offset-slate-900 bg-slate-50 dark:bg-slate-800'
-                                        : 'hover:bg-slate-50 dark:hover:bg-slate-800 border border-slate-100 dark:border-slate-800'
+                                        ? 'ring-2 ring-emerald-500 ring-offset-2 ring-offset-[var(--color-bg-primary)] bg-[var(--color-bg-tertiary)]'
+                                        : 'hover:bg-[var(--color-bg-tertiary)] border border-[var(--color-border-subtle)]'
                                         }`}
                                 >
                                     <div className={`p-2 rounded-full ${color}`}>
@@ -128,19 +128,19 @@ export default function TouchPointModal({ isOpen, onClose, preselectedBatchId, o
 
                     {/* Notes */}
                     <div>
-                        <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+                        <label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-2">
                             Notes
                         </label>
                         <textarea
                             value={notes}
                             onChange={(e) => setNotes(e.target.value)}
                             placeholder="Details about the action..."
-                            className="w-full p-3 bg-slate-50 dark:bg-slate-800 border-none rounded-xl text-[var(--color-text-primary)] focus:ring-2 focus:ring-emerald-500 min-h-[100px] resize-none"
+                            className="w-full p-3 bg-[var(--color-bg-tertiary)] border-none rounded-xl text-[var(--color-text-primary)] focus:ring-2 focus:ring-emerald-500 min-h-[100px] resize-none"
                         />
                     </div>
 
                     {/* Photo Placeholder */}
-                    <button className="w-full p-4 border-2 border-dashed border-slate-200 dark:border-slate-700 rounded-xl text-[var(--color-text-tertiary)] hover:bg-slate-50 dark:hover:bg-slate-800 flex items-center justify-center gap-2">
+                    <button className="w-full p-4 border-2 border-dashed border-[var(--color-border-default)] rounded-xl text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-tertiary)] flex items-center justify-center gap-2">
                         <Camera size={20} />
                         <span>Add Photo (Optional)</span>
                     </button>
@@ -148,7 +148,7 @@ export default function TouchPointModal({ isOpen, onClose, preselectedBatchId, o
                 </div>
 
                 {/* Footer */}
-                <div className="p-4 border-t border-slate-100 dark:border-slate-800">
+                <div className="p-4 border-t border-[var(--color-border-subtle)]">
                     <button
                         onClick={handleSubmit}
                         disabled={!selectedBatchId || !selectedType || isLoading}
diff --git a/frontend/src/components/ui/BottomSheet.tsx b/frontend/src/components/ui/BottomSheet.tsx
index af310ab..22f18f3 100644
--- a/frontend/src/components/ui/BottomSheet.tsx
+++ b/frontend/src/components/ui/BottomSheet.tsx
@@ -76,7 +76,7 @@ export function BottomSheet({ isOpen, onClose, title, children, height = 'auto'
             {/* Sheet */}
             <div
                 ref={sheetRef}
-                className={`absolute bottom-0 left-0 right-0 bg-white dark:bg-slate-800 rounded-t-2xl shadow-xl transition-transform duration-200 ${heightClasses[height]} ${isClosing ? 'translate-y-full' : 'translate-y-0'}`}
+                className={`absolute bottom-0 left-0 right-0 bg-[var(--color-bg-elevated)] rounded-t-2xl shadow-xl transition-transform duration-200 ${heightClasses[height]} ${isClosing ? 'translate-y-full' : 'translate-y-0'}`}
                 style={{ transform: isClosing ? 'translateY(100%)' : `translateY(${dragOffset}px)` }}
             >
                 {/* Drag Handle */}
@@ -91,7 +91,7 @@ export function BottomSheet({ isOpen, onClose, title, children, height = 'auto'
 
                 {/* Header */}
                 {title && (
-                    <div className="flex items-center justify-between px-4 pb-4 border-b border-slate-200 dark:border-slate-700">
+                    <div className="flex items-center justify-between px-4 pb-4 border-b border-[var(--color-border-default)]">
                         <h3 className="text-lg font-bold text-[var(--color-text-primary)]">{title}</h3>
                         <button
                             onClick={handleClose}
@@ -128,9 +128,9 @@ export function ResponsiveModal({ isOpen, onClose, title, children, className =
             {/* Desktop Modal */}
             <div className="hidden md:flex fixed inset-0 z-[100] items-center justify-center p-4">
                 <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
-                <div className={`relative bg-white dark:bg-slate-800 rounded-2xl shadow-2xl max-w-lg w-full max-h-[85vh] overflow-hidden animate-scale-in ${className}`}>
+                <div className={`relative bg-[var(--color-bg-elevated)] rounded-2xl shadow-2xl max-w-lg w-full max-h-[85vh] overflow-hidden animate-scale-in ${className}`}>
                     {title && (
-                        <div className="flex items-center justify-between p-4 border-b border-slate-200 dark:border-slate-700">
+                        <div className="flex items-center justify-between p-4 border-b border-[var(--color-border-default)]">
                             <h3 className="text-lg font-bold text-[var(--color-text-primary)]">{title}</h3>
                             <button
                                 onClick={onClose}
diff --git a/frontend/src/components/ui/CommandPalette.tsx b/frontend/src/components/ui/CommandPalette.tsx
index 18de8c1..aa74d69 100644
--- a/frontend/src/components/ui/CommandPalette.tsx
+++ b/frontend/src/components/ui/CommandPalette.tsx
@@ -101,8 +101,8 @@ export function CommandPalette() {
     return (
         <div className="fixed inset-0 z-[100] flex items-start justify-center pt-[15vh] p-4">
             <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={() => setIsOpen(false)} />
-            <div className="relative w-full max-w-lg bg-white dark:bg-slate-800 rounded-2xl shadow-2xl overflow-hidden animate-scale-in">
-                <div className="flex items-center gap-3 p-4 border-b border-slate-200 dark:border-slate-700">
+            <div className="relative w-full max-w-lg bg-[var(--color-bg-elevated)] rounded-2xl shadow-2xl overflow-hidden animate-scale-in">
+                <div className="flex items-center gap-3 p-4 border-b border-[var(--color-border-default)]">
                     <Search size={20} className="text-[var(--color-text-tertiary)]" />
                     <input
                         type="text"
@@ -112,7 +112,7 @@ export function CommandPalette() {
                         className="flex-1 bg-transparent text-[var(--color-text-primary)] placeholder-slate-400 outline-none text-lg"
                         autoFocus
                     />
-                    <kbd className="hidden sm:inline-flex px-2 py-1 text-xs font-mono bg-slate-100 dark:bg-slate-700 text-[var(--color-text-tertiary)] rounded">ESC</kbd>
+                    <kbd className="hidden sm:inline-flex px-2 py-1 text-xs font-mono bg-[var(--color-bg-tertiary)] text-[var(--color-text-tertiary)] rounded">ESC</kbd>
                 </div>
                 <div className="max-h-80 overflow-y-auto p-2">
                     {filteredCommands.length === 0 ? (
@@ -130,7 +130,7 @@ export function CommandPalette() {
                                             <button
                                                 key={cmd.id}
                                                 onClick={() => { cmd.action(); setIsOpen(false); }}
-                                                className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left transition-colors ${isSelected ? 'bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300' : 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700'}`}
+                                                className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left transition-colors ${isSelected ? 'bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300' : 'text-[var(--color-text-secondary)] hover:bg-slate-100 dark:hover:bg-slate-700'}`}
                                             >
                                                 <Icon size={18} />
                                                 <span>{cmd.label}</span>
@@ -150,7 +150,7 @@ export function CommandPalette() {
                                             <button
                                                 key={cmd.id}
                                                 onClick={() => { cmd.action(); setIsOpen(false); }}
-                                                className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left transition-colors ${isSelected ? 'bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300' : 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700'}`}
+                                                className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left transition-colors ${isSelected ? 'bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300' : 'text-[var(--color-text-secondary)] hover:bg-slate-100 dark:hover:bg-slate-700'}`}
                                             >
                                                 <Icon size={18} />
                                                 <span>{cmd.label}</span>
@@ -170,7 +170,7 @@ export function CommandPalette() {
                                             <button
                                                 key={cmd.id}
                                                 onClick={() => { cmd.action(); setIsOpen(false); }}
-                                                className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left transition-colors ${isSelected ? 'bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300' : 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700'}`}
+                                                className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left transition-colors ${isSelected ? 'bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300' : 'text-[var(--color-text-secondary)] hover:bg-slate-100 dark:hover:bg-slate-700'}`}
                                             >
                                                 <Icon size={18} />
                                                 <span>{cmd.label}</span>
@@ -182,15 +182,15 @@ export function CommandPalette() {
                         </>
                     )}
                 </div>
-                <div className="border-t border-slate-200 dark:border-slate-700 p-3 flex items-center justify-between text-xs text-[var(--color-text-tertiary)]">
+                <div className="border-t border-[var(--color-border-default)] p-3 flex items-center justify-between text-xs text-[var(--color-text-tertiary)]">
                     <div className="flex items-center gap-4">
                         <span className="flex items-center gap-1">
-                            <kbd className="px-1.5 py-0.5 bg-slate-100 dark:bg-slate-700 rounded">↑</kbd>
-                            <kbd className="px-1.5 py-0.5 bg-slate-100 dark:bg-slate-700 rounded">↓</kbd>
+                            <kbd className="px-1.5 py-0.5 bg-[var(--color-bg-tertiary)] rounded">↑</kbd>
+                            <kbd className="px-1.5 py-0.5 bg-[var(--color-bg-tertiary)] rounded">↓</kbd>
                             to navigate
                         </span>
                         <span className="flex items-center gap-1">
-                            <kbd className="px-1.5 py-0.5 bg-slate-100 dark:bg-slate-700 rounded">↵</kbd>
+                            <kbd className="px-1.5 py-0.5 bg-[var(--color-bg-tertiary)] rounded">↵</kbd>
                             to select
                         </span>
                     </div>
diff --git a/frontend/src/components/ui/DataTable.tsx b/frontend/src/components/ui/DataTable.tsx
index 4e3ce87..db76573 100644
--- a/frontend/src/components/ui/DataTable.tsx
+++ b/frontend/src/components/ui/DataTable.tsx
@@ -43,7 +43,7 @@ export function DataTable<T extends { id: string | number }>({
                 </div>
                 <div>
                     {Array.from({ length: 5 }).map((_, i) => (
-                        <div key={i} className="px-4 py-4 border-b border-slate-100 dark:border-slate-800/50 flex items-center gap-4">
+                        <div key={i} className="px-4 py-4 border-b border-[var(--color-border-subtle)]/50 flex items-center gap-4">
                             <div className="h-4 w-1/4 bg-slate-100 dark:bg-slate-800 rounded animate-pulse" />
                             <div className="h-4 w-1/4 bg-slate-100 dark:bg-slate-800 rounded animate-pulse" />
                             <div className="h-4 w-1/4 bg-slate-100 dark:bg-slate-800 rounded animate-pulse" />
@@ -107,7 +107,7 @@ export function DataTable<T extends { id: string | number }>({
                                     <td
                                         key={String(col.key) + idx}
                                         className={cn(
-                                            "px-4 py-3 align-middle text-slate-700 dark:text-slate-300",
+                                            "px-4 py-3 align-middle text-[var(--color-text-secondary)]",
                                             col.hideOnMobile && "hidden md:table-cell",
                                             col.className
                                         )}
diff --git a/frontend/src/components/ui/LinearPrimitives.tsx b/frontend/src/components/ui/LinearPrimitives.tsx
index a9561f3..910b839 100644
--- a/frontend/src/components/ui/LinearPrimitives.tsx
+++ b/frontend/src/components/ui/LinearPrimitives.tsx
@@ -66,7 +66,7 @@ export function SectionHeader({ icon: Icon, title, count, accent = 'default' }:
                 {title}
             </h3>
             {count !== undefined && (
-                <span className="px-1.5 py-0.5 rounded-full bg-slate-100 dark:bg-slate-800 text-[10px] font-bold text-[var(--color-text-tertiary)] border border-slate-200 dark:border-slate-700/50">
+                <span className="px-1.5 py-0.5 rounded-full bg-slate-100 dark:bg-slate-800 text-[10px] font-bold text-[var(--color-text-tertiary)] border border-[var(--color-border-default)]/50">
                     {count}
                 </span>
             )}
@@ -85,7 +85,7 @@ interface EmptyStateProps {
 export function EmptyState({ icon: Icon, title, description, action }: EmptyStateProps) {
     return (
         <div className="flex flex-col items-center justify-center py-20 px-4 text-center border-2 border-dashed border-[var(--color-border-subtle)] rounded-2xl bg-slate-50/30 dark:bg-slate-900/10">
-            <div className="w-16 h-16 bg-white dark:bg-slate-900 rounded-2xl flex items-center justify-center shadow-xl mb-6 ring-1 ring-slate-200 dark:ring-slate-800">
+            <div className="w-16 h-16 bg-[var(--color-bg-elevated)] rounded-2xl flex items-center justify-center shadow-xl mb-6 ring-1 ring-slate-200 dark:ring-slate-800">
                 <Icon size={32} className="text-slate-300 dark:text-slate-700" />
             </div>
             <h3 className="text-base font-bold text-[var(--color-text-primary)]">{title}</h3>
@@ -139,7 +139,7 @@ export function MetricCard({ icon: Icon, label, value, subtitle, accent = 'defau
                 <p className="text-[11px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-widest">{label}</p>
             </div>
             {subtitle && (
-                <div className="mt-4 pt-4 border-t border-slate-100 dark:border-slate-800/50">
+                <div className="mt-4 pt-4 border-t border-[var(--color-border-subtle)]/50">
                     <p className="text-[10px] text-[var(--color-text-tertiary)] dark:text-[var(--color-text-tertiary)]">{subtitle}</p>
                 </div>
             )}
diff --git a/frontend/src/components/ui/PhotoUpload.tsx b/frontend/src/components/ui/PhotoUpload.tsx
index 8bd9f8b..b7ebf97 100644
--- a/frontend/src/components/ui/PhotoUpload.tsx
+++ b/frontend/src/components/ui/PhotoUpload.tsx
@@ -138,7 +138,7 @@ export default function PhotoUpload({
                                 e.stopPropagation();
                                 fileInputRef.current?.click();
                             }}
-                            className="flex items-center gap-1 px-3 py-2 bg-slate-100 dark:bg-slate-700 rounded-lg text-sm hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors"
+                            className="flex items-center gap-1 px-3 py-2 bg-[var(--color-bg-tertiary)] rounded-lg text-sm hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors"
                         >
                             <Upload size={16} />
                             Browse
diff --git a/frontend/src/components/ui/PullToRefresh.tsx b/frontend/src/components/ui/PullToRefresh.tsx
index 6fb3b9a..bd0d20d 100644
--- a/frontend/src/components/ui/PullToRefresh.tsx
+++ b/frontend/src/components/ui/PullToRefresh.tsx
@@ -81,7 +81,7 @@ export function PullToRefresh({ onRefresh, children, disabled = false }: PullToR
                     opacity: progress
                 }}
             >
-                <div className={`p-2 rounded-full bg-white dark:bg-slate-800 shadow-lg ${refreshing ? 'animate-spin' : ''}`}>
+                <div className={`p-2 rounded-full bg-[var(--color-bg-elevated)] shadow-lg ${refreshing ? 'animate-spin' : ''}`}>
                     <RefreshCw size={20} className="text-[var(--color-primary)]" />
                 </div>
             </div>
diff --git a/frontend/src/components/ui/Skeleton.tsx b/frontend/src/components/ui/Skeleton.tsx
index 704d375..07a5c65 100644
--- a/frontend/src/components/ui/Skeleton.tsx
+++ b/frontend/src/components/ui/Skeleton.tsx
@@ -12,7 +12,7 @@ export function Skeleton({ className = '' }: SkeletonProps) {
 
 export function SkeletonCard() {
     return (
-        <div className="bg-white dark:bg-slate-800 p-4 rounded-xl border border-slate-200 dark:border-slate-700">
+        <div className="bg-[var(--color-bg-elevated)] p-4 rounded-xl border border-[var(--color-border-default)]">
             <div className="flex justify-between items-start mb-3">
                 <div className="space-y-2">
                     <Skeleton className="h-5 w-32" />
@@ -30,8 +30,8 @@ export function SkeletonCard() {
 
 export function SkeletonTable({ rows = 5 }: { rows?: number }) {
     return (
-        <div className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden">
-            <div className="p-4 border-b border-slate-200 dark:border-slate-700">
+        <div className="bg-[var(--color-bg-elevated)] rounded-xl border border-[var(--color-border-default)] overflow-hidden">
+            <div className="p-4 border-b border-[var(--color-border-default)]">
                 <Skeleton className="h-6 w-40" />
             </div>
             <div className="divide-y divide-slate-100 dark:divide-slate-700">
@@ -50,7 +50,7 @@ export function SkeletonTable({ rows = 5 }: { rows?: number }) {
 
 export function SkeletonMetricCard() {
     return (
-        <div className="bg-white dark:bg-slate-800 p-4 rounded-xl border border-slate-200 dark:border-slate-700">
+        <div className="bg-[var(--color-bg-elevated)] p-4 rounded-xl border border-[var(--color-border-default)]">
             <Skeleton className="h-10 w-10 rounded-lg mb-3" />
             <Skeleton className="h-8 w-12 mb-1" />
             <Skeleton className="h-3 w-24" />
@@ -62,7 +62,7 @@ export function SkeletonList({ items = 5 }: { items?: number }) {
     return (
         <div className="space-y-3">
             {Array.from({ length: items }).map((_, i) => (
-                <div key={i} className="bg-white dark:bg-slate-800 p-4 rounded-xl border border-slate-200 dark:border-slate-700 flex items-center gap-4">
+                <div key={i} className="bg-[var(--color-bg-elevated)] p-4 rounded-xl border border-[var(--color-border-default)] flex items-center gap-4">
                     <Skeleton className="h-10 w-10 rounded-full" />
                     <div className="flex-1 space-y-2">
                         <Skeleton className="h-4 w-3/4" />
diff --git a/frontend/src/components/ui/SwipeableRow.tsx b/frontend/src/components/ui/SwipeableRow.tsx
index c96d10d..181fb2f 100644
--- a/frontend/src/components/ui/SwipeableRow.tsx
+++ b/frontend/src/components/ui/SwipeableRow.tsx
@@ -145,7 +145,7 @@ export function SwipeableRow({
                     transform: `translateX(${offset}px)`,
                     transition: isSwiping ? 'none' : 'transform 0.2s ease-out'
                 }}
-                className="relative bg-white dark:bg-slate-800"
+                className="relative bg-[var(--color-bg-elevated)]"
             >
                 {children}
             </div>
diff --git a/frontend/src/components/ui/VisitorBadge.tsx b/frontend/src/components/ui/VisitorBadge.tsx
index ced2c95..a36fbcb 100644
--- a/frontend/src/components/ui/VisitorBadge.tsx
+++ b/frontend/src/components/ui/VisitorBadge.tsx
@@ -271,10 +271,10 @@ export default function VisitorBadge({
                 </div>
 
                 {/* Content */}
-                <div className="bg-white dark:bg-slate-800 p-6">
+                <div className="bg-[var(--color-bg-elevated)] p-6">
                     {/* Photo + Name */}
                     <div className="flex flex-col items-center mb-4">
-                        <div className="w-20 h-20 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mb-3 overflow-hidden">
+                        <div className="w-20 h-20 rounded-full bg-[var(--color-bg-tertiary)] flex items-center justify-center mb-3 overflow-hidden">
                             {photoUrl ? (
                                 <img src={photoUrl} alt={name} className="w-full h-full object-cover" />
                             ) : (
@@ -358,7 +358,7 @@ export default function VisitorBadge({
                         <select
                             value={selectedSize}
                             onChange={(e) => setSelectedSize(e.target.value as BadgeSize)}
-                            className="appearance-none px-3 py-2 pr-8 rounded-lg border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800 text-sm cursor-pointer"
+                            className="appearance-none px-3 py-2 pr-8 rounded-lg border border-slate-200 dark:border-slate-600 bg-[var(--color-bg-elevated)] text-sm cursor-pointer"
                         >
                             <option value="standard">Standard (3.5" x 5")</option>
                             <option value="large">Large (3.5" x 6")</option>
@@ -411,7 +411,7 @@ export function BadgePrintQueue({
     const doneCount = queue.filter(b => b.status === 'done').length;
 
     return (
-        <div className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-4">
+        <div className="bg-[var(--color-bg-elevated)] rounded-xl border border-[var(--color-border-default)] p-4">
             <div className="flex items-center justify-between mb-4">
                 <div>
                     <h3 className="font-medium text-[var(--color-text-primary)]">Print Queue</h3>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index af87d82..a232a85 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -39,15 +39,15 @@
 
     /* Light mode text */
     --color-text-primary: #0F172A;
-    --color-text-secondary: #475569;
-    --color-text-tertiary: #94A3B8;
-    --color-text-quaternary: #CBD5E1;
+    --color-text-secondary: #334155;
+    --color-text-tertiary: #64748B;
+    --color-text-quaternary: #94A3B8;
     --color-text-inverse: #F9FAFB;
 
     /* Light mode borders */
-    --color-border-default: #E2E8F0;
-    --color-border-subtle: #F1F5F9;
-    --color-border-strong: #94A3B8;
+    --color-border-default: #CBD5E1;
+    --color-border-subtle: #E2E8F0;
+    --color-border-strong: #64748B;
 
     /* Primary accent (Cultivation Green) */
     --color-primary: #4ADE80;
@@ -115,17 +115,17 @@
     --color-bg-tertiary: #151C30;
     --color-bg-elevated: #11182A;
 
-    /* Text */
-    --color-text-primary: #F9FAFB;
-    --color-text-secondary: #9CA3AF;
-    --color-text-tertiary: #6B7280;
-    --color-text-quaternary: #374151;
-    --color-text-inverse: #020617;
+    /* Text - improved contrast */
+    --color-text-primary: #F8FAFC;
+    --color-text-secondary: #CBD5E1;
+    --color-text-tertiary: #94A3B8;
+    --color-text-quaternary: #64748B;
+    --color-text-inverse: #0F172A;
 
-    /* Borders */
-    --color-border-default: #1E293B;
-    --color-border-subtle: #151C30;
-    --color-border-strong: #334155;
+    /* Borders - more visible */
+    --color-border-default: #334155;
+    --color-border-subtle: #1E293B;
+    --color-border-strong: #475569;
 
     /* Primary (Emerald Green) */
     --color-primary: #4ADE80;
diff --git a/frontend/src/pages/AuditLogPage.tsx b/frontend/src/pages/AuditLogPage.tsx
index 3b09563..4a3a816 100644
--- a/frontend/src/pages/AuditLogPage.tsx
+++ b/frontend/src/pages/AuditLogPage.tsx
@@ -108,7 +108,7 @@ export default function AuditLogPage() {
                     <div className="w-5 h-5 rounded bg-slate-100 dark:bg-slate-800 flex items-center justify-center border border-[var(--color-border-subtle)]">
                         <User size={10} className="text-[var(--color-text-tertiary)]" />
                     </div>
-                    <span className="text-xs font-bold text-slate-700 dark:text-slate-300 uppercase tracking-widest">
+                    <span className="text-xs font-bold text-[var(--color-text-secondary)] uppercase tracking-widest">
                         {log.userName || 'SYSTEM_CORE'}
                     </span>
                 </div>
@@ -206,7 +206,7 @@ export default function AuditLogPage() {
                 />
 
                 {/* Simplified Clinical Pagination */}
-                <div className="flex items-center justify-between px-2 pt-4 border-t border-slate-100 dark:border-slate-800">
+                <div className="flex items-center justify-between px-2 pt-4 border-t border-[var(--color-border-subtle)]">
                     <p className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-widest">
                         Index <span className="text-[var(--color-text-primary)]">{((pagination.page - 1) * pagination.limit) + 1}–{Math.min(pagination.page * pagination.limit, pagination.total)}</span> / {pagination.total} RECORDED_EVENTS
                     </p>
diff --git a/frontend/src/pages/BatchDetailPage.tsx b/frontend/src/pages/BatchDetailPage.tsx
index 4cd6632..2b14529 100644
--- a/frontend/src/pages/BatchDetailPage.tsx
+++ b/frontend/src/pages/BatchDetailPage.tsx
@@ -224,9 +224,9 @@ export default function BatchDetailPage() {
                                         </div>
                                         <div className="space-y-4">
                                             {batch.touchPoints?.map(tp => (
-                                                <div key={tp.id} className="flex items-center justify-between p-3 rounded-xl bg-[var(--color-bg-tertiary)]/50 border border-slate-100 dark:border-slate-800/50">
+                                                <div key={tp.id} className="flex items-center justify-between p-3 rounded-xl bg-[var(--color-bg-tertiary)]/50 border border-[var(--color-border-subtle)]/50">
                                                     <div className="flex items-center gap-4">
-                                                        <div className="w-8 h-8 rounded-lg bg-white dark:bg-slate-800 flex items-center justify-center border border-[var(--color-border-subtle)] shadow-sm">
+                                                        <div className="w-8 h-8 rounded-lg bg-[var(--color-bg-elevated)] flex items-center justify-center border border-[var(--color-border-subtle)] shadow-sm">
                                                             <Activity size={14} className="text-[var(--color-primary)]" />
                                                         </div>
                                                         <div>
@@ -254,7 +254,7 @@ export default function BatchDetailPage() {
                                             <button className="px-3 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-widest">7d</button>
                                         </div>
                                     </div>
-                                    <div className="h-[400px] w-full bg-slate-50/50 dark:bg-slate-900/50 rounded-2xl border border-slate-100 dark:border-slate-800 flex items-center justify-center text-[var(--color-text-tertiary)]">
+                                    <div className="h-[400px] w-full bg-slate-50/50 dark:bg-slate-900/50 rounded-2xl border border-[var(--color-border-subtle)] flex items-center justify-center text-[var(--color-text-tertiary)]">
                                         <div className="flex flex-col items-center gap-2 text-center">
                                             <TrendingUp size={32} />
                                             <span className="text-xs font-bold tracking-widest uppercase">Interactive Analytics Terminal</span>
@@ -389,7 +389,7 @@ function TabButton({ active, label, icon: Icon, count, onClick }: any) {
 
 function ActionButton({ label, icon: Icon }: any) {
     return (
-        <button className="flex flex-col items-center justify-center p-4 rounded-xl bg-[var(--color-bg-tertiary)]/50 border border-slate-100 dark:border-slate-800/50 hover:border-emerald-500/50 hover:bg-[var(--color-primary)]/10 transition-all group">
+        <button className="flex flex-col items-center justify-center p-4 rounded-xl bg-[var(--color-bg-tertiary)]/50 border border-[var(--color-border-subtle)]/50 hover:border-emerald-500/50 hover:bg-[var(--color-primary)]/10 transition-all group">
             <Icon size={20} className="text-[var(--color-text-tertiary)] group-hover:text-[var(--color-primary)] mb-2 transition-colors" />
             <span className="text-[10px] font-bold uppercase tracking-widest text-[var(--color-text-tertiary)] group-hover:text-[var(--color-primary)]">{label}</span>
         </button>
@@ -398,7 +398,7 @@ function ActionButton({ label, icon: Icon }: any) {
 
 function IntegrationItem({ name, status, time }: any) {
     return (
-        <div className="flex items-center justify-between p-3 rounded-xl bg-[var(--color-bg-tertiary)]/50 border border-slate-100 dark:border-slate-800/50">
+        <div className="flex items-center justify-between p-3 rounded-xl bg-[var(--color-bg-tertiary)]/50 border border-[var(--color-border-subtle)]/50">
             <div className="flex items-center gap-3">
                 <div className="w-1.5 h-1.5 rounded-full bg-[var(--color-primary)]" />
                 <div>
diff --git a/frontend/src/pages/BatchesPage.tsx b/frontend/src/pages/BatchesPage.tsx
index 53fed5f..da19a65 100644
--- a/frontend/src/pages/BatchesPage.tsx
+++ b/frontend/src/pages/BatchesPage.tsx
@@ -146,7 +146,7 @@ export default function BatchesPage() {
                 const days = Math.floor((Date.now() - new Date(batch.startDate).getTime()) / (1000 * 60 * 60 * 24));
                 return (
                     <div className="flex flex-col items-end">
-                        <span className="font-medium text-slate-700 dark:text-slate-300">Day {days}</span>
+                        <span className="font-medium text-[var(--color-text-secondary)]">Day {days}</span>
                         <span className="text-[10px] text-[var(--color-text-tertiary)]">
                             {new Date(batch.startDate).toLocaleDateString()}
                         </span>
diff --git a/frontend/src/pages/MetrcDashboardPage.tsx b/frontend/src/pages/MetrcDashboardPage.tsx
index 245c6f9..ad75b6e 100644
--- a/frontend/src/pages/MetrcDashboardPage.tsx
+++ b/frontend/src/pages/MetrcDashboardPage.tsx
@@ -102,7 +102,7 @@ export default function MetrcDashboardPage() {
         {
             key: 'room',
             header: 'Local Room',
-            cell: (plant) => <span className="text-sm text-slate-700 dark:text-slate-300">{plant.room}</span>
+            cell: (plant) => <span className="text-sm text-[var(--color-text-secondary)]">{plant.room}</span>
         },
         {
             key: 'status',
@@ -225,7 +225,7 @@ export default function MetrcDashboardPage() {
                         className={cn(
                             "px-6 py-2 rounded-lg text-xs font-bold uppercase tracking-widest transition-all",
                             activeTab === tab
-                                ? "bg-white dark:bg-slate-800 text-[var(--color-text-primary)] shadow-sm"
+                                ? "bg-[var(--color-bg-elevated)] text-[var(--color-text-primary)] shadow-sm"
                                 : "text-[var(--color-text-tertiary)] hover:text-slate-600 dark:hover:text-slate-200"
                         )}
                     >
diff --git a/frontend/src/pages/RoomsPage.tsx b/frontend/src/pages/RoomsPage.tsx
index ee83236..ab05f24 100644
--- a/frontend/src/pages/RoomsPage.tsx
+++ b/frontend/src/pages/RoomsPage.tsx
@@ -118,7 +118,7 @@ export default function RoomsPage() {
                     ))}
                 </div>
             ) : rooms.length === 0 ? (
-                <div className="py-16 text-center rounded-2xl border-2 border-dashed border-slate-100 dark:border-slate-800">
+                <div className="py-16 text-center rounded-2xl border-2 border-dashed border-[var(--color-border-subtle)]">
                     <Home size={40} className="mx-auto text-slate-300 dark:text-slate-700 mb-4" />
                     <p className="text-sm font-bold text-[var(--color-text-tertiary)] uppercase tracking-widest mb-4">No Cultivation Zones Configured</p>
                     {isManager && (
@@ -149,7 +149,7 @@ export default function RoomsPage() {
                             >
                                 <Card className="p-0 overflow-hidden bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] hover:border-emerald-500/50 transition-all">
                                     {/* Header */}
-                                    <div className={cn("px-5 py-4 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between", accentClasses[accent as keyof typeof accentClasses])}>
+                                    <div className={cn("px-5 py-4 border-b border-[var(--color-border-subtle)] flex items-center justify-between", accentClasses[accent as keyof typeof accentClasses])}>
                                         <div className="flex items-center gap-3">
                                             <Icon size={16} />
                                             <span className="text-[10px] font-black uppercase tracking-[0.2em]">{room.type}</span>
@@ -169,7 +169,7 @@ export default function RoomsPage() {
                                         </div>
 
                                         {/* Environmental Vitals */}
-                                        <div className="grid grid-cols-2 gap-4 py-4 border-y border-slate-100 dark:border-slate-800">
+                                        <div className="grid grid-cols-2 gap-4 py-4 border-y border-[var(--color-border-subtle)]">
                                             <div className="text-center">
                                                 <div className="flex items-center justify-center gap-1.5 text-xl font-black tracking-tighter text-[var(--color-text-primary)]">
                                                     <Thermometer size={14} className="text-[var(--color-error)]" />
@@ -190,7 +190,7 @@ export default function RoomsPage() {
                                         <div className="flex items-center justify-between">
                                             <div className="flex items-center gap-2">
                                                 <div className={cn("w-2 h-2 rounded-full", room.batches?.length > 0 ? 'bg-[var(--color-primary)]' : 'bg-slate-300 dark:bg-slate-700')} />
-                                                <span className="text-xs font-bold text-slate-700 dark:text-slate-300">
+                                                <span className="text-xs font-bold text-[var(--color-text-secondary)]">
                                                     {room.batches?.length || 0} Active Batch{room.batches?.length === 1 ? '' : 'es'}
                                                 </span>
                                             </div>
diff --git a/frontend/src/pages/SuppliesPage.tsx b/frontend/src/pages/SuppliesPage.tsx
index 04a56e6..8f2c073 100644
--- a/frontend/src/pages/SuppliesPage.tsx
+++ b/frontend/src/pages/SuppliesPage.tsx
@@ -143,7 +143,7 @@ export default function SuppliesPage() {
             className: 'w-48',
             cell: (item) => (
                 <div className="flex items-center gap-3">
-                    <div className="flex items-center bg-slate-100 dark:bg-slate-800 rounded-lg p-0.5 border border-slate-200 dark:border-slate-700/50">
+                    <div className="flex items-center bg-slate-100 dark:bg-slate-800 rounded-lg p-0.5 border border-[var(--color-border-default)]/50">
                         <button
                             onClick={(e) => { e.stopPropagation(); handleQuantityAdjust(item.id, -1); }}
                             disabled={item.quantity <= 0}
@@ -292,7 +292,7 @@ export default function SuppliesPage() {
                             className={cn(
                                 "px-6 py-2 rounded-lg text-xs font-bold uppercase tracking-widest transition-all",
                                 view === 'all'
-                                    ? "bg-white dark:bg-slate-800 text-[var(--color-text-primary)] shadow-sm"
+                                    ? "bg-[var(--color-bg-elevated)] text-[var(--color-text-primary)] shadow-sm"
                                     : "text-[var(--color-text-tertiary)] hover:text-slate-700 dark:hover:text-slate-300"
                             )}
                         >
@@ -303,7 +303,7 @@ export default function SuppliesPage() {
                             className={cn(
                                 "px-6 py-2 rounded-lg text-xs font-bold uppercase tracking-widest transition-all relative",
                                 view === 'shopping'
-                                    ? "bg-white dark:bg-slate-800 text-[var(--color-text-primary)] shadow-sm"
+                                    ? "bg-[var(--color-bg-elevated)] text-[var(--color-text-primary)] shadow-sm"
                                     : "text-[var(--color-text-tertiary)] hover:text-slate-700 dark:hover:text-slate-300"
                             )}
                         >
@@ -388,7 +388,7 @@ export default function SuppliesPage() {
                             exit={{ opacity: 0, scale: 0.95, y: 20 }}
                             className="relative w-full max-w-lg bg-white dark:bg-[#0C0C0C] border border-[var(--color-border-subtle)] rounded-3xl shadow-2xl overflow-hidden"
                         >
-                            <div className="p-6 border-b border-slate-100 dark:border-slate-800 flex justify-between items-center">
+                            <div className="p-6 border-b border-[var(--color-border-subtle)] flex justify-between items-center">
                                 <h2 className="text-xl font-bold tracking-tight">Add Supply Record</h2>
                                 <button onClick={() => setIsAddModalOpen(false)} className="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl transition-colors">
                                     <X size={20} className="text-[var(--color-text-tertiary)]" />
diff --git a/frontend/src/pages/TasksPage.tsx b/frontend/src/pages/TasksPage.tsx
index 55f4d36..59bb0d9 100644
--- a/frontend/src/pages/TasksPage.tsx
+++ b/frontend/src/pages/TasksPage.tsx
@@ -164,7 +164,7 @@ export default function TasksPage() {
                                 ))}
                             </AnimatePresence>
                             {pendingTasks.length === 0 && (
-                                <div className="py-12 text-center rounded-2xl border-2 border-dashed border-slate-100 dark:border-slate-800">
+                                <div className="py-12 text-center rounded-2xl border-2 border-dashed border-[var(--color-border-subtle)]">
                                     <CheckCircle2 size={32} className="mx-auto text-[var(--color-primary)]/20 mb-3" />
                                     <p className="text-sm font-bold text-[var(--color-text-tertiary)] uppercase tracking-widest">All Actions Complete</p>
                                 </div>
@@ -174,14 +174,14 @@ export default function TasksPage() {
 
                     {/* Recently Completed Section */}
                     {completedTasks.length > 0 && (
-                        <div className="space-y-4 pt-4 border-t border-slate-100 dark:border-slate-800">
+                        <div className="space-y-4 pt-4 border-t border-[var(--color-border-subtle)]">
                             <div className="flex items-center justify-between px-2">
                                 <h3 className="text-xs font-bold uppercase tracking-[0.2em] text-[var(--color-text-tertiary)]">Archive / Verification</h3>
                                 <button className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-widest hover:text-[var(--color-primary)]">View History</button>
                             </div>
                             <div className="opacity-60 saturate-50 hover:opacity-100 transition-all duration-500 space-y-2">
                                 {completedTasks.slice(0, 3).map(task => (
-                                    <div key={task.id} className="flex items-center justify-between p-4 bg-slate-50/50 dark:bg-slate-900/30 rounded-xl border border-slate-100 dark:border-slate-800/50">
+                                    <div key={task.id} className="flex items-center justify-between p-4 bg-slate-50/50 dark:bg-slate-900/30 rounded-xl border border-[var(--color-border-subtle)]/50">
                                         <div className="flex items-center gap-4">
                                             <CheckCircle2 size={16} className="text-[var(--color-primary)]" />
                                             <div>
diff --git a/frontend/src/pages/VisitorManagementPage.tsx b/frontend/src/pages/VisitorManagementPage.tsx
index b49968d..ed3a3c7 100644
--- a/frontend/src/pages/VisitorManagementPage.tsx
+++ b/frontend/src/pages/VisitorManagementPage.tsx
@@ -263,7 +263,7 @@ export default function VisitorManagementPage() {
                                 className={cn(
                                     "px-5 py-2 rounded-lg text-xs font-bold uppercase tracking-widest transition-all flex items-center gap-2",
                                     activeTab === tab.id
-                                        ? "bg-white dark:bg-slate-800 text-[var(--color-text-primary)] shadow-sm"
+                                        ? "bg-[var(--color-bg-elevated)] text-[var(--color-text-primary)] shadow-sm"
                                         : "text-[var(--color-text-tertiary)] hover:text-slate-700 dark:hover:text-slate-300"
                                 )}
                             >
@@ -382,7 +382,7 @@ export default function VisitorManagementPage() {
                                             <p className="text-xs text-[var(--color-text-tertiary)] leading-relaxed">{zone.description || 'No zone constraints defined.'}</p>
                                         </div>
 
-                                        <div className="mt-8 pt-6 border-t border-slate-100 dark:border-slate-800/50 flex items-center justify-between">
+                                        <div className="mt-8 pt-6 border-t border-[var(--color-border-subtle)]/50 flex items-center justify-between">
                                             <div className="flex -space-x-2">
                                                 {[1, 2].map(i => (
                                                     <div key={i} className="w-6 h-6 rounded-full bg-slate-200 dark:bg-slate-800 border-2 border-white dark:border-[#0C0C0C]" />
diff --git a/frontend/src/templates/PageTemplate.tsx b/frontend/src/templates/PageTemplate.tsx
index f206467..ebfe867 100644
--- a/frontend/src/templates/PageTemplate.tsx
+++ b/frontend/src/templates/PageTemplate.tsx
@@ -68,17 +68,17 @@ export default function PageTemplate() {
                         placeholder="Search..."
                         value={searchQuery}
                         onChange={(e) => setSearchQuery(e.target.value)}
-                        className="w-full pl-10 pr-4 py-2.5 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-sm focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none"
+                        className="w-full pl-10 pr-4 py-2.5 rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-elevated)] text-sm focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none"
                     />
                 </div>
-                <button className="flex items-center gap-2 px-4 py-2.5 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-sm hover:bg-slate-50 dark:hover:bg-slate-700">
+                <button className="flex items-center gap-2 px-4 py-2.5 rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-elevated)] text-sm hover:bg-slate-50 dark:hover:bg-slate-700">
                     <Filter size={16} />
                     Filters
                 </button>
             </div>
 
             {/* Content Area */}
-            <div className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm">
+            <div className="bg-[var(--color-bg-elevated)] rounded-xl border border-[var(--color-border-default)] shadow-sm">
                 {isLoading ? (
                     <div className="flex items-center justify-center p-12">
                         <div className="animate-spin w-8 h-8 border-2 border-emerald-500 border-t-transparent rounded-full" />
@@ -86,7 +86,7 @@ export default function PageTemplate() {
                 ) : items.length === 0 ? (
                     /* Empty State */
                     <div className="flex flex-col items-center justify-center p-12 text-center">
-                        <div className="w-16 h-16 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mb-4">
+                        <div className="w-16 h-16 rounded-full bg-[var(--color-bg-tertiary)] flex items-center justify-center mb-4">
                             <FileText size={32} className="text-[var(--color-text-tertiary)]" />
                         </div>
                         <h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-2">
diff --git a/frontend/src/templates/WidgetTemplate.tsx b/frontend/src/templates/WidgetTemplate.tsx
index ce1469d..7afa5d5 100644
--- a/frontend/src/templates/WidgetTemplate.tsx
+++ b/frontend/src/templates/WidgetTemplate.tsx
@@ -70,11 +70,11 @@ export function WidgetTemplate({
     const trendColor = data?.trend === 'up' ? 'text-[var(--color-primary)]' : data?.trend === 'down' ? 'text-red-500' : 'text-[var(--color-text-tertiary)]';
 
     return (
-        <div className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-4 shadow-sm">
+        <div className="bg-[var(--color-bg-elevated)] rounded-xl border border-[var(--color-border-default)] p-4 shadow-sm">
             {/* Header */}
             <div className="flex items-center justify-between mb-3">
                 <div className="flex items-center gap-2">
-                    <div className={`p-2 rounded-lg bg-slate-100 dark:bg-slate-700 ${iconColor}`}>
+                    <div className={`p-2 rounded-lg bg-[var(--color-bg-tertiary)] ${iconColor}`}>
                         <Icon size={18} />
                     </div>
                     <h3 className="text-sm font-medium text-[var(--color-text-primary)]">{title}</h3>