Dark mode - app colors

index.html

@@ -17,10 +17,11 @@
         }
         
         :root {
-            --primary: #4F46E5;
-            --primary-dark: #4338ca;
-            --secondary: #10B981;
-            --dark: #111827;
+            --primary: #C4A06A;
+            --primary-dark: #a88656;
+            --secondary: #E86A4A;
+            --secondary-dark: #c45535;
+            --dark: #18191c;
             --light: #F9FAFB;
             --gray: #6B7280;
         }
@@ -28,8 +29,8 @@
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
             line-height: 1.6;
-            color: var(--dark);
-            background: var(--light);
+            color: #e5e7eb;
+            background: #18191c;
         }
         
         .container {
@@ -41,8 +42,14 @@
         /* Header */
         header {
             padding: 1.5rem 0;
-            background: white;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            background: #282a2e;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+        }
+        
+        .logo-text {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: #e5e7eb;
         }
         
         .header-content {
@@ -69,7 +76,7 @@
         }
         
         nav a {
-            color: var(--gray);
+            color: #b9bbbe;
             text-decoration: none;
             margin-left: 2rem;
             transition: color 0.2s;
@@ -83,7 +90,7 @@
         .hero {
             padding: 6rem 0;
             text-align: center;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, #C4A06A 0%, #E86A4A 100%);
             color: white;
         }
         
@@ -111,12 +118,12 @@
         }
         
         .btn-primary {
-            background: var(--secondary);
+            background: #E86A4A;
             color: white;
         }
         
         .btn-primary:hover {
-            background: #059669;
+            background: #c45535;
             transform: translateY(-2px);
         }
         
@@ -135,7 +142,18 @@
         /* Features */
         .features {
             padding: 5rem 0;
-            background: white;
+            background: #18191c;
+        }
+        
+        .feature-card {
+            padding: 2rem;
+            border-radius: 1rem;
+            background: #282a2e;
+            transition: transform 0.2s;
+        }
+        
+        .feature-card p {
+            color: #b9bbbe;
         }
         
         .features h2 {
@@ -178,12 +196,14 @@
         /* About */
         .about {
             padding: 5rem 0;
+            background: #282a2e;
         }
         
         .about h2 {
             text-align: center;
             font-size: 2.25rem;
             margin-bottom: 2rem;
+            color: #e5e7eb;
         }
         
         .about-content {
@@ -192,6 +212,12 @@
             text-align: center;
         }
         
+        .about p {
+            font-size: 1.125rem;
+            color: #b9bbbe;
+            margin-bottom: 1.5rem;
+        }
+        
         .about p {
             font-size: 1.125rem;
             color: var(--gray);