import { extendTheme } from '@chakra-ui/react';

const overrides = {
  colors: {
    primary: {
      50: "#F1F8ED",
      100: "#D9EACC",
      200: "#C0DDAC",
      300: "#A8D08B",
      400: "#8FC26B",
      500: "#77B54A",
      600: "#5F913B",
      700: "#476D2C",
      800: "#2F481E",
      900: "#18240F"
    },
    secondary: {
      50: "#E7F7FD",
      100: "#BCEAFB",
      200: "#91DCF8",
      300: "#66CEF5",
      400: "#3BC1F2",
      500: "#0FB3F0",
      600: "#0C8FC0",
      700: "#096B90",
      800: "#064860",
      900: "#032430"
    }
  },
  fonts: {
    heading: `'Open Sans', sans-serif`,
  },
  styles: {
    global: {
      body: {
        bg: 'gray.100'
      }
    },
  },
  components: {
    Input: {
      variants: {
        filled: {
          field: {
            borderRadius: 12,
            bgColor: 'primary.50',
            color: 'primary.600',
            _hover: {
              borderColor: 'primary.100',
              bgColor: 'primary.50',
            },
            _focus: {
              borderColor: 'primary.200',
            }
          }
        }
      }
    },
    Select: {
      variants: {
        filled: {
          field: {
            borderRadius: 12,
            bgColor: 'primary.50',
            color: 'primary.600',
            _hover: {
              borderColor: 'primary.100',
              bgColor: 'primary.50',
            },
            _focus: {
              borderColor: 'primary.200',
            }
          }
        }
      }
    }
  }
};

export default extendTheme(overrides);