import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./app/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        base: {
          950: "#050B18",
          900: "#0A1428",
          800: "#0F1B33",
          700: "#152442",
          600: "#1D2F52",
        },
        blue: {
          400: "#6FA8FF",
          500: "#3B7BFF",
          600: "#2F63EB",
          700: "#2450C4",
        },
        green: {
          300: "#6EE7B7",
          400: "#34D399",
          500: "#12B76A",
          600: "#0E9B5A",
        },
        ink: {
          100: "#F5F7FB",
          300: "#C4CDDD",
          500: "#93A1BD",
          700: "#5C6884",
        },
      },
      fontFamily: {
        display: ["var(--font-unbounded)", "sans-serif"],
        body: ["var(--font-manrope)", "sans-serif"],
        mono: ["var(--font-jetbrains)", "monospace"],
      },
      backgroundImage: {
        "grid-fade":
          "radial-gradient(circle at 20% 20%, rgba(59,123,255,0.14), transparent 40%), radial-gradient(circle at 80% 0%, rgba(18,183,106,0.10), transparent 35%)",
      },
      boxShadow: {
        glow: "0 0 0 1px rgba(111,168,255,0.15), 0 20px 60px -20px rgba(47,99,235,0.35)",
        "glow-green":
          "0 0 0 1px rgba(110,231,183,0.15), 0 20px 60px -20px rgba(18,183,106,0.35)",
      },
      keyframes: {
        "pulse-slow": {
          "0%, 100%": { opacity: "0.35" },
          "50%": { opacity: "0.8" },
        },
        float: {
          "0%, 100%": { transform: "translateY(0px)" },
          "50%": { transform: "translateY(-8px)" },
        },
      },
      animation: {
        "pulse-slow": "pulse-slow 4s ease-in-out infinite",
        float: "float 6s ease-in-out infinite",
      },
    },
  },
  plugins: [],
};
export default config;