import { createTheme, type MantineColorsTuple } from "@mantine/core";

/** EDR Freight primary brand green */
export const FREIGHT_BRAND = "#15803d";
export const FREIGHT_BRAND_DARK = "#166534";
export const FREIGHT_BRAND_LIGHT = "#22c55e";

export const freightBrand = {
  primary: FREIGHT_BRAND,
  primaryDark: FREIGHT_BRAND_DARK,
  primaryLight: FREIGHT_BRAND_LIGHT,
  gradient: `linear-gradient(135deg, ${FREIGHT_BRAND} 0%, ${FREIGHT_BRAND_DARK} 100%)`,
  shadow: "0 4px 12px rgba(21, 128, 61, 0.28)",
  shadowSm: "0 2px 6px rgba(21, 128, 61, 0.22)",
  ring: "rgba(21, 128, 61, 0.2)",
  mutedBg: "#f0fdf4",
  mutedBorder: "#bbf7d0",
} as const;

/** Mantine green scale with #15803d at index 6 (filled buttons, nav active). */
const freightGreen: MantineColorsTuple = [
  "#f0fdf4",
  "#dcfce7",
  "#bbf7d0",
  "#86efac",
  "#4ade80",
  "#22c55e",
  FREIGHT_BRAND,
  FREIGHT_BRAND_DARK,
  "#14532d",
  "#052e16",
];

export const freightMantineTheme = createTheme({
  primaryColor: "green",
  colors: {
    green: freightGreen,
  },
  fontFamily: "'Outfit', var(--font-sans)",
});
