/** @type {import('tailwindcss').Config} */

const plugin = require('tailwindcss/plugin');                                                       
module.exports = {
    darkMode: "class",
    content: ["./src/**/*.{cljs,clj,cljc}",
            "./node_modules/flowbite/**/*.js"],
    theme: {
        extend: {
            "keyframes": {
                shake: {
                    '0%': { transform: 'translateX(0px)' },
                    '12.5%': { transform: 'translateX(-5px)' },
                    '25%': { transform: 'translateX(0px)' },
                    '37.5%': { transform: 'translateX(5px)' },
                    '50%': { transform: 'translateX(0px)' },
                    '62.5%': { transform: 'translateX(-5px)' },
                    '75%': { transform: 'translateX(5px)' },
                    '87.5%': { transform: 'translateX(5px)' },
                    '100%': { transform: 'translateX(0px)' },
                },
                gentleGrow: {
                    "0%": {
                        "transform": "scale(1.0)",
                        "animation-timing-function": "cubic-bezier(0.8, 0, 1, 1)"
                    },
                    "50%": {
                        "transform": "scale(1.1)",
                        "animation-timing-function": "cubic-bezier(0, 0, 0.2, 1)"
                    },
                    "100%": {
                        "transform": "scale(1.0)",
                        "animation-timing-function": "cubic-bezier(0.8, 0, 1, 1)"
                    }
                },
                slideUp: {
                    '0%': { transform: 'translateY(20px)', opacity: '0' },
                    '100%': { transform: 'translateY(0)', opacity: '1' },

                }
            },
            animation: {
                'shake': 'shake 0.5s ease-out 1',
                "gg": "gentleGrow 1s infinite",
                 "slideUp": 'slideUp 0.5s ease-out forwards'
            },
            "fontFamily": {
                "sans": ["Inter", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"],
                "mono": ["JetBrains Mono", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"]
            },
            "colors": {
                "green": {
                    "50": "#f0fdf4",
                    "100": "#dcfce7",
                    "200": "#bbf7d0",
                    "300": "#86efac",
                    "400": "#4ade80",
                    "500": "#16a34a",
                    "600": "#15803d",
                    "700": "#166534",
                    "800": "#14532d",
                    "900": "#052e16"
                },
                "primary": {
                    "50": "#f0fdf4",
                    "100": "#dcfce7",
                    "200": "#bbf7d0",
                    "300": "#86efac",
                    "400": "#4ade80",
                    "500": "#16a34a",
                    "600": "#15803d",
                    "700": "#166534",
                    "800": "#14532d",
                    "900": "#052e16"
                },
                "blue": {
                    "50": "#eff6ff",
                    "100": "#dbeafe",
                    "200": "#bfdbfe",
                    "300": "#93c5fd",
                    "400": "#60a5fa",
                    "500": "#3b82f6",
                    "600": "#2563eb",
                    "700": "#1d4ed8",
                    "800": "#1e40af",
                    "900": "#1e3a8a"
                },
                "secondary": {
                    "50": "#f0fdf4",
                    "100": "#dcfce7",
                    "200": "#bbf7d0",
                    "300": "#86efac",
                    "400": "#4ade80",
                    "500": "#16a34a",
                    "600": "#15803d",
                    "700": "#166534",
                    "800": "#14532d",
                    "900": "#052e16"
                },
                "red": {
                    "50": "#fef2f2",
                    "100": "#fee2e2",
                    "200": "#fecaca",
                    "300": "#fca5a5",
                    "400": "#f87171",
                    "500": "#ef4444",
                    "600": "#dc2626",
                    "700": "#b91c1c",
                    "800": "#991b1b",
                    "900": "#7f1d1d"
                },
                "orange": {
                    "50": "#fff7ed",
                    "100": "#ffedd5",
                    "200": "#fed7aa",
                    "300": "#fdba74",
                    "400": "#fb923c",
                    "500": "#f97316",
                    "600": "#ea580c",
                    "700": "#c2410c",
                    "800": "#9a3412",
                    "900": "#7c2d12"
                }

            }
        }
    } ,
    plugins: [
        require('flowbite/plugin'),
        plugin(function ({ addVariant }) {
            addVariant('htmx-settling', ['&.htmx-settling', '.htmx-settling &'])
            addVariant('htmx-request', ['&.htmx-request', '.htmx-request &'])
            addVariant('htmx-swapping', ['&.htmx-swapping', '.htmx-swapping &'])
            addVariant('htmx-added', ['&.htmx-added', '.htmx-added &'])
        }),
    ]
}