const { fontFamily } = require("tailwindcss/defaultTheme");

/**@type {import("tailwindcss").Config} */
module.exports = {
	darkMode: ["class"],
	content: ["./src/**/*.{js,jsx,md,mdx,ts,tsx}"],
	theme: {
		container: {
			center: true,
			padding: "2rem",
			screens: {
				"2xl": "1400px",
			},
		},
		extend: {
			textColor: {},

			backgroundColor: {
				primary: "#131317",
				secondary: "#16161C",
				tertiary: "#23202C",
			},

			colors: {
				accent: "#959EEE",
				border: "#232332",

				primary: "#EEEEFF",
				secondary: "#7A7A9A",

				// destructive: {
				// 	DEFAULT: "hsl(var(--destructive))",
				// 	foreground: "hsl(var(--destructive-foreground))",
				// },
				// info: {
				// 	DEFAULT: "hsl(var(--info))",
				// 	foreground: "hsl(var(--info-foreground))",
				// },
				// success: {
				// 	DEFAULT: "hsl(var(--success))",
				// 	foreground: "hsl(var(--success-foreground))",
				// },
				// warning: {
				// 	DEFAULT: "hsl(var(--warning))",
				// 	foreground: "hsl(var(--warning-foreground))",
				// },
				// error: {
				// 	DEFAULT: "hsl(var(--error))",
				// 	foreground: "hsl(var(--error-foreground))",
				// },
				// muted: {
				// 	DEFAULT: "hsl(var(--muted))",
				// 	foreground: "hsl(var(--muted-foreground))",
				// },
				// accent: {
				// 	DEFAULT: "hsl(var(--accent))",
				// 	foreground: "hsl(var(--accent-foreground))",
				// },
				// popover: {
				// 	DEFAULT: "hsl(var(--popover))",
				// 	foreground: "hsl(var(--popover-foreground))",
				// },
				// card: {
				// 	DEFAULT: "hsl(var(--card))",
				// 	foreground: "hsl(var(--card-foreground))",
				// },
			},
			borderRadius: {
				lg: "var(--radius)",
				md: "calc(var(--radius) - 2px)",
				sm: "calc(var(--radius) - 4px)",
			},
			fontFamily: {
				sans: ["Inter", ...fontFamily.sans],
			},
			keyframes: {
				"accordion-down": {
					from: { height: 0 },
					to: { height: "var(--kb-accordion-content-height)" },
				},
				"accordion-up": {
					from: { height: "var(--kb-accordion-content-height)" },
					to: { height: 0 },
				},
				"content-show": {
					from: { opacity: 0, transform: "scale(0.96)" },
					to: { opacity: 1, transform: "scale(1)" },
				},
				"content-hide": {
					from: { opacity: 1, transform: "scale(1)" },
					to: { opacity: 0, transform: "scale(0.96)" },
				},
			},
			animation: {
				"accordion-down": "accordion-down 0.2s ease-out",
				"accordion-up": "accordion-up 0.2s ease-out",
				"content-show": "content-show 0.2s ease-out",
				"content-hide": "content-hide 0.2s ease-out",
			},
		},
	},
	plugins: [require("tailwindcss-animate")],
};