import type { Config } from 'tailwindcss';

export default {
	content: ['./src/**/*.{html,js,svelte,ts}'],
	darkMode: 'class',
	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;