/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
      keyframes: {
        spinCounter: {
          from: { transform: "rotate(0deg)" },
          to: { transform: "rotate(-360deg)" },
        },
      },
      animation: {
        spinCounter: "spinCounter 1s linear infinite",
      },
    },
  },
  plugins: [],
  /**
   * دو سازوکار تم هم‌زمان در پروژه هست و هر دو باید کار کنند:
   * صفحات عمومی با `data-theme="dark"` (از `next-themes` با `attribute="data-"`)
   * و پنل با کلاس `.dark`.
   *
   * تا امروز فقط `class` تعریف شده بود، پس **همهٔ `dark:`های صفحات عمومی هرگز اجرا
   * نمی‌شدند** — جریان رزرو در دارک‌مود سفید می‌ماند. استراتژی `variant` هر دو را
   * می‌پذیرد و هیچ‌کدام را عوض نمی‌کند.
   */
  darkMode: [
    "variant",
    ["&:where(.dark, .dark *)", '&:where([data-theme="dark"], [data-theme="dark"] *)'],
  ],
};