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

export const overviewChartColors = {
  primary: "#F2A516",
  primaryLight: "#FBD171",
  primaryDark: "#D98A0B",
  muted: freightBrand.mutedBg,
  etb: "#F2A516",
  usd: "#0369a1",
  /** Vibrant, well-separated categorical palette for charts (gold-forward). */
  pipeline: [
    "#F2A516", // gold (brand accent)
    "#0ea5e9", // sky
    "#8b5cf6", // violet
    "#FB8C2E", // orange
    "#14b8a6", // teal
    "#ec4899", // pink
    "#f43f5e", // rose
    "#6366f1", // indigo
    "#eab308", // yellow
    "#06b6d4", // cyan
  ],
} as const;

/** Brand gold + complementary orange used as the primary KPI accents. */
export const ACCENT_GOLD = "#F2A516";
export const ACCENT_ORANGE = "#FB8C2E";

/** 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"],
  gold: ["#FBD171", ACCENT_GOLD],
  orange: ["#FDBA74", ACCENT_ORANGE],
} as const;

export type OverviewAccent = keyof typeof overviewAccentGradients;

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