import type { Config } from "tailwindcss";

const config: Config = {
  content: ["./src/**/*.{ts,tsx}"],
  theme: {
    container: {
      center: true,
      padding: "1rem",
      screens: {
        "2xl": "1280px"
      }
    },
    extend: {
      colors: {
        border: "hsl(32 22% 86%)",
        input: "hsl(32 22% 86%)",
        ring: "hsl(157 63% 27%)",
        background: "hsl(42 43% 96%)",
        foreground: "hsl(205 32% 12%)",
        primary: {
          DEFAULT: "hsl(157 63% 27%)",
          foreground: "hsl(48 100% 98%)"
        },
        secondary: {
          DEFAULT: "hsl(25 69% 54%)",
          foreground: "hsl(48 100% 98%)"
        },
        muted: {
          DEFAULT: "hsl(36 28% 92%)",
          foreground: "hsl(211 15% 42%)"
        },
        accent: {
          DEFAULT: "hsl(194 52% 18%)",
          foreground: "hsl(48 100% 98%)"
        },
        card: {
          DEFAULT: "hsl(48 100% 99%)",
          foreground: "hsl(205 32% 12%)"
        },
        destructive: {
          DEFAULT: "hsl(6 72% 54%)",
          foreground: "hsl(48 100% 98%)"
        }
      },
      borderRadius: {
        xl: "1rem",
        "2xl": "1.5rem",
        "3xl": "2rem"
      },
      boxShadow: {
        glow: "0 24px 80px rgba(13, 52, 63, 0.15)",
        panel: "0 10px 30px rgba(23, 34, 45, 0.08)"
      },
      fontFamily: {
        sans: ['"Inter"', '"Segoe UI"', "sans-serif"],
        display: ['"Cal Sans"', '"Avenir Next"', '"Segoe UI"', "sans-serif"]
      },
      backgroundImage: {
        "hero-grid":
          "linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px)"
      }
    }
  },
  plugins: []
};

export default config;