import type { Config } from 'tailwindcss';

// Tailwind is used for layout/spacing utilities only.
// All colors are driven by CSS custom properties (semantic design tokens)
// defined by the theme system — never hard-coded here or in components.
export default {
	content: ['./src/**/*.{html,js,svelte,ts}'],
	theme: {
		extend: {
			fontFamily: {
				mono: ['var(--font-terminal)']
			},
			colors: {
				// Expose semantic tokens to Tailwind so utilities like `text-error`
				// resolve to the active theme's CSS variable.
				background: 'var(--color-background)',
				surface: 'var(--color-surface)',
				'surface-raised': 'var(--color-surface-raised)',
				border: 'var(--color-border)',
				'text-primary': 'var(--color-text-primary)',
				'text-secondary': 'var(--color-text-secondary)',
				'text-muted': 'var(--color-text-muted)',
				accent: 'var(--color-accent)',
				link: 'var(--color-link)',
				focus: 'var(--color-focus)',
				success: 'var(--color-success)',
				warning: 'var(--color-warning)',
				error: 'var(--color-error)',
				info: 'var(--color-info)'
			}
		}
	},
	plugins: []
} satisfies Config;