import type { Config } from 'tailwindcss';
import animate from 'tailwindcss-animate';

export default {
  darkMode: ['class'],
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  theme: {
    container: {
      center: true,
      padding: {
        DEFAULT: '1rem',
        sm: '1.5rem',
        lg: '2rem',
      },
      screens: {
        '2xl': '1280px',
      },
    },
    extend: {
      fontFamily: {
        sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
        display: ['Poppins', 'Inter', 'ui-sans-serif', 'sans-serif'],
      },
      colors: {
        brand: {
          50: '#eef3ff',
          100: '#dae5ff',
          200: '#bcd0ff',
          300: '#8eb0ff',
          400: '#5985ff',
          500: '#0052ff',
          600: '#0046dd',
          700: '#0039b3',
          800: '#062f8e',
          900: '#0a2a72',
          950: '#061847',
        },
        ink: {
          50: '#f6f7f9',
          100: '#eceef2',
          200: '#d5d9e0',
          300: '#b1b8c5',
          400: '#7c8595',
          500: '#5b6473',
          600: '#454c58',
          700: '#363c46',
          800: '#23272e',
          900: '#13161b',
          950: '#0a0c10',
        },
      },
      backgroundImage: {
        'hero-radial':
          'radial-gradient(60% 80% at 50% 0%, rgba(0, 82, 255, 0.18) 0%, rgba(0, 82, 255, 0) 60%)',
      },
      keyframes: {
        'fade-in-up': {
          '0%': { opacity: '0', transform: 'translateY(12px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
      },
      animation: {
        'fade-in-up': 'fade-in-up 0.6s ease-out both',
      },
    },
  },
  plugins: [animate],
} satisfies Config;