style: refactor chart color variables across multiple components to use CSS variables for improved theming consistency

app/sites/[id]/funnels/[funnelId]/page.tsx

@@ -19,20 +19,20 @@ import {
 import { getDateRange } from '@ciphera-net/ui'
 
 const CHART_COLORS_LIGHT = {
-  border: '#E5E5E5',
-  axis: '#A3A3A3',
+  border: 'var(--color-neutral-200)',
+  axis: 'var(--color-neutral-400)',
   tooltipBg: '#ffffff',
-  tooltipBorder: '#E5E5E5',
+  tooltipBorder: 'var(--color-neutral-200)',
 }
 
 const CHART_COLORS_DARK = {
-  border: '#404040',
-  axis: '#737373',
-  tooltipBg: '#262626',
-  tooltipBorder: '#404040',
+  border: 'var(--color-neutral-700)',
+  axis: 'var(--color-neutral-500)',
+  tooltipBg: 'var(--color-neutral-800)',
+  tooltipBorder: 'var(--color-neutral-700)',
 }
 
-const BRAND_ORANGE = '#FD5E0F'
+const BRAND_ORANGE = 'var(--color-brand-orange)'
 
 export default function FunnelReportPage() {
   const params = useParams()

app/sites/[id]/uptime/page.tsx

@@ -34,20 +34,20 @@ import type { TooltipProps } from 'recharts'
 
 // * Chart theme colors (consistent with main Pulse chart)
 const CHART_COLORS_LIGHT = {
-  border: '#E5E5E5',
-  text: '#171717',
-  textMuted: '#737373',
-  axis: '#A3A3A3',
+  border: 'var(--color-neutral-200)',
+  text: 'var(--color-neutral-900)',
+  textMuted: 'var(--color-neutral-500)',
+  axis: 'var(--color-neutral-400)',
   tooltipBg: '#ffffff',
-  tooltipBorder: '#E5E5E5',
+  tooltipBorder: 'var(--color-neutral-200)',
 }
 const CHART_COLORS_DARK = {
-  border: '#404040',
-  text: '#fafafa',
-  textMuted: '#a3a3a3',
-  axis: '#737373',
-  tooltipBg: '#262626',
-  tooltipBorder: '#404040',
+  border: 'var(--color-neutral-700)',
+  text: 'var(--color-neutral-50)',
+  textMuted: 'var(--color-neutral-400)',
+  axis: 'var(--color-neutral-500)',
+  tooltipBg: 'var(--color-neutral-800)',
+  tooltipBorder: 'var(--color-neutral-700)',
 }
 
 // * Status color mapping

components/dashboard/Chart.tsx

@@ -18,27 +18,27 @@ import { ArrowUpRightIcon, ArrowDownRightIcon, BarChartIcon, Select, Button, Dow
 import { Checkbox } from '@ciphera-net/ui'
 
 const COLORS = {
-  brand: '#FD5E0F',
-  success: '#10B981', // Emerald-500
-  danger: '#EF4444',  // Red-500
+  brand: 'var(--color-brand-orange)',
+  success: 'var(--color-success)',
+  danger: 'var(--color-error)',
 }
 
 const CHART_COLORS_LIGHT = {
-  border: '#E5E5E5',
-  text: '#171717',
-  textMuted: '#737373',
-  axis: '#A3A3A3',
+  border: 'var(--color-neutral-200)',
+  text: 'var(--color-neutral-900)',
+  textMuted: 'var(--color-neutral-500)',
+  axis: 'var(--color-neutral-400)',
   tooltipBg: '#ffffff',
-  tooltipBorder: '#E5E5E5',
+  tooltipBorder: 'var(--color-neutral-200)',
 }
 
 const CHART_COLORS_DARK = {
-  border: '#404040',
-  text: '#fafafa',
-  textMuted: '#a3a3a3',
-  axis: '#737373',
-  tooltipBg: '#262626',
-  tooltipBorder: '#404040',
+  border: 'var(--color-neutral-700)',
+  text: 'var(--color-neutral-50)',
+  textMuted: 'var(--color-neutral-400)',
+  axis: 'var(--color-neutral-500)',
+  tooltipBg: 'var(--color-neutral-800)',
+  tooltipBorder: 'var(--color-neutral-700)',
 }
 
 export interface DailyStat {
@@ -282,7 +282,7 @@ export default function Chart({
       const { toPng } = await import('html-to-image')
       const dataUrl = await toPng(chartContainerRef.current, {
         cacheBust: true,
-        backgroundColor: resolvedTheme === 'dark' ? '#171717' : '#ffffff',
+        backgroundColor: resolvedTheme === 'dark' ? 'var(--color-neutral-900)' : '#ffffff',
       })
       const link = document.createElement('a')
       link.download = `chart-${dateRange.start}-${dateRange.end}.png`
@@ -694,7 +694,7 @@ export default function Chart({
                   activeDot={{
                     r: 5,
                     strokeWidth: 2,
-                    fill: resolvedTheme === 'dark' ? '#262626' : '#ffffff',
+                    fill: resolvedTheme === 'dark' ? 'var(--color-neutral-800)' : '#ffffff',
                     stroke: activeMetric.color,
                   }}
                   isAnimationActive

components/dashboard/WorldMap.tsx

@@ -35,9 +35,9 @@ const WorldMap = ({ data }: WorldMapProps) => {
 
   // Plausible-like colors based on provided SVG snippet
   const isDark = resolvedTheme === 'dark'
-  const defaultFill = isDark ? "#262626" : "#f5f5f5" // neutral-800 / neutral-100
-  const defaultStroke = isDark ? "#171717" : "#ffffff" // neutral-900 / white
-  const brandOrange = "#FD5E0F"
+  const defaultFill = isDark ? "var(--color-neutral-800)" : "var(--color-neutral-100)"
+  const defaultStroke = isDark ? "var(--color-neutral-900)" : "#ffffff"
+  const brandOrange = "var(--color-brand-orange)"
   
   return (
     <div className="relative w-full">