/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    fontFamily: {
      'titles': ['Poppins', 'serif'],
      'default': ['Quicksand', 'serif'],
      'ui': ['Upheaval', 'serif'],
    },
    backgroundSize: {
      'cover': 'cover',
      'contain': 'contain',
      '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)',
        'pixel': '2px 2px 0px rgb(77, 77, 77)',
        'pixel-black': '2px 2px 0px rgb(0, 0, 0)',
        '20': '0 3px 6px rgba(0, 0, 0, 0.2)'
      },
      boxShadow: {
        'character': '0 4px 30px rgba(0, 0, 0, 0.1)',
        'inner': 'inset 0 0 12px 8px rgb(0, 0, 0)',
      },
      colors: {
        cyan: {
          DEFAULT: '#0D6d69',
          50: '#f3faf8',
          100: '#D7F0EC',
          200: '#b1dfd9',
          300: '#80c8c1',
          600: '#0D6D69',
          800: '#244b4c',
          900: '#204040',
          950: '#0f2324'
        },
        red: {
          DEFAULT: '#e15970',
          100: '#ffefef',
          200: '#e15970',
          300: '#b73f54',
          400: '#332426'
        },
        blue: {
          DEFAULT: '#4F5FF0',
          100: '#4F5FF0',
          200: '#2E378A'
        },
        green: {
          DEFAULT: '#05E300',
          100: '#05E300',
          200: '#027D00'
        },
        purple: {
          DEFAULT: '#9841e6'
        },
        gray: {
          DEFAULT: '#262626',
          50: '#fcfcfd',
          100: '#f7f7f8',
          150: '#f1f1f3',
          175: '#e4e4e7',
          200: '#999999',
          300: '#808080',
          400: '#666666',
          500: '#4d4d4d',
          600: '#333333',
          700: '#262626',
          800: '#1a1a1a',
          900: '#0d0d0d'
        }
      }
    },
  },
  plugins: [],
  corePlugins: {
    preflight: false
  }
}