import type { Config } from "tailwindcss"

const config: Config = {
  darkMode: ["class"],
  content: [
    './index.html',
    './src/**/*.{ts,tsx}',
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: { "2xl": "1400px" },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--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))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        node: {
          material: "hsl(var(--node-material))",
          project: "hsl(var(--node-project))",
          category: "hsl(var(--node-category))",
          aging: "hsl(var(--node-aging))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "pulse-glow": {
          "0%, 100%": { opacity: "1", transform: "scale(1)" },
          "50%": { opacity: "0.8", transform: "scale(1.05)" },
        },
        "fade-in": {
          from: { opacity: "0", transform: "translateY(8px)" },
          to: { opacity: "1", transform: "translateY(0)" },
        },
        "slide-in-right": {
          from: { opacity: "0", transform: "translateX(20px)" },
          to: { opacity: "1", transform: "translateX(0)" },
        },
        "space-border-scan": {
          "0%": { left: "-100%" },
          "100%": { left: "200%" },
        },
        "space-pulse": {
          "0%, 100%": { opacity: "0.5", boxShadow: "0 0 10px rgba(0,212,255,0.2)" },
          "50%": { opacity: "1", boxShadow: "0 0 25px rgba(0,212,255,0.6)" },
        },
        "star-twinkle": {
          "0%, 100%": { opacity: "0.3", transform: "scale(1)" },
          "50%": { opacity: "1", transform: "scale(1.4)" },
        },
        "slide-in-left": {
          from: { opacity: "0", transform: "translateX(-20px)" },
          to: { opacity: "1", transform: "translateX(0)" },
        },
        "slide-in-up": {
          from: { opacity: "0", transform: "translateY(16px)" },
          to: { opacity: "1", transform: "translateY(0)" },
        },
        "glow-pulse": {
          "0%, 100%": { boxShadow: "0 0 10px rgba(0,212,255,0.2)" },
          "50%": { boxShadow: "0 0 30px rgba(0,212,255,0.5)" },
        },
        "module-spin": {
          "0%": { transform: "rotateY(0deg) scale(1)" },
          "30%": { transform: "rotateY(90deg) scale(0.92)" },
          "60%": { transform: "rotateY(180deg) scale(0.88)" },
          "80%": { transform: "rotateY(270deg) scale(0.92)" },
          "100%": { transform: "rotateY(360deg) scale(1)" },
        },
        "orbit-ring": {
          from: { transform: "rotate(0deg)" },
          to: { transform: "rotate(360deg)" },
        },
        "processing-dots": {
          "0%, 20%": { opacity: "0.2", transform: "scale(0.8)" },
          "50%": { opacity: "1", transform: "scale(1.2)" },
          "80%, 100%": { opacity: "0.2", transform: "scale(0.8)" },
        },
        "content-reveal": {
          from: { opacity: "0", transform: "translateY(18px) scale(0.97)" },
          to: { opacity: "1", transform: "translateY(0) scale(1)" },
        },
        "scan-sweep": {
          "0%": { top: "-4px", opacity: "0" },
          "10%": { opacity: "0.8" },
          "90%": { opacity: "0.8" },
          "100%": { top: "100%", opacity: "0" },
        },
        "notice-in": {
          from: { opacity: "0", transform: "translateX(-12px)" },
          to: { opacity: "1", transform: "translateX(0)" },
        },
        "card-in": {
          from: { opacity: "0", transform: "translateY(8px)" },
          to: { opacity: "1", transform: "translateY(0)" },
        },
        "scan-line": {
          "0%": { top: "0%", opacity: "0.6" },
          "100%": { top: "100%", opacity: "0" },
        },
        "rotate-scan": {
          "0%": { transform: "rotate(0deg)" },
          "100%": { transform: "rotate(360deg)" },
        },
      },
      animation: {
        "pulse-glow": "pulse-glow 2s ease-in-out infinite",
        "fade-in": "fade-in 0.3s ease-out",
        "slide-in-right": "slide-in-right 0.3s ease-out",
        "space-border-scan": "space-border-scan 3s linear infinite",
        "space-pulse": "space-pulse 2.5s ease-in-out infinite",
        "star-twinkle": "star-twinkle 3s ease-in-out infinite",
        "slide-in-left": "slide-in-left 0.4s cubic-bezier(0.4,0,0.2,1)",
        "slide-in-up": "slide-in-up 0.4s cubic-bezier(0.4,0,0.2,1)",
        "glow-pulse": "glow-pulse 3s ease-in-out infinite",
        "module-spin": "module-spin 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards",
        "orbit-ring": "orbit-ring 20s linear infinite",
        "processing-dots": "processing-dots 1.4s ease-in-out infinite",
        "content-reveal": "content-reveal 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both",
        "scan-sweep": "scan-sweep 4s linear infinite",
        "notice-in": "notice-in 0.3s ease-out",
        "card-in": "card-in 0.3s ease-out",
        "scan-line": "scan-line 3s linear infinite",
        "rotate-scan": "rotate-scan 8s linear infinite",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

export default config