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

const customConfig: SystemConfig = {
  preflight: false,
  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: '#fafafa' },
          100: { value: '#f5f5f5' },
          200: { value: '#e5e5e5' },
          300: { value: '#d4d4d4' },
          400: { value: '#a3a3a3' },
          500: { value: '#737373' },
          600: { value: '#525252' },
          700: { value: '#404040' },
          800: { value: '#262626' },
          900: { value: '#171717' },
          950: { value: '#0a0a0a' },
        },
      },
    },
    semanticTokens: {
      colors: {
        primary: {
          solid: {
            value: {
              _light: '{colors.primary.900}',
              _dark: '{colors.primary.100}',
            },
          },
          contrast: {
            value: {
              _light: '{colors.white}',
              _dark: '{colors.black}',
            },
          },
          fg: {
            value: {
              _light: '{colors.primary.900}',
              _dark: '{colors.primary.100}',
            },
          },
          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);
