/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,jsx}'],
  theme: {
    extend: {
      fontFamily: {
        display: ['Bricolage Grotesque', 'serif'],
        sans: ['Hanken Grotesk', 'system-ui', 'sans-serif'],
      },
      colors: {
        brand: {
          dark: '#2d3b2d',
          hover: '#26331f',
        },
        cream: '#faf7f0',
        card: '#fcfbf7',
        gold: '#c9a24b',
        terracotta: '#c2602f',
        sage: '#9caf88',
        success: '#3f7d4e',
      },
      borderRadius: {
        card: '20px',
        section: '22px',
        sheet: '24px',
      },
      boxShadow: {
        card: '0 5px 16px -10px rgba(45,42,31,0.45)',
        'card-hover': '0 10px 24px -12px rgba(45,42,31,0.5)',
        cart: '0 12px 28px -8px rgba(45,59,45,0.55)',
      },
      keyframes: {
        fade: { from: { opacity: 0 }, to: { opacity: 1 } },
        slideup: {
          from: { transform: 'translateY(100%)' },
          to: { transform: 'translateY(0)' },
        },
        pop: {
          '0%': { transform: 'scale(1)' },
          '50%': { transform: 'scale(1.06)' },
          '100%': { transform: 'scale(1)' },
        },
      },
      animation: {
        fade: 'fade 0.2s ease',
        slideup: 'slideup 0.28s cubic-bezier(0.22,1,0.36,1)',
        pop: 'pop 0.32s ease',
      },
    },
  },
  plugins: [],
}