UI v32

app.py

@@ -301,36 +301,37 @@ Answer:"""
         /* Import legible fonts from Google Fonts */
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700;800&display=swap');
         
-        /* Root variables for consistent theming - adjusted for very light calm_seafoam feel */
+        /* Root variables for consistent theming - adjusted for an inviting orange palette */
         :root {
-            --primary-color: #3cb371; /* Medium Sea Green (vibrant seafoam) */
-            --primary-hover: #339966;
-            --background-primary: hsl(180, 100%, 98%); /* Very light seafoam for main cards */
-            --background-secondary: hsl(180, 100%, 96%); /* Slightly darker for overall app background */
-            --text-primary: hsl(210, 20%, 20%); /* Dark blue-gray for main text */
-            --text-secondary: hsl(210, 10%, 45%); /* Muted blue-gray for secondary text */
-            --border-color: hsl(180, 30%, 85%); /* Subtle seafoam gray for borders */
-            --border-focus: #3cb371; /* Focus color matches primary */
+            --primary-color: #FF8000; /* Vibrant Orange */
+            --primary-hover: #E67300; /* Slightly darker orange */
+            --background-primary: #FFF5E0; /* Very light cream/off-white for cards */
+            --background-secondary: #FAEBD7; /* Slightly darker cream for overall app background */
+            --text-primary: #4A3C32; /* Dark warm brown/charcoal for main text */
+            --text-secondary: #8C7B6F; /* Muted warm gray/brown for secondary text */
+            --border-color: #DDC6AF; /* Light, desaturated orange-brown for borders */
+            --border-focus: #FF8000; /* Focus color matches primary */
             --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
             --shadow-md: 0 4px 10px rgba(0,0,0,0.1);
             --shadow-lg: 0 10px 20px rgba(0,0,0,0.15);
-            --error-bg: #FFEBEB;
-            --error-border: #FFCACA;
-            --error-text: #D32F2F;
+            --error-bg: #FFF0E0; /* Light orange-pink for errors */
+            --error-border: #FFD2B2; /* Medium orange-pink for error borders */
+            --error-text: #E05C00; /* Darker, strong orange-red for error text */
         }
         
         /* Dark mode variables - for consistency if a dark mode toggle were present */
         body.dark {
-            --background-primary: #1F303A; /* Dark blue-green */
-            --background-secondary: #2C404B;
-            --text-primary: #E0F2F1;
-            --text-secondary: #A7C5C8;
-            --border-color: #5F7C8A;
-            --primary-color: #66BB6A; /* Brighter green for dark mode */
-            --primary-hover: #5cb85f;
-            --error-bg: #3F1D1D;
-            --error-border: #5A1A1A;
-            --error-text: #FF7070;
+            --primary-color: #FFA500; /* Bright orange for dark mode */
+            --primary-hover: #CC8400;
+            --background-primary: #2C2C2C; /* Dark charcoal */
+            --background-secondary: #1F1F1F; /* Even darker charcoal */
+            --text-primary: #F0F0F0;
+            --text-secondary: #B0B0B0;
+            --border-color: #555555;
+            --border-focus: #FFA500;
+            --error-bg: #400000;
+            --error-border: #800000;
+            --error-text: #FF6666;
         }
 
         /* Base container improvements */
@@ -366,8 +367,8 @@ Answer:"""
             left: 0;
             width: 100%;
             height: 100%;
-            background: radial-gradient(circle at top left, rgba(60,179,113,0.05) 0%, transparent 40%),
-                        radial-gradient(circle at bottom right, rgba(60,179,113,0.05) 0%, transparent 40%);
+            background: radial-gradient(circle at top left, rgba(255,128,0,0.05) 0%, transparent 40%),
+                        radial-gradient(circle at bottom right, rgba(255,128,0,0.05) 0%, transparent 40%);
             z-index: 0;
             opacity: 0.8;
             pointer-events: none;
@@ -484,7 +485,7 @@ Answer:"""
         .gradio-dropdown .primary-wrap.focused { /* Apply focus style to dropdown wrap */
             outline: none !important;
             border-color: var(--border-focus) !important; /* Distinct border on focus */
-            box-shadow: 0 0 0 4px rgba(60, 179, 113, 0.2) !important; /* Broader, softer glow on focus */
+            box-shadow: 0 0 0 4px rgba(255, 128, 0, 0.2) !important; /* Broader, softer glow on focus */
         }
 
         /* Label styling for better readability */