// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './src/**/*.css',          // let Tailwind parse the @apply lines
    './public/index.html',
  ],

  theme: {
    extend: {
      colors: {
        aptiva: {
          DEFAULT: '#0A84FF',
          dark   : '#005FCC',
          light  : '#3AA0FF',
          accent : '#FF7C00',
          gray   : '#F7FAFC',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['Fira Code', 'monospace'],
      },
      borderRadius: { xl: '1rem' },
      keyframes: {
        'slide-in': {
          from: { transform: 'translateX(100%)' },
          to  : { transform: 'translateX(0)' },
        },
      },
      animation: { 'slide-in': 'slide-in 0.25s ease-out forwards' },
    },
  },

  // OPTIONAL – only keep if you really call these classes in JSX/HTML
  safelist: [
    'bg-aptiva', 'bg-aptiva-dark', 'bg-aptiva-light',
    'text-aptiva', 'border-aptiva',
    'hover:bg-aptiva',            // delete this line if unused
  ],

  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
};