import defaultTheme from 'tailwindcss/defaultTheme';
import plugin from 'tailwindcss/plugin';
import typographyPlugin from '@tailwindcss/typography';

export default {
  content: ['./src/**/*.{astro,html,js,jsx,json,md,mdx,svelte,ts,tsx,vue}'],
  safelist: [
    'bg-dark',
    'bg-black',
    'bg-white',
    'bg-accent',
  ],
  theme: {
    extend: {
      colors: {
        primary: '#0000f4',
        secondary: '#565656',
        accent: '#0000f4',
        dark: '#040404',
        light: '#f5f5f5',
        muted: '#565656',
        'muted-foreground': '#8e8e8e',
        border: '#dedede',
        'footer-light': '#e8e8e8',
      },
      fontFamily: {
        sans: ['"TT Hoves"', 'ui-sans-serif', 'system-ui', 'sans-serif'],
        heading: ['"Arthemys Display"', 'ui-sans-serif', 'system-ui', 'sans-serif'],
        display: ['"Arthemys Display"', 'ui-sans-serif', 'system-ui', 'sans-serif'],
        mono: ['"DM Mono"', 'ui-monospace', 'monospace'],
        },
      animation: {
        fade: 'fadeInUp 1s both',
      },
      keyframes: {
        fadeInUp: {
          '0%': { opacity: 0, transform: 'translateY(2rem)' },
          '100%': { opacity: 1, transform: 'translateY(0)' },
        },
      },
    },
  },
  plugins: [
    typographyPlugin,
    plugin(({ addVariant }) => {
      addVariant('intersect', '&:not([no-intersect])');
    }),
  ],
  darkMode: 'class',
};