updated UI v5

app.py

@@ -254,6 +254,19 @@ Answer:"""
                 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_100_dark="#FFF9C4",
+                primary_200_dark="#FFF59D",
+                primary_300_dark="#FFF176",
+                primary_400_dark="#FFEE58",
+                primary_500_dark="#FFC107", # Main accent color
+                primary_600_dark="#E0A800", # Hover accent color
+                primary_700_dark="#B88A00",
+                primary_800_dark="#8D6C00",
+                primary_900_dark="#614B00",
+                primary_950_dark="#403200", # Darkest amber/brown
+
                 # Backgrounds
                 background_page_dark="#0F0F1A", # Overall app background
                 block_background_fill_dark="#1A1A2B", # Header and main footer background
@@ -266,32 +279,20 @@ Answer:"""
                 text_color_subdued_dark="#A0A0B0", # Secondary text, placeholders
                 text_color_header_dark="#EAEAF0", # Heading text (matches body for consistency)
 
-                # Accent/Primary Colors (Goldenrod/Amber)
-                primary_hue_dark=themes.Color("#FFC107", "#E0A800"), # Main accent color
-                primary_50_dark="#403200", # Lightest primary tint (for subtle hovers)
-
                 # 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)
 
-                # Shadows
-                shadow_lg_dark="0 1.2rem 3.5rem rgba(0,0,0,0.6)", # Large shadow for main containers
-                shadow_md_dark="0 0.8rem 2.5rem rgba(0,0,0,0.4)", # Medium shadow for cards
-                shadow_sm_dark="0 6px 20px rgba(0,0,0,0.35)", # Small shadow for buttons
+                # 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",
+
 
                 # Links
                 link_text_color_dark="#FFC107",
                 link_text_color_hover_dark="#E0A800",
 
-                # Buttons (custom variant backgrounds will be handled by CSS, but theme sets default)
-                button_primary_background_dark="#FFC107",
-                button_primary_background_hover_dark="#E0A800",
-                button_primary_text_color_dark="#1A1A2B", # Dark text on primary button
-                button_secondary_background_dark="transparent", # Custom in CSS
-                button_secondary_background_hover_dark="#403200", # Custom in CSS
-                button_secondary_text_color_dark="#A0A0B0", # Custom in CSS
-                button_secondary_border_color_dark="#3F3F5A", # Custom in CSS
-
                 # Error Colors
                 color_error_50_dark="#4D001A", # Lightest error tint (for background)
                 color_error_200_dark="#990026", # Medium error (for border)
@@ -300,6 +301,19 @@ Answer:"""
 
 
                 # --- 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_700_light="#1976D2",
+                primary_800_light="#1565C0",
+                primary_900_light="#0D47A1",
+                primary_950_light="#082F6A",
+
                 background_page_light="#F0F2F5",
                 block_background_fill_light="#E0E4EB",
                 background_fill_primary_light="#FFFFFF",
@@ -310,33 +324,22 @@ Answer:"""
                 text_color_subdued_light="#6C757D",
                 text_color_header_light="#212529",
 
-                primary_hue_light=themes.Color("blue", "#007bff", "#0056b3"),
-                primary_50_light="#E0F0FF",
-
                 border_color_primary_light="#DDE2E8",
                 border_color_secondary_light="#CCD1D7",
 
-                shadow_lg_light="0 0.8rem 2.5rem rgba(0,0,0,0.15)",
-                shadow_md_light="0 0.6rem 2rem rgba(0,0,0,0.1)",
-                shadow_sm_light="0 3px 10px rgba(0,0,0,0.08)",
+                shadow_lg_light="F0F2F5",
+                shadow_md_light="E0E4EB",
+                shadow_sm_light="FFFFFF",
 
                 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",
-                button_secondary_background_light="transparent",
-                button_secondary_background_hover_light="#E0F0FF",
-                button_secondary_text_color_light="#6C757D",
-                button_secondary_border_color_light="#DDE2E8",
-
                 color_error_50_light="#F8D7DA",
                 color_error_200_light="#F5C6CB",
                 color_error_500_light="#DC3545",
                 color_error_600_light="#721C24",
 
-                # Radii and Spacing (matching custom CSS)
+                # Radii and Spacing (matching custom CSS, and setting theme defaults)
                 radius_xs="4px",
                 radius_sm="8px",
                 radius_md="12px",
@@ -434,7 +437,7 @@ Answer:"""
             padding: var(--spacing-xl) var(--spacing-lg); /* Spacious padding */
             text-align: center;
             border-radius: var(--radius-lg); /* Use theme radius */
-            box-shadow: var(--shadow-lg); /* Use theme shadow */
+            box-shadow: 0 1.2rem 3.5rem rgba(var(--shadow-lg),0.6); /* Use theme shadow color with rgba */
             position: relative;
             overflow: hidden;
             z-index: 10;
@@ -473,7 +476,7 @@ Answer:"""
             gap: 2rem; /* Spacing between cards */
             background-color: var(--background-fill-primary); /* Use theme's main background */
             border-radius: var(--radius-lg);
-            box-shadow: var(--shadow-lg);
+            box-shadow: 0 0.8rem 2.5rem rgba(var(--shadow-lg),0.4); /* Use theme shadow color with rgba */
             padding: var(--spacing-md); /* Inner padding for the whole dashboard content */
             border: 1px solid var(--border-color-primary);
         }
@@ -483,7 +486,7 @@ Answer:"""
             background-color: var(--background-fill-secondary); /* A slightly darker/lighter background for cards */
             border-radius: var(--radius-md);
             padding: 2rem; /* Padding inside each card */
-            box-shadow: var(--shadow-md); /* Subtle shadow for cards */
+            box-shadow: 0 0.6rem 2rem rgba(var(--shadow-md),0.2); /* Subtle shadow for cards */
             border: 1px solid var(--border-color-primary);
         }
 
@@ -558,13 +561,13 @@ Answer:"""
             font-weight: 600 !important;
             padding: 0.8rem 2rem !important; /* Make buttons slightly less tall */
             min-height: 48px; /* Ensure minimum height */
-            box-shadow: var(--shadow-sm); /* Use theme shadow */
+            box-shadow: 0 6px 20px rgba(var(--shadow-sm),0.35); /* Use theme shadow color with rgba */
             transition: all 0.2s ease-in-out;
             transform: translateY(0);
         }
         .gradio-button:hover:not(:disabled) {
             transform: translateY(-3px); /* Subtle lift on hover */
-            box-shadow: var(--shadow-md);
+            box-shadow: 0 0.8rem 2.5rem rgba(var(--shadow-md),0.4);
         }
         .gradio-button:active:not(:disabled) {
             transform: translateY(0);
@@ -690,7 +693,7 @@ Answer:"""
             border-top: 1px solid var(--border-color-primary) !important;
             padding: 1.5rem 2.5rem; /* Consistent padding */
             border-radius: var(--radius-lg);
-            box-shadow: var(--shadow-lg);
+            box-shadow: 0 1.2rem 3.5rem rgba(var(--shadow-lg),0.6); /* Use theme shadow color with rgba */
             width: 100%;
             max-width: 1120px;
             margin: var(--spacing-md) auto 0 auto; /* Spacing from main dashboard */