/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js}'],
  darkMode: 'class',
  theme: {
    debugScreens: {
      position: ['bottom', 'right']
    },
    extend: {
      scale: {
        97: '.97'
      },
      borderWidth: {
        3: '3px'
      },
      borderColor: theme => ({
        light: '#F3F3F3',
        red: '#fd397a',
        'dark-background': '#151515',
        'dark-secondary': '#1e2024'
      }),
      fontSize: {
        tiny: ['11px', '16px']
      },
      colors: {
        'dark-foreground': '#1e2024',
        'theme-color': '#00e1ff'
      },
      backgroundColor: theme => ({
        'dark-background': '#151515',
        'dark-foreground': '#171819',
        '2x-dark-foreground': '#191b1e',
        '4x-dark-foreground': '#1e2124',
        'light-background': '#f4f5f6',
        'light-300': '#e1e1ef'
      }),
      boxShadow: {
        card: '0 2px 6px 0 rgba(0, 0, 0, 0.04)',
        card_red: '0 2px 6px 0 rgba(253, 57, 122, 0.04)'
      },
      screens: {
        print: { raw: 'print' },
        mobile: { max: '1024px' },
        pc: '1024px'
      },
      keyframes: {
        'boom-in': {
          '0%': { transform: 'scale(0)' },
          '50%': { transform: 'scale(1.2)' },
          '100%': { transform: 'scale(1)' }
        },
        'slide-up': {
          '0%': { transform: 'translateY(-200px)' },
          '100%': { transform: 'translaiteY(0px)' }
        },
        expand: {
          '0%': { transform: 'scale(0)' },
          '100%': { transform: 'scale(1)' }
        }
      },
      animation: {
        'boom-in': 'boom-in 0.5s ease',
        'slide-up': 'slide-up 0.3s ease',
        expand: 'expand 0.3s ease'
      }
    }
  },
  plugins: []
}