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',
                '970': '#1f0202',
			},
			teal: {
				'50': '#eefbf5',
				'100': '#d6f5e5',
				'200': '#b1e9d0',
				'300': '#7ed7b5',
				'400': '#49be95',
				'500': '#27a27b',
				'600': '#188162',
				'700': '#136951',
				'800': '#125342',
				'900': '#104437',
				'950': '#08261f',
			},
			zinc: {
				50: '#fafafa',
				100: '#f4f4f5',
				200: '#e4e4e7',
				300: '#d4d4d8',
				400: '#a1a1aa',
				500: '#71717a',
				600: '#52525b',
				700: '#3f3f46',
				800: '#27272a',
				900: '#18181b',
				950: '#09090b',
			},
		},
		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
	}
};