/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    fontFamily: {
      'titles': ['Poppins', 'serif'],
      'default': ['Inter', 'serif']
    },
    backgroundSize: {
      '30px': '30px'
    },
    screens: {
      'xxs': '350px',
      // => @media (min-width: 350px) { ... }

      'xs': '480px',
      // => @media (min-width: 480px) { ... }

      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1200px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    },
    extend: {
      inset: {
        '1/6': 'calc(100% / 6)',
      },
      invert: {
        80: '0.80'
      },
      dropShadow: {
        'default': '0 3px 6px rgb(0, 0, 0)',
        'text': '1px 1px 5px rgba(0, 0, 0, 0.25)',
        '20': '0 3px 6px rgba(0, 0, 0, 0.2)'
      },
      boxShadow: {
        'character': '0 4px 30px rgba(0, 0, 0, 0.1)',
      },
      colors: {
        red: {
          DEFAULT: '#d50000',
          50: '#d50000',
          100: '#b30000'
        },
        bordeaux: {
          DEFAULT: '#800020',
          50: '#cc0033',
          100: '#800020',
          200: '#4c0000'
        },
        blue: {
          DEFAULT: '#00c2ff'
        },
        green: {
          DEFAULT: '#09ad19'
        },
        purple: {
          DEFAULT: '#9841e6'
        },
        cyan: {
          DEFAULT: '#368f8b',
          50: '#00b3b3',
          100: '#368f8b',
          200: '#376362'
        },
        gray: {
          DEFAULT: '#7f7f7f',
          50: '#d3d3d3',
          100: '#7f7f7f',
          200: '#696969',
          300: '#313638',
          500: '#778899',
          600: '#B1B2B5'
        }
      }
    },
  },
  plugins: [],
  corePlugins: {
    preflight: false
  }
}