import { freightBrand } from "@/theme/freight-brand";

export const overviewChartColors = {
  primary: freightBrand.primary,
  primaryLight: freightBrand.primaryLight,
  primaryDark: freightBrand.primaryDark,
  muted: freightBrand.mutedBg,
  etb: freightBrand.primary,
  usd: "#0369a1",
  /** Vibrant, well-separated categorical palette for charts. */
  pipeline: [
    "#1B9E7A", // brand green
    "#0ea5e9", // sky
    "#8b5cf6", // violet
    "#f59e0b", // amber
    "#14b8a6", // teal
    "#ec4899", // pink
    "#f43f5e", // rose
    "#6366f1", // indigo
    "#eab308", // yellow
    "#06b6d4", // cyan
  ],
} as const;

/** Two-stop gradients keyed by KPI accent — used for radial gauges + accent bars. */
export const overviewAccentGradients = {
  default: ["#94a3b8", "#475569"],
  emerald: ["#34D9AE", "#1B9E7A"],
  amber: ["#fbbf24", "#d97706"],
  rose: ["#fb7185", "#e11d48"],
  sky: ["#38bdf8", "#0284c7"],
  violet: ["#a78bfa", "#7c3aed"],
} as const;

export type OverviewAccent = keyof typeof overviewAccentGradients;

export const overviewCardStyle = {
  background: "white",
  border: "1px solid var(--mantine-color-gray-2)",
} as const;