// Set the Preflight flag based on the build target.
const includePreflight = 'editor' === process.env._TW_TARGET ? false : true;

module.exports = {
	presets: [
		// Manage Tailwind Typography's configuration in a separate file.
		require('./tailwind-typography.config.js'),
	],
	content: [
		// Ensure changes to PHP files and `theme.json` trigger a rebuild.
		'./theme/**/*.php',
		'./theme/theme.json',
	],
	safelist: ['aspect-video', 'aspect-square'],
	theme: {
		colors: {
			orange: '#D77D24',
			orangeLight: '#FA9800',
			neutral: '#151828',
			white: '#ffffff',
			black: '#000000',
			gray: {
				900: '#151828',
				100: '#ebeeec',
			},
			green: '#2E5440',
			red: '#E26349',
			yellow: '#F6CE96',

			beige: '#FFF9F0',
			blue: {
				400: '#2B394C',
				500: '#151828',
				600: '#111428',
			},
		},
		fontSize: {
			xs: [
				'1rem',
				{
					lineHeight: '1.2',
				},
			], //16
			sm: [
				'1.125rem',
				{
					lineHeight: '1.2',
				},
			], //18
			base: [
				'1.25rem',
				{
					lineHeight: '1.2',
				},
			], //20
			lg: [
				'1.375rem',
				{
					lineHeight: '1.2',
				},
			], //22
			xl: [
				'1.875rem',
				{
					lineHeight: '1.2',
				},
			], //30
			'2xl': [
				'2.125rem',
				{
					lineHeight: '1.2',
				},
			], //34
			'3xl': [
				'2.5rem',
				{
					lineHeight: '1.2',
				},
			], //40
		},
		container: {
			center: true,
			padding: {
				DEFAULT: '1.5rem',
				md: '1rem',
			},
		},
		fontFamily: {
			serif: ['Alice', 'serif'],
			sans: ['Barlow Condensed', 'sans-serif'],
			body: ['Barlow Condensed', 'sans-serif'],
		},

		extend: {},
	},
	corePlugins: {
		// Disable Preflight base styles in builds targeting the editor.
		preflight: includePreflight,
	},
	plugins: [
		// Extract colors and widths from `theme.json`.
		require('@_tw/themejson')(require('../theme/theme.json')),

		// Add Tailwind Typography.
		require('@tailwindcss/typography'),

		// Uncomment below to add additional first-party Tailwind plugins.
		// require('@tailwindcss/forms'),
		// require('@tailwindcss/aspect-ratio'),
		// require('@tailwindcss/container-queries'),
	],
};
