import type { Config } from "tailwindcss";
import defaultTheme from "tailwindcss/defaultTheme";

export default {
  content: [
    "./app/components/**/*.{js,vue,ts}",
    "./app/layouts/**/*.vue",
    "./app/pages/**/*.vue",
    "./app/plugins/**/*.{js,ts}",
    "./app/app.vue",
    "./app/error.vue",
    "./app/**/*.{js,vue,ts}",
    "./content/**/*.{md,mdc,json,yml,yaml}",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Inter var", ...defaultTheme.fontFamily.sans],
        serif: ["Crimson Text", "Georgia", ...defaultTheme.fontFamily.serif],
      },
      typography: ({ theme }) => ({
        DEFAULT: {
          css: {
            fontFamily: "'Crimson Text', Georgia, serif",
            fontSize: "1.125rem",
            lineHeight: "1.8",
            color: theme("colors.gray.900"),
            maxWidth: "none",
            h1: {
              fontFamily: "'Crimson Text', Georgia, serif",
              fontWeight: "700",
              fontSize: "2.5rem",
              marginTop: "2rem",
              marginBottom: "1rem",
              lineHeight: "1.2",
            },
            h2: {
              fontFamily: "'Crimson Text', Georgia, serif",
              fontWeight: "600",
              fontSize: "2rem",
              marginTop: "1.75rem",
              marginBottom: "0.75rem",
              lineHeight: "1.3",
            },
            h3: {
              fontFamily: "'Crimson Text', Georgia, serif",
              fontWeight: "600",
              fontSize: "1.5rem",
              marginTop: "1.5rem",
              marginBottom: "0.5rem",
              lineHeight: "1.4",
            },
            p: {
              marginTop: "1.25rem",
              marginBottom: "1.25rem",
              fontSize: "1.125rem",
              lineHeight: "1.8",
              color: theme("colors.gray.700"),
            },
            li: {
              marginTop: "0.5rem",
              marginBottom: "0.5rem",
              fontSize: "1.125rem",
              lineHeight: "1.8",
            },
            "ul > li": {
              paddingLeft: "1.75rem",
            },
            "ol > li": {
              paddingLeft: "1.75rem",
            },
            "ol li::marker": {
              color: theme("colors.gray.400"),
              fontWeight: "600",
            },
            "ul li::marker": {
              color: theme("colors.gray.400"),
            },
            a: {
              color: theme("colors.blue.600"),
              textDecoration: "underline",
              fontWeight: "500",
              "&:hover": {
                color: theme("colors.blue.800"),
              },
            },
            strong: {
              fontWeight: "700",
            },
            code: {
              fontFamily:
                "'SFMono-Regular', ui-monospace, 'JetBrains Mono', monospace",
              fontSize: "0.875em",
              fontWeight: "500",
              backgroundColor: theme("colors.gray.100"),
              padding: "0.15em 0.35em",
              borderRadius: theme("borderRadius.lg"),
            },
            "code::before": {
              content: '""',
            },
            "code::after": {
              content: '""',
            },
            blockquote: {
              fontStyle: "italic",
              borderLeftColor: theme("colors.gray.300"),
              borderLeftWidth: "0.25rem",
              paddingLeft: "1rem",
              marginTop: "1.5rem",
              marginBottom: "1.5rem",
              color: theme("colors.gray.600"),
            },
            pre: {
              fontFamily:
                "'SFMono-Regular', ui-monospace, 'JetBrains Mono', monospace",
              backgroundColor: theme("colors.gray.100"),
              borderRadius: theme("borderRadius.xl"),
              padding: "1.5rem",
              color: theme("colors.gray.800"),
            },
            hr: {
              borderColor: theme("colors.gray.200"),
            },
          },
        },
        lg: {
          css: {
            fontSize: "1.25rem",
            lineHeight: "1.8",
            p: {
              fontSize: "1.25rem",
              lineHeight: "1.8",
            },
            li: {
              fontSize: "1.25rem",
              lineHeight: "1.8",
            },
            h1: {
              fontSize: "3rem",
            },
            h2: {
              fontSize: "2.25rem",
            },
            h3: {
              fontSize: "1.75rem",
            },
          },
        },
        invert: {
          css: {
            color: theme("colors.gray.100"),
            h1: {
              color: theme("colors.gray.100"),
            },
            h2: {
              color: theme("colors.gray.100"),
            },
            h3: {
              color: theme("colors.gray.100"),
            },
            h4: {
              color: theme("colors.gray.100"),
            },
            h5: {
              color: theme("colors.gray.100"),
            },
            h6: {
              color: theme("colors.gray.100"),
            },
            strong: {
              color: theme("colors.gray.100"),
            },
            a: {
              color: theme("colors.blue.400"),
              "&:hover": {
                color: theme("colors.blue.300"),
              },
            },
            blockquote: {
              borderLeftColor: theme("colors.gray.700"),
              color: theme("colors.gray.300"),
            },
            code: {
              color: theme("colors.gray.100"),
              backgroundColor: theme("colors.gray.800"),
            },
            pre: {
              backgroundColor: theme("colors.gray.800"),
              color: theme("colors.gray.100"),
            },
            hr: {
              borderColor: theme("colors.gray.700"),
            },
          },
        },
      }),
    },
  },
} satisfies Config;