fix: 🔧 Complete dark mode fix + contrast improvements + 2026 neo-brutalism upgrades (colored shadows, better tokens)

frontend/src/app/globals.css

@@ -1,140 +1,164 @@
 @import "tailwindcss";
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');
 
-@custom-variant dark (&:is(.dark *));
+/* ===== DARK MODE FIX: Use @variant (not @custom-variant) ===== */
+@variant dark (&:where(.dark, .dark *));
 
+/* ===== BASE THEME TOKENS (Light Mode) ===== */
 @theme inline {
-  /* ====== NEO-BRUTALISM DESIGN SYSTEM ====== */
-  
   /* Typography */
   --font-display: 'Syne', sans-serif;
   --font-body: 'Space Grotesk', sans-serif;
-  --font-mono: 'JetBrains Mono', monospace;
-
-  /* Core palette — Electric + Playful */
-  --color-main: #FFE14D;
-  --color-main-foreground: #000000;
-  --color-secondary: #FF6B6B;
-  --color-secondary-foreground: #000000;
-  --color-accent: #A8FF3E;
-  --color-accent-foreground: #000000;
-  --color-tertiary: #88AAEE;
-  --color-tertiary-foreground: #000000;
-  --color-pop: #FF90E8;
-  --color-pop-foreground: #000000;
-  
+  --font-mono: 'Space Mono', monospace;
+
   /* Surfaces */
-  --color-background: #FDF8EE;
-  --color-foreground: #0A0A0A;
+  --color-background: #FAFAF8;
+  --color-foreground: #0D0D0D;
   --color-card: #FFFFFF;
-  --color-card-foreground: #0A0A0A;
-  --color-muted: #F5F0E8;
+  --color-card-foreground: #0D0D0D;
+  --color-muted: #F0EDE6;
   --color-muted-foreground: #4A4A4A;
+
+  /* Neo-Brut Accent Colors (all AA accessible with black text) */
+  --color-primary: #FFD000;
+  --color-primary-foreground: #000000;
+  --color-secondary: #E63946;
+  --color-secondary-foreground: #FFFFFF;
+  --color-accent: #C0FF00;
+  --color-accent-foreground: #000000;
+  --color-tertiary: #4ECDC4;
+  --color-tertiary-foreground: #000000;
+  --color-pop: #6C5CE7;
+  --color-pop-foreground: #FFFFFF;
   
   /* System */
   --color-border: #000000;
   --color-input: #FFFFFF;
   --color-ring: #000000;
-  --color-destructive: #FF3B30;
-  --color-success: #34C759;
-  --color-warning: #FFCC00;
+  --color-destructive: #E63946;
+  --color-success: #00B37E;
+  --color-warning: #FFB347;
   
-  /* Primary = Main */
-  --color-primary: #FFE14D;
-  --color-primary-foreground: #000000;
-
-  /* Neo-brutalism shadows */
+  /* Shadows — default black offset */
   --shadow-neo-xs: 2px 2px 0px 0px #000000;
   --shadow-neo-sm: 3px 3px 0px 0px #000000;
   --shadow-neo: 4px 4px 0px 0px #000000;
   --shadow-neo-md: 5px 5px 0px 0px #000000;
   --shadow-neo-lg: 6px 6px 0px 0px #000000;
   --shadow-neo-xl: 8px 8px 0px 0px #000000;
+  
+  /* 2026: Colored shadows */
+  --shadow-neo-primary: 4px 4px 0px 0px #FFD000;
+  --shadow-neo-secondary: 4px 4px 0px 0px #E63946;
+  --shadow-neo-accent: 4px 4px 0px 0px #C0FF00;
+  --shadow-neo-tertiary: 4px 4px 0px 0px #4ECDC4;
 
-  /* Border */
+  /* Radius: flat brutalism */
   --radius: 0px;
   --radius-sm: 0px;
-  --radius-md: 0px;
-  --radius-lg: 0px;
+  --radius-md: 2px;
+  --radius-lg: 4px;
 }
 
-/* Dark mode — white borders on dark, neon accents */
-.dark {
-  --color-background: #1A1A1A;
-  --color-foreground: #F5F5F5;
-  --color-card: #2D2D2D;
-  --color-card-foreground: #F5F5F5;
-  --color-muted: #333333;
-  --color-muted-foreground: #AAAAAA;
+/* ===== DARK MODE OVERRIDES — Plain CSS (NOT inside @theme) ===== */
+html.dark {
+  --color-background: #0F0F0F;
+  --color-foreground: #FAFAF8;
+  --color-card: #1A1A1A;
+  --color-card-foreground: #FAFAF8;
+  --color-muted: #252525;
+  --color-muted-foreground: #B0B0B0;
+  --color-input: #1A1A1A;
   --color-border: #FFFFFF;
   --color-ring: #FFFFFF;
-  --color-input: #2D2D2D;
+
+  /* Shadows flip to WHITE in dark mode */
   --shadow-neo-xs: 2px 2px 0px 0px #FFFFFF;
   --shadow-neo-sm: 3px 3px 0px 0px #FFFFFF;
   --shadow-neo: 4px 4px 0px 0px #FFFFFF;
   --shadow-neo-md: 5px 5px 0px 0px #FFFFFF;
   --shadow-neo-lg: 6px 6px 0px 0px #FFFFFF;
   --shadow-neo-xl: 8px 8px 0px 0px #FFFFFF;
+  
+  /* Colored shadows — brighter in dark */
+  --shadow-neo-primary: 4px 4px 0px 0px #FFD000;
+  --shadow-neo-secondary: 4px 4px 0px 0px #FF6B6B;
+  --shadow-neo-accent: 4px 4px 0px 0px #C0FF00;
+  --shadow-neo-tertiary: 4px 4px 0px 0px #00FFDD;
+
+  /* Accent colors get neon boost in dark */
+  --color-tertiary: #00FFDD;
+  --color-accent: #C0FF00;
 }
 
+/* ===== BASE STYLES ===== */
 @layer base {
   * {
-    @apply border-border;
+    border-color: var(--color-border);
   }
   
   body {
-    @apply bg-background text-foreground antialiased;
+    background-color: var(--color-background);
+    color: var(--color-foreground);
     font-family: var(--font-body);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
   
   h1, h2, h3, h4, h5, h6 {
     font-family: var(--font-display);
     font-weight: 800;
-    letter-spacing: -0.02em;
-    line-height: 0.95;
+    letter-spacing: -0.03em;
+    line-height: 0.92;
   }
 
-  /* Neo-brutalism base styles */
+  /* Inputs — thick border, no radius, shadow on focus */
   input, textarea, select {
-    @apply border-2 border-black bg-white px-4 py-3 font-medium;
+    border: 2px solid var(--color-border);
+    background: var(--color-input);
+    color: var(--color-foreground);
+    padding: 0.75rem 1rem;
+    font-weight: 500;
+    font-family: var(--font-body);
     border-radius: 0;
     box-shadow: var(--shadow-neo-xs);
     transition: box-shadow 0.15s ease, transform 0.15s ease;
   }
-  
   input:focus, textarea:focus, select:focus {
     outline: none;
     transform: translate(-1px, -1px);
     box-shadow: var(--shadow-neo-sm);
   }
+  input::placeholder, textarea::placeholder {
+    color: var(--color-muted-foreground);
+    opacity: 0.7;
+  }
 }
 
+/* ===== NEO-BRUTALISM UTILITIES ===== */
 @layer utilities {
-  /* Neo-brutalism utility classes */
-  .neo-border {
-    border: 2px solid #000;
-  }
-  .neo-border-thick {
-    border: 3px solid #000;
-  }
-  .neo-shadow {
-    box-shadow: var(--shadow-neo);
-  }
-  .neo-shadow-sm {
-    box-shadow: var(--shadow-neo-sm);
-  }
-  .neo-shadow-lg {
-    box-shadow: var(--shadow-neo-lg);
-  }
-  .neo-shadow-xl {
-    box-shadow: var(--shadow-neo-xl);
-  }
+  /* Borders */
+  .neo-border { border: 2px solid var(--color-border); }
+  .neo-border-thick { border: 3px solid var(--color-border); }
+  .neo-border-heavy { border: 4px solid var(--color-border); }
+
+  /* Shadows */
+  .neo-shadow { box-shadow: var(--shadow-neo); }
+  .neo-shadow-sm { box-shadow: var(--shadow-neo-sm); }
+  .neo-shadow-lg { box-shadow: var(--shadow-neo-lg); }
+  .neo-shadow-xl { box-shadow: var(--shadow-neo-xl); }
   
-  /* Interactive neo elements */
+  /* 2026: Colored shadows */
+  .neo-shadow-primary { box-shadow: var(--shadow-neo-primary); }
+  .neo-shadow-secondary { box-shadow: var(--shadow-neo-secondary); }
+  .neo-shadow-accent { box-shadow: var(--shadow-neo-accent); }
+  .neo-shadow-tertiary { box-shadow: var(--shadow-neo-tertiary); }
+
+  /* Interactive: The signature neo-brutalism button behavior */
   .neo-interactive {
-    border: 2px solid #000;
+    border: 2px solid var(--color-border);
     box-shadow: var(--shadow-neo);
-    transition: transform 0.15s ease, box-shadow 0.15s ease;
+    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
     cursor: pointer;
   }
   .neo-interactive:hover {
@@ -142,42 +166,38 @@
     box-shadow: var(--shadow-neo-lg);
   }
   .neo-interactive:active {
-    transform: translate(2px, 2px);
-    box-shadow: 0px 0px 0px 0px #000;
+    transform: translate(3px, 3px);
+    box-shadow: 0px 0px 0px 0px var(--color-border);
   }
 
-  /* Neo card */
+  /* Card */
   .neo-card {
-    border: 2px solid #000;
+    border: 2px solid var(--color-border);
     box-shadow: var(--shadow-neo-md);
-    background: white;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    background: var(--color-card);
+    color: var(--color-card-foreground);
+    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   }
   .neo-card:hover {
     transform: translate(-3px, -3px);
     box-shadow: var(--shadow-neo-xl);
   }
-  
-  /* Neo badge */
-  .neo-badge {
-    border: 2px solid #000;
-    font-weight: 700;
-    font-size: 0.75rem;
-    padding: 2px 10px;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-  
-  /* Neo button base */
+
+  /* Button */
   .neo-btn {
-    border: 2px solid #000;
+    border: 2px solid var(--color-border);
     box-shadow: var(--shadow-neo);
     font-weight: 700;
+    font-family: var(--font-body);
     text-transform: uppercase;
-    letter-spacing: 0.05em;
-    padding: 12px 24px;
-    transition: transform 0.15s ease, box-shadow 0.15s ease;
+    letter-spacing: 0.04em;
+    padding: 0.75rem 1.5rem;
+    transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.12s cubic-bezier(0.4, 0, 0.2, 1);
     cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
   }
   .neo-btn:hover {
     transform: translate(-2px, -2px);
@@ -185,10 +205,49 @@
   }
   .neo-btn:active {
     transform: translate(3px, 3px);
-    box-shadow: 0 0 0 0 #000;
+    box-shadow: 0 0 0 0 var(--color-border);
+  }
+  .neo-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: var(--shadow-neo-xs);
+  }
+
+  /* Badge */
+  .neo-badge {
+    border: 2px solid var(--color-border);
+    font-weight: 700;
+    font-size: 0.7rem;
+    padding: 3px 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
   }
 
-  /* Marquee animation */
+  /* 2026: Outlined mega text */
+  .neo-outline-text {
+    color: transparent;
+    -webkit-text-stroke: 2px var(--color-border);
+    font-family: var(--font-display);
+    font-weight: 800;
+  }
+
+  /* 2026: Terminal/retro header */
+  .neo-terminal {
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    padding: 0.4rem 0.8rem;
+    background: var(--color-foreground);
+    color: var(--color-accent);
+    border: 2px solid var(--color-border);
+  }
+
+  /* Marquee */
   @keyframes marquee {
     0% { transform: translateX(0%); }
     100% { transform: translateX(-50%); }
@@ -197,16 +256,16 @@
     animation: marquee 25s linear infinite;
   }
 
-  /* Floating animation */
+  /* Float */
   @keyframes float {
     0%, 100% { transform: translateY(0px); }
-    50% { transform: translateY(-10px); }
+    50% { transform: translateY(-8px); }
   }
   .animate-float {
     animation: float 3s ease-in-out infinite;
   }
 
-  /* Wiggle */
+  /* Wiggle on hover */
   @keyframes wiggle {
     0%, 100% { transform: rotate(0deg); }
     25% { transform: rotate(-2deg); }
@@ -215,23 +274,41 @@
   .hover\:animate-wiggle:hover {
     animation: wiggle 0.3s ease-in-out;
   }
-}
 
-/* Scrollbar styling */
-::-webkit-scrollbar {
-  width: 12px;
+  /* 2026: Slight card rotation for collage effect */
+  .neo-tilt-1 { transform: rotate(-0.8deg); }
+  .neo-tilt-2 { transform: rotate(0.6deg); }
+  .neo-tilt-3 { transform: rotate(-0.4deg); }
 }
+
+/* ===== SCROLLBAR ===== */
+::-webkit-scrollbar { width: 10px; }
 ::-webkit-scrollbar-track {
   background: var(--color-muted);
-  border-left: 2px solid #000;
+  border-left: 2px solid var(--color-border);
 }
 ::-webkit-scrollbar-thumb {
-  background: var(--color-main);
-  border: 2px solid #000;
+  background: var(--color-primary);
+  border: 2px solid var(--color-border);
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-secondary);
 }
 
-/* Selection */
+/* ===== SELECTION ===== */
 ::selection {
-  background: var(--color-main);
+  background: var(--color-primary);
   color: #000;
 }
+
+/* ===== DARK MODE specific overrides ===== */
+html.dark ::-webkit-scrollbar-track {
+  border-left-color: #FFFFFF;
+}
+html.dark ::-webkit-scrollbar-thumb {
+  border-color: #FFFFFF;
+}
+html.dark input, html.dark textarea, html.dark select {
+  border-color: #FFFFFF;
+  box-shadow: var(--shadow-neo-xs);
+}