import aspectRatio from '@tailwindcss/aspect-ratio';
import containerQueries from '@tailwindcss/container-queries';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
import type { Config } from 'tailwindcss';

export default {
	content: ['./src/**/*.{html,js,svelte,ts}'],

	theme: {
		extend: {
			colors: { "primary-FestiveRed": {
				light: '#F28B82',    // Lightened version of #D32F2F
				DEFAULT: '#D32F2F',  // Original color
				dark: '#B71C1C',     // Darkened version of #D32F2F
			  },
			  "primary-JollyGreen": {
				light: '#66BB6A',    // Lightened version of #388E3C
				DEFAULT: '#388E3C',  // Original color
				dark: '#2E7D32',     // Darkened version of #388E3C
			  },
			  "primary-SnowyWhite": {
				light: '#FFFFFF',    // Pure white for even lighter version
				DEFAULT: '#F7F7F7',  // Original color
				dark: '#E0E0E0',     // Slightly darker version of #F7F7F7
			  },
			  "primary-GoldTinsel": {
				light: '#FFE082',    // Lightened version of #FFC107
				DEFAULT: '#FFC107',  // Original color
				dark: '#FFB300',     // Darkened version of #FFC107
			  },
			  "primary-SantaSuitBlack": {
				light: '#4F4F4F',    // Lightened version of #2C2C2C
				DEFAULT: '#2C2C2C',  // Original color
				dark: '#1C1C1C',     // Darkened version of #2C2C2C
			  },
			  "primary-CheesySweaterBlue": {
				light: '#7986CB',    // Lightened version of #3F51B5
				DEFAULT: '#3F51B5',  // Original color
				dark: '#303F9F',     // Darkened version of #3F51B5
			  },
			}
		}
	},

	plugins: [typography, forms, containerQueries, aspectRatio]
} satisfies Config;