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

/** @type {import('tailwindcss').Config} */

const colors = {
  background: {
    DEFAULT: 'rgba(19, 21, 20, 1)',
    light: 'rgba(28, 28, 30, 1)',
  },
  text: {
    DEFAULT: '#C4C4C4',
    muted: '#D9D9D9',
  },
  brand: {
    DEFAULT: 'rgba(198, 15, 211, 1)',
  },
  border: {
    DEFAULT: '#D9D9D9',
  },
}

export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      screens: {
        xs: `${TW_WIDTHS.XS}px`,
      },
      colors,
      textColor: {
        DEFAULT: colors.text.DEFAULT,
      },
      backgroundColor: {
        main: colors.background.DEFAULT,
        light: colors.background.light,
      },
      borderColor: {
        DEFAULT: colors.border.DEFAULT,
      },
      aspectRatio: {
        '3/4': '3 / 4',
      },
      keyframes: {
        marquee: {
          to: { transform: 'translateX(-50%)' },
        },
      },
      animation: {
        marquee: 'marquee 20s linear infinite',
      },
    },
  },
  plugins: [],
}