import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./templates/**/*.{templ,html}",
    "./web/static/**/*.{html,js}",
    "./web/src/**/*.ts",
  ],
  safelist: [
    "theme-tokyo-night",
    "theme-dracula",
    "theme-nord",
    "theme-solarized-dark",
    "theme-monokai",
    "theme-one-dark-pro",
    "theme-material-dark",
    "theme-catppuccin-mocha",
    "theme-catppuccin-macchiato",
    "theme-catppuccin-frappe",
    "theme-catppuccin-latte",
  ],
  theme: {
    extend: {
      screens: {
        nav: "970px",
      },
      fontFamily: {
        sans: [
          "ui-sans-serif",
          "system-ui",
          "sans-serif",
          '"Noto Sans SC"',
          '"Noto Sans TC"',
          '"Noto Sans JP"',
          '"Noto Sans KR"',
          '"PingFang SC"',
          '"Microsoft YaHei"',
          '"Hiragino Sans"',
          '"Apple SD Gothic Neo"',
          "Apple Color Emoji",
          "Segoe UI Emoji",
          "Segoe UI Symbol",
          "Noto Color Emoji",
        ],
      },
      colors: {
        primary: {
          DEFAULT: "#7aa2f7",
          50: "#f0f9ff",
          100: "#e0f2fe",
          200: "#bae6fd",
          300: "#7dd3fc",
          400: "#38bdf8",
          500: "#0ea5e9",
          600: "#0284c7",
          700: "#0369a1",
          800: "#075985",
          900: "#0c4a6e",
        },
        "bg-primary": "var(--bg-primary)",
        "bg-secondary": "var(--bg-secondary)",
        "text-primary": "var(--text-primary)",
        "text-secondary": "var(--text-secondary)",
        accent: "var(--accent)",
        border: "var(--border)",
      },
      backgroundImage: {
        "wood-light": "url('/static/textures/wood-light.png')",
        "wood-dark": "url('/static/textures/wood-dark.png')",
        "wood-mahogany": "url('/static/textures/wood-mahogany.png')",
      },
      typography: ({ theme }) => ({
        invert: {
          css: {
            "--tw-prose-pre-bg": "var(--bg-secondary)",
            code: {
              backgroundColor: "var(--bg-primary)",
              color: "var(--text-primary)",
              fontWeight: "400",
            },
            "code::before": {
              content: '""',
            },
            "code::after": {
              content: '""',
            },
            "pre code": {
              backgroundColor: "transparent",
              color: "inherit",
            },
            pre: {
              backgroundColor: "var(--bg-secondary)",
              color: "var(--text-primary)",
            },
          },
        },
      }),
    },
  },
  plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
};

export default config;