const withOpacity = (variable) => {
  return ({ opacityValue } = {}) => {
    if (opacityValue !== undefined) {
      return `rgb(var(${variable}) / ${opacityValue})`;
    }
    return `rgb(var(${variable}))`;
  };
};

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: "class",
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        bg: withOpacity("--color-bg"),
        card: withOpacity("--color-card"),
        cardBorder: withOpacity("--color-card-border"),
        text: withOpacity("--color-text"),
        "text-secondary": withOpacity("--color-text-secondary"),
        hover: withOpacity("--color-hover"),
        accent: withOpacity("--color-accent"),
      },
      keyframes: {
        'fade-up': {
          '0%': { opacity: '0', transform: 'translateY(8px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
      },
      animation: {
        'fade-up': 'fade-up 300ms ease-out forwards',
      },
    },
  },
  plugins: [],
}