import { createSystem, defaultConfig, SystemConfig } from "@chakra-ui/react";

const customConfig: SystemConfig = {
  theme: {
    breakpoints: {
      tablet: "768px",
      desktop: "1200px",
      wide: "1440px",
    },
    tokens: {
      fonts: {
        heading: { value: "var(--font-bricolage)" },
        body: { value: "var(--font-bricolage)" },
        mono: { value: "var(--font-bricolage)" },
      },
      colors: {
        primary: {
          50: { value: "#E6FFFA" },
          100: { value: "#B2F5EA" },
          200: { value: "#81E6D9" },
          300: { value: "#4FD1C5" },
          400: { value: "#38B2AC" },
          500: { value: "#319795" },
          600: { value: "#2C7A7B" },
          700: { value: "#285E61" },
          800: { value: "#234E52" },
          900: { value: "#1D4044" },
          950: { value: "#132E30" },
        },
      },
    },
    semanticTokens: {
      colors: {
        primary: {
          solid: {
            value: {
              _light: "{colors.primary.600}",
              _dark: "{colors.primary.600}",
            },
          },
          contrast: {
            value: {
              _light: "{colors.white}",
              _dark: "{colors.white}",
            },
          },
          fg: {
            value: {
              _light: "{colors.primary.700}",
              _dark: "{colors.primary.300}",
            },
          },
          muted: {
            value: {
              _light: "{colors.primary.200}",
              _dark: "{colors.primary.800}",
            },
          },
          subtle: {
            value: {
              _light: "{colors.primary.100}",
              _dark: "{colors.primary.900}",
            },
          },
          emphasize: {
            value: {
              _light: "{colors.primary.300}",
              _dark: "{colors.primary.700}",
            },
          },
          focusRing: {
            value: {
              _light: "{colors.primary.500}",
              _dark: "{colors.primary.500}",
            },
          },
        },
      },
    },
  },
  globalCss: {
    html: {
      colorPalette: "primary",
    },
  },
};

export const system = createSystem(defaultConfig, customConfig);
