import type { Config } from "tailwindcss";

const config: Config = {
  content: ["./src/**/*.{ts,tsx}"],
  theme: {
    extend: {
      colors: {
        // Premium dark base — không pure black
        bg: "#070815",          // deep ink
        panel: "#0c0e1a",       // base panel
        panel2: "#11142090",    // glass panel với alpha
        border: "#1c2235",
        borderHi: "#2a3550",
        ink: "#eef0f7",
        muted: "#7a83a0",
        accent: "#7c5cff",      // violet
        accent2: "#22d3ee",     // cyan
        ok: "#34d399",
        warn: "#fbbf24",
        bad: "#fb7185",
      },
      fontFamily: {
        sans: ["var(--font-geist-sans)", "ui-sans-serif", "system-ui", "sans-serif"],
        mono: ["var(--font-geist-mono)", "ui-monospace", "monospace"],
      },
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
        "accent-grad": "linear-gradient(135deg, #7c5cff 0%, #22d3ee 100%)",
        "accent-grad-soft": "linear-gradient(135deg, rgba(124,92,255,0.18) 0%, rgba(34,211,238,0.18) 100%)",
      },
      boxShadow: {
        glow: "0 0 24px -4px rgba(124,92,255,0.45)",
        "glow-cyan": "0 0 24px -4px rgba(34,211,238,0.45)",
        "card": "0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 32px -12px rgba(0,0,0,0.6)",
      },
      animation: {
        "aurora-shift": "aurora-shift 18s ease infinite",
        "shimmer": "shimmer 2s linear infinite",
      },
      keyframes: {
        "aurora-shift": {
          "0%, 100%": { transform: "translate(0%, 0%) rotate(0deg)" },
          "33%": { transform: "translate(8%, -6%) rotate(8deg)" },
          "66%": { transform: "translate(-6%, 4%) rotate(-6deg)" },
        },
        shimmer: {
          "0%": { backgroundPosition: "-200% 0" },
          "100%": { backgroundPosition: "200% 0" },
        },
      },
    },
  },
  plugins: [],
};

export default config;