/** @type {import('tailwindcss').Config} */
module.exports = {
	// Scope every Tailwind utility under the React mount node. This both raises
	// specificity (so utilities win over Chakra where intended) and prevents
	// Tailwind styles from leaking into the surrounding WordPress page/admin.
	important: '#ZenCommunityAppElement',
	// Prefix every utility with `tw-` so Tailwind classes can never collide with
	// existing Chakra/WordPress class names during the migration period.
	prefix: 'tw-',
	content: [
		'./dev_zencommunity/**/*.{js,jsx}',
	],
	// Preflight is Tailwind's global CSS reset — disabled so it can't clobber
	// the existing Chakra UI or WordPress theme styles.
	corePlugins: {
		preflight: false,
	},
	theme: {
		extend: {
			// Map the app's existing theme variables so Tailwind classes follow
			// the live light/dark theme automatically (no `dark:` variant needed).
			colors: {
				'zc-bg': 'var(--zencom-background)',
				'zc-body': 'var(--zencom-body-background)',
				'zc-fg': 'var(--zencom-font-color)',
				'zc-muted': 'var(--zencom-font-muted)',
				'zc-primary': 'var(--zencom-primary-color)',
				'zc-secondary': 'var(--zencom-secondary-color)',
				'zc-border': 'var(--zencom-border-color)',
				'zc-warning': 'var(--zencom-warning)',
				'zc-gray': 'var(--zencom-gray-color)',
			},
			boxShadow: {
				zc: 'var(--zencom-shadow)',
			},
			fontFamily: {
				zc: 'var(--zencom-font)',
			},
		},
	},
	plugins: [],
};
