Clean up design system - remove emojis and create refined monochromatic palette

🎨 Design Improvements:
- Replaced colorful green/blue mix with sophisticated monochromatic palette
- Removed all emojis from UI buttons and elements for clean professional look
- Updated color system to use refined slate grays as primary palette
- GPS button now uses consistent dark gray styling across all screen sizes
- Simplified gradients to focus on subtle sophistication

🧹 Code Cleanup:
- Removed emoji icons from buttons (GPS, tree icons, stat counters)
- Fixed login page background gradient references
- Cleaned up inconsistent color usage
- Standardized button styling across all pages

The UI now has a clean, minimal, and professional appearance without the
tacky color mixing or distracting emojis. The monochromatic design feels
more sophisticated and modern while maintaining excellent usability.

static/css/design-system.css

@@ -4,29 +4,29 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap');
 
 :root {
-    /* Primary Brand Colors - Sophisticated green palette */
-    --primary-50: #f0fdf5;
-    --primary-100: #dcfce8;
-    --primary-200: #bbf7d1;
-    --primary-300: #86efac;
-    --primary-400: #4ade80;
-    --primary-500: #22c55e;
-    --primary-600: #16a34a;
-    --primary-700: #15803d;
-    --primary-800: #166534;
-    --primary-900: #14532d;
+    /* Primary Brand Colors - Sophisticated monochromatic palette */
+    --primary-50: #f8fafc;
+    --primary-100: #f1f5f9;
+    --primary-200: #e2e8f0;
+    --primary-300: #cbd5e1;
+    --primary-400: #94a3b8;
+    --primary-500: #64748b;
+    --primary-600: #475569;
+    --primary-700: #334155;
+    --primary-800: #1e293b;
+    --primary-900: #0f172a;
     
-    /* Secondary Brand Colors - Elegant blue accent */
-    --secondary-50: #eff6ff;
-    --secondary-100: #dbeafe;
-    --secondary-200: #bfdbfe;
-    --secondary-300: #93c5fd;
-    --secondary-400: #60a5fa;
-    --secondary-500: #3b82f6;
-    --secondary-600: #2563eb;
-    --secondary-700: #1d4ed8;
-    --secondary-800: #1e40af;
-    --secondary-900: #1e3a8a;
+    /* Accent Colors - Minimal and refined */
+    --accent-50: #fafafa;
+    --accent-100: #f5f5f5;
+    --accent-200: #e5e5e5;
+    --accent-300: #d4d4d4;
+    --accent-400: #a3a3a3;
+    --accent-500: #737373;
+    --accent-600: #525252;
+    --accent-700: #404040;
+    --accent-800: #262626;
+    --accent-900: #171717;
     
     /* Neutral Colors - Sophisticated grayscale */
     --gray-50: #fafafa;
@@ -132,12 +132,10 @@
     --glass-blur: blur(12px);
     --glass-border: 1px solid rgba(255, 255, 255, 0.2);
     
-    /* Gradients */
-    --gradient-primary: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 50%, var(--primary-800) 100%);
-    --gradient-secondary: linear-gradient(135deg, var(--secondary-600) 0%, var(--secondary-700) 50%, var(--secondary-800) 100%);
-    --gradient-forest: linear-gradient(135deg, #134e4a 0%, #14532d 25%, #166534 50%, #15803d 75%, #16a34a 100%);
-    --gradient-sky: linear-gradient(135deg, #0c4a6e 0%, #1e40af 25%, #2563eb 50%, #3b82f6 75%, #60a5fa 100%);
-    --gradient-sunset: linear-gradient(135deg, #7c2d12 0%, #dc2626 25%, #f59e0b 50%, #fbbf24 75%, #fde047 100%);
+    /* Gradients - Sophisticated and minimal */
+    --gradient-primary: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-800) 50%, var(--primary-900) 100%);
+    --gradient-accent: linear-gradient(135deg, var(--accent-700) 0%, var(--accent-800) 50%, var(--accent-900) 100%);
+    --gradient-subtle: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
     
     /* Transitions */
     --transition-fast: 0.15s ease;
@@ -269,13 +267,13 @@ a:focus {
 
 /* Modern Header Component */
 .tt-header {
-    background: var(--gradient-forest);
+    background: var(--gradient-primary);
     color: white;
     position: sticky;
     top: 0;
     z-index: var(--z-sticky);
     backdrop-filter: var(--glass-blur);
-    border-bottom: var(--glass-border);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: var(--shadow-lg);
 }
 
@@ -303,10 +301,6 @@ a:focus {
     gap: var(--space-2);
 }
 
-.tt-header-logo::before {
-    content: '🌳';
-    font-size: var(--text-3xl);
-}
 
 .tt-header-subtitle {
     font-size: var(--text-sm);
@@ -337,7 +331,7 @@ a:focus {
     width: 36px;
     height: 36px;
     border-radius: var(--radius-full);
-    background: var(--gradient-secondary);
+    background: var(--gradient-accent);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -662,30 +656,15 @@ a:focus {
 
 /* GPS Button Enhanced Mobile Styling */
 .tt-btn-gps {
-    background: var(--gradient-primary);
+    background: var(--accent-800);
     color: white;
     box-shadow: var(--shadow-md);
-    position: relative;
-    overflow: hidden;
-}
-
-.tt-btn-gps::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-    transition: left 0.5s;
-}
-
-.tt-btn-gps:hover::before {
-    left: 100%;
+    border: 1px solid var(--accent-700);
 }
 
 .tt-btn-gps:hover {
-    transform: translateY(-2px);
+    background: var(--accent-900);
+    transform: translateY(-1px);
     box-shadow: var(--shadow-lg);
 }
 
@@ -696,14 +675,13 @@ a:focus {
         justify-content: center;
         min-height: 48px;
         font-weight: var(--font-semibold);
-        background: var(--gradient-primary);
-        border: none;
+        background: var(--accent-800);
+        border: 1px solid var(--accent-700);
         color: white;
     }
     
     .tt-btn-gps:hover {
-        background: var(--gradient-primary);
-        filter: brightness(1.1);
+        background: var(--accent-900);
     }
     
     .tt-btn-gps:active {

static/index.html

@@ -954,10 +954,10 @@
                             <div class="form-group">
                                 <div class="location-buttons">
                                     <button type="button" id="getLocation" class="tt-btn tt-btn-gps location-btn-gps">
-                                        <span class="btn-text">📍 Get GPS Location</span>
+                                        <span class="btn-text">Get GPS Location</span>
                                     </button>
                                     <a href="/static/map.html" class="tt-btn tt-btn-primary location-btn-map">
-                                        <span class="btn-text">🗺️ Select from Map</span>
+                                        <span class="btn-text">Select from Map</span>
                                     </a>
                                 </div>
                             </div>
@@ -1088,7 +1088,7 @@
 
                         <div class="form-actions">
                             <button type="button" id="resetForm" class="tt-btn tt-btn-outline">Reset Form</button>
-                            <button type="submit" class="tt-btn tt-btn-primary tt-btn-lg">🌳 Save Tree Record</button>
+                            <button type="submit" class="tt-btn tt-btn-primary tt-btn-lg">Save Tree Record</button>
                         </div>
                     </form>
 

static/login.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="/static/css/design-system.css">
     <style>
         body {
-            background: var(--gradient-forest);
+            background: var(--gradient-primary);
             min-height: 100vh;
             display: flex;
             align-items: center;
@@ -32,10 +32,6 @@
             gap: var(--space-2);
         }
 
-        .logo::before {
-            content: '🌳';
-            font-size: var(--text-5xl);
-        }
 
         .logo-subtitle {
             color: var(--gray-600);
@@ -89,9 +85,6 @@
             gap: var(--space-2);
         }
 
-        .demo-title::before {
-            content: '🔐';
-        }
 
         .account-list {
             display: flex;
@@ -138,10 +131,6 @@
             color: var(--success-700);
         }
 
-        .security-notice::before {
-            content: '✅';
-            margin-right: var(--space-2);
-        }
 
         .footer {
             text-align: center;

static/map.html

@@ -94,7 +94,7 @@
 
         /* Map-specific header styling */
         .map-header {
-            background: var(--gradient-forest);
+            background: var(--gradient-primary);
             position: relative;
             overflow: hidden;
         }
@@ -711,12 +711,12 @@
                 
                 <div class="header-stats">
                     <div class="stat-item">
-                        <span class="stat-icon">🌳</span>
+                        <span class="stat-icon">T</span>
                         <span class="stat-text">Trees:</span>
                         <span class="stat-number" id="treeCount">0</span>
                     </div>
                     <div class="stat-item">
-                        <span class="stat-icon">📍</span>
+                        <span class="stat-icon">S</span>
                         <span class="stat-text">Selected:</span>
                         <span class="stat-number" id="selectedCount">0</span>
                     </div>
@@ -730,7 +730,7 @@
                             <div class="tt-user-role" id="userRole">User</div>
                         </div>
                     </div>
-                    <a href="/" class="tt-btn tt-btn-secondary">🌱 Add Tree</a>
+                    <a href="/" class="tt-btn tt-btn-secondary">Add Tree</a>
                     <button id="logoutBtn" class="tt-btn tt-btn-secondary">Logout</button>
                 </div>
             </div>
@@ -781,10 +781,10 @@
                     </div>
                     <div class="location-actions">
                         <button id="useLocationBtn" class="tt-btn tt-btn-primary">
-                            ✅ Use This Location
+                            Use This Location
                         </button>
                         <button id="cancelBtn" class="tt-btn tt-btn-secondary">
-                            ❌ Cancel
+                            Cancel
                         </button>
                     </div>
                 </div>