import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      screens: {
        "4xl": "1921px",
        "3xl": "1650px",
        xs: "391px",
      },
      keyframes: {
        shimmer: {
          "0%": { backgroundPosition: "-200% 0" },
          "100%": { backgroundPosition: "200% 0" },
        },
        "fade-in": {
          "0%": { opacity: "0" },
          "100%": { opacity: "1" },
        },
        "scale-in": {
          "0%": { opacity: "0", transform: "scale(0.96)" },
          "100%": { opacity: "1", transform: "scale(1)" },
        },
        "slide-up": {
          "0%": { opacity: "0", transform: "translateY(8px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
        "gradient-shift": {
          "0%, 100%": { backgroundPosition: "0% 50%" },
          "50%": { backgroundPosition: "100% 50%" },
        },
      },
      animation: {
        shimmer: "shimmer 1.5s infinite",
        "fade-in": "fade-in 200ms ease-out",
        "scale-in": "scale-in 180ms cubic-bezier(0.16, 1, 0.3, 1)",
        "slide-up": "slide-up 220ms cubic-bezier(0.16, 1, 0.3, 1)",
        "gradient-shift": "gradient-shift 8s ease infinite",
      },
      colors: {
        // Brand
        primary: "#8C52FF",
        primaryDark: "#6F3BE0",
        primaryLight: "#A97DFF",
        secondary: "#FF5FB4", // repurposed to pink so violet->pink gradients work
        accent: "#FF5FB4",
        accentDark: "#E43F99",
        accentLight: "#FFA3D1",
        tertiary: "#8A8A8A",

        // Legacy aliases (kept so existing classes still compile)
        lightPrimary: "#F3EDFF",
        lightSecondary: "#FAFAFA",
        gray: "#B1B1B1",
        lightGray: "#E2E7E3",
        darkGray: "#727171",

        // Neutral ramp
        neutral: {
          50: "#FAFAFB",
          100: "#F4F4F6",
          200: "#E7E7EC",
          300: "#D4D4DA",
          400: "#A3A3AB",
          500: "#737380",
          600: "#52525B",
          700: "#3F3F46",
          800: "#27272A",
          900: "#18181B",
        },

        // Surface tokens for cards / glass
        surface: "#FFFFFF",
        surfaceElevated: "#FFFFFF",
        surfaceMuted: "#F6F5FA",
        surfaceSunken: "#F0EEF7",

        // Semantic statuses (keep original hex values under new names)
        success: "#10B981",
        warning: "#F59E0B",
        danger: "#EF4444",
        info: "#3B82F6",

        // Status pipeline colors (kept for backwards compat)
        unContacted: "#B0BEC5",
        waitingQuote: "#FFC107",
        quoteAvailable: "#2196F3",
        draftDeliverables: "#9C27B0",
        draftAvailable: "#00BCD4",
        postingDeliverables: "#FF5722",
        completionRequest: "#009688",
        closed: "#4AC101",
      },
      fontFamily: {
        sfPro: ["var(--font-inter)", "SF-PRO", "Inter", "system-ui", "sans-serif"],
        inter: ["var(--font-inter)", "Inter", "system-ui", "sans-serif"],
        display: [
          "var(--font-display)",
          "var(--font-inter)",
          "Plus Jakarta Sans",
          "Inter",
          "system-ui",
          "sans-serif",
        ],
      },
      fontSize: {
        xs: ["0.75rem", { lineHeight: "1.1rem" }],
        sm: ["0.875rem", { lineHeight: "1.25rem" }],
        base: ["1rem", { lineHeight: "1.6rem" }],
        lg: ["1.125rem", { lineHeight: "1.75rem" }],
        xl: ["1.25rem", { lineHeight: "1.85rem" }],
        "2xl": ["1.5rem", { lineHeight: "2rem", letterSpacing: "-0.01em" }],
        "3xl": ["1.875rem", { lineHeight: "2.35rem", letterSpacing: "-0.015em" }],
        "4xl": ["2.25rem", { lineHeight: "2.75rem", letterSpacing: "-0.02em" }],
        "5xl": ["3rem", { lineHeight: "3.25rem", letterSpacing: "-0.025em" }],
        "6xl": ["3.75rem", { lineHeight: "4rem", letterSpacing: "-0.03em" }],
        "7xl": ["4.5rem", { lineHeight: "4.75rem", letterSpacing: "-0.035em" }],
        "8xl": ["6rem", { lineHeight: "6.25rem", letterSpacing: "-0.04em" }],
      },
      borderRadius: {
        card: "20px",
        modal: "24px",
        pill: "9999px",
      },
      boxShadow: {
        soft: "0 2px 8px -2px rgba(24, 24, 27, 0.06), 0 4px 16px -4px rgba(140, 82, 255, 0.06)",
        float: "0 8px 24px -6px rgba(24, 24, 27, 0.08), 0 16px 40px -12px rgba(140, 82, 255, 0.10)",
        pop: "0 16px 48px -12px rgba(24, 24, 27, 0.14), 0 24px 64px -16px rgba(140, 82, 255, 0.18)",
        glass: "0 8px 32px -4px rgba(140, 82, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6)",
        "ring-primary": "0 0 0 4px rgba(140, 82, 255, 0.18)",
        "ring-accent": "0 0 0 4px rgba(255, 95, 180, 0.18)",
      },
      backgroundImage: {
        "brand-gradient": "linear-gradient(135deg, #8C52FF 0%, #FF5FB4 100%)",
        "brand-gradient-soft": "linear-gradient(135deg, rgba(140, 82, 255, 0.12) 0%, rgba(255, 95, 180, 0.12) 100%)",
        "brand-radial":
          "radial-gradient(at 20% 20%, rgba(140, 82, 255, 0.18) 0px, transparent 50%), radial-gradient(at 80% 80%, rgba(255, 95, 180, 0.18) 0px, transparent 50%)",
        "glass-sheen": "linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.55) 100%)",
      },
      backdropBlur: {
        xs: "2px",
      },
      writingMode: {
        "vertical-rl": "vertical-rl",
      },
    },
  },
  plugins: [],
};
export default config;