Colour schema change

app.py

@@ -88,79 +88,115 @@ with gr.Blocks() as demo:
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
         }
 
-        .gradio-container {
-            background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%) !important;
+        body, .gradio-container {
+            background-color: #F7F7F8 !important;
         }
 
         .gr-box, .gr-form, .gr-panel {
-            background-color: #ffffff !important;
-            border-radius: 12px !important;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
+            background-color: #FFFFFF !important;
+            border: 1px solid #E5E7EB !important;
+            border-radius: 8px !important;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
         }
 
+        /* Primary button (Send) - Soft professional blue */
         button.primary {
-            background-color: #2563eb !important;
-            border-color: #2563eb !important;
+            background-color: #3B82F6 !important;
+            border-color: #3B82F6 !important;
+            color: #FFFFFF !important;
             font-weight: 500 !important;
             transition: all 0.2s ease !important;
         }
 
         button.primary:hover {
-            background-color: #1d4ed8 !important;
-            transform: translateY(-1px);
-            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
+            background-color: #2563EB !important;
+            border-color: #2563EB !important;
+        }
+
+        /* Secondary buttons (Clear Conversation, etc.) */
+        button:not(.primary) {
+            background-color: #E5E7EB !important;
+            border-color: #E5E7EB !important;
+            color: #111827 !important;
+            font-weight: 500 !important;
         }
 
+        button:not(.primary):hover {
+            background-color: #D1D5DB !important;
+        }
+
+        /* Chat bubbles */
         .message.user {
-            background-color: #f1f3f5 !important;
-            color: #1a1a1a !important;
-            border-left: 3px solid #2563eb !important;
+            background-color: #E5E7EB !important;
+            color: #111827 !important;
+            border-left: 3px solid #9CA3AF !important;
         }
 
         .message.bot {
-            background-color: #eff6ff !important;
-            color: #1a1a1a !important;
-            border-left: 3px solid #60a5fa !important;
+            background-color: #F3F4F6 !important;
+            color: #111827 !important;
+            border-left: 3px solid #6B7280 !important;
         }
 
+        /* Headings */
         h1 {
-            color: #1e293b !important;
+            color: #111827 !important;
             text-align: center;
             font-weight: 700 !important;
             letter-spacing: -0.02em;
         }
 
         h2, h3, h4, h5, h6 {
-            color: #334155 !important;
+            color: #374151 !important;
             font-weight: 600 !important;
         }
 
         .gr-markdown {
             text-align: center;
-            color: #475569 !important;
+            color: #4B5563 !important;
         }
 
+        /* Persona selector */
         .gr-radio {
-            background-color: #ffffff !important;
-            padding: 20px !important;
-            border-radius: 12px !important;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
+            background-color: #FFFFFF !important;
+            padding: 16px !important;
+            border: 1px solid #E5E7EB !important;
+            border-radius: 8px !important;
         }
 
         label {
-            color: #334155 !important;
+            color: #374151 !important;
             font-weight: 600 !important;
         }
 
-        .gr-input, .gr-text-input {
-            border-radius: 8px !important;
-            border: 2px solid #e2e8f0 !important;
-            color: #1a1a1a !important;
+        /* Text inputs */
+        .gr-input, .gr-text-input, input, textarea {
+            background-color: #FFFFFF !important;
+            border: 1px solid #E5E7EB !important;
+            border-radius: 6px !important;
+            color: #111827 !important;
+        }
+
+        .gr-input::placeholder, .gr-text-input::placeholder,
+        input::placeholder, textarea::placeholder {
+            color: #6B7280 !important;
+        }
+
+        .gr-input:focus, .gr-text-input:focus, input:focus, textarea:focus {
+            border-color: #3B82F6 !important;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
+            outline: none !important;
+        }
+
+        /* Chatbot container */
+        .gr-chatbot {
+            background-color: #FFFFFF !important;
+            border: 1px solid #E5E7EB !important;
         }
 
-        .gr-input:focus, .gr-text-input:focus {
-            border-color: #2563eb !important;
-            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
+        /* Examples section */
+        .gr-examples {
+            background-color: #FFFFFF !important;
         }
     </style>
     """)