import type { Config } from "tailwindcss";

const config: Config = {
  content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
  theme: {
    extend: {
      colors: {
        // layered near-black surfaces with a cool undertone
        surface: {
          950: "#07080c",
          900: "#0b0d14",
          850: "#10131c",
          800: "#161a26",
          750: "#1c2130",
          700: "#252b3d",
          600: "#323a52",
          500: "#454e6b",
        },
        // alias kept so legacy `ink-*` classes still resolve
        ink: {
          50: "#e6e9f0",
          950: "#07080c",
          900: "#0b0d14",
          850: "#10131c",
          800: "#161a26",
          750: "#1c2130",
          700: "#252b3d",
          600: "#323a52",
        },
        // indigo → violet primary
        brand: {
          50: "#eef2ff",
          200: "#c7d2fe",
          300: "#a5b4fc",
          400: "#818cf8",
          500: "#6366f1",
          600: "#4f46e5",
          700: "#4338ca",
        },
        // cyan/teal secondary accent
        accent: {
          300: "#67e8f9",
          400: "#22d3ee",
          500: "#06b6d4",
        },
        emerald: { 400: "#34d399", 500: "#10b981" },
      },
      fontFamily: {
        sans: ["var(--font-sans)", "system-ui", "sans-serif"],
        mono: ["ui-monospace", "SFMono-Regular", "Menlo", "monospace"],
      },
      boxShadow: {
        glow: "0 0 0 1px rgba(99,102,241,0.25), 0 8px 40px -8px rgba(99,102,241,0.45)",
        "glow-accent": "0 8px 40px -8px rgba(34,211,238,0.4)",
        card: "0 1px 0 0 rgba(255,255,255,0.04) inset, 0 12px 32px -12px rgba(0,0,0,0.7)",
        soft: "0 8px 30px -10px rgba(0,0,0,0.6)",
      },
      backgroundImage: {
        "grid-faint":
          "linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px)",
        "radial-brand":
          "radial-gradient(60% 50% at 50% 0%, rgba(99,102,241,0.14) 0%, transparent 70%)",
        "sheen":
          "linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%)",
      },
      keyframes: {
        "fade-up": {
          "0%": { opacity: "0", transform: "translateY(8px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
        "fade-in": {
          "0%": { opacity: "0" },
          "100%": { opacity: "1" },
        },
        "slide-in": {
          "0%": { opacity: "0", transform: "translateX(16px)" },
          "100%": { opacity: "1", transform: "translateX(0)" },
        },
        shimmer: { "100%": { transform: "translateX(100%)" } },
        "pulse-soft": {
          "0%, 100%": { opacity: "1" },
          "50%": { opacity: "0.5" },
        },
        float: {
          "0%, 100%": { transform: "translateY(0)" },
          "50%": { transform: "translateY(-4px)" },
        },
      },
      animation: {
        "fade-up": "fade-up 0.35s cubic-bezier(0.22,1,0.36,1)",
        "fade-in": "fade-in 0.4s ease-out",
        "slide-in": "slide-in 0.3s cubic-bezier(0.22,1,0.36,1)",
        "pulse-soft": "pulse-soft 2s ease-in-out infinite",
        float: "float 4s ease-in-out infinite",
      },
    },
  },
  plugins: [],
};

export default config;