fix: theme consistency — chart colours, axis readability, warning system

- Recharts axes: add fill to tick objects so labels are visible on dark themes
- Recharts axes: wrap stroke/gridcolor in hsl() so var() resolves to valid colour
- Chart primary lines/gradients: replace hardcoded #6366f1 with hsl(var(--primary))
  so charts adopt each theme's accent (gold on Vault, green on Terminal, etc.)
- Plotly charts: add cssVar() helper (reads getComputedStyle) to pass actual
  computed colour strings instead of unresolved var() references
- Budget radial gauge: use hsl(var(--destructive/success/warning)) for SVG colours
- Add --warning CSS variable to all 7 themes with per-theme appropriate values;
  wire into Tailwind config as themed colour
- Replace all text-yellow-500 / text-orange-500 / bg-yellow-500 with text-warning
  / bg-warning across Dashboard, Budget, Account, Predictions, Settings

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/pages/investments/AssetDetail.tsx

@@ -6,6 +6,7 @@ import { useUiStore } from "@/store/uiStore";
 import { cn } from "@/utils/cn";
 import { ArrowLeft, TrendingUp, TrendingDown } from "lucide-react";
 import Plot from "react-plotly.js";
+import { cssVar } from "@/utils/cssVar";
 
 export default function AssetDetail() {
   const { assetId } = useParams<{ assetId: string }>();
@@ -152,8 +153,8 @@ export default function AssetDetail() {
                 high: highs as number[],
                 low: lows as number[],
                 close: closes as number[],
-                increasing: { line: { color: "#22c55e" } },
-                decreasing: { line: { color: "#ef4444" } },
+                increasing: { line: { color: cssVar("--success") } },
+                decreasing: { line: { color: cssVar("--destructive") } },
                 name: holding?.symbol ?? "Price",
               },
               {
@@ -161,16 +162,16 @@ export default function AssetDetail() {
                 x: dates,
                 y: volumes as number[],
                 yaxis: "y2",
-                marker: { color: "rgba(99,102,241,0.3)" },
+                marker: { color: cssVar("--primary", 0.3) },
                 name: "Volume",
               },
             ]}
             layout={{
               paper_bgcolor: "transparent",
               plot_bgcolor: "transparent",
-              font: { color: "var(--muted-foreground)", size: 11 },
-              xaxis: { rangeslider: { visible: false }, gridcolor: "var(--border)", showgrid: true },
-              yaxis: { gridcolor: "var(--border)", showgrid: true, domain: [0.25, 1] },
+              font: { color: cssVar("--muted-foreground"), size: 11 },
+              xaxis: { rangeslider: { visible: false }, gridcolor: cssVar("--border"), showgrid: true },
+              yaxis: { gridcolor: cssVar("--border"), showgrid: true, domain: [0.25, 1] },
               yaxis2: { domain: [0, 0.2], showgrid: false },
               margin: { t: 10, r: 10, b: 40, l: 60 },
               showlegend: false,