Refactor charts to use centralized color palette configuration

- Introduced `chart-colors.ts` utility to manage reusable color configurations across all chart components (`UserGrowthChart`, `OrganizationDistributionChart`, `SessionActivityChart`, `UserStatusChart`).
- Updated chart components to replace inline color definitions with `CHART_PALETTES` for improved consistency and maintainability.
- Enhanced tooltip, legend, and axis styles to align with updated project theming.

frontend/src/lib/chart-colors.ts

@@ -0,0 +1,78 @@
+/**
+ * Chart Color Configuration
+ * Provides vibrant, accessible colors for data visualization
+ * Converts design system colors to recharts-compatible formats
+ */
+
+export const CHART_COLORS = {
+  // Primary blue palette - vibrant and professional
+  primary: '#3b82f6',     // Blue 500
+  primaryLight: '#60a5fa', // Blue 400
+  primaryDark: '#2563eb',  // Blue 600
+
+  // Secondary accent colors - complementary palette
+  accent1: '#8b5cf6',     // Violet 500
+  accent2: '#ec4899',     // Pink 500
+  accent3: '#f59e0b',     // Amber 500
+  accent4: '#10b981',     // Emerald 500
+  accent5: '#06b6d4',     // Cyan 500
+
+  // Status colors
+  success: '#10b981',     // Emerald 500
+  warning: '#f59e0b',     // Amber 500
+  error: '#ef4444',       // Red 500
+  info: '#3b82f6',        // Blue 500
+
+  // Neutral colors for supporting elements
+  muted: '#94a3b8',       // Slate 400
+  mutedDark: '#64748b',   // Slate 500
+};
+
+// Chart-specific color palettes for different chart types
+export const CHART_PALETTES = {
+  // Line chart palette - 2 contrasting colors
+  line: [CHART_COLORS.primary, CHART_COLORS.accent1],
+
+  // Bar chart palette - 2 complementary colors
+  bar: [CHART_COLORS.primary, CHART_COLORS.accent2],
+
+  // Area chart palette - 2 harmonious colors with gradients
+  area: [CHART_COLORS.primary, CHART_COLORS.accent5],
+
+  // Pie chart palette - 4-5 distinct colors
+  pie: [
+    CHART_COLORS.primary,
+    CHART_COLORS.accent1,
+    CHART_COLORS.accent3,
+    CHART_COLORS.accent4,
+  ],
+
+  // Multi-series palette - for charts with many data series
+  multi: [
+    CHART_COLORS.primary,
+    CHART_COLORS.accent1,
+    CHART_COLORS.accent2,
+    CHART_COLORS.accent3,
+    CHART_COLORS.accent4,
+    CHART_COLORS.accent5,
+  ],
+};
+
+// Gradient definitions for area charts
+export const CHART_GRADIENTS = {
+  primary: {
+    start: CHART_COLORS.primary,
+    end: `${CHART_COLORS.primary}20`, // 20% opacity
+  },
+  accent: {
+    start: CHART_COLORS.accent1,
+    end: `${CHART_COLORS.accent1}20`, // 20% opacity
+  },
+};
+
+// Helper function to get color with opacity
+export function withOpacity(color: string, opacity: number): string {
+  // Convert opacity (0-1) to hex (00-FF)
+  const hex = Math.round(opacity * 255).toString(16).padStart(2, '0');
+  return `${color}${hex}`;
+}