Fixed Dark Mode

src/app/globals.css

@@ -119,34 +119,47 @@
 }
 
 .dark {
-  --background: 0 0% 10%;
+  /* ── Slate palette tokens ── */
-  --foreground: 210 40% 98%;
+  --bg-page: 225 18% 9%;
-  --card: 0 0% 9%;
+  --bg-sidebar: 227 25% 7%;
-  --card-foreground: 210 40% 98%;
+  --bg-card: 224 24% 11%;
-  --popover: 222.2 84% 11%;
+  --bg-card-inset: 224 24% 13%;
-  --popover-foreground: 210 40% 98%;
+  --bg-nav-active: 221 43% 20%;
-  --primary: 0 100% 53%;
+  --border: 228 21% 21%;
+  --border-strong: 220 69% 59%;
+  --text-primary: 226 30% 95%;
+  --text-secondary: 228 13% 59%;
+  --text-active: 221 100% 87%;
+  --accent-hover: 220 70% 66%;
+
+  /* ── Existing CSS variable overrides ── */
+  --background: 225 18% 9%;
+  --foreground: 226 30% 95%;
+  --card: 224 24% 11%;
+  --card-foreground: 226 30% 95%;
+  --popover: 224 24% 13%;
+  --popover-foreground: 226 30% 95%;
+  --primary: 220 69% 59%;
   --primary-foreground: 222.2 47.4% 11.2%;
-  --secondary: 217.2 32.6% 17.5%;
+  --secondary: 224 24% 13%;
-  --secondary-foreground: 210 40% 98%;
+  --secondary-foreground: 226 30% 95%;
-  --muted: 217.2 32.6% 17.5%;
+  --muted: 224 24% 13%;
-  --muted-foreground: 215 20.2% 65.1%;
+  --muted-foreground: 228 13% 59%;
-  --accent: 217.2 32.6% 17.5%;
+  --accent: 224 24% 13%;
-  --accent-foreground: 210 40% 98%;
+  --accent-foreground: 226 30% 95%;
   --destructive: 0 62.8% 30.6%;
   --destructive-foreground: 210 40% 98%;
-  --border: 217.2 32.6% 17.5%;
+  --border: 228 21% 21%;
-  --input: 217.2 32.6% 17.5%;
+  --input: 228 21% 21%;
-  --ring: 0 100% 53%;
+  --ring: 220 69% 59%;
-  --sidebar: 0 0% 11%;
+  --sidebar: 227 25% 7%;
-  --sidebar-foreground: 210 40% 98%;
+  --sidebar-foreground: 226 30% 95%;
-  --sidebar-primary: 145 65% 50%;
+  --sidebar-primary: 221 43% 20%;
-  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-primary-foreground: 221 100% 87%;
-  --sidebar-accent: 217.2 32.6% 17.5%;
+  --sidebar-accent: 224 24% 13%;
-  --sidebar-accent-foreground: 210 40% 98%;
+  --sidebar-accent-foreground: 226 30% 95%;
-  --sidebar-border: 217.2 32.6% 17.5%;
+  --sidebar-border: 228 21% 21%;
-  --sidebar-ring: 0 100% 53%;
+  --sidebar-ring: 220 69% 59%;
-
 }
 
 .ocean {
@@ -457,6 +470,14 @@
   100%    { width: 0;    height: 0; }
 }
 
+.dark .bc-logo .accent {
+  color: hsl(220 69% 59%);
+}
+.dark .bc-logo::before,
+.dark .bc-logo::after {
+  border-color: hsl(220 69% 59%);
+}
+
 @layer base {
   * {
     @apply border-border;

src/components/layout/sidebar-name-logo.tsx

@@ -4,7 +4,7 @@ export function SidebarNameLogo() {
   return (
     <svg
       viewBox="0 0 192.756 192.756"
-      className="fill-[#2D3020] dark:fill-[#e5e7eb] w-full h-auto"
+      className="fill-[#2D3020] dark:fill-[#eef0f7] w-full h-auto"
       aria-hidden="true"
     >
       <g fill-rule="evenodd" clip-rule="evenodd">

src/components/layout/topbar.tsx

@@ -94,10 +94,10 @@ export function Topbar({ onMenuClick }: TopbarProps) {
 
       {/* Search */}
       <div className="relative hidden flex-1 sm:block md:w-80">
-        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground dark:text-[#666666]" />
+        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
         <Input
           placeholder="Search leads, companies..."
-          className="h-9 w-full max-w-sm pl-9 bg-muted dark:bg-[#1E1E1E] border-border dark:border-[#222222] text-foreground dark:text-white"
+          className="h-9 w-full max-w-sm pl-9 bg-muted border-border text-foreground"
         />
       </div>
 

src/components/shared/page-header.tsx

@@ -19,7 +19,7 @@ export function PageHeader({ title, description, children, className }: PageHead
       className={cn("flex items-center justify-between pb-6", className)}
     >
       <div>
-        <h1 className="text-2xl font-bold tracking-tight border-l-4 border-[#C84B4B] dark:border-[#FF1111] pl-4 text-[#2D3020] dark:text-white">{title}</h1>
+        <h1 className="text-2xl font-bold tracking-tight border-l-4 border-[#C84B4B] dark:border-primary pl-4 text-[#2D3020] dark:text-white">{title}</h1>
         {description && <p className="text-sm text-[#8A9078] dark:text-[#AAAAAA] mt-1">{description}</p>}
       </div>
       {children && <div className="flex items-center gap-3">{children}</div>}