// Tailwind preset
module.exports = {
  theme: {
    extend: {
      colors: {
        'fd-gray': {
          lighter: '#EAEAEA',
          light: '#444444',
          default: '#313131',
          mild: '#B3B3B3',
          dark: '#222222',
          darker: '#151515',
        },
        'fd-blue': {
          lighter: '#03bbff',
          light: '#168EDB',
          default: '#004289',
        },
        'fd-orange': {
          default: 'rgb(172, 110, 17)',
        },
        'fd-custom': {
          'light-blue': '#BADFFF',
          'dark-blue': '005BA9',
        },
        'fd-purple': {
          lighter: '#CDB7FA',
          darker: '#6A22FC',
          default: '#CDB7FA',
        },
        grey: {
          50: '#F1F5F9',
          100: '#CCCCCC',
          200: '#888888',
          300: '#535353',
          400: '#484848',
          500: '#444444',
          600: '#3F3F3F',
          700: '#393939',
          800: '#383838',
          900: '#262626',
        },
        blue: {
          400: '#1D9DFF',
          900: '#074289',
        },
        red: {
          400: '#F05252',
          500: '#CE5151',
          600: '#FB7373',
        },
        primary: {
          light: '#E8C3FF',
          dark: '#B174E5',
          darker: '#925FBE',
          DEFAULT: '#BB0BD1',
          hover: '#75499A',
        },
        purple: {
          50: '#F2DDFF',
          100: '#EDD0FF',
          200: '#E8C3FF',
          300: '#E3B7FF',
          400: '#D99FFD',
          500: '#C683FF',
          600: '#B174E5',
          700: '#A15FD8',
          800: '#925FBE',
          900: '#BB0BD1',
        },
        negative: {
          200: '#F9BABA',
          400: '#C54242',
        },
      },
      fontFamily: {
        'open-sans': ['Twemoji Country Flags', 'Poppins', 'Open Sans', 'sans-serif'],
        roboto: ['Twemoji Country Flags', 'Roboto', 'sans-serif'],
        poppins: ['Twemoji Country Flags', 'Poppins', 'sans-serif'],
      },
      fontSize: {
        xxs: '.55rem',
        xs: '.65rem',
        s: '.75rem',
      },
      cursor: {
        grab: 'grab',
      },
      outlineWidth: {
        xxs: '0.1px',
        xs: '0.3px',
        s: '0.5px',
      },
      typography: (theme) => ({
        sm: {
          css: {
            h1: {
              color: theme('colors.white'),
            },
            h2: {
              color: theme('colors.white'),
            },
            h3: {
              color: theme('colors.white'),
              'margin-top': '0px',
            },
            h4: {
              color: theme('colors.white'),
            },
            strong: {
              color: theme('colors.grey.100'),
            },
            a: {
              color: theme('colors.blue.200'),
            },
            blockquote: {
              color: theme('colors.grey.100'),
            },
            img: {
              'margin-top': '5px',
              'margin-bottom': '5px',
            },
          },
        },
      }),
      borderRadius: {
        DEFAULT: '4px',
      },
      boxShadow: {
        toolbar: '0px 3px 6px #00000029',
      },
      minHeight: {
        6: '1.5rem',
      },
      height: {
        4.5: '1.125rem',
      },
      divideWidth: {
        DEFAULT: '0.5px',
      },
      borderWidth: {
        DEFAULT: '0.5px',
        px: '1px',
      },
    },
  },
  plugins: [require('@tailwindcss/typography')],
};
