/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        skin: {
          50: '#FDF8F3',
          100: '#FAF0E6',
          200: '#F5E1D0',
          300: '#EBCDB0',
        },
        pink: {
          brand: '#FF2D7A',
          bright: '#FF1B8D',
          soft: '#FF6B9D',
          pale: '#FFB6C1',
        },
        grey: {
          900: '#1A1A1A',
          800: '#2A2A2A',
          700: '#3A3A3A',
          600: '#555555',
          500: '#777777',
        },
      },
      fontFamily: {
        mono: ['"Roboto Mono"', 'monospace'],
        display: ['"Space Grotesk"', 'sans-serif'],
        body: ['"DM Sans"', 'sans-serif'],
      },
      animation: {
        'float': 'float 6s ease-in-out infinite',
        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
        'drift': 'drift 20s linear infinite',
      },
      keyframes: {
        float: {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-20px)' },
        },
        drift: {
          '0%': { transform: 'translateX(-100%) translateY(0)' },
          '100%': { transform: 'translateX(100vw) translateY(-40px)' },
        },
      },
    },
  },
  plugins: [],
}