import type { Config } from "tailwindcss";

const config: Config = {
  content: ["./src/**/*.{ts,tsx}"],
  theme: {
    screens: { xs: "380px", sm: "640px", md: "768px", lg: "1024px", xl: "1280px", "2xl": "1536px" },
    extend: {
      colors: {
        forest: {
          950: "#06130C",
          900: "#0B2116",
          800: "#11301F",
          700: "#1A442E",
          600: "#245A3D",
          500: "#3A7653",
        },
        ivory: {
          50: "#FCFAF4",
          100: "#F6F2E7",
          200: "#ECE5D3",
          300: "#DCD1B8",
          400: "#BFB294",
        },
        charcoal: {
          950: "#0E0F0E",
          900: "#171817",
          800: "#232523",
          700: "#363936",
          600: "#4F534F",
          500: "#6B6F6A",
        },
        lime: {
          200: "#ECFBB8",
          300: "#DDF77A",
          400: "#C9EE42",
          500: "#B0D624",
          600: "#7E9C10",
        },
        clay: { 500: "#B4582F", 600: "#96441F" },
      },
      fontFamily: {
        display: ["var(--font-display)", "var(--font-body)", "serif"],
        body: ["var(--font-body)", "system-ui", "sans-serif"],
      },
      fontSize: {
        "mega": ["clamp(4.25rem, 19vw, 15rem)", { lineHeight: "1.08", letterSpacing: "-0.01em" }],
        "huge": ["clamp(2.75rem, 9vw, 7.5rem)", { lineHeight: "1.12" }],
        "big": ["clamp(2.1rem, 5.6vw, 4.5rem)", { lineHeight: "1.18" }],
        "lead": ["clamp(1.2rem, 2.3vw, 1.6rem)", { lineHeight: "1.75" }],
      },
      maxWidth: { prose: "42rem", page: "88rem" },
      transitionTimingFunction: { editorial: "cubic-bezier(0.22, 1, 0.36, 1)" },
      keyframes: {
        drift: { "0%,100%": { transform: "translateY(0)" }, "50%": { transform: "translateY(10px)" } },
        marquee: { from: { transform: "translateX(0)" }, to: { transform: "translateX(-50%)" } },
      },
      animation: {
        drift: "drift 2.4s ease-in-out infinite",
        marquee: "marquee 40s linear infinite",
      },
    },
  },
  plugins: [],
};

export default config;