updated UI v5

app.py

@@ -247,15 +247,15 @@ Answer:"""
             self,
             **kwargs,
         ):
+            # Pass all accepted kwargs to the base class
             super().__init__(
-                # Custom fonts
+                # Fonts are accepted directly by themes.Base
                 font=[themes.GoogleFont("Inter"), "sans-serif"],
                 font_mono=themes.GoogleFont("JetBrains Mono"),
-                heading_font=[themes.GoogleFont("Playfair Display"), "serif"],
 
                 # --- Dark Mode Colors (Legal Noir) ---
                 # Primary/Accent Colors (Goldenrod/Amber scale)
-                primary_50_dark="#FFFDE7", # Very light yellow/amber
+                primary_50_dark="#FFFDE7",
                 primary_100_dark="#FFF9C4",
                 primary_200_dark="#FFF59D",
                 primary_300_dark="#FFF176",
@@ -265,50 +265,55 @@ Answer:"""
                 primary_700_dark="#B88A00",
                 primary_800_dark="#8D6C00",
                 primary_900_dark="#614B00",
-                primary_950_dark="#403200", # Darkest amber/brown
+                primary_950_dark="#403200",
 
                 # Backgrounds
-                background_page_dark="#0F0F1A", # Overall app background
-                block_background_fill_dark="#1A1A2B", # Header and main footer background
-                background_fill_primary_dark="#1E1E30", # Main dashboard container background (slightly lighter than page)
-                background_fill_secondary_dark="#2A2A40", # Inner card sections background (lighter than primary)
-                background_fill_tertiary_dark="#3F3F5A", # For things like table headers, slightly more prominent
+                background_page_dark="#0F0F1A",
+                block_background_fill_dark="#1A1A2B",
+                background_fill_primary_dark="#1E1E30",
+                background_fill_secondary_dark="#2A2A40",
+                background_fill_tertiary_dark="#3F3F5A",
 
                 # Text Colors
-                text_color_body_dark="#EAEAF0", # Main text
-                text_color_subdued_dark="#A0A0B0", # Secondary text, placeholders
-                text_color_header_dark="#EAEAF0", # Heading text (matches body for consistency)
+                text_color_body_dark="#EAEAF0",
+                text_color_subdued_dark="#A0A0B0",
+                text_color_header_dark="#EAEAF0",
 
                 # Borders
-                border_color_primary_dark="#3F3F5A", # Main borders for blocks/cards
-                border_color_secondary_dark="#505060", # Lighter borders for internal elements (e.g., table rows)
+                border_color_primary_dark="#3F3F5A",
+                border_color_secondary_dark="#505060",
 
                 # Shadows (as hex colors for theme consistency, will be applied as rgba in CSS)
-                shadow_lg_dark="0F0F1A", # Represents darkest shadow color, will be used with rgba
-                shadow_md_dark="1A1A2B",
-                shadow_sm_dark="1E1E30",
-
+                # These are colors, not directly applied as 'shadow-lg' etc. by theme.Base
+                # They will be used via CSS variables
+                shadow_lg_dark="0F0F1A", # Represents darkest shadow color for rgba(..., 0.6)
+                shadow_md_dark="1A1A2B", # Represents medium shadow color for rgba(..., 0.4)
+                shadow_sm_dark="1E1E30", # Represents light shadow color for rgba(..., 0.35)
 
                 # Links
                 link_text_color_dark="#FFC107",
                 link_text_color_hover_dark="#E0A800",
 
+                # Buttons (theme handles primary colors, custom CSS for secondary)
+                button_primary_background_dark="#FFC107",
+                button_primary_background_hover_dark="#E0A800",
+                button_primary_text_color_dark="#1A1A2B",
+
                 # Error Colors
-                color_error_50_dark="#4D001A", # Lightest error tint (for background)
-                color_error_200_dark="#990026", # Medium error (for border)
-                color_error_500_dark="#CC0033", # Main error (for icon)
-                color_error_600_dark="#FFB3C2", # Darker error (for text)
+                color_error_50_dark="#4D001A",
+                color_error_200_dark="#990026",
+                color_error_500_dark="#CC0033",
+                color_error_600_dark="#FFB3C2",
 
 
                 # --- Light Mode Colors (Legal Lumen) ---
-                # Primary Colors (Standard Blue scale)
                 primary_50_light="#E3F2FD",
                 primary_100_light="#BBDEFB",
                 primary_200_light="#90CAF9",
                 primary_300_light="#64B5F6",
                 primary_400_light="#42A5F5",
-                primary_500_light="#2196F3", # Main blue
-                primary_600_light="#1E88E5", # Hover blue
+                primary_500_light="#2196F3",
+                primary_600_light="#1E88E5",
                 primary_700_light="#1976D2",
                 primary_800_light="#1565C0",
                 primary_900_light="#0D47A1",
@@ -334,6 +339,10 @@ Answer:"""
                 link_text_color_light="#007bff",
                 link_text_color_hover_light="#0056b3",
 
+                button_primary_background_light="#007bff",
+                button_primary_background_hover_light="#0056b3",
+                button_primary_text_color_light="#FFFFFF",
+
                 color_error_50_light="#F8D7DA",
                 color_error_200_light="#F5C6CB",
                 color_error_500_light="#DC3545",
@@ -344,11 +353,14 @@ Answer:"""
                 radius_sm="8px",
                 radius_md="12px",
                 radius_lg="24px",
-                spacing_md="2.5rem", # Matches gaps between major sections
-                spacing_lg="3.5rem", # Matches padding for header/main dashboard
-                spacing_xl="4.5rem", # Matches header padding top/bottom
+                spacing_md="2.5rem",
+                spacing_lg="3.5rem",
+                spacing_xl="4.5rem",
                 **kwargs,
             )
+            # Assign heading_font directly to self after super().__init__ as it's not a direct base constructor argument
+            self.heading_font = [themes.GoogleFont("Playfair Display"), "serif"]
+
 
     def gradio_interface(self):
         def query_interface_wrapper(api_key: str, query: str, state: str) -> str:
@@ -356,9 +368,9 @@ Answer:"""
             if not api_key or not api_key.strip() or not api_key.startswith("sk-"):
                 return "<div class='error-message'><span class='error-icon'>⚠️</span>Please provide a valid OpenAI API key (starting with 'sk-'). <a href='https://platform.openai.com/api-keys' target='_blank'>Get one free from OpenAI</a>.</div>"
             if not state or state == "Select a state..." or "Error" in state:
-                return "<div class='error-message'><span class='error-icon'>⚠️</span>Please select a valid state from the dropdown.</div>"
+                return "<div class='error-message'>Error: Please select a valid state.</div>" # Simplified message
             if not query or not query.strip():
-                return "<div class='error-message'><span class='error-icon'>⚠️</span>Please enter your question in the text box.</div>"
+                return "<div class='error-message'>Error: Please enter your question.</div>" # Simplified message
 
             # Call the core processing logic
             result = self.process_query(query=query, state=state, openai_api_key=api_key)
@@ -412,7 +424,7 @@ Answer:"""
         /* General Gradio container layout and centering */
         body { margin: 0; padding: 0; } /* Reset default body margin */
         .gradio-container {
-            font-family: 'Inter', sans-serif !important; /* Ensure Inter is main font */
+            font-family: var(--font-text) !important; /* Use theme's text font variable */
             min-height: 100vh;
             display: flex;
             justify-content: center; /* Center content horizontally */
@@ -452,7 +464,7 @@ Answer:"""
             animation: fadeInSlideDown 1.5s ease-out forwards; animation-delay: 0.3s;
         }
         .app-header-title {
-            font-family: 'Playfair Display', serif !important; /* Override with specific heading font */
+            font-family: var(--font-heading) !important; /* Use theme's heading font variable */
             font-size: 4.2rem; font-weight: 900;
             margin: 0 0 0.8rem 0; letter-spacing: -0.07em;
             color: var(--text-color-header); /* Use theme text color for headings */
@@ -461,7 +473,7 @@ Answer:"""
             animation: fadeInSlideDown 1.5s ease-out forwards; animation-delay: 0.6s;
         }
         .app-header-tagline {
-            font-family: 'Inter', sans-serif !important;
+            font-family: var(--font-text) !important;
             font-size: 1.6rem; font-weight: 300;
             color: var(--text-color-subdued); /* Use theme subdued text color */
             opacity: 0.9; max-width: 900px;
@@ -492,7 +504,7 @@ Answer:"""
 
         /* Section titles within cards */
         .card-section-title {
-            font-family: 'Playfair Display', serif !important;
+            font-family: var(--font-heading) !important; /* Use theme's heading font variable */
             font-size: 2.2rem !important;
             font-weight: 800 !important;
             color: var(--text-color-body) !important; /* Use theme body text color */
@@ -504,7 +516,7 @@ Answer:"""
 
         /* General text styling within cards */
         .dashboard-card-section p {
-            font-family: 'Inter', sans-serif !important;
+            font-family: var(--font-text) !important;
             font-size: 1.1rem;
             line-height: 1.6;
             color: var(--text-color-body);
@@ -597,7 +609,7 @@ Answer:"""
             color: var(--primary-500); /* Use theme primary color */
         }
         .response-title {
-            font-family: 'Playfair Display', serif !important;
+            font-family: var(--font-heading) !important;
             font-size: 1.8rem !important;
             font-weight: 700 !important;
             color: var(--text-color-body) !important; /* Ensure heading is legible */
@@ -610,7 +622,7 @@ Answer:"""
             margin: 1rem 0 1.5rem 0;
         }
         .output-content-wrapper {
-            font-family: 'Inter', sans-serif !important;
+            font-family: var(--font-text) !important;
             line-height: 1.7;
             font-size: 1.05rem;
             color: var(--text-color-body);
@@ -705,7 +717,7 @@ Answer:"""
             width: 100%; /* Ensure content takes full width */
         }
         .app-footer p {
-            font-family: 'Inter', sans-serif !important;
+            font-family: var(--font-text) !important;
             font-size: 0.95rem !important;
             color: var(--text-color-subdued) !important;
             margin-bottom: 0.5rem;
@@ -725,7 +737,8 @@ Answer:"""
         .gr-messages-row, .gr-share-btn, .gr-api-btn, .gr-view-api, /* Common boilerplate elements */
         .gradio-container > footer, /* Default Gradio footer text that appears below blocks */
         .gradio-app .version-info, /* Gradio version info */
-        .gradio-app .dark\:text-gray-400 /* Target other default footer text */ {
+        .gradio-app .dark\:text-gray-400, /* Target other default footer text classes */
+        .gradio-app .absolute.bottom-0.right-0.px-2.py-1.text-gray-400.text-xs /* another common footer class */ {
             display: none !important;
             visibility: hidden !important;
             width: 0 !important;