From 06abb565604877f4c31f7ee77809a519a4617429 Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Sat, 27 Dec 2025 11:44:29 -0800
Subject: [PATCH] style: Apply Climate Monitoring design system

- Update color palette (emerald primary, cyan accent)
- Add new CSS variables for layout, radius, and semantic colors
- Update card styling with 16px radius and new shadow system
- Add pill badges and chip filter components
- Update Layout sidebar and topbar with new tokens
- Add stat-card component styles
---
 frontend/src/components/Layout.tsx |  48 +++----
 frontend/src/index.css             | 219 +++++++++++++++++++++--------
 2 files changed, 186 insertions(+), 81 deletions(-)

diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 3170223..58e4ef1 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -21,32 +21,32 @@ export default function Layout() {
     const [mobileSheetOpen, setMobileSheetOpen] = useState(false);
 
     return (
-        <div className="flex h-screen bg-white dark:bg-[#0B0E14] text-slate-900 dark:text-slate-100 overflow-hidden font-sans">
+        <div className="flex h-screen bg-[var(--color-bg-primary)] text-slate-900 dark:text-slate-100 overflow-hidden font-sans">
             {/* Accessibility: Skip to main content */}
             <a
                 href="#main-content"
-                className="absolute left-0 top-0 -translate-y-full bg-emerald-600 text-white px-4 py-2 rounded-br-lg font-medium focus:translate-y-0 z-50 transition-transform duration-fast"
+                className="absolute left-0 top-0 -translate-y-full bg-[var(--color-primary)] text-white px-4 py-2 rounded-br-lg font-medium focus:translate-y-0 z-50 transition-transform duration-fast"
             >
                 Skip to main content
             </a>
 
             {/* Desktop Sidebar - Persistent on left */}
-            <aside className="hidden lg:flex flex-col w-64 border-r border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-[#0B0E14] z-30">
-                <div className="h-16 flex items-center px-6 border-b border-slate-200 dark:border-slate-800">
-                    <div className="flex items-center gap-2">
-                        <div className="w-8 h-8 rounded-lg bg-emerald-600 flex items-center justify-center text-white font-bold text-xl italic shadow-lg shadow-emerald-500/20">
+            <aside className="hidden lg:flex flex-col w-[260px] border-r border-[var(--color-border-subtle)] bg-[var(--color-bg-secondary)] z-30">
+                <div className="h-16 flex items-center px-6 border-b border-[var(--color-border-subtle)]">
+                    <div className="flex items-center gap-3">
+                        <div className="w-9 h-9 rounded-xl bg-[var(--color-primary)] flex items-center justify-center text-[var(--color-text-inverse)] font-bold text-lg shadow-lg shadow-emerald-500/20">
                             V
                         </div>
                         <div className="flex flex-col">
-                            <span className="text-xs font-bold uppercase tracking-widest leading-none">Veridian</span>
-                            <span className="text-[10px] text-slate-500 font-medium uppercase tracking-tighter leading-none mt-0.5">Platform v2.0</span>
+                            <span className="text-sm font-bold tracking-tight leading-none text-[var(--color-text-primary)]">Veridian</span>
+                            <span className="text-[10px] text-[var(--color-text-tertiary)] font-medium uppercase tracking-wider leading-none mt-0.5">Cultivation Platform</span>
                         </div>
                     </div>
                 </div>
                 <div className="flex-1 overflow-y-auto pt-4">
                     <Sidebar />
                 </div>
-                <div className="p-4 border-t border-slate-200 dark:border-slate-800">
+                <div className="p-4 border-t border-[var(--color-border-subtle)]">
                     <UserMenu />
                 </div>
             </aside>
@@ -54,48 +54,48 @@ export default function Layout() {
             {/* Main Content Area */}
             <div className="flex-1 flex flex-col min-w-0 overflow-hidden relative">
                 {/* Topbar - Search, Global Filters, Vitals */}
-                <header className="h-16 flex items-center justify-between px-4 sm:px-6 lg:px-8 border-b border-slate-200 dark:border-slate-800 bg-white/50 dark:bg-[#0B0E14]/50 backdrop-blur-md z-20">
+                <header className="h-16 flex items-center justify-between px-4 sm:px-6 lg:px-8 border-b border-[var(--color-border-subtle)] bg-[var(--color-bg-secondary)]/80 backdrop-blur-xl z-20">
                     <div className="flex items-center gap-4 flex-1">
                         {/* Facility Switcher / Filter */}
-                        <div className="hidden md:flex items-center gap-2 px-3 py-1.5 rounded-lg bg-slate-100 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 cursor-pointer hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors">
-                            <span className="text-xs font-bold uppercase tracking-widest text-slate-500">Facility</span>
-                            <span className="text-xs font-bold">NORCAL-01</span>
-                            <ChevronDown size={14} className="text-slate-500" />
+                        <div className="hidden md:flex items-center gap-2 px-3 py-1.5 rounded-full bg-[var(--color-bg-tertiary)] border border-[var(--color-border-subtle)] cursor-pointer hover:border-[var(--color-border-default)] transition-all">
+                            <span className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text-tertiary)]">Facility</span>
+                            <span className="text-xs font-bold text-[var(--color-text-primary)]">NORCAL-01</span>
+                            <ChevronDown size={14} className="text-[var(--color-text-tertiary)]" />
                         </div>
 
                         {/* Global Search */}
                         <div className="relative group max-w-sm w-full hidden sm:block">
-                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-emerald-500 transition-colors" size={16} />
+                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-tertiary)] group-focus-within:text-[var(--color-primary)] transition-colors" size={16} />
                             <input
                                 type="text"
                                 placeholder="Search batches, rooms, tasks..."
-                                className="w-full bg-slate-100 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-all"
+                                className="w-full bg-[var(--color-bg-tertiary)] border border-[var(--color-border-subtle)] rounded-full pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20 focus:border-[var(--color-primary)] transition-all"
                             />
                             <div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1 opacity-50">
-                                <kbd className="text-[10px] font-mono">⌘</kbd>
-                                <kbd className="text-[10px] font-mono">K</kbd>
+                                <kbd className="text-[10px] font-mono text-[var(--color-text-tertiary)]">⌘</kbd>
+                                <kbd className="text-[10px] font-mono text-[var(--color-text-tertiary)]">K</kbd>
                             </div>
                         </div>
                     </div>
 
                     <div className="flex items-center gap-3">
-                        <div className="hidden md:flex items-center gap-4 mr-4 text-[11px] font-bold uppercase tracking-widest text-slate-500">
+                        <div className="hidden md:flex items-center gap-4 mr-4 text-[11px] font-semibold uppercase tracking-wider text-[var(--color-text-tertiary)]">
                             <div className="flex items-center gap-1.5">
-                                <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
+                                <div className="w-2 h-2 rounded-full bg-[var(--color-success)] animate-pulse" />
                                 <span>Terminal Live</span>
                             </div>
                             <div className="flex items-center gap-1.5">
-                                <div className="w-2 h-2 rounded-full bg-blue-500" />
+                                <div className="w-2 h-2 rounded-full bg-[var(--color-accent)]" />
                                 <span>32 Sensors Active</span>
                             </div>
                         </div>
 
                         <ThemeToggle />
-                        <button className="relative p-2 text-slate-500 hover:text-emerald-500 transition-colors rounded-lg hover:bg-slate-100 dark:hover:bg-slate-900">
+                        <button className="relative p-2 text-[var(--color-text-tertiary)] hover:text-[var(--color-primary)] transition-colors rounded-lg hover:bg-[var(--color-bg-tertiary)]">
                             <Bell size={20} />
-                            <span className="absolute top-2 right-2 w-2 h-2 bg-rose-500 rounded-full ring-2 ring-white dark:ring-[#0B0E14]" />
+                            <span className="absolute top-2 right-2 w-2 h-2 bg-[var(--color-error)] rounded-full ring-2 ring-[var(--color-bg-primary)]" />
                         </button>
-                        <button className="lg:hidden p-2 text-slate-500" onClick={() => setMobileSheetOpen(true)}>
+                        <button className="lg:hidden p-2 text-[var(--color-text-tertiary)]" onClick={() => setMobileSheetOpen(true)}>
                             <Filter size={20} />
                         </button>
                     </div>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index fff1d77..af87d82 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -29,90 +29,143 @@
     --duration-slow: 250ms;
     --duration-slower: 400ms;
 
-    /* Light mode - adjusted for clarity but focus is dark mode */
-    --color-bg-primary: #FFFFFF;
-    --color-bg-secondary: #F8FAFC;
-    --color-bg-tertiary: #F1F5F9;
+    /* ===== NEW DESIGN SYSTEM: Climate Monitoring Palette ===== */
+
+    /* Light mode backgrounds */
+    --color-bg-primary: #F9FAFB;
+    --color-bg-secondary: #F1F5F9;
+    --color-bg-tertiary: #E2E8F0;
     --color-bg-elevated: #FFFFFF;
 
+    /* Light mode text */
     --color-text-primary: #0F172A;
     --color-text-secondary: #475569;
     --color-text-tertiary: #94A3B8;
     --color-text-quaternary: #CBD5E1;
+    --color-text-inverse: #F9FAFB;
 
+    /* Light mode borders */
     --color-border-default: #E2E8F0;
     --color-border-subtle: #F1F5F9;
     --color-border-strong: #94A3B8;
 
-    --color-accent: #10B981; /* Cultivation Green */
-    --color-accent-hover: #059669;
-    --color-accent-muted: rgba(16, 185, 129, 0.1);
+    /* Primary accent (Cultivation Green) */
+    --color-primary: #4ADE80;
+    --color-primary-hover: #22C55E;
+    --color-primary-soft: rgba(74, 222, 128, 0.15);
+
+    /* Secondary accent (Cyan/Blue) */
+    --color-accent: #38BDF8;
+    --color-accent-hover: #0EA5E9;
+    --color-accent-soft: rgba(56, 189, 248, 0.15);
+
+    /* Status colors */
+    --color-success: #4ADE80;
+    --color-warning: #FACC15;
+    --color-error: #F97373;
+    --color-info: #38BDF8;
+
+    /* Chart colors */
+    --color-chart-green: #4ADE80;
+    --color-chart-blue: #38BDF8;
+    --color-chart-orange: #FDBA74;
+    --color-chart-purple: #A855F7;
+    --color-chart-gridline: #E2E8F0;
+
+    /* Layout constants */
+    --sidebar-width: 260px;
+    --topbar-height: 64px;
+    --card-radius: 16px;
+    --card-padding: 20px;
+    --radius-xs: 4px;
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-xl: 24px;
+    --radius-full: 999px;
 
     /* shadcn/ui compatibility */
-    --background: 0 0% 100%;
+    --background: 210 20% 98%;
     --foreground: 222 47% 11%;
     --card: 0 0% 100%;
     --card-foreground: 222 47% 11%;
     --popover: 0 0% 100%;
     --popover-foreground: 222 47% 11%;
-    --primary: 161 72% 33%; /* Emerald 700 */
+    --primary: 142 71% 45%;
     --primary-foreground: 0 0% 100%;
     --secondary: 210 40% 96%;
     --secondary-foreground: 222 47% 11%;
     --muted: 210 40% 96%;
     --muted-foreground: 215 16% 47%;
-    --accent: 161 72% 33%;
+    --accent: 199 89% 48%;
     --accent-foreground: 0 0% 100%;
-    --destructive: 0 84% 60%;
+    --destructive: 0 72% 51%;
     --destructive-foreground: 0 0% 100%;
     --border: 214 32% 91%;
     --input: 214 32% 91%;
-    --ring: 161 72% 43%;
-    --radius: 8px;
+    --ring: 142 71% 45%;
+    --radius: 16px;
   }
 
-  /* Dark mode (Charcoal / Deep Blue-Gray) - THE DEFAULT */
+  /* ===== DARK MODE (Primary Theme) ===== */
   .dark {
-    --color-bg-primary: #0B0E14; /* Deep Charcoal */
-    --color-bg-secondary: #13171F;
-    --color-bg-tertiary: #1C222D;
-    --color-bg-elevated: #161B26;
+    /* Backgrounds - Deep blue-charcoal */
+    --color-bg-primary: #0B1020;
+    --color-bg-secondary: #11182A;
+    --color-bg-tertiary: #151C30;
+    --color-bg-elevated: #11182A;
 
-    --color-text-primary: #F1F5F9;
-    --color-text-secondary: #94A3B8;
-    --color-text-tertiary: #64748B;
-    --color-text-quaternary: #334155;
+    /* Text */
+    --color-text-primary: #F9FAFB;
+    --color-text-secondary: #9CA3AF;
+    --color-text-tertiary: #6B7280;
+    --color-text-quaternary: #374151;
+    --color-text-inverse: #020617;
 
+    /* Borders */
     --color-border-default: #1E293B;
-    --color-border-subtle: #161B26;
+    --color-border-subtle: #151C30;
     --color-border-strong: #334155;
 
+    /* Primary (Emerald Green) */
+    --color-primary: #4ADE80;
+    --color-primary-hover: #22C55E;
+    --color-primary-soft: #1C3B2B;
+
+    /* Accent (Cyan) */
+    --color-accent: #38BDF8;
+    --color-accent-hover: #0EA5E9;
+    --color-accent-soft: #102538;
+
     /* Status Colors */
-    --color-success: #10B981;
-    --color-warning: #F59E0B;
-    --color-error: #EF4444;
-    --color-info: #0EA5E9;
+    --color-success: #4ADE80;
+    --color-warning: #FACC15;
+    --color-error: #F97373;
+    --color-info: #38BDF8;
+
+    /* Chart colors */
+    --color-chart-gridline: #1E293B;
 
     /* shadcn/ui compatibility */
-    --background: 222 47% 6%; /* Very dark blue-gray */
+    --background: 222 47% 5%;
     --foreground: 210 40% 98%;
-    --card: 222 47% 9%;
+    --card: 222 47% 8%;
     --card-foreground: 210 40% 98%;
-    --popover: 222 47% 9%;
+    --popover: 222 47% 8%;
     --popover-foreground: 210 40% 98%;
-    --primary: 142 76% 36%; /* Greenish for cultivation */
-    --primary-foreground: 355 100% 100%;
-    --secondary: 222 47% 15%;
+    --primary: 142 71% 45%;
+    --primary-foreground: 222 47% 5%;
+    --secondary: 222 47% 12%;
     --secondary-foreground: 210 40% 98%;
-    --muted: 222 47% 15%;
+    --muted: 222 47% 12%;
     --muted-foreground: 215 20% 65%;
-    --accent: 142 76% 36%;
+    --accent: 199 89% 48%;
     --accent-foreground: 210 40% 98%;
-    --destructive: 0 63% 31%;
+    --destructive: 0 63% 45%;
     --destructive-foreground: 210 40% 98%;
     --border: 217 33% 17%;
     --input: 217 33% 17%;
-    --ring: 142 76% 36%;
+    --ring: 142 71% 45%;
   }
 
   /* ============================================
@@ -357,19 +410,19 @@
     padding: 0 14px;
     font-size: 13px;
     font-weight: 500;
-    border-radius: 6px;
+    border-radius: var(--radius-sm);
     cursor: pointer;
     user-select: none;
     white-space: nowrap;
   }
 
   .btn-primary {
-    background-color: var(--color-accent);
-    color: white;
+    background-color: var(--color-primary);
+    color: var(--color-text-inverse);
   }
 
   .btn-primary:hover:not(:disabled) {
-    background-color: var(--color-accent-hover);
+    background-color: var(--color-primary-hover);
   }
 
   .btn-secondary {
@@ -409,12 +462,13 @@
   }
 
   /* ============================================
-     Card Styles
+     Card Styles (Climate Monitoring Design)
      ============================================ */
   .card {
     background-color: var(--color-bg-elevated);
     border: 1px solid var(--color-border-subtle);
-    border-radius: 8px;
+    border-radius: var(--card-radius);
+    padding: var(--card-padding);
     transition:
       border-color var(--duration-fast) var(--ease-out-expo),
       box-shadow var(--duration-normal) var(--ease-out-expo);
@@ -424,13 +478,33 @@
     border-color: var(--color-border-default);
   }
 
+  .card-interactive {
+    cursor: pointer;
+  }
+
   .card-interactive:hover {
     border-color: var(--color-border-strong);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+  }
+
+  .dark .card {
+    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.55);
   }
 
   .dark .card-interactive:hover {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.65);
+  }
+
+  /* Stat/KPI Card */
+  .stat-card {
+    background-color: var(--color-bg-elevated);
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--card-radius);
+    padding: var(--card-padding);
+  }
+
+  .dark .stat-card {
+    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.55);
   }
 
   /* ============================================
@@ -460,37 +534,68 @@
   }
 
   /* ============================================
-     Badge Styles
+     Badge Styles (Pill design)
      ============================================ */
   .badge {
     @apply inline-flex items-center justify-center;
-    height: 20px;
-    padding: 0 6px;
+    height: 22px;
+    padding: 0 10px;
     font-size: 11px;
-    font-weight: 500;
-    border-radius: 4px;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    border-radius: var(--radius-full);
     background-color: var(--color-bg-tertiary);
     color: var(--color-text-secondary);
   }
 
   .badge-accent {
-    background-color: var(--color-accent-muted);
+    background-color: var(--color-accent-soft);
     color: var(--color-accent);
   }
 
+  .badge-primary {
+    background-color: var(--color-primary-soft);
+    color: var(--color-primary);
+  }
+
   .badge-success {
-    background-color: rgba(34, 197, 94, 0.15);
-    color: #22C55E;
+    background-color: var(--color-success);
+    color: var(--color-text-inverse);
   }
 
   .badge-warning {
-    background-color: rgba(234, 179, 8, 0.15);
-    color: #CA8A04;
+    background-color: var(--color-warning);
+    color: var(--color-text-inverse);
   }
 
   .badge-destructive {
-    background-color: rgba(239, 68, 68, 0.15);
-    color: #EF4444;
+    background-color: var(--color-error);
+    color: var(--color-text-inverse);
+  }
+
+  /* Chip (smaller, for filters) */
+  .chip {
+    @apply inline-flex items-center justify-center;
+    height: 26px;
+    padding: 0 12px;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    border-radius: var(--radius-full);
+    background-color: var(--color-bg-tertiary);
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    transition: all var(--duration-fast) var(--ease-out-expo);
+  }
+
+  .chip:hover {
+    background-color: var(--color-border-default);
+    color: var(--color-text-primary);
+  }
+
+  .chip.active {
+    background-color: var(--color-primary);
+    color: var(--color-text-inverse);
   }
 
   /* ============================================