import colors from "tailwindcss/colors";

/** @type {import("tailwindcss").Config} */
export default {
	content: ["./src/**/*.{html,js,svelte,ts}"],
	theme: {
		extend: {
			fontFamily: {
				aladin: ["Aladin", "sans-serif"]
			}
		},
		colors: {
			transparent: "transparent",
			current: "currentColor",
			black: colors.black,
			white: colors.white,
			blue: {
				50: "#f3f4fb",
				100: "#e3e6f6",
				200: "#ced5ef",
				300: "#acb8e4",
				400: "#8495d6",
				500: "#6775ca",
				600: "#5158bb",
				700: "#494bac",
				800: "#41408d",
				900: "#383870",
				950: "#252546"
			},
			coral: {
				'50': '#fff1f1',
				'100': '#ffe0e0',
				'200': '#ffc5c5',
				'300': '#ff9e9d',
				'400': '#ff6665',
				'500': '#fe4a49',
				'600': '#ec1716',
				'700': '#c70f0e',
				'800': '#a41110',
				'900': '#881514',
				'950': '#4a0505',
			},
			'spring': {
				'50': '#f5faf3',
				'100': '#e7f5e3',
				'200': '#d0e9c9',
				'300': '#9cd08f',
				'400': '#7dbb6d',
				'500': '#599f48',
				'600': '#458237',
				'700': '#39672e',
				'800': '#305328',
				'900': '#294423',
				'950': '#12240f',
			},
		},
		screens: {
			sm: "640px",
			md: "768px",
			lg: "1024px",
            xl: "1180px",
			// >xl removed as site isn't
			// that dense https://tailwindcss.com/docs/screens
		}
	},
	plugins: [],
	safelist: [
		// this is pretty sensible, and depended on in src/routes/colors/Color.svelte
		{ pattern: /bg-.+/ }
	],
    corePlugins: {
        container: false
    }
};