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

const {
  scopedPreflightStyles,
  isolateInsideOfContainer,
} = require("tailwindcss-scoped-preflight");

// Pin EventKoi's frontend sizing to absolute px instead of root-relative rem.
// rem always resolves against the host theme's <html> font-size; themes like
// Beaver Builder set `html{font-size:10px}`, which shrank the whole calendar UI
// (text, button heights, gaps, padding) to ~62%. These px values equal the
// default Tailwind rem scale x16, so on a normal 16px-root theme and in the
// block editor the output is pixel-identical (no regression) while becoming
// independent of the theme root everywhere else.
const REM = 16;
const remScale = {
  0: "0px",
  px: "1px",
  0.5: "2px",
  1: "4px",
  1.5: "6px",
  2: "8px",
  2.5: "10px",
  3: "12px",
  3.5: "14px",
  4: "16px",
  5: "20px",
  6: "24px",
  7: "28px",
  8: "32px",
  9: "36px",
  10: "40px",
  11: "44px",
  12: "48px",
  14: "56px",
  16: "64px",
  20: "80px",
  24: "96px",
  28: "112px",
  32: "128px",
  36: "144px",
  40: "160px",
  44: "176px",
  48: "192px",
  52: "208px",
  56: "224px",
  60: "240px",
  64: "256px",
  72: "288px",
  80: "320px",
  96: "384px",
};
const pxFontSize = {
  xs: ["12px", { lineHeight: "16px" }],
  sm: ["14px", { lineHeight: "20px" }],
  base: ["16px", { lineHeight: "24px" }],
  lg: ["18px", { lineHeight: "28px" }],
  xl: ["20px", { lineHeight: "28px" }],
  "2xl": ["24px", { lineHeight: "32px" }],
  "3xl": ["30px", { lineHeight: "36px" }],
  "4xl": ["36px", { lineHeight: "40px" }],
  "5xl": ["48px", { lineHeight: "1" }],
  "6xl": ["60px", { lineHeight: "1" }],
};

module.exports = {
  darkMode: ["class"],
  content: ["./src/**/*.{js,jsx}"],
  prefix: "",
  important: true,
  corePlugins: {
    preflight: false,
  },
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      fontSize: pxFontSize,
      spacing: remScale,
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        warning: "hsl(var(--warning))",
        "warning-foreground": "hsl(var(--warning-foreground))",
        success: "hsl(var(--success))",
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [
    require("tailwindcss-animate"),
    scopedPreflightStyles({
      isolationStrategy: isolateInsideOfContainer(".eventkoi-front", {
        except: ".no-eventkoi",
      }),
      // Preflight unstyles headings (font-size/weight: inherit). Inside
      // .eventkoi-front that wipes the host theme's heading typography on the
      // event title and description. Drop just those two so the theme's H1-H6
      // sizing/weight applies; EventKoi's own UI sets sizes via utilities.
      modifyPreflightStyles: ({ selectorSet, property, value }) => {
        const touchesHeading = [...selectorSet].some((s) =>
          /^h[1-6]\b/.test(s)
        );
        if (
          touchesHeading &&
          (property === "font-size" || property === "font-weight")
        ) {
          return null;
        }
        return value;
      },
    }),
  ],
};
