feat: Complete mobile UX/UI overhaul

Major improvements:
- New CSS design system with custom properties (tokens)
- Consistent spacing scale (4px base)
- Touch-friendly sizing (44px min targets)
- Improved Carousel with better touch handling and rubber-band effect
- Enhanced FilterControls (auto-collapse on mobile)
- Better stat card styling with change indicators
- Refined chart cards and toggle switches
- Smoother transitions and micro-interactions
- Better RTL support
- Print styles
- Responsive breakpoints for tablet (1024px), mobile (768px), and small mobile (375px)
- Cleaner typography hierarchy
- Subtle shadows and depth

Components updated:
- App.css: Complete rewrite with design tokens
- Carousel.jsx: Better touch gestures with velocity detection
- StatCard.jsx: Improved change indicator styling
- FilterControls.jsx: Auto-collapse on mobile
- EmptyState.jsx: Better accessibility
- ChartExport.js: Cleaned up unused imports

src/config/chartConfig.js

@@ -41,7 +41,7 @@ export const chartColors = {
 export const createDataLabelConfig = (showDataLabels) => ({
   display: showDataLabels,
   color: '#1e293b',
-  font: { size: 10, weight: 600 },
+  font: { size: 11, weight: 600 },
   anchor: 'end',
   align: 'end',
   offset: 4,
@@ -74,19 +74,19 @@ export const createBaseOptions = (showDataLabels) => ({
       backgroundColor: '#1e293b', 
       padding: 12, 
       cornerRadius: 8, 
-      titleFont: { size: 12 }, 
-      bodyFont: { size: 11 } 
+      titleFont: { size: 14 }, 
+      bodyFont: { size: 13 } 
     },
     datalabels: createDataLabelConfig(showDataLabels)
   },
   scales: {
     x: { 
       grid: { display: false }, 
-      ticks: { font: { size: 10 }, color: '#94a3b8' } 
+      ticks: { font: { size: 12 }, color: '#94a3b8' } 
     },
     y: { 
       grid: { color: chartColors.grid }, 
-      ticks: { font: { size: 10 }, color: '#94a3b8' }, 
+      ticks: { font: { size: 12 }, color: '#94a3b8' }, 
       border: { display: false } 
     }
   }