tailwind.config.ts

import type { Config } from 'tailwindcss';

const config: Config = {
	content: [
		'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
		'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
		'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
	],
	darkMode: 'class',
	theme: {
		extend: {
			colors: {
				background: 'hsl(var(--background))',
				foreground: 'hsl(var(--foreground))',
				card: {
					DEFAULT: 'hsl(var(--card))',
					foreground: 'hsl(var(--card-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))'
				},
				border: 'hsl(var(--border))',
				ring: 'hsl(var(--ring))',
				glow: {
					cyan: '#00FFFF',
					purple: '#A855F7',
					pink: '#EC4899'
				},
				popover: {
					DEFAULT: 'hsl(var(--popover))',
					foreground: 'hsl(var(--popover-foreground))'
				},
				destructive: {
					DEFAULT: 'hsl(var(--destructive))',
					foreground: 'hsl(var(--destructive-foreground))'
				},
				input: 'hsl(var(--input))',
				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))'
				},
				bento: {
					highlight: {
						light: '#DADBF8',
						DEFAULT: '#454ADE',
					},
					accent: {
						light: '#D9EAE3',
						DEFAULT: '#439775',
					},
					primary: {
						light: '#FFCFE1',
						DEFAULT: '#FF0F67',
					},
					secondary: {
						light: '#FFFCE5',
						DEFAULT: '#FFF07C',
					},
					base: {
						100: '#f0f0f0',
						200: '#ffffff',
						300: '#F2F2F2',
						content: '#0A0A0A',
					}
				}
			},
			fontFamily: {
				sans: [
					'var(--font-inter)',
					'system-ui',
					'sans-serif'
				],
				mono: [
					'var(--font-jetbrains)',
					'monospace'
				]
			},
			animation: {
				'fade-in': 'fadeIn 0.5s ease-out forwards',
				'fade-up': 'fadeUp 0.6s ease-out forwards',
				'slide-in-left': 'slideInLeft 0.5s ease-out forwards',
				'slide-in-right': 'slideInRight 0.5s ease-out forwards',
				'scale-in': 'scaleIn 0.4s ease-out forwards',
				'glow-pulse': 'glowPulse 2s ease-in-out infinite',
				float: 'float 6s ease-in-out infinite',
				'rotate-slow': 'rotateSlow 20s linear infinite',
				'gradient-shift': 'gradientShift 8s ease infinite',
				marquee: 'marquee 30s linear infinite',
				'marquee-reverse': 'marqueeReverse 30s linear infinite',
				scan: 'scan 3s linear infinite',
				meteor: 'meteor 5s linear infinite'
			},
			keyframes: {
				meteor: {
					'0%': { transform: 'rotate(var(--angle)) translateX(0)', opacity: '1' },
					'70%': { opacity: '1' },
					'100%': {
						transform: 'rotate(var(--angle)) translateX(-500px)',
						opacity: '0'
					}
				},
				scan: {
					'0%': { top: '0%' },
					'100%': { top: '100%' }
				},
				fadeIn: {
					'0%': {
						opacity: '0'
					},
					'100%': {
						opacity: '1'
					}
				},
				fadeUp: {
					'0%': {
						opacity: '0',
						transform: 'translateY(20px)'
					},
					'100%': {
						opacity: '1',
						transform: 'translateY(0)'
					}
				},
				slideInLeft: {
					'0%': {
						opacity: '0',
						transform: 'translateX(-30px)'
					},
					'100%': {
						opacity: '1',
						transform: 'translateX(0)'
					}
				},
				slideInRight: {
					'0%': {
						opacity: '0',
						transform: 'translateX(30px)'
					},
					'100%': {
						opacity: '1',
						transform: 'translateX(0)'
					}
				},
				scaleIn: {
					'0%': {
						opacity: '0',
						transform: 'scale(0.9)'
					},
					'100%': {
						opacity: '1',
						transform: 'scale(1)'
					}
				},
				glowPulse: {
					'0%, 100%': {
						boxShadow: '0 0 20px rgba(0, 255, 255, 0.3)'
					},
					'50%': {
						boxShadow: '0 0 40px rgba(0, 255, 255, 0.6)'
					}
				},
				float: {
					'0%, 100%': {
						transform: 'translateY(0px)'
					},
					'50%': {
						transform: 'translateY(-20px)'
					}
				},
				rotateSlow: {
					'0%': {
						transform: 'rotate(0deg)'
					},
					'100%': {
						transform: 'rotate(360deg)'
					}
				},
				gradientShift: {
					'0%, 100%': {
						backgroundPosition: '0% 50%'
					},
					'50%': {
						backgroundPosition: '100% 50%'
					}
				},
				marquee: {
					'0%': {
						transform: 'translateX(0%)'
					},
					'100%': {
						transform: 'translateX(-50%)'
					}
				},
				marqueeReverse: {
					'0%': {
						transform: 'translateX(-50%)'
					},
					'100%': {
						transform: 'translateX(0%)'
					}
				}
			},
			backgroundImage: {
				'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
				'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
				'glass-gradient': 'linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%)',
				'mesh-gradient': 'radial-gradient(at 40% 20%, hsla(280,100%,70%,1) 0px, transparent 50%), radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0px, transparent 50%), radial-gradient(at 0% 50%, hsla(355,100%,93%,1) 0px, transparent 50%)'
			},
			backdropBlur: {
				xs: '2px'
			},
			boxShadow: {
				glass: '0 8px 32px 0 rgba(31, 38, 135, 0.37)',
				'glow-sm': '0 0 10px rgba(0, 255, 255, 0.3)',
				'glow-md': '0 0 20px rgba(0, 255, 255, 0.4)',
				'glow-lg': '0 0 40px rgba(0, 255, 255, 0.5)',
				'inner-glow': 'inset 0 0 20px rgba(0, 255, 255, 0.1)'
			},
			borderRadius: {
				lg: 'var(--radius)',
				md: 'calc(var(--radius) - 2px)',
				sm: 'calc(var(--radius) - 4px)'
			}
		}
	},
	plugins: [require("tailwindcss-animate")],
};

export default config;