/** @type {import('tailwindcss').Config} */ export default { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], darkMode: ['class', "class"], theme: { extend: { colors: { primary: { DEFAULT: 'hsl(var(--primary))', dark: '#D8BFD8', light: '#F0E6FF', foreground: 'hsl(var(--primary-foreground))' }, accent: { DEFAULT: 'hsl(var(--accent))', light: '#5C7CFA', dark: '#364FC7', foreground: 'hsl(var(--accent-foreground))' }, secondary: { DEFAULT: 'hsl(var(--secondary))', light: '#6C757D', dark: '#343A40', foreground: 'hsl(var(--secondary-foreground))' }, danger: { DEFAULT: '#DC2626', light: '#EF4444', dark: '#B91C1C' }, gray: { '50': '#F5F7FA', '100': '#E5E7EB', '200': '#D1D5DB', '300': '#9CA3AF', '400': '#6B7280', '500': '#4B5563', '600': '#374151', '700': '#1F2937', '800': '#111827', '900': '#030712' }, purple: { '50': '#F3E8FF', '100': '#E9D5FF', '200': '#D8B4FE' }, 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))' }, muted: { DEFAULT: 'hsl(var(--muted))', foreground: 'hsl(var(--muted-foreground))' }, destructive: { DEFAULT: 'hsl(var(--destructive))', foreground: 'hsl(var(--destructive-foreground))' }, 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))' } }, fontFamily: { sans: [ 'Inter', 'system-ui', 'sans-serif' ] }, spacing: { '18': '4.5rem', '80': '20rem', '88': '22rem' }, borderRadius: { xl: '0.75rem', '2xl': '1rem', '3xl': '1.5rem', lg: 'var(--radius)', md: 'calc(var(--radius) - 2px)', sm: 'calc(var(--radius) - 4px)' }, boxShadow: { soft: '0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)', card: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', 'card-hover': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)' }, animation: { float: 'float 3s ease-in-out infinite', 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite' }, keyframes: { float: { '0%, 100%': { transform: 'translateY(0px)' }, '50%': { transform: 'translateY(-10px)' } } } } }, plugins: [require("tailwindcss-animate")], }