const colors = require('tailwindcss/colors');

module.exports = {
  mode: 'jit',
  purge: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        transparent: 'transparent',
        white: '#FFFFFF',
        black: '#000000',
        gray: {
          ...colors.trueGray,
          100: '#F2F2F2',
          200: '#CCCCCC',
          300: '#B3B3B3',
          400: '#808080',
          500: '#666666'
        },
        blue: {
          100: '#E9F5FF',
          200: '#D3EBFF',
          300: '#BCE2FF',
          400: '#219DFF'
        },
        red: {
          100: '#FFF6F5',
          200: '#FFC6C3',
          400: '#FF4136'
        },
        green: {
          100: '#E6F5F0',
          200: '#B3E2D1',
          400: '#009F65'
        },
        yellow: {
          100: '#FFF9E6',
          200: '#FFEEB3',
          300: '#FFDD66',
          400: '#FFC700'
        },
        orange: colors.orange
      },
      fontFamily: {
        sans: [
          '"Inter"',
          '"Inter UI"',
          '-apple-system',
          'BlinkMacSystemFont',
          '"San Francisco"',
          '"Helvetica Neue"',
          'Arial',
          'sans-serif'
        ],
        mono: ['"Source Code Pro"', '"Roboto mono"', '"Courier New"', 'monospace']
      },
      minWidth: (theme) => theme('spacing')
    }
  },
  variants: {
    extend: {
      opacity: ['hover-none']
    }
  },
  plugins: [require('@tailwindcss/aspect-ratio'), require('tailwindcss-touch')()]
};