From 06e992e2ebfbf4bcc17e33905937587aae4c25f3 Mon Sep 17 00:00:00 2001
From: fahed <fahed@softhouse.io>
Date: Wed, 4 Mar 2026 17:38:25 +0300
Subject: [PATCH] feat: premium dark mode inspired by SpaceTime
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Deep layered surfaces (#15151e → #1c1c2a → #24243a), ambient
purple/cyan/gold background glow, glass-edge borders, translucent
status badges, form inputs with accent focus glow, comprehensive
overrides for all hardcoded bg-white/gray/border/text utilities,
brand primary with violet glow effect, and dark selection highlight.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 client/src/index.css | 216 ++++++++++++++++++++++++++++++++++++-------
 1 file changed, 183 insertions(+), 33 deletions(-)

diff --git a/client/src/index.css b/client/src/index.css
index ed8f1cc..b1c7856 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -36,52 +36,202 @@
   --color-status-cancelled: #dc2626;
 }
 
-/* Dark mode overrides */
+/* ═══════════════════════════════════════════════
+   DARK MODE — Inspired by SpaceTime
+   Deep layered surfaces, glass edges, ambient glow
+   ═══════════════════════════════════════════════ */
+
 .dark {
-  --color-surface: #0f172a;
-  --color-surface-secondary: #1e293b;
-  --color-surface-tertiary: #334155;
-  --color-border: #334155;
-  --color-border-light: #1e293b;
-  --color-text-primary: #f1f5f9;
-  --color-text-secondary: #cbd5e1;
-  --color-text-tertiary: #64748b;
-  --color-sidebar: #020617;
-  --color-sidebar-hover: #0f172a;
-  --color-sidebar-active: #000000;
+  /* Layered depth: void → surface → surface-2 → surface-3 */
+  --color-surface: #15151e;
+  --color-surface-secondary: #1c1c2a;
+  --color-surface-tertiary: #24243a;
+  --color-border: rgba(255, 255, 255, 0.08);
+  --color-border-light: rgba(255, 255, 255, 0.04);
+
+  /* Text — crisp hierarchy */
+  --color-text-primary: #eeecf5;
+  --color-text-secondary: #a8a3c0;
+  --color-text-tertiary: #706b8a;
+
+  /* Sidebar */
+  --color-sidebar: #0e0e16;
+  --color-sidebar-hover: #15151e;
+  --color-sidebar-active: #0a0a12;
+
+  /* Brand — brighter on dark */
+  --color-brand-primary: #8b5cf6;
+  --color-brand-primary-light: #a78bfa;
+
   color-scheme: dark;
-  background-color: #0f172a;
-  color: #f1f5f9;
+  background-color: #15151e;
+  color: #eeecf5;
 }
 
-/* Override hardcoded bg-white in dark mode */
-.dark .bg-white { background-color: #1e293b !important; }
-.dark .bg-gray-50,
-.dark .bg-gray-100 { background-color: #334155 !important; }
-.dark .border-gray-200,
-.dark .border-gray-300 { border-color: #334155 !important; }
-.dark .text-gray-900 { color: #f1f5f9 !important; }
-.dark .text-gray-700,
-.dark .text-gray-600 { color: #cbd5e1 !important; }
-.dark .text-gray-500,
-.dark .text-gray-400 { color: #94a3b8 !important; }
+/* ─── Ambient background glow ────────────────── */
+.dark .bg-mesh {
+  background-color: #15151e !important;
+  background-image: none !important;
+}
+.dark .bg-mesh::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background:
+    radial-gradient(ellipse 70% 50% at 20% 50%, rgba(139, 92, 246, 0.045) 0%, transparent 60%),
+    radial-gradient(ellipse 50% 40% at 80% 30%, rgba(56, 189, 248, 0.03) 0%, transparent 60%),
+    radial-gradient(ellipse 60% 40% at 50% 90%, rgba(232, 168, 56, 0.02) 0%, transparent 60%);
+  pointer-events: none;
+  z-index: 0;
+}
 
-/* Dark mode inputs and selects */
+/* ─── Every white surface → dark ─────────────── */
+.dark .bg-white,
+.dark .bg-\[\#fff\],
+.dark .bg-\[\#ffffff\] {
+  background-color: #1c1c2a !important;
+}
+.dark .bg-gray-50 { background-color: #15151e !important; }
+.dark .bg-gray-100 { background-color: #1c1c2a !important; }
+.dark .bg-gray-200 { background-color: #24243a !important; }
+
+/* ─── Borders ────────────────────────────────── */
+.dark .border-gray-100,
+.dark .border-gray-200,
+.dark .border-gray-300 { border-color: rgba(255, 255, 255, 0.08) !important; }
+.dark .divide-gray-100 > :not(:first-child),
+.dark .divide-gray-200 > :not(:first-child),
+.dark .divide-border-light > :not(:first-child) { border-color: rgba(255, 255, 255, 0.05) !important; }
+
+/* ─── Text ───────────────────────────────────── */
+.dark .text-gray-900 { color: #eeecf5 !important; }
+.dark .text-gray-800 { color: #d8d5e8 !important; }
+.dark .text-gray-700 { color: #c2bedb !important; }
+.dark .text-gray-600 { color: #a8a3c0 !important; }
+.dark .text-gray-500 { color: #8b85a8 !important; }
+.dark .text-gray-400 { color: #706b8a !important; }
+
+/* ─── Status badges — translucent glass ──────── */
+.dark .bg-emerald-100, .dark .bg-emerald-50 { background-color: rgba(74, 222, 128, 0.12) !important; }
+.dark .bg-blue-100, .dark .bg-blue-50 { background-color: rgba(96, 165, 250, 0.12) !important; }
+.dark .bg-amber-100, .dark .bg-amber-50 { background-color: rgba(251, 191, 36, 0.12) !important; }
+.dark .bg-red-100, .dark .bg-red-50 { background-color: rgba(251, 113, 133, 0.12) !important; }
+.dark .bg-purple-100, .dark .bg-purple-50 { background-color: rgba(167, 139, 250, 0.12) !important; }
+.dark .bg-orange-100 { background-color: rgba(251, 146, 60, 0.12) !important; }
+.dark .bg-indigo-100, .dark .bg-indigo-50 { background-color: rgba(129, 140, 248, 0.12) !important; }
+.dark .bg-pink-100 { background-color: rgba(244, 114, 182, 0.12) !important; }
+.dark .bg-cyan-100 { background-color: rgba(34, 211, 238, 0.12) !important; }
+.dark .bg-teal-100 { background-color: rgba(45, 212, 191, 0.12) !important; }
+
+/* Status text colors — brighter on dark */
+.dark .text-emerald-700 { color: #4ade80 !important; }
+.dark .text-emerald-600 { color: #4ade80 !important; }
+.dark .text-blue-700 { color: #60a5fa !important; }
+.dark .text-amber-700 { color: #fbbf24 !important; }
+.dark .text-amber-900 { color: #fbbf24 !important; }
+.dark .text-red-700, .dark .text-red-600, .dark .text-red-500 { color: #fb7185 !important; }
+.dark .text-purple-700 { color: #a78bfa !important; }
+.dark .text-orange-700 { color: #fb923c !important; }
+.dark .text-indigo-700 { color: #818cf8 !important; }
+
+/* Gradient backgrounds for team sections etc. */
+.dark .from-blue-50 { --tw-gradient-from: rgba(96, 165, 250, 0.06) !important; }
+.dark .to-indigo-50 { --tw-gradient-to: rgba(129, 140, 248, 0.06) !important; }
+.dark .bg-gradient-to-r.from-blue-50 { background: rgba(96, 165, 250, 0.06) !important; }
+
+/* ─── Form elements ──────────────────────────── */
 .dark input,
 .dark select,
 .dark textarea {
-  background-color: #1e293b;
-  color: #f1f5f9;
-  border-color: #334155;
+  background-color: rgba(255, 255, 255, 0.04);
+  color: #eeecf5;
+  border-color: rgba(255, 255, 255, 0.08);
+}
+.dark input:focus,
+.dark select:focus,
+.dark textarea:focus {
+  border-color: rgba(139, 92, 246, 0.5);
+  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
 }
 .dark input::placeholder,
 .dark textarea::placeholder {
-  color: #64748b;
+  color: #706b8a;
+}
+.dark input:disabled,
+.dark select:disabled,
+.dark textarea:disabled {
+  background-color: rgba(255, 255, 255, 0.02) !important;
+  color: #706b8a !important;
+  opacity: 0.6;
 }
 
-/* Dark mode scrollbar */
-.dark ::-webkit-scrollbar-thumb { background: #475569; }
-.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }
+/* Dark select arrow */
+.dark select {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23706b8a' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+}
+
+/* ─── Cards — glass edges ────────────────────── */
+.dark .card-hover {
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+.dark .card-hover:hover {
+  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.15), 0 16px 48px -12px rgba(0, 0, 0, 0.5);
+}
+
+.dark .section-card {
+  background: #1c1c2a;
+  border-color: rgba(255, 255, 255, 0.06);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
+}
+.dark .section-card:hover {
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 32px -8px rgba(0, 0, 0, 0.4);
+}
+.dark .section-card-header {
+  background: linear-gradient(180deg, rgba(36, 36, 58, 0.5) 0%, #1c1c2a 100%);
+}
+
+/* ─── Sidebar ────────────────────────────────── */
+.dark .sidebar {
+  background: linear-gradient(180deg, #0e0e16 0%, #0a0a12 100%);
+  box-shadow: 2px 0 24px rgba(0, 0, 0, 0.5);
+}
+
+/* ─── Scrollbar ──────────────────────────────── */
+.dark ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); }
+.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); }
+
+/* ─── Shadows ────────────────────────────────── */
+.dark .shadow-sm { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; }
+.dark .shadow { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; }
+.dark .shadow-lg { box-shadow: 0 12px 40px -10px rgba(0, 0, 0, 0.6) !important; }
+.dark .shadow-2xl { box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.7) !important; }
+
+/* ─── Modal backdrop ─────────────────────────── */
+.dark .bg-black\/40 { background-color: rgba(0, 0, 0, 0.7) !important; }
+
+/* ─── Hover states ───────────────────────────── */
+.dark .hover\:bg-surface-secondary:hover,
+.dark .hover\:bg-gray-50:hover,
+.dark .hover\:bg-gray-100:hover { background-color: rgba(255, 255, 255, 0.04) !important; }
+.dark .hover\:bg-red-50:hover { background-color: rgba(251, 113, 133, 0.08) !important; }
+.dark .hover\:bg-blue-100:hover { background-color: rgba(96, 165, 250, 0.08) !important; }
+
+/* ─── Brand glow ─────────────────────────────── */
+.dark .bg-brand-primary {
+  box-shadow: 0 0 24px -4px rgba(139, 92, 246, 0.35);
+}
+.dark .bg-brand-primary:hover {
+  box-shadow: 0 0 32px -4px rgba(139, 92, 246, 0.45);
+}
+
+/* ─── White/light text overrides on colored badges ── */
+.dark .bg-white\/90 { background-color: rgba(28, 28, 42, 0.9) !important; }
+
+/* ─── Selection ──────────────────────────────── */
+.dark ::selection {
+  background: rgba(139, 92, 246, 0.4);
+  color: white;
+}
 
 /* Custom scrollbar */
 ::-webkit-scrollbar {