import type { Config } from "tailwindcss";

const config: Config = {
  // Use data-theme attribute selector for dark mode instead of .dark class
  darkMode: ["selector", '[data-theme="dark"]'],
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}", "../../packages/ui/src/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-outfit)", "system-ui", "sans-serif"],
        mono: ["var(--font-fira-code)", "Cascadia Code", "monospace"],
      },
      colors: {
        // Expose Mosaic semantic tokens as Tailwind colors
        bg: "var(--bg)",
        "bg-deep": "var(--bg-deep)",
        "bg-mid": "var(--bg-mid)",
        surface: "var(--surface)",
        "surface-2": "var(--surface-2)",
        border: "var(--border)",
        text: "var(--text)",
        "text-2": "var(--text-2)",
        muted: "var(--muted)",
        primary: "var(--primary)",
        "primary-l": "var(--primary-l)",
        danger: "var(--danger)",
        success: "var(--success)",
        warn: "var(--warn)",
        purple: "var(--purple)",
      },
    },
  },
  plugins: [],
};

export default config;