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

const config = defineConfig({
  theme: {
    tokens: {
      colors: {
        brand: {
          50: { value: '#f4f8fb' },
          100: { value: '#e8f0f6' },
          200: { value: '#cfdeea' },
          300: { value: '#a9c3d7' },
          400: { value: '#7fa5c0' },
          500: { value: '#5f88a6' },
          600: { value: '#496f8a' },
          700: { value: '#3d5d74' },
          800: { value: '#354d60' },
          900: { value: '#2f4352' },
        },
        neutral: {
          50: { value: '#fafafa' },
          100: { value: '#f4f4f5' },
          200: { value: '#e4e4e7' },
          300: { value: '#d4d4d8' },
          400: { value: '#a1a1aa' },
          500: { value: '#71717a' },
          600: { value: '#52525b' },
          700: { value: '#3f3f46' },
          800: { value: '#27272a' },
          900: { value: '#18181b' },
        },
      },
      fonts: {
        heading: { value: '"Aptos", "Segoe UI Variable", "Segoe UI", sans-serif' },
        body: { value: '"Aptos", "Segoe UI Variable", "Segoe UI", sans-serif' },
      },
      radii: {
        xl: { value: '1rem' },
        '2xl': { value: '1.5rem' },
      },
    },
    semanticTokens: {
      colors: {
        page: { value: '#ffffff' },
        panel: { value: '#ffffff' },
        subtle: { value: '#f8fafc' },
        border: { value: '#e4e4e7' },
        heading: { value: '#18181b' },
        text: { value: '#52525b' },
        muted: { value: '#71717a' },
        accent: { value: '{colors.brand.700}' },
        accentSubtle: { value: '{colors.brand.50}' },
      },
    },
  },
  globalCss: {
    html: {
      bg: 'page',
    },
    body: {
      bg: 'page',
      color: 'text',
    },
    '*::selection': {
      bg: 'brand.200',
    },
  },
})

export const theme = createSystem(defaultConfig, config)
