const colors = require('tailwindcss/colors')

module.exports = {
  purge: {
    content: [
      './src/**/*.jsx',
    ],
    options: {
      safelist: ['grecaptcha-badge'],
    },
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        primary: {
          100: "#e2e2f4",
          200: "#c4c5e8",
          300: "#a7a9dd",
          400: "#898cd1",
          500: "#6c6fc6",
          600: "#4f52ba",
          700: "#3f42a2",
          800: "#333684",
          900: "#282b67",
        },
        secondary: {
          100: "#eceaac",
          200: "#e5e28b",
          300: "#ddd969",
          400: "#d5d148",
          500: "#c8c22d",
          600: "#a6a226",
          700: "#85821e",
          800: "#646117",
          900: "#43410f",
        },
        gray: colors.blueGray,
      },
      fontFamily: {
        gilroy: ['"Gilroy"'],
      },
      scale: {
        '0': '0',
        '50': '.5',
        '75': '.75',
        '90': '.9',
        '95': '.95',
        '98': '.98',
        '100': '1',
        '102': '1.02',
        '105': '1.05',
        '110': '1.1',
        '125': '1.25',
        '150': '1.5',
      },
      maxHeight: {
        'screen-5': '5vh',
        'screen-10': '10vh',
        'screen-15': '15vh',
        'screen-20': '20vh',
        'screen-25': '25vh',
        'screen-33': '33vh',
        'screen-50': '50vh',
        'screen-66': '66vh',
        'screen-75': '75vh',
        'screen-80': '80vh',
        'screen-85': '85vh',
        'screen-90': '90vh',
        'screen-95': '95vh',
      },
      minHeight: {
        'screen-5': '5vh',
        'screen-10': '10vh',
        'screen-15': '15vh',
        'screen-20': '20vh',
        'screen-25': '25vh',
        'screen-33': '33vh',
        'screen-50': '50vh',
        'screen-66': '66vh',
        'screen-75': '75vh',
        'screen-80': '80vh',
      },
    },
    filter: { // defaults to {}
      'none': 'none',
      'grayscale': 'grayscale(1)',
      'invert': 'invert(1)',
      'sepia': 'sepia(1)',
    },
    backdropFilter: { // defaults to {}
      'none': 'none',
      'blur': 'blur(20px)',
    },
  },
  variants: {
    extend: {
      backgroundColor: ['active', 'disabled'],
      boxShadow: ['active', 'disabled'],
      fontWeight: ['hover', 'focus'],
      opacity: ['disabled'],
      filter: ['responsive'], // defaults to ['responsive']
      backdropFilter: ['responsive'], // defaults to ['responsive']
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('tailwindcss-filters'),
  ],
}