style: improve light mode color scheme

Replace bright white backgrounds and green colors with softer blue/purple theme for light mode. Green colors now exclusive to dark mode for better visual distinction.

Changes:
- app.css: Soft purple gradient body background, updated CSS variables, indigo headings
- Dashboard.svelte: Blue/indigo/purple accents for hero section, icons, buttons, stats cards
- EnhancedVisualizations.svelte: Blue accents for all chart icons, buttons, and UI elements

Light mode now features softer backgrounds and blue/purple color palette, while dark mode retains green theme.

Author: ThomasJButler

src/app.css

@@ -37,15 +37,15 @@
     --secondary: hsl(var(--secondary-hsl) 50%);
     /* Define other semantic colors using HSL */
 
-    --bg-base: theme('colors.white');
-    --bg-alt: theme('colors.slate.100');
-    --bg-sidebar: theme('colors.white');
-    --bg-navbar: hsla(0, 0%, 100%, 0.7); /* Base navbar bg */
-    --text-base: theme('colors.slate.800');
-    --text-muted: theme('colors.slate.500');
-    --border-base: theme('colors.slate.200');
-    --border-sidebar: theme('colors.slate.200');
-    --border-navbar: theme('colors.slate.200');
+    --bg-base: #fefcff; /* Soft white with purple tint */
+    --bg-alt: #f5f3ff;  /* Light purple-gray */
+    --bg-sidebar: #faf8ff; /* Soft sidebar */
+    --bg-navbar: hsla(250, 60%, 98%, 0.7); /* Soft purple-tinted navbar */
+    --text-base: #3f3356; /* Softer purple-gray text instead of harsh black */
+    --text-muted: #6b5b95; /* Purple-gray muted */
+    --border-base: #e9d5ff; /* Soft purple borders */
+    --border-sidebar: #e9d5ff;
+    --border-navbar: #e9d5ff;
   }
 
   .dark {
@@ -62,12 +62,12 @@
 
   body {
     @apply font-sans antialiased text-slate-800 dark:text-slate-200;
-    background: #f8fafc;
+    background: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 50%, #ede9fe 100%);
     position: relative;
     min-height: 100vh;
     overflow-x: hidden;
   }
-  
+
   .dark body {
     background: #0f172a;
   }
@@ -89,7 +89,7 @@
   /* Add more base styles if needed: links, headings etc. */
   h1, h2, h3, h4, h5, h6 {
     @apply font-semibold;
-    @apply text-slate-800 dark:text-slate-200;
+    @apply text-indigo-900 dark:text-slate-200;
   }
 }
 

src/components/Dashboard.svelte

@@ -498,7 +498,7 @@
 
 <div class="space-y-8">
   <!-- Hero Section -->
-  <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-green-600 via-emerald-600 to-teal-600 p-8 text-white">
+  <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-blue-600 via-indigo-600 to-purple-600 dark:from-green-600 dark:via-emerald-600 dark:to-teal-600 p-8 text-white">
     <!-- Animated background -->
     <div class="absolute inset-0 overflow-hidden">
       <div class="absolute -top-10 -left-10 w-40 h-40 bg-white/10 rounded-full animate-float"></div>
@@ -510,13 +510,13 @@
       <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
         <div class="flex-1">
           <div class="flex items-center gap-3 mb-3">
-            <div class="w-3 h-3 bg-green-400 rounded-full live-pulse"></div>
-            <span class="text-green-200 text-sm font-semibold tracking-wide uppercase">2024-2025 SEASON</span>
+            <div class="w-3 h-3 bg-purple-300 dark:bg-green-400 rounded-full live-pulse"></div>
+            <span class="text-purple-100 dark:text-green-200 text-sm font-semibold tracking-wide uppercase">2024-2025 SEASON</span>
           </div>
           <h1 class="text-4xl md:text-5xl font-black mb-3">
             SQL-Ball Analytics
           </h1>
-          <p class="text-green-100 text-lg md:text-xl mb-6 max-w-2xl">
+          <p class="text-purple-100 dark:text-green-100 text-lg md:text-xl mb-6 max-w-2xl">
             RAG-powered European football analytics from the 2024-2025 season across 22 leagues, 11 countries, 7,681+ matches
           </p>
         </div>
@@ -527,7 +527,7 @@
   <!-- How We Analyse -->
   <div class="bg-white dark:bg-slate-900 rounded-xl p-6 shadow-lg">
     <h3 class="text-lg font-semibold text-slate-800 dark:text-slate-200 mb-4 flex items-center gap-2">
-      <Target class="w-5 h-5 text-green-500" />
+      <Target class="w-5 h-5 text-blue-600 dark:text-green-500" />
       How We Analyse
     </h3>
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
@@ -539,8 +539,8 @@
         <p class="text-xs text-slate-600 dark:text-slate-400">Natural language to SQL</p>
       </div>
       <div class="text-center p-4 bg-slate-50 dark:bg-slate-800/50 rounded-lg">
-        <div class="w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-lg mx-auto mb-3 flex items-center justify-center">
-          <TrendingUp class="w-5 h-5 text-green-600" />
+        <div class="w-10 h-10 bg-indigo-100 dark:bg-green-900/30 rounded-lg mx-auto mb-3 flex items-center justify-center">
+          <TrendingUp class="w-5 h-5 text-indigo-600 dark:text-green-600" />
         </div>
         <h4 class="font-semibold text-sm mb-1">Pattern Discovery</h4>
         <p class="text-xs text-slate-600 dark:text-slate-400">Automatic anomaly detection</p>
@@ -568,14 +568,14 @@
       <!-- Loading overlay for chart refresh -->
       {#if isRefreshingCharts}
         <div class="absolute inset-0 bg-white/50 dark:bg-slate-950/50 backdrop-blur-sm z-50 rounded-xl flex items-center justify-center transition-opacity duration-300">
-          <div class="flex items-center gap-3 bg-white dark:bg-slate-900 px-6 py-3 rounded-lg border border-slate-200 dark:border-green-500/20 shadow-lg">
-            <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-green-500"></div>
+          <div class="flex items-center gap-3 bg-white dark:bg-slate-900 px-6 py-3 rounded-lg border border-blue-200 dark:border-green-500/20 shadow-lg">
+            <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600 dark:border-green-500"></div>
             <span class="text-sm font-medium text-slate-700 dark:text-slate-300">Updating charts...</span>
           </div>
         </div>
       {/if}
 
-      <h2 class="text-2xl font-bold text-slate-800 dark:text-green-400 mb-6">
+      <h2 class="text-2xl font-bold text-indigo-900 dark:text-green-400 mb-6">
         European League Analytics
       </h2>
       <EnhancedVisualizations
@@ -602,8 +602,8 @@
     <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6">
       <div class="bg-white dark:bg-slate-900 rounded-xl p-3 sm:p-6 shadow-lg hover:shadow-xl transition-shadow">
         <div class="flex items-start justify-between mb-2 sm:mb-4">
-          <div class="bg-green-500/10 dark:bg-green-500/20 p-2 sm:p-3 rounded-lg">
-            <Target class="w-4 h-4 sm:w-6 sm:h-6 text-green-500 dark:text-green-400" />
+          <div class="bg-blue-500/10 dark:bg-green-500/20 p-2 sm:p-3 rounded-lg">
+            <Target class="w-4 h-4 sm:w-6 sm:h-6 text-blue-600 dark:text-green-500" />
           </div>
         </div>
         <div class="text-xs sm:text-sm font-medium text-slate-600 dark:text-slate-400 mb-1">
@@ -619,8 +619,8 @@
 
       <div class="bg-white dark:bg-slate-900 rounded-xl p-3 sm:p-6 shadow-lg hover:shadow-xl transition-shadow">
         <div class="flex items-start justify-between mb-2 sm:mb-4">
-          <div class="bg-emerald-500/10 dark:bg-emerald-500/20 p-2 sm:p-3 rounded-lg">
-            <TrendingUp class="w-4 h-4 sm:w-6 sm:h-6 text-emerald-600 dark:text-emerald-400" />
+          <div class="bg-indigo-500/10 dark:bg-emerald-500/20 p-2 sm:p-3 rounded-lg">
+            <TrendingUp class="w-4 h-4 sm:w-6 sm:h-6 text-indigo-600 dark:text-emerald-400" />
           </div>
         </div>
         <div class="text-xs sm:text-sm font-medium text-slate-600 dark:text-slate-400 mb-1">

src/components/EnhancedVisualizations.svelte

@@ -815,15 +815,15 @@
   {#if isLoading}
     <div class="absolute inset-0 bg-white/50 dark:bg-slate-950/50 backdrop-blur-sm z-50 rounded-xl flex items-center justify-center transition-opacity duration-300">
       <div class="flex items-center gap-3 bg-white dark:bg-slate-900 px-6 py-3 rounded-lg border border-slate-200 dark:border-green-500/20 shadow-lg">
-        <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-green-500"></div>
+        <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600 dark:border-green-500"></div>
         <span class="text-sm font-medium text-slate-700 dark:text-slate-300">Loading analytics...</span>
       </div>
     </div>
   {/if}
 
   <!-- Simplified Date Range Selector -->
   <div class="flex flex-wrap items-center gap-3 p-4 bg-slate-50 dark:bg-slate-900/50 rounded-xl border border-slate-200 dark:border-green-500/20">
-    <Calendar class="w-5 h-5 text-green-500" />
+    <Calendar class="w-5 h-5 text-blue-600 dark:text-green-500" />
     <span class="text-sm font-semibold text-slate-600 dark:text-slate-400">View Data:</span>
     <div class="flex flex-wrap gap-2">
       {#each dateRanges as range}
@@ -832,7 +832,7 @@
           disabled={isLoading}
           class="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-all {
             selectedDateRange === range.value
-              ? 'bg-gradient-to-r from-green-500 to-emerald-500 text-white shadow-lg'
+              ? 'bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-green-500 dark:to-emerald-500 text-white shadow-lg'
               : 'bg-slate-200 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-300 dark:hover:bg-slate-700'
           } {isLoading ? 'opacity-50 cursor-not-allowed' : ''}"
         >
@@ -847,12 +847,12 @@
   <div class="bg-white dark:bg-slate-900 rounded-xl p-4 sm:p-6 border border-slate-200 dark:border-green-500/20 transition-opacity duration-500 {isLoading ? 'opacity-50' : 'opacity-100'}">
     <div class="flex items-center justify-between mb-4">
       <div class="flex items-center gap-2">
-        <TrendingUp class="w-4 h-4 sm:w-5 sm:h-5 text-green-500" />
+        <TrendingUp class="w-4 h-4 sm:w-5 sm:h-5 text-blue-600 dark:text-green-500" />
         <h3 class="text-base sm:text-lg font-bold text-slate-900 dark:text-green-400 font-mono">Goal Trends</h3>
       </div>
       <button
         on:click={() => handleQueryClick('goals_trend', 'Goal Trends')}
-        class="flex items-center gap-1.5 px-3 py-1.5 bg-green-500 hover:bg-green-600 text-white text-xs sm:text-sm rounded-lg transition-colors shadow-sm"
+        class="flex items-center gap-1.5 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 dark:bg-green-500 dark:hover:bg-green-600 text-white text-xs sm:text-sm rounded-lg transition-colors shadow-sm"
         title="Generate SQL query for this chart"
       >
         <Sparkles class="w-3.5 h-3.5" />
@@ -870,12 +870,12 @@
     <div class="bg-white dark:bg-slate-900 rounded-xl p-4 sm:p-6 border border-slate-200 dark:border-green-500/20">
       <div class="flex items-center justify-between mb-4">
         <div class="flex items-center gap-2">
-          <BarChart3 class="w-4 h-4 sm:w-5 sm:h-5 text-green-500" />
+          <BarChart3 class="w-4 h-4 sm:w-5 sm:h-5 text-blue-600 dark:text-green-500" />
           <h3 class="text-base sm:text-lg font-bold text-slate-900 dark:text-green-400 font-mono">League Table</h3>
         </div>
         <button
           on:click={() => handleQueryClick('league_table', 'League Table')}
-          class="flex items-center gap-1.5 px-3 py-1.5 bg-green-500 hover:bg-green-600 text-white text-xs sm:text-sm rounded-lg transition-colors shadow-sm"
+          class="flex items-center gap-1.5 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 dark:bg-green-500 dark:hover:bg-green-600 text-white text-xs sm:text-sm rounded-lg transition-colors shadow-sm"
           title="Generate SQL query for this chart"
         >
           <Sparkles class="w-3.5 h-3.5" />
@@ -891,12 +891,12 @@
     <div class="bg-white dark:bg-slate-900 rounded-xl p-4 sm:p-6 border border-slate-200 dark:border-green-500/20">
       <div class="flex items-center justify-between mb-4">
         <div class="flex items-center gap-2">
-          <Activity class="w-4 h-4 sm:w-5 sm:h-5 text-green-500" />
+          <Activity class="w-4 h-4 sm:w-5 sm:h-5 text-blue-600 dark:text-green-500" />
           <h3 class="text-base sm:text-lg font-bold text-slate-900 dark:text-green-400 font-mono">Results Distribution</h3>
         </div>
         <button
           on:click={() => handleQueryClick('results_distribution', 'Results Distribution')}
-          class="flex items-center gap-1.5 px-3 py-1.5 bg-green-500 hover:bg-green-600 text-white text-xs sm:text-sm rounded-lg transition-colors shadow-sm"
+          class="flex items-center gap-1.5 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 dark:bg-green-500 dark:hover:bg-green-600 text-white text-xs sm:text-sm rounded-lg transition-colors shadow-sm"
           title="Generate SQL query for this chart"
         >
           <Sparkles class="w-3.5 h-3.5" />
@@ -912,12 +912,12 @@
     <div class="bg-white dark:bg-slate-900 rounded-xl p-4 sm:p-6 border border-slate-200 dark:border-green-500/20">
       <div class="flex items-center justify-between mb-4">
         <div class="flex items-center gap-2">
-          <BarChart3 class="w-4 h-4 sm:w-5 sm:h-5 text-green-500" />
+          <BarChart3 class="w-4 h-4 sm:w-5 sm:h-5 text-blue-600 dark:text-green-500" />
           <h3 class="text-base sm:text-lg font-bold text-slate-900 dark:text-green-400 font-mono">Goals per Match</h3>
         </div>
         <button
           on:click={() => handleQueryClick('goal_distribution', 'Goal Distribution')}
-          class="flex items-center gap-1.5 px-3 py-1.5 bg-green-500 hover:bg-green-600 text-white text-xs sm:text-sm rounded-lg transition-colors shadow-sm"
+          class="flex items-center gap-1.5 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 dark:bg-green-500 dark:hover:bg-green-600 text-white text-xs sm:text-sm rounded-lg transition-colors shadow-sm"
           title="Generate SQL query for this chart"
         >
           <Sparkles class="w-3.5 h-3.5" />
@@ -933,12 +933,12 @@
     <div class="bg-white dark:bg-slate-900 rounded-xl p-4 sm:p-6 border border-slate-200 dark:border-green-500/20">
       <div class="flex items-center justify-between mb-4">
         <div class="flex items-center gap-2">
-          <Activity class="w-4 h-4 sm:w-5 sm:h-5 text-green-500" />
+          <Activity class="w-4 h-4 sm:w-5 sm:h-5 text-blue-600 dark:text-green-500" />
           <h3 class="text-base sm:text-lg font-bold text-slate-900 dark:text-green-400 font-mono">Team Performance</h3>
         </div>
         <button
           on:click={() => handleQueryClick('team_performance', 'Team Performance')}
-          class="flex items-center gap-1.5 px-3 py-1.5 bg-green-500 hover:bg-green-600 text-white text-xs sm:text-sm rounded-lg transition-colors shadow-sm"
+          class="flex items-center gap-1.5 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 dark:bg-green-500 dark:hover:bg-green-600 text-white text-xs sm:text-sm rounded-lg transition-colors shadow-sm"
           title="Generate SQL query for this chart"
         >
           <Sparkles class="w-3.5 h-3.5" />