/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./plugins/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        backgroundPrimary: {
          100: "#FFFBE6",
        },
        primary: {
          100: "#2189a818",
          200: "#2189a8ce",
          300: "#2ab0daa6",
          400: "#279fc4",
          500: "#2189A8",
          600: "#1C7A96",
          700: "#166B84",
          800: "#105C72",
          900: "#0A4D60",
        },

        secondary: {
          100: "#FDE9D9",
          200: "#FCCFB2",
          300: "#FABF8B",
          400: "#F8AE64",
          500: "#F79D3E",
          600: "#F68C17",
          700: "#E27600",
          800: "#B95B00",
          900: "#8C4000",
        },

        textMain: {
          100: "#444444",
        },
        mainDisable: {
          100: "#888888",
        },
        info: {
          100: "#2B91EF",
          200: "#0061bd",
        },
        danger: {
          100: "#FF2C2C",
        },
        body: {
          100: "#EEEEEE",
        },
      },

      typography: (theme) => ({
        DEFAULT: {
          css: {
            color: theme("colors.gray.700"),
            h1: {
              color: theme("colors.gray.900"),
              fontWeight: "700",
              fontSize: "1.7rem",
              marginBottom: "1rem",
            },
            h2: {
              color: theme("colors.gray.800"),
              fontWeight: "600",
              fontSize: "1.4rem",
              marginBottom: "1rem",
            },
            h3: {
              color: theme("colors.gray.700"),
              fontWeight: "600",
              fontSize: "1.2rem",
              marginBottom: "0.75rem",
            },
            h4: {
              color: theme("colors.gray.600"),
              fontWeight: "500",
              fontSize: ".9rem",
              marginBottom: "0.5rem",
            },
            h5: {
              color: theme("colors.gray.600"),
              fontWeight: "500",
              fontSize: ".9rem",
              marginBottom: "0.5rem",
            },
            h6: {
              color: theme("colors.gray.600"),
              fontWeight: "500",
              fontSize: ".9rem",
              marginBottom: "0.5rem",
            },
            p: {
              marginBottom: "1rem",
              lineHeight: "1.75rem",
              fontSize: "1rem",
            },
            a: {
              color: theme("colors.blue.600"),
              textDecoration: "underline",
              "&:hover": {
                color: theme("colors.blue.800"),
              },
            },
            ul: {
              listStyleType: "disc",
              paddingLeft: "1.25rem",
              marginBottom: "1rem",
            },
            ol: {
              listStyleType: "decimal",
              paddingLeft: "1.25rem",
              marginBottom: "1rem",
            },
            blockquote: {
              borderLeftColor: theme("colors.gray.300"),
              borderLeftWidth: "4px",
              fontStyle: "italic",
              paddingLeft: "1rem",
              color: theme("colors.gray.600"),
              marginBottom: "1rem",
            },
            code: {
              backgroundColor: theme("colors.gray.100"),
              padding: "0.25rem 0.5rem",
              borderRadius: "0.25rem",
              fontSize: "0.875rem",
            },
            pre: {
              backgroundColor: theme("colors.gray.800"),
              color: theme("colors.gray.100"),
              padding: "1rem",
              borderRadius: "0.5rem",
              overflowX: "auto",
            },
            // Add additional elements if needed...
          },
        },
      }),
    },

    screens: {
      xs: "290px",
      sm: "640px",
      // => @media (min-width: 640px) { ... }

      md: "768px",
      // => @media (min-width: 768px) { ... }

      lg: "1024px",
      // => @media (min-width: 1024px) { ... }

      xl: "1440px",
      // => @media (min-width: 1280px) { ... }

      "2xl": "1536px",
      // => @media (min-width: 1536px) { ... }
    },

    animation: {
      "infinite-scroll": "infinite-scroll 200s linear infinite",
    },

    keyframes: {
      "infinite-scroll": {
        from: { transform: "translateX(0)" },
        to: { transform: "translateX(-100%)" },
      },
    },
  },
  plugins: [
    require("@tailwindcss/typography"),
    // ...other plugins
  ],
  corePlugins: {
    backdropOpacity: false,
    backgroundOpacity: false,
    borderOpacity: false,
    divideOpacity: false,
    ringOpacity: false,
    textOpacity: false,
  },
};