import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './app/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './lib/**/*.{ts,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        // wired up in app/layout.tsx via next/font CSS variables
        body: ['var(--font-body)', 'system-ui', 'sans-serif'],
        heading: ['var(--font-heading)', 'var(--font-body)', 'sans-serif'],
      },
      colors: {
        // Single toned-neutral surface + a small accent family (warm, same chroma).
        cream: {
          DEFAULT: '#FBF7F0',
          50: '#FEFCF8',
          100: '#FBF7F0',
          200: '#F3EBDD',
        },
        ink: {
          DEFAULT: '#3B322B',
          soft: '#6B6259',
          faint: '#9A9089',
        },
        mango: {
          DEFAULT: '#FF8B5E',
          50: '#FFF2EC',
          100: '#FFE1D3',
          200: '#FFC3A8',
          500: '#FF8B5E',
          600: '#F06B38',
          700: '#D2551F',
        },
        leaf: {
          DEFAULT: '#4DC08B',
          50: '#EBFAF3',
          100: '#D2F2E3',
          500: '#4DC08B',
          600: '#33A472',
          700: '#237E56',
        },
        sun: {
          DEFAULT: '#FFC94A',
          50: '#FFF8E6',
          100: '#FFEFBF',
          500: '#FFC94A',
          600: '#EBB021',
        },
        // Deep green used for bold "dark" bands (replaces the near-black ink bg).
        pine: {
          DEFAULT: '#1C5238',
          500: '#22633F',
          600: '#1C5238',
          700: '#123B28',
          800: '#0C2C1E',
        },
      },
      borderRadius: {
        '2xl': '1.25rem',
        '3xl': '1.75rem',
        '4xl': '2.25rem',
      },
      boxShadow: {
        soft: '0 10px 30px -12px rgba(59, 50, 43, 0.18)',
        card: '0 4px 20px -8px rgba(59, 50, 43, 0.15)',
        pop: '0 14px 40px -14px rgba(240, 107, 56, 0.35)',
        // Comic / sticker hard offset shadows (no blur).
        hard: '4px 4px 0 0 #3B322B',
        'hard-sm': '3px 3px 0 0 #3B322B',
        'hard-lg': '7px 7px 0 0 #3B322B',
      },
      keyframes: {
        'bounce-in': {
          '0%': { transform: 'scale(0.8)', opacity: '0' },
          '60%': { transform: 'scale(1.05)', opacity: '1' },
          '100%': { transform: 'scale(1)' },
        },
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
        float: {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-8px)' },
        },
        shake: {
          '0%, 100%': { transform: 'translateX(0)' },
          '20%, 60%': { transform: 'translateX(-8px)' },
          '40%, 80%': { transform: 'translateX(8px)' },
        },
      },
      animation: {
        'bounce-in': 'bounce-in 0.4s ease-out',
        wiggle: 'wiggle 1.2s ease-in-out infinite',
        float: 'float 3s ease-in-out infinite',
        shake: 'shake 0.4s ease-in-out',
      },
    },
  },
  plugins: [],
};

export default config;