import { heroui } from '@heroui/theme';
import animate from 'tailwindcss-animate';

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-sans)'],
        mono: ['var(--font-mono)'],
      },
      backgroundImage: {
        modalMark:
          'linear-gradient(to top, rgba(0, 0, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.8) 68%, rgba(255, 255, 255, 0.65) 82%, rgba(255, 255, 255, 0) 100%)',
      },
    },
  },
  darkMode: ['class'],
  plugins: [
    heroui({
      addCommonColors: true,
      // defaultTheme: "light", // default theme from the themes object
      // defaultExtendTheme: "light", // default theme to extend on custom themes
      themes: {
        light: {
          colors: {
            primary: { DEFAULT: '#EC4342' },
            background: { DEFAULT: '#18181B' },
          },
        },
        dark: {
          colors: {
            primary: { DEFAULT: '#EC4342' },
            background: { DEFAULT: '#18181B' },
          },
        },
      },
    }),
    animate,
  ],
};