/** @type {import('tailwindcss').Config} */
const colors = require("tailwindcss/colors");

module.exports = {
  safelist: [
    { pattern: /^term-/ },
  ],
  content: [
    "./docs/*.html",
    "./blog/templates/**/*.html",
    "./blog/posts/**/*.md",
    "./status/src/**/*.ts",
  ],
  darkMode: ['selector', '[data-theme="dark"]'],
  theme: {
    container: {
      padding: "2rem",
      center: true,
      screens: {
        sm: "500px",
        md: "600px",
        lg: "800px",
        xl: "1000px",
        "2xl": "1200px",
      },
    },
    extend: {
      fontFamily: {
        sans: ["InterVariable", "system-ui", "sans-serif", "ui-sans-serif"],
        mono: [
          "IBMPlexMono",
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "Monaco",
          "Consolas",
          "Liberation Mono",
          "Courier New",
          "monospace",
        ],
      },
      typography: {
        DEFAULT: {
          css: {
            maxWidth: "none",
            pre: {
              "@apply font-normal text-black bg-gray-50 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 border":
                {},
            },
            code: {
              "@apply font-normal font-mono p-1 rounded text-black bg-gray-100 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700":
                {},
            },
            "code::before": {
              content: '""',
            },
            "code::after": {
              content: '""',
            },
            blockquote: {
              quotes: "none",
              fontWeight: "400",
              "@apply text-gray-500 dark:text-gray-400": {},
            },
            "h1, h2, h3, h4": {
              "@apply mt-4 mb-2": {},
            },
            h1: {
              "@apply mt-3 pb-3 border-b border-gray-300 dark:border-gray-600":
                {},
            },
            h2: {
              "@apply mt-3 pb-3 border-b border-gray-200 dark:border-gray-700":
                {},
            },
            h3: {
              "@apply mt-2": {},
            },
            "img, video": {
              "@apply rounded border border-gray-200 dark:border-gray-700": {},
            },
          },
        },
      },
      gridTemplateColumns: {
        14: "repeat(14, minmax(0, 1fr))",
        28: "repeat(28, minmax(0, 1fr))",
      },
    },
  },
  plugins: [require("@tailwindcss/typography"), require("tailwindcss-animated")],
};