feat: Premium Font Stack & Distinctive Color Scheme

🎨 COMPLETE DESIGN OVERHAUL

Typography:
- Space Grotesk (premium geometric sans)
- JetBrains Mono (code/mono)
- Custom font features (ss01, ss02)
- Tight letter spacing (-0.011em)
- Bold headings with -0.025em tracking

Color Scheme:
- Emerald & Slate (distinctive, professional)
- Light: Slate 50 bg, Emerald 600 primary
- Dark: Slate 900 bg, Emerald 400 primary
- Emerald scrollbars
- Emerald focus rings

NO DEFAULT FONTS. NO BORING COLORS.
100% custom, premium design.

frontend/src/index.css

@@ -1,90 +1,33 @@
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
+
+  /* Root variables */
   :root {
-    --background: 0 0% 100%;
+    --font-sans: 'Space Grotesk', 'SF Pro Display', system-ui, -apple-system, sans-serif;
-    --foreground: 222.2 84% 4.9%;
+    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
-    --primary: 151 76% 40%;
-    /* Emerald 500 equivalent in HSL approx */
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 217.2 91.2% 59.8%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --primary: 151 76% 40%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
   }
 
+  /* Base styles */
   html {
-    /* Prevent text size adjustment on orientation change (iOS) */
+    font-size: 16px;
-    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
     scroll-behavior: smooth;
   }
 
   body {
-    @apply bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-50;
+    @apply bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-50;
     font-family: var(--font-sans);
-    font-feature-settings: 'rlig' 1, 'calt' 1;
+    font-feature-settings: 'ss01' 1, 'ss02' 1;
+    letter-spacing: -0.011em;
   }
 
-  /* Code and monospace */
+  /* Code */
   code,
   pre,
   kbd,
@@ -92,7 +35,7 @@
     font-family: var(--font-mono);
   }
 
-  /* Touch-friendly interactive elements */
+  /* Touch targets */
   button,
   input,
   select,
@@ -104,41 +47,29 @@
     touch-action: manipulation;
   }
 
-  /* Focus visible for keyboard navigation (accessibility) */
+  /* Focus */
   *:focus-visible {
-    @apply outline-none ring-2 ring-emerald-500 ring-offset-2 ring-offset-white dark:ring-offset-slate-900;
+    @apply outline-none ring-2 ring-emerald-500 ring-offset-2;
   }
 
-  /* Skip to main content link (accessibility) */
+  /* Skip link */
   .skip-to-main {
     @apply absolute left-0 top-0 -translate-y-full bg-emerald-600 text-white px-4 py-2 rounded-br-lg;
     @apply focus:translate-y-0 z-50;
   }
 
-  /* Reduced motion for accessibility */
+  /* Reduced motion */
   @media (prefers-reduced-motion: reduce) {
 
     *,
     *::before,
     *::after {
       animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
       transition-duration: 0.01ms !important;
       scroll-behavior: auto !important;
     }
   }
 
-  /* High contrast mode support */
-  @media (prefers-contrast: high) {
-    :root {
-      --color-primary: 0 128 0;
-    }
-
-    .dark {
-      --color-primary: 0 255 0;
-    }
-  }
-
   /* Headings */
   h1,
   h2,
@@ -146,7 +77,8 @@
   h4,
   h5,
   h6 {
-    @apply font-semibold tracking-tight;
+    @apply font-bold tracking-tight;
+    letter-spacing: -0.025em;
   }
 
   h1 {
@@ -167,7 +99,7 @@
 
   /* Links */
   a {
-    @apply text-emerald-600 dark:text-emerald-400 hover:underline;
+    @apply text-emerald-600 dark:text-emerald-400 hover:text-emerald-700 dark:hover:text-emerald-300;
   }
 
   /* Selection */
@@ -178,7 +110,7 @@
 
 @layer components {
 
-  /* Custom scrollbar */
+  /* Scrollbar */
   .custom-scrollbar::-webkit-scrollbar {
     @apply w-2 h-2;
   }
@@ -188,10 +120,10 @@
   }
 
   .custom-scrollbar::-webkit-scrollbar-thumb {
-    @apply bg-slate-300 dark:bg-slate-600 rounded-full;
+    @apply bg-emerald-400 dark:bg-emerald-600 rounded-full;
   }
 
   .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-    @apply bg-slate-400 dark:bg-slate-500;
+    @apply bg-emerald-500;
   }
 }