import type { Config } from "tailwindcss";

export default {
  darkMode: "class",
  content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: "#6366f1",
        "primary-dark": "#4f46e5",
        "primary-light": "#818cf8",
        secondary: "#ec4899",
        "secondary-dark": "#db2777",
        "secondary-light": "#f472b6",
        accent: "#14b8a6",
        "accent-dark": "#0d9488",
        success: "#10b981",
        "success-dark": "#059669",
        warning: "#f59e0b",
        "warning-dark": "#d97706",
        danger: "#ef4444",
        "danger-dark": "#dc2626",
        darkbg: "#0f172a",
      },
      boxShadow: {
        soft: "0 10px 30px rgba(0,0,0,0.08)",
        glow: "0 0 20px rgba(99, 102, 241, 0.3)",
        "glow-secondary": "0 0 20px rgba(236, 72, 153, 0.3)",
        "glow-accent": "0 0 20px rgba(20, 184, 166, 0.3)",
        "elevation-1": "0 1px 3px rgba(0,0,0,0.1)",
        "elevation-2": "0 4px 6px rgba(0,0,0,0.1)",
        "elevation-3": "0 10px 25px rgba(0,0,0,0.15)",
        "elevation-4": "0 20px 40px rgba(0,0,0,0.2)",
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-primary': 'linear-gradient(135deg, #6366f1 0%, #ec4899 100%)',
        'gradient-secondary': 'linear-gradient(135deg, #ec4899 0%, #14b8a6 100%)',
        'gradient-accent': 'linear-gradient(135deg, #14b8a6 0%, #6366f1 100%)',
      },
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      transitionDuration: {
        '250': '250ms',
        '350': '350ms',
      },
      borderRadius: {
        '3xl': '1.5rem',
        '4xl': '2rem',
      },
      animation: {
        'gradient': 'gradient 3s ease infinite',
        'float': 'float 3s ease-in-out infinite',
        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
      },
      keyframes: {
        gradient: {
          '0%, 100%': { backgroundPosition: '0% 50%' },
          '50%': { backgroundPosition: '100% 50%' },
        },
        float: {
          '0%, 100%': { transform: 'translateY(0px)' },
          '50%': { transform: 'translateY(-20px)' },
        },
      },
    },
  },
  plugins: [],
} satisfies Config;