import type { Config } from "tailwindcss";
import animate from "tailwindcss-animate";

const config: Config = {
	darkMode: ["class"],
	content: ["./src/**/*.{html,js,jsx,ts,tsx,mdx}"],
	theme: {
		extend: {
			colors: {
				'primary-tw': '#6A2F38',
				'secondary-tw': '#D4AD89',
				'semi-gray': '#7A7A7A',
				'common-text': '#414042',
				'light-gray': '#E5E5E526',
				// background: 'hsl(var(--background))',
				// foreground: 'hsl(var(--foreground))',
				// card: {
				// 	DEFAULT: 'hsl(var(--card))',
				// 	foreground: 'hsl(var(--card-foreground))'
				// },
				popover: {
					DEFAULT: 'hsl(var(--popover))',
					foreground: 'hsl(var(--popover-foreground))'
				},
				// primary: {
				// 	DEFAULT: 'hsl(var(--primary))',
				// 	foreground: 'hsl(var(--primary-foreground))'
				// },
				// secondary: {
				// 	DEFAULT: 'hsl(var(--secondary))',
				// 	foreground: 'hsl(var(--secondary-foreground))'
				// },
				// muted: {
				// 	DEFAULT: 'hsl(var(--muted))',
				// 	foreground: 'hsl(var(--muted-foreground))'
				// },
				// accent: {
				// 	DEFAULT: 'hsl(var(--accent))',
				// 	foreground: 'hsl(var(--accent-foreground))'
				// },
				destructive: '#DA0037',
				success: '#4E9F3D',
				warning: '#D4AD89',
				// border: 'hsl(var(--border))',
				// input: 'hsl(var(--input))',
				// ring: 'hsl(var(--ring))',
				// chart: {
				// 	'1': 'hsl(var(--chart-1))',
				// 	'2': 'hsl(var(--chart-2))',
				// 	'3': 'hsl(var(--chart-3))',
				// 	'4': 'hsl(var(--chart-4))',
				// 	'5': 'hsl(var(--chart-5))'
				// }
			},
			// borderRadius: {
			// 	lg: 'var(--radius)',
			// 	md: 'calc(var(--radius) - 2px)',
			// 	sm: 'calc(var(--radius) - 4px)'
			// }
		}
	},
	plugins: [animate],
};

export default config;