/** @type {import('tailwindcss').Config} */

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx,vue}",
    "./src/**/**/*.{js,ts,jsx,tsx,vue}",
    "./src/**/**/**/*.{js,ts,jsx,tsx,vue}"],
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'primary': '#0099FF',
      'secondary': '#FFAA44',
      'cfm-primary': '#0099FF',
      'cfm-secondary': '#FFAA44',
      'neutral': {
        10: '#ffffff',
        50: '#f8fafc',
        100: '#f1f5f9',
        200: '#e2e8f0',
        300: '#cbd5e1',
        400: '#94a3b8',
        500: '#64748b',
        600: '#475569',
        700: '#334155',
        800: '#1e293b',
        900: '#0f172a'
      },
      'danger': '#FF3366',
    },
    container: {
      center: true,
      padding: '16px',
    },
    fontSize: {
      xs: ['12px', 1],
      sm: ['14px', 1],
      base: ['16px', 1],
      lg: ['18px', 1],
      xl: ['20px', 1],
      '2xl': ['24px', 1],
      '3xl': ['30px', 1],
      '4xl': ['36px', 1],
    },
    screens: {
      // 'sm': '640px',
      // 'md': '768px',
      // 'lg': '1024px',
      // 'xl': '1280px',
      '2xl': '1536px',
    },
    extend: {
      keyframes: {
        'fadein': {
          '0%': { opacity: '0' },
          '50%': { opacity: '0.5' },
          '100%': { opacity: '1' },
        },
        'edit': {
          '0%, 100%': { transform: 'rotate(0deg)' },
          '25%': { transform: 'rotate(9deg)' },
          '75%': { transform: 'rotate(-9deg)' },
        },
      },
      animation: {
        'fadein': 'fadein 1s ease-in-out',
        'edit': 'edit 0.6s ease'
      },
    },
  },
};