import { TW_WIDTHS } from './src/constants/images';

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: { 
    extend: {
      screens: {
        xs: `${TW_WIDTHS.XS}px`, 
      },
      colors: {
        bg: {
          main: 'rgba(19, 21, 20, 1)',
          light: 'rgba(28, 28, 30, 1)',
        },
        card: {
          DEFAULT: 'rgba(28, 28, 30, 1)',
        },
        brand: {
          DEFAULT: 'rgba(198, 15, 211, 1)',
        },
        text: {
          light: '#FFFFFF',
          DEFAULT: '#C4C4C4',
        },
        border: {
          light: '#D9D9D9',
        },
      },
      aspectRatio: {
        '3/4': '3 / 4',
      },
      keyframes: {
        marquee: {
          to: { transform: 'translateX(-50%)' },
        },
      },
      animation: {
        marquee: 'marquee 20s linear infinite',
      },
    },
  },
  plugins: [],
}