import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        brand: {
          50:  "#f0f7ff",
          100: "#e0efff",
          200: "#bae0ff",
          300: "#7cc7ff",
          400: "#35a9ff",
          500: "#0b8cff",
          600: "#006fe0",
          700: "#0057b4",
          800: "#084a8f",
          900: "#0d3f75",
          950: "#08264c",
        },
        accent: {
          DEFAULT: "#7c5cff",
          muted: "#5b44c0",
        },
        surface: {
          DEFAULT: "#ffffff",
          dark: "#0b1220",
        },
        ink: {
          DEFAULT: "#0f172a",
          muted: "#64748b",
        },
        border: "#e2e8f0",
      },
      fontFamily: {
        sans: [
          "Inter",
          "ui-sans-serif",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "Roboto",
          "sans-serif",
        ],
        mono: ["JetBrains Mono", "Menlo", "ui-monospace", "monospace"],
      },
      boxShadow: {
        soft: "0 2px 10px -2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04)",
        card: "0 1px 2px rgba(15,23,42,0.04), 0 4px 20px -8px rgba(15,23,42,0.08)",
      },
      keyframes: {
        "fade-in": {
          "0%": { opacity: "0", transform: "translateY(4px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
      },
      animation: {
        "fade-in": "fade-in 180ms ease-out both",
      },
    },
  },
  plugins: [],
};

export default config;