setting the colros right

frontend/src/components/layout/AppShell.css

@@ -38,6 +38,7 @@
   background: var(--primary-gradient);
   -webkit-background-clip: text;
   background-clip: text;
+  color: var(--primary); /* Fallback for browsers that don't support clip-text */
   -webkit-text-fill-color: transparent;
 }
 

frontend/src/pages/HomePage.module.css

@@ -10,24 +10,36 @@
 
 .home-logo {
   margin-bottom: 16px;
+  transition: filter 0.3s ease;
+}
+
+:global(.dark) .home-logo {
+  /* This mathematical flip turns black -> white while rotating red/blue back to their original brand values */
+  filter: invert(1) hue-rotate(180deg) saturate(1.4);
 }
 
 .home-left h1 {
   font-size: 1.5rem;
   margin-bottom: 12px;
+  color: var(--text-main);
 }
 
 .home-left h2 {
   font-size: 1.1rem;
   margin-top: 20px;
   margin-bottom: 8px;
-  color: var(--text);
+  color: var(--text-main);
 }
 
 .home-left h3 {
   font-size: 0.95rem;
   margin-top: 16px;
   margin-bottom: 6px;
+  color: var(--text-main);
+}
+
+.home-left p {
+  color: var(--text-main);
 }
 
 .home-info-row {
@@ -42,7 +54,9 @@
   transition: transform 0.3s ease;
   max-width: 100%;
   height: auto;
+  border: 1px solid var(--border);
 }
+
 .home-project-img:hover {
   transform: scale(1.03);
 }
@@ -57,10 +71,13 @@
 .qr-item {
   text-align: center;
 }
+
 .qr-item img {
   border: 1px solid var(--border);
   border-radius: 4px;
+  background: white; /* Keep QR code backgrounds white for scanning */
 }
+
 .qr-label {
   display: block;
   font-size: 9px;
@@ -71,15 +88,18 @@
 .home-about-link {
   color: var(--primary);
   margin-bottom: 8px;
+  font-weight: 600;
 }
 
 .home-instructions {
   padding-left: 20px;
   margin-bottom: 12px;
 }
+
 .home-instructions li {
   margin-bottom: 4px;
   font-size: 12px;
+  color: var(--text-main);
 }
 
 .home-error {

frontend/src/pages/PotentialAnalysisPage.css

@@ -482,7 +482,25 @@
 }
 
 /* ---------- Dark mode overrides ---------- */
-.dark .pa-metric-hot      { border-color: #ef4444 !important; background: rgba(239, 68, 68, 0.1) !important; }
-.dark .pa-metric-cold     { border-color: #3b82f6 !important; background: rgba(59, 130, 246, 0.1) !important; }
-.dark .pa-metric-pinch    { border-color: #a855f7 !important; background: rgba(168, 85, 247, 0.1) !important; }
-.dark .pa-metric-recovery { border-color: #22c55e !important; background: rgba(34, 197, 94, 0.1) !important; }
+.dark .pa-title, .dark .pa-panel-title, .dark .pa-section h3 {
+  color: #ffffff;
+}
+
+.dark .pa-metric-label {
+  color: #ffffff;
+  opacity: 0.9;
+}
+
+.dark .pa-hp-section-label {
+  color: #ffffff;
+  font-weight: 800;
+}
+
+.dark .pa-stream-info, .dark .pa-muted, .dark .pa-excluded-reason {
+  color: #cbd5e1; /* Light slate/gray-white */
+}
+
+.dark .pa-metric-hot      { border-color: #ef4444 !important; background: rgba(239, 68, 68, 0.15) !important; }
+.dark .pa-metric-cold     { border-color: #3b82f6 !important; background: rgba(59, 130, 246, 0.15) !important; }
+.dark .pa-metric-pinch    { border-color: #a855f7 !important; background: rgba(168, 85, 247, 0.15) !important; }
+.dark .pa-metric-recovery { border-color: #22c55e !important; background: rgba(34, 197, 94, 0.15) !important; }

frontend/src/store/uiStore.ts

@@ -46,7 +46,7 @@ interface UIStore {
 }
 
 export const useUIStore = create<UIStore>((set) => ({
-  theme: 'light',
+  theme: 'dark',
   sidebarCollapsed: false,
   activePage: 'home',
   placementMode: false,