import type { Config } from "tailwindcss";
import defaultTheme from "tailwindcss/defaultTheme";

export default {
	content: [
		"./components/**/*.{vue,js,ts}",
		"./layouts/**/*.vue",
		"./pages/**/*.vue",
		"./composables/**/*.{js,ts}",
		"./plugins/**/*.{js,ts}",
		"./assets/css/**/*.css",
		"./app.vue"
	],
	theme: {
		extend: {
			fontFamily: {
				sans: ["Helvetica", "Arial", ...defaultTheme.fontFamily.sans],
				bebas: ["'Bebas Neue'", ...defaultTheme.fontFamily.sans]
			}
		}
	},
	safelist: [
		// Dynamic gradient direction for Background component
		{
			pattern: /bg-gradient-to-(t|tr|r|br|b|bl|l|tl)/
		},
		// Dynamic colors for Background component (shades 50, 100, 200) and product details (700)
		{
			pattern: /(from|to|via)-(red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|700)/
		},
		// Dynamic shadow colors for ProductCard (shades 100, 200) with optional opacity
		{
			pattern: /shadow-(red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(100|200)(\/\d+)?/,
			variants: ["group-hover", "group-active"]
		}
	],
	plugins: [require("@tailwindcss/forms")]
} satisfies Config;