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: {
        // Semantic surface tokens (page bg, cards, raised layers)
        surface: {
          DEFAULT: "var(--bg-primary)",
          raised: "var(--bg-secondary)",
          hover: "var(--surface-hover)",
          overlay: "var(--surface-overlay)",
        },
        // Text tokens
        content: {
          DEFAULT: "var(--text-primary)",
          muted: "var(--text-secondary)",
        },
        // Accent / brand
        brand: {
          DEFAULT: "var(--accent)",
          muted: "var(--accent-muted)",
        },
        // Borders / hairlines
        line: {
          DEFAULT: "var(--border)",
          strong: "var(--border-strong)",
        },
        // Status colors (theme-aware via vars, fall back to fixed)
        success: "var(--status-success)",
        warning: "var(--status-warning)",
        danger: "var(--status-danger)",
        info: "var(--status-info)",
      },
      borderRadius: {
        xl: "0.875rem",
        "2xl": "1.25rem",
      },
      boxShadow: {
        card: "var(--shadow-card)",
        "card-hover": "var(--shadow-card-hover)",
        pop: "var(--shadow-pop)",
        bar: "var(--shadow-bar)",
      },
      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;