Change of fonts

static/style.css

@@ -1,6 +1,17 @@
+/* Import Google Fonts for better typography */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Source+Sans+Pro:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+
+/* Root font styles - Applied to entire page */
+* {
+  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+}
+
 /* Background - Light Ukrainian sky with warm golden undertones */
 .gradio-container {
   background: radial-gradient(1200px 600px at 20% 0%, #f1f5f9 0%, #e2e8f0 45%, #cbd5e1 100%);
+  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 /* Header - Transparent background, only text visible */
@@ -12,11 +23,21 @@
   border-bottom: none;
 }
 #app-header .app-title {
-  font-weight: 800; letter-spacing: -0.02em; font-size: 40px;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 700; 
+  letter-spacing: -0.02em; 
+  font-size: 40px;
   background: linear-gradient(120deg, #60a5fa 0%, #fbbf24 20%, #3b82f6 40%);
   -webkit-background-clip: text; background-clip: text; color: transparent;
 }
-#app-header .app-subtitle { color: #64748b; margin-top: 4px; }
+#app-header .app-subtitle { 
+  font-family: 'Source Sans Pro', sans-serif;
+  color: #64748b; 
+  margin-top: 4px; 
+  font-weight: 400;
+  font-size: 16px;
+  letter-spacing: 0.01em;
+}
 
 /* Chat card */
 #chat-card .gr-chatbot {
@@ -27,14 +48,36 @@
   border-radius: 18px;
 }
 
-/* Code blocks */
+/* Code blocks - Using JetBrains Mono for better readability */
 #chat-card .prose pre {
+  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Cascadia Code', 'SF Mono', 'Consolas', 'DejaVu Sans Mono', monospace !important;
   border: 1px solid rgba(59,130,246,0.2);
   background: #f8fafc !important;
+  font-size: 13px;
+  line-height: 1.5;
+  font-weight: 400;
 }
 #chat-card .prose code {
+  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Cascadia Code', 'SF Mono', 'Consolas', 'DejaVu Sans Mono', monospace !important;
   background: rgba(59,130,246,0.1);
-  border-radius: 6px; padding: 0.1rem 0.35rem;
+  border-radius: 6px; 
+  padding: 0.1rem 0.35rem;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+/* Chat message text styling */
+.gr-chatbot .message {
+  font-family: 'Source Sans Pro', sans-serif;
+  font-size: 15px;
+  line-height: 1.65;
+  font-weight: 400;
+  letter-spacing: 0.01em;
+}
+
+.gr-chatbot .message p {
+  font-family: 'Source Sans Pro', sans-serif;
+  margin-bottom: 0.75em;
 }
 
 /* ChatGPT-style input */
@@ -54,8 +97,11 @@
   background: rgba(255,255,255,0.9) !important;
   color: #334155 !important;
   padding: 12px 16px !important;
+  font-family: 'Source Sans Pro', sans-serif !important;
   font-size: 15px !important;
-  line-height: 1.4 !important;
+  line-height: 1.5 !important;
+  font-weight: 400 !important;
+  letter-spacing: 0.01em !important;
   resize: none !important;
   transition: all 0.2s ease !important;
 }
@@ -151,7 +197,15 @@
   padding: 8px 10px;
 }
 
-.footer-tip { color: #64748b; font-size: 12.5px; text-align:center; margin-top: 6px; }
+.footer-tip { 
+  font-family: 'Source Sans Pro', sans-serif;
+  color: #64748b; 
+  font-size: 12.5px; 
+  text-align: center; 
+  margin-top: 6px; 
+  font-weight: 400;
+  letter-spacing: 0.02em;
+}
 
 /* Hidden buttons row - make invisible without using visibility */
 #hidden-buttons {