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

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", "*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    extend: {
      colors: {
          background: "#0f0f1f",  // fondo oscuro elegante
          foreground: "#f8f8f2",
        primary: {
            DEFAULT: "#8b5cf6", // violeta principal
            50: "#f3ebff",
            100: "#e0d7ff",
            200: "#c0aaff",
            300: "#a078ff",
            400: "#8b5cf6",
            500: "#7c3aed",
            600: "#6d28d9",
            700: "#5b21b6",
            800: "#4c1d95",
            900: "#3b1070",
            foreground: "#ffffff",
        },
        secondary: {
            DEFAULT: "#c084fc", // púrpura suave para CTA
            foreground: "#ffffff",
        },
        accent: {
            DEFAULT: "#d8b4fe", // acento claro violeta
            foreground: "#1f1f2e",
        },
          muted: {
              DEFAULT: "#a78bfa", // violeta pálido
              foreground: "#f8f8f2",
        },
        card: {
            DEFAULT: "#1e1b2f", // card dark purple
            foreground: "#f8f8f2",
        },
          popover: {
              DEFAULT: "#2c2345",
              foreground: "#f8f8f2",
        },
          success: "#7dd3fc",
          warning: "#facc15",
          error: "#f87171",
      },
        fontFamily: {
            sans: ["Inter", ...fontFamily.sans],
            mono: ["Fira Code", ...fontFamily.mono],
      },
      animation: {
        "bounce-slow": "bounce 2s infinite",
        "pulse-slow": "pulse 3s infinite",
          "fade-in": "fadeIn 0.6s ease-in-out",
          "float": "float 4s ease-in-out infinite",
          "wiggle": "wiggle 0.8s ease-in-out infinite",
      },
      keyframes: {
        fadeIn: {
          "0%": { opacity: "0", transform: "translateY(10px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
          float: {
              "0%, 100%": {transform: "translateY(0)"},
              "50%": {transform: "translateY(-10px)"},
          },
          wiggle: {
              "0%, 100%": {transform: "rotate(-3deg)"},
              "50%": {transform: "rotate(3deg)"},
          },
      },
      borderRadius: {
          lg: "1rem",
          md: "0.75rem",
          sm: "0.5rem",
      },
        boxShadow: {
            "card-light": "0 8px 16px rgba(139,92,246,0.2)",
            "card-dark": "0 8px 20px rgba(0,0,0,0.5)",
            glow: "0 0 20px rgba(139,92,246,0.6)",
        },
        transitionProperty: {
            height: "height",
            spacing: "margin, padding",
      },
    },
  },
  plugins: [],
};