module.exports = {
  content: ["src/**/*.{ts,html,css}"],
  theme: {
    extend: {
      colors: {
        link: "#1d4ed8",       // blue-700
        linkHover: "#2563eb",  // blue-600
      },
      typography: (theme) => ({
        DEFAULT: {
          css: {
            h1: {
              fontSize: "1.5rem",
              fontWeight: "700",
              lineHeight: "1.1",
              margin: "0px",
            },
            h2: {
              fontSize: "1.25rem",
              fontWeight: "600",
              lineHeight: "1.15",
              margin: "0px",
            },
            h3: { fontSize: "1.125rem", fontWeight: "500", lineHeight: "1.2" },
            h4: { fontSize: "1rem", fontWeight: "500", lineHeight: "1.25" },
            blockquote: { borderLeftColor: "#3b82f6", color: "#374151", lineHeight: "1.5" },
            pre: {
              backgroundColor: "#f3f4f6",
              borderRadius: "0.5rem",
              padding: "0.75rem",
              lineHeight: "1.4",
            },
            p: { lineHeight: "1.1" },
            a: {
              color: theme("colors.link"),
              "&:hover": {
                color: theme("colors.linkHover"),
                textDecoration: "underline",
              },
            },
          },
        },
      }),
    },
  },
  plugins: [require("@tailwindcss/typography")],
};