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

const colors: Record<string, MantineColorsTuple> = {
  white: [
    "#ffffff",
    "#e7e7e7",
    "#cdcdcd",
    "#b2b2b2",
    "#9a9a9a",
    "#8b8b8b",
    "#848484",
    "#717171",
    "#656565",
    "#575757",
  ],
  dark: [
    "#f5f5f5",
    "#e7e7e7",
    "#cdcdcd",
    "#b2b2b2",
    "#9a9a9a",
    "#8b8b8b",
    "#848484",
    "#717171",
    "#656565",
    "#3b3b3b",
    "#000000",
    "#202020",
    "#3B3A3A"
  ],
  green: [
    "#edfcf1",
    "#daf8e1",
    "#aff0be",
    "#82e998",
    "#5fe379",
    "#4adf65",
    "#3ede5a",
    "#31c44a",
    "#27af40",
    "#14862e",
    "#a5865e",
  ],
  blue: [
    "#e5f6ff",
    "#d0e9ff",
    "#a2d0f9",
    "#70b6f4",
    "#48a0ef",
    "#3092ee",
    "#1f8bee",
    "#0e73cc",
    "#006abf",
    "#005ca9",
    "#9ea2ad",
    "#fafafa",
    "#f6f6f6",
    "#e0e0e2",
    "#435ea9",
    "#ABB1B8",
    "#F1F3F5",
    "#999999",
    "#C4C4C4"
  ],
  red: [
    "#ffeaec",
    "#fdd5d7",
    "#f3a8ad",
    "#ea7980",
    "#e3525a",
    "#df3941",
    "#de2c36",
    "#c51d27",
    "#b01522",
    "#9b071b",
  ],
  yellow: [
    "#fffce0",
    "#fff7cb",
    "#feee9a",
    "#fee464",
    "#fddc39",
    "#fdd71a",
    "#fdd403",
    "#e1bb00",
    "#c8a600",
    "#ac8f00",
  ],
  grey: [
    "#f9fafa",
    "#e9e9e9",
    "#d0d0d0",
    "#b6b6b6",
    "#9ea0a0",
    "#8e9393",
    "#848d8d",
    "#717a7a",
    "#626c6c",
    "#4f5f5f",
    "#1fc16b",
    "#D9F5D9",
    "#D3D3D3",
  ],
  pippin: [
    "#fef2f2",
    "#ffdede",
    "#ffc8c8",
    "#ffa2a2",
    "#fd6c6c",
    "#f53e3e",
    "#e32020",
    "#bf1616",
    "#9d1717",
    "#831a1a",
    "#470808",
  ],
};

const shadows = {
  md: "1px 1px 3px rgba(0, 0, 0, .25)",
  xl: "5px 5px 3px rgba(0, 0, 0, .25)",
};

const fontSizes = {
  xs: "0.5rem",
  sm: "0.75rem",
  md: "0.8rem",
  lg: "1.25rem",
  xl: "1.5rem",
};
const headings = {
  fontFamily: "Inter, sans-serif",
};
const radius = {
  xs: "0.15rem",
  sm: "0.25rem",
  md: "0.5rem",
  lg: "1rem",
  xl: "1.5rem",
};

export const theme = createTheme({
  focusRing: "never",
  colors,
  shadows,
  headings,
  radius,
  fontSizes,
  fontFamily: "Inter, sans-serif",
  primaryColor: "dark",
  primaryShade: {
    light: 9,
    dark: 9,
  },
});