/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./themes/**/layouts/**/*.html",
    "./content/**/layouts/**/*.html",
    "./layouts/**/*.html",
    "./content/**/*.html",
  ],
  theme: {
    fontFamily: {
      custom: ["Inter", "sans-serif"],
    },
    colors: {
      transparent: "transparent",
      current: "currentColor",
      salmon: "#FA765B",
      forest: "#0A4D50",
      "almost-white": "#F5F5F5",
      grayish: "#F5F5F5",
      white: "#FFFFFF",
      black: "#000000",
    },
    maxWidth: {
      "4xl": "960",
    },
    maxWidth: ({ theme, breakpoints }) => ({
      none: "none",
      0: "0rem",
      xs: "20rem",
      sm: "24rem",
      md: "28rem",
      lg: "32rem",
      xl: "36rem",
      "2xl": "42rem",
      "3xl": "48rem",
      "4xl": "60rem",
      "5xl": "64rem",
      "6xl": "72rem",
      "7xl": "80rem",
      full: "100%",
      min: "min-content",
      max: "max-content",
      fit: "fit-content",
      prose: "65ch",
      ...breakpoints(theme("screens")),
    }),
    typography: (theme) => ({
      DEFAULT: {
        css: {
          color: theme("colors.forest"),
          p: {
            "margin-bottom": "1rem",
            "line-height": "22.4px",
          },
          h1: {
            "font-style": "normal",
            "font-weight": 500,
            "font-size": "28px",
            "line-height": "130%",
            "margin-bottom": "14px",
          },
          h2: {
            "font-style": "normal",
            "font-weight": 500,
            "font-size": "24px",
            "line-height": "130%",
            "margin-bottom": "10px",
          },
          h3: {
            "font-style": "normal",
            "font-weight": 500,
            "font-size": "20px",
            "line-height": "120%",
            "margin-bottom": "8px",
          },
        },
      },
    }),
    extend: {},
  },
  "container-small": {
    // you can configure the container to be centered
    center: true,

    // or have default horizontal padding
    padding: "1rem",

    // default breakpoints but with 40px removed
    screens: {
      sm: "600px",
      md: "728px",
      lg: "984px",
      xl: "1140px",
    },
  },
  plugins: [require("@tailwindcss/typography")],
};