import type { Config } from 'tailwindcss';

// Fase 11: tag colours are picked at runtime from an 8-preset palette
// (see public.item_tags.color CHECK constraint). Tailwind cannot statically
// see the class names (they're built from the colour string), so safelist
// every (variant × intensity) combination the chip + dot use.
const TAG_COLORS = ['slate', 'red', 'amber', 'green', 'sky', 'indigo', 'pink', 'stone'];
const tagSafelist = TAG_COLORS.flatMap((c) => [
	`bg-${c}-100`,
	`text-${c}-700`,
	`ring-${c}-200`,
	`dark:bg-${c}-900/40`,
	`dark:text-${c}-200`,
	`dark:ring-${c}-700/50`,
	`bg-${c}-500`
]);

export default {
	content: ['./src/**/*.{html,js,svelte,ts}'],
	safelist: tagSafelist,
	// Fase 9.1: drive dark mode from <html data-theme="dark"> so the inline
	// anti-FOUC script in app.html can set the attribute synchronously before
	// the first paint. Existing `dark:` utilities keep working as-is.
	darkMode: ['selector', '[data-theme="dark"]'],
	theme: {
		extend: {
			fontFamily: {
				sans: ['Inter', 'system-ui', 'sans-serif']
			},
			colors: {
				// Semantic aliases — "The Monolith Editorial" surface hierarchy.
				// Use background shifts (never 1px borders) to separate major UI areas.
				background: 'rgb(var(--background) / <alpha-value>)',
				'surface-container-low': 'rgb(var(--surface-container-low) / <alpha-value>)',
				surface: 'rgb(var(--surface) / <alpha-value>)',
				'surface-raised': 'rgb(var(--surface-raised) / <alpha-value>)',
				// Text hierarchy
				'text-primary': 'rgb(var(--text-primary) / <alpha-value>)',
				'text-secondary': 'rgb(var(--text-secondary) / <alpha-value>)',
				'text-muted': 'rgb(var(--text-muted) / <alpha-value>)',
				// Only non-slate color allowed in the system
				destructive: 'rgb(var(--destructive) / <alpha-value>)'
			}
		}
	},
	plugins: []
} satisfies Config;
