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',
			},
			teal: {
				'50': '#eefbf5',
				'100': '#d6f5e5',
				'200': '#b1e9d0',
				'300': '#7ed7b5',
				'400': '#49be95',
				'500': '#27a27b',
				'600': '#188162',
				'700': '#136951',
				'800': '#125342',
				'900': '#104437',
				'950': '#08261f',
			},
		},
		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
	}
};