/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./templates/*.html"],
    plugins: [require("@tailwindcss/typography")],
    variants: {
        typography: ["dark"],
    },
    theme: {
        fontFamily: {
            texts: ["Erode", "serif"],
            headings: ["Fira Sans", "sans-serif"],
            tags: ["ui-sans-serif", "sans-serif"],
        },
        extend: {
            // NOTE: this is for non-prose (so not Markdown rendered with typography plugin)
            colors: {
                // https://rosepinetheme.com/palette/
                "rp-dawn-base": "#faf4ed", // main background
                "rp-dawn-surface": "#fffaf3", // navigation background
                "rp-dawn-overlay": "#f2e9e1", // content background
                "rp-dawn-muted": "#9893a5",
                "rp-dawn-subtle": "#797593",
                "rp-dawn-text": "#575279", // text
                "rp-dawn-love": "#b4637a",
                "rp-dawn-gold": "#ea9d34",
                "rp-dawn-rose": "#d7827e",
                "rp-dawn-pine": "#286983",
                "rp-dawn-foam": "#56949f", // main site title
                "rp-dawn-iris": "#907aa9", // links
                "rp-dawn-highlight-low": "#f4ede8",
                "rp-dawn-highlight-med": "#dfdad9", // footer
                "rp-dawn-highlight-high": "#cecacd",
                "rp-moon-base": "#232136", // main background
                "rp-moon-surface": "#2a273f", // navigation background
                "rp-moon-overlay": "#393552", // content background
                "rp-moon-muted": "#6e6a86",
                "rp-moon-subtle": "#908caa",
                "rp-moon-text": "#e0def4",
                "rp-moon-love": "#eb6f92",
                "rp-moon-gold": "#f6c177",
                "rp-moon-rose": "#ea9a97",
                "rp-moon-pine": "#3e8fb0",
                "rp-moon-foam": "#9ccfd8", // main site title
                "rp-moon-iris": "#c4a7e7", // text,
                "rp-moon-highlight-low": "#2a283e",
                "rp-moon-highlight-med": "#44415a", // footer
                "rp-moon-highlight-high": "#56526e",
            },
            typography: (theme) => ({
                // NOTE: This is for prose (Markdown) in LIGHT mode
                DEFAULT: {
                    css: {
                        pre: null,
                        code: null,
                        "code::before": null,
                        "code::after": null,
                        "pre code": null,
                        "pre code::before": null,
                        "pre code::after": null,
                        // remove backticks from typography for inline code
                        "code::before": {
                            content: '""',
                        },
                        "code::after": {
                            content: '""',
                        },
                        color: theme("colors.rp-dawn-text"), // main text
                        a: {
                            color: theme("colors.rp-dawn-text"), // align w/ in.css
                            "text-decoration-color": theme(
                                "colors.rp-dawn-gold",
                            ), // align w/ in.css
                            "text-decoration-thickness": "2px", // align w/ in.css
                        },
                        "h1, h2, h3, h4, h5, h6": {
                            color: theme("colors.rp-dawn-text"),
                        },
                        blockquote: {
                            "border-color": theme("colors.rp-dawn-muted"),
                            "background-color": theme("colors.rp-dawn-overlay"),
                            color: theme("colors.rp-dawn-text"),
                        },
                        strong: {
                            color: theme("colors.rp-dawn-text"), // align w/ main text color
                            fontWeight: "800",
                        },
                    },
                },
                // NOTE: This is for prose (Markdown) in DARK mode
                dark: {
                    css: {
                        pre: null,
                        code: null,
                        "pre code": null,
                        color: theme("colors.rp-moon-iris"), // main text
                        a: {
                            color: theme("colors.rp-moon-iris"), // align w/ in.css
                            "text-decoration-color": theme(
                                "colors.rp-moon-pine",
                            ), // align w/ in.css
                            "text-decoration-thickness": "2px", // align w/ in.css
                        },
                        "h1, h2, h3, h4, h5, h6": {
                            color: theme("colors.rp-moon-love"),
                        },
                        blockquote: {
                            "border-color": theme("colors.rp-moon-overlay"),
                            "background-color": theme("colors.rp-moon-surface"),
                            color: theme("colors.rp-moon-text"),
                        },
                        strong: {
                            color: theme("colors.rp-moon-iris"), // align w/ main text color
                            fontWeight: "800",
                        },
                    },
                },
            }),
        },
    },
    corePlugins: {
        // preflight: false,
        divideStyle: true,
    },
};