import type { Config } from 'tailwindcss'

const config: Config = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    extend: {
      colors: {
        bg: '#0a0a0f',
        surface: '#12121a',
        surface2: '#1a1a26',
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        accent: (({ opacityValue }: { opacityValue?: string }) =>
          opacityValue !== undefined ? `rgba(var(--accent-rgb),${opacityValue})` : 'var(--accent)') as any,
        muted: '#555555',
        'app-text': '#f0f0f0',
      },
      fontFamily: {
        sans: ['var(--font-dm-sans)', 'DM Sans', 'sans-serif'],
        display: ['var(--font-syne)', 'Syne', 'sans-serif'],
      },
      borderRadius: {
        app: '16px',
      },
      keyframes: {
        fadeUp: {
          from: { opacity: '0', transform: 'translateY(6px)' },
          to: { opacity: '1', transform: 'translateY(0)' },
        },
        coverPulse: {
          from: { transform: 'scale(1)' },
          to: { transform: 'scale(1.06)' },
        },
        glowPulse: {
          from: { opacity: '0.4' },
          to: { opacity: '0.9' },
        },
      },
      animation: {
        fadeUp: 'fadeUp 0.25s ease both',
        coverPulse: 'coverPulse 2s ease-in-out infinite alternate',
        glowPulse: 'glowPulse 1.5s ease-in-out infinite alternate',
      },
      maxWidth: {
        app: '660px',
      },
    },
  },
  plugins: [],
}

export default config