/* =====================================================================
   استایل‌های قدیمی سایت در یک «لایه» با اولویت پایین‌تر بارگذاری می‌شوند.

   چرا: Tailwind v4 همه‌چیز را داخل @layer می‌گذارد و طبق مشخصات CSS،
   قواعد بدون لایه همیشه بر قواعد لایه‌دار غلبه می‌کنند — صرف‌نظر از ترتیب.
   با قرار دادن CSS قدیمی در لایه «legacy»، ابزارهای Tailwind دوباره
   غالب می‌شوند و کامپوننت‌های قدیمی استایل خود را حفظ می‌کنند.

   ⚠ بوت‌استرپ حذف شد: تمام utilityهای آن !important هستند و برای
   اعلان‌های important ترتیب لایه‌ها معکوس می‌شود، بنابراین کلاس‌های
   هم‌نام Tailwind را خراب می‌کرد:
       .text-start → left (به‌جای start)
       .p-5        → 3rem (به‌جای 1.25rem)
       .gap-4      → 1.5rem (به‌جای 1rem)
       .border     → افزودن حاشیه خاکستری
   تنها چیزی که واقعاً استفاده می‌شد `container-fluid` بود که پایین شبیه‌سازی شده.
   ===================================================================== */

@layer legacy;

@import url("/css/design-system.css?v2") layer(legacy);
@import url("/css/site.css?v4") layer(legacy);
@import url("/css/theme.css?v2") layer(legacy);

@layer legacy {
    /* جایگزین سبک container-fluid بوت‌استرپ */
    .container-fluid {
        width: 100%;
        margin-inline: auto;
        padding-inline: 12px;
    }

    .py-4 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}