const colors = require("tailwindcss/colors");
const defaultTheme = require("tailwindcss/defaultTheme");
const typography = require("./tailwind-typography-styles.cjs");

const { themeVariants, prefersDark, prefersLight } = require("tailwindcss-theme-variants");

module.exports = {
	mode: "jit",
	purge: ["./src/**/*.{html,js,md,svelte,svx,ts}"],
	theme: {
		extend: {
			colors: {
				gray: colors.trueGray,
				pink: colors.pink,
			},

			fontFamily: {
				sans: ["'Crimson Text'", ...defaultTheme.fontFamily.sans],
				heading: ["'Crimson Text'", ...defaultTheme.fontFamily.serif],
			},

			maxWidth: {
				prose: "42rem",
			},

			typography,
		},
	},
	plugins: [
		require("@tailwindcss/typography"),
		themeVariants({
			themes: {
				light: {
					mediaQuery: prefersLight,
					semantics: {
						colors: {
							"primary": "white",
							"primary-dark": "gray-100",

							"on-primary": "gray-900",
							"on-primary-weak": "gray-600",
							"on-primary-faint": "gray-400",


							"accent": "pink-600",
							"accent-vivid": "pink-400",
							"accent-strong": "pink-800",
							
							"on-accent": "black",
						},
					},
				},
				dark: {
					mediaQuery: prefersDark,
					semantics: {
						colors: {
							"primary": "gray-900",
							"primary-dark": "black",
							
							"on-primary": "white",
							"on-primary-weak": "gray-400",
							"on-primary-faint": "gray-600",


							"accent": "pink-400",
							"accent-vivid": "pink-600",
							"accent-strong": "pink-200",
							
							"on-accent": "white",
						},
					},
				},
			},
			fallback: "compact",
		}),
	],
};