Major UI overhaul plans; Other random docs

frontend/src/index.css

@@ -4,27 +4,34 @@
 
 @layer base {
   :root {
-    /* Monochrome Design System — Dark Only */
-    --background: 0 0% 0%;
+    /* ResolutionFlow Dark Theme — Purple Gradient Accents */
+    --background: 240 10% 3.9%;
     --foreground: 0 0% 100%;
-    --card: 0 0% 4%;
+    --card: 240 10% 9.4%;
     --card-foreground: 0 0% 100%;
-    --popover: 0 0% 4%;
+    --popover: 240 10% 9.4%;
     --popover-foreground: 0 0% 100%;
-    --primary: 0 0% 100%;
-    --primary-foreground: 0 0% 0%;
-    --secondary: 0 0% 10%;
+    --primary: 243 75% 59%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 240 5.9% 15%;
     --secondary-foreground: 0 0% 100%;
-    --muted: 0 0% 10%;
-    --muted-foreground: 0 0% 50%;
-    --accent: 0 0% 8%;
+    --muted: 240 5.9% 15%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 5.9% 15%;
     --accent-foreground: 0 0% 100%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 100%;
-    --border: 0 0% 12%;
-    --input: 0 0% 12%;
-    --ring: 0 0% 100%;
+    --border: 240 5.9% 15%;
+    --input: 240 5.9% 15%;
+    --ring: 243 75% 59%;
     --radius: 0.75rem;
+
+    /* App Shell tokens */
+    --sidebar-bg: 240 10% 4.5%;
+    --sidebar-hover: 240 6% 12%;
+    --sidebar-active: 243 75% 59% / 0.08;
+    --border-subtle: 240 6% 12%;
+    --text-dimmed: 240 4% 24%;
   }
 }
 
@@ -55,7 +62,7 @@
   }
 
   h1, h2, h3, h4, h5, h6 {
-    font-family: 'Inter', system-ui, sans-serif;
+    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
     font-weight: 700;
     letter-spacing: -0.02em;
   }
@@ -113,7 +120,14 @@
     @apply active:scale-[0.98] transition-transform;
   }
 
-  /* Glass card effect */
+  /* Brand gradient text */
+  .text-gradient-brand {
+    @apply bg-gradient-brand bg-clip-text text-transparent;
+  }
+
+  /* ── Legacy glass-card utilities (preserved for backward compatibility) ── */
+  /* New components should use bg-card border-border rounded-xl instead */
+
   .glass-card {
     background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
     border: 1px solid rgba(255, 255, 255, 0.08);
@@ -125,14 +139,12 @@
     border-color: rgba(255, 255, 255, 0.12);
   }
 
-  /* Active/highlighted card glow */
   .glass-card-glow {
     background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%);
     border: 1px solid rgba(255, 255, 255, 0.2);
     box-shadow: 0 0 40px rgba(255, 255, 255, 0.1);
   }
 
-  /* Stat card */
   .glass-stat {
     background: rgba(20, 20, 25, 0.5);
     border: 1px solid rgba(255, 255, 255, 0.06);
@@ -234,7 +246,7 @@
   }
 
   .rdp-custom .rdp-day_selected {
-    @apply bg-white text-black hover:bg-white/90 hover:text-black;
+    @apply bg-primary text-primary-foreground hover:bg-primary/90;
   }
 
   .rdp-custom .rdp-day_today {

frontend/tailwind.config.js

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: ["class"],
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
@@ -7,7 +8,25 @@ export default {
   theme: {
     extend: {
       colors: {
-        // shadcn/ui color system (monochrome)
+        // ResolutionFlow Brand Colors
+        brand: {
+          gradient: {
+            from: '#818cf8',
+            to: '#a78bfa',
+          },
+          dark: {
+            DEFAULT: '#09090b',
+            card: '#18181b',
+            surface: '#12121c',
+          },
+          text: {
+            primary: '#ffffff',
+            secondary: '#a1a1aa',
+            muted: '#52525b',
+          },
+          border: '#27272a',
+        },
+        // shadcn/ui color system
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
@@ -49,6 +68,12 @@ export default {
       },
       fontFamily: {
         sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
+        heading: ['Plus Jakarta Sans', 'system-ui', 'sans-serif'],
+        label: ['Outfit', 'system-ui', 'sans-serif'],
+      },
+      backgroundImage: {
+        'gradient-brand': 'linear-gradient(90deg, #818cf8 0%, #a78bfa 100%)',
+        'gradient-brand-hover': 'linear-gradient(90deg, #6366f1 0%, #9333ea 100%)',
       },
     },
   },