Update app.py

app.py

@@ -125,8 +125,8 @@ def demo():
     /* Global styles */
     body {
         font-family: 'Inter', sans-serif;
-        color: #333;
-        background-color: #f9fafb;
+        color: #333333; /* Dark Gray Text */
+        background-color: #f7f7f7; /* Light Gray Background */
     }
     
     .container {
@@ -139,7 +139,7 @@ def demo():
         text-align: center;
         padding: 20px 0;
         margin-bottom: 20px;
-        background: linear-gradient(90deg, #3b82f6, #2563eb);
+        background: linear-gradient(90deg, #3171c7, #24599b); /* Primary & Secondary Blue */
         color: white;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -171,7 +171,7 @@ def demo():
         font-size: 1.25rem;
         font-weight: 600;
         margin-bottom: 15px;
-        color: #1e40af;
+        color: #3171c7; /* Primary Blue */
         display: flex;
         align-items: center;
     }
@@ -182,7 +182,7 @@ def demo():
     
     /* Buttons */
     .primary-button {
-        background: linear-gradient(90deg, #3b82f6, #2563eb);
+        background: linear-gradient(90deg, #3171c7, #24599b); /* Primary & Secondary Blue */
         color: white !important;
         border: none !important;
         padding: 10px 20px !important;
@@ -194,7 +194,7 @@ def demo():
     }
     
     .primary-button:hover {
-        background: linear-gradient(90deg, #2563eb, #1d4ed8);
+        background: linear-gradient(90deg, #24599b, #1d4a83); /* Darker Blue on Hover */
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
         transform: translateY(-1px);
     }
@@ -209,7 +209,7 @@ def demo():
     
     .status-success {
         background-color: #d1fae5 !important;
-        color: #065f46 !important;
+        color: #065f46 !important; /* Teal */
     }
     
     .status-waiting {
@@ -219,13 +219,13 @@ def demo():
     
     .status-error {
         background-color: #fee2e2 !important;
-        color: #b91c1c !important;
+        color: #d9534f !important; /* Red */
     }
     
     /* Chat container */
     .chat-container {
         border-radius: 10px !important;
-        border: 1px solid #e5e7eb !important;
+        border: 1px solid #e0e0e0 !important; /* Medium Gray Border */
         overflow: hidden !important;
     }
     
@@ -240,7 +240,7 @@ def demo():
     }
     
     .upload-area:hover {
-        border-color: #3b82f6 !important;
+        border-color: #3171c7 !important; /* Primary Blue on Hover */
         background-color: #eff6ff !important;
     }
     
@@ -252,7 +252,7 @@ def demo():
     /* Reference boxes */
     .reference-box {
         background-color: #f3f4f6 !important;
-        border-left: 4px solid #3b82f6 !important;
+        border-left: 4px solid #3171c7 !important; /* Primary Blue */
         padding: 10px 15px !important;
         margin-bottom: 10px !important;
         border-radius: 4px !important;
@@ -260,7 +260,7 @@ def demo():
     
     .reference-box-title {
         font-weight: 600 !important;
-        color: #1e40af !important;
+        color: #3171c7 !important; /* Primary Blue */
         margin-bottom: 5px !important;
         display: flex !important;
         justify-content: space-between !important;
@@ -268,7 +268,7 @@ def demo():
     
     .page-number {
         background-color: #dbeafe !important;
-        color: #1e40af !important;
+        color: #3171c7 !important; /* Primary Blue */
         padding: 2px 8px !important;
         border-radius: 12px !important;
         font-size: 0.8rem !important;