/**
 * Shared Tailwind preset. Consuming apps do:
 *   // tailwind.config.js
 *   module.exports = {
 *     presets: [require("@jason/ui-kit/preset")],
 *     content: [
 *       "./src/**\/*.{ts,tsx}",
 *       "./node_modules/@jason/ui-kit/dist/**\/*.js"  // so component classes aren't purged
 *     ],
 *   };
 *
 * Colors are driven by CSS variables (see styles/globals.css) so light/dark and
 * per-app rebranding work without recompiling the preset.
 */
const v = (name) => `hsl(var(${name}) / <alpha-value>)`;

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  theme: {
    extend: {
      colors: {
        bg: v("--bg"),
        surface: v("--surface"),
        "surface-2": v("--surface-2"),
        border: v("--border"),
        input: v("--border"),
        ring: v("--brand"),
        text: v("--text"),
        muted: v("--muted"),
        brand: { DEFAULT: v("--brand"), bright: v("--brand-bright"), dark: v("--brand-dark") },
        success: v("--success"),
        warning: v("--warning"),
        danger: v("--danger"),
        info: v("--info"),
      },
      fontFamily: {
        display: ['"Montserrat"', "system-ui", "sans-serif"],
        sans: ['"Open Sans"', "system-ui", "sans-serif"],
        mono: ['"JetBrains Mono"', "ui-monospace", "monospace"],
      },
      borderRadius: { sm: "6px", DEFAULT: "10px", md: "10px", lg: "14px", xl: "20px" },
      boxShadow: {
        sm: "0 1px 2px 0 rgb(20 16 18 / 0.20)",
        DEFAULT: "0 4px 12px -2px rgb(20 16 18 / 0.28), 0 2px 4px -2px rgb(20 16 18 / 0.20)",
        md: "0 4px 12px -2px rgb(20 16 18 / 0.28), 0 2px 4px -2px rgb(20 16 18 / 0.20)",
        lg: "0 12px 32px -8px rgb(20 16 18 / 0.40), 0 4px 8px -4px rgb(20 16 18 / 0.24)",
        glow: "0 0 0 1px rgb(220 187 79 / 0.20), 0 8px 28px -6px rgb(220 187 79 / 0.28)",
      },
      transitionTimingFunction: {
        out: "cubic-bezier(0.22, 1, 0.36, 1)",
        "in-out": "cubic-bezier(0.65, 0, 0.35, 1)",
      },
      transitionDuration: { fast: "120ms", DEFAULT: "180ms", base: "180ms", slow: "320ms" },
      keyframes: {
        "fade-in": { from: { opacity: "0" }, to: { opacity: "1" } },
        "fade-up": { from: { opacity: "0", transform: "translateY(8px)" }, to: { opacity: "1", transform: "translateY(0)" } },
        "scale-in": { from: { opacity: "0", transform: "scale(0.97)" }, to: { opacity: "1", transform: "scale(1)" } },
        shimmer: { from: { backgroundPosition: "200% 0" }, to: { backgroundPosition: "-200% 0" } },
      },
      animation: {
        "fade-in": "fade-in 180ms cubic-bezier(0.22,1,0.36,1)",
        "fade-up": "fade-up 320ms cubic-bezier(0.22,1,0.36,1)",
        "scale-in": "scale-in 180ms cubic-bezier(0.22,1,0.36,1)",
        shimmer: "shimmer 2.2s linear infinite",
      },
    },
  },
  plugins: [],
};