/**
 * PadasYar — Midnight Premium Design Tokens
 * بخش ۱۳ سند مهندسی معکوس: «هیچ رنگ ثابتی در CSS اجزا نوشته نمی‌شود —
 * همه‌چیز از توکن می‌خواند».
 *
 * اسکوپ: .py-scope (ایزوله‌سازی کامل از قالب — بخش ۱۷ سند: اجزای برند با
 * کلاس‌های اختصاصی .py-* ایزوله‌اند).
 *
 * P1: لایه توکن‌ها + کاتالوگ ۸ انیمیشن جدول ۹ + سقوط reduced-motion.
 * استایل‌ساز (P5) همین متغیرها را در فایل‌کش بازنویسی می‌کند.
 */

/* -------------------------------------------------------------------------
 * لایه توکن‌ها — هشت توکن پایه پالت + شکل + سایه + تایپوگرافی (بخش ۱۳)
 * ---------------------------------------------------------------------- */
.py-scope {
        /* پالت هویت — جدول پالت سند */
        --py-bg: #0B1120;            /* پس‌زمینه عمیق */
        --py-panel: #111A2E;         /* سطح کارت‌ها */
        --py-grad: linear-gradient(135deg, var(--py-grad-a) 0%, var(--py-grad-b) 100%); /* گرادیان برند — فقط نقاط کانونی؛ از توکن‌های سر/ته می‌خواند تا استایل‌ساز P5 هر دو را بازنویسی کند */
        --py-grad-a: #6366F1;
        --py-grad-b: #8B5CF6;
        --py-cyan: #38BDF8;          /* داده ثانویه */
        --py-green: #34D399;         /* موفق/فعال */
        --py-amber: #FBBF24;         /* هشدار/نزدیک انقضا */
        --py-red: #F87171;           /* خطا/منقضی */
        --py-text: #E2E8F0;          /* متن اصلی */

        /* شعاع‌ها — کارت 16px، دکمه/اینپوت 10px، پیل 999px */
        --py-radius-card: 16px;
        --py-radius-control: 10px;
        --py-radius-pill: 999px;

        /* سایه استاندارد + گلو برند */
        --py-shadow: 0 12px 32px rgba(2,6,23,.55);
        --py-glow: 0 0 24px rgba(99,102,241,.35);

        /* مقیاس تایپوگرافی — وزیرمتن متغیر (وزن ۳۰۰ تا ۹۰۰) */
        --py-font: "Vazirmatn", "Vazirmatn Variable", Tahoma, system-ui, sans-serif;
        --py-fs-admin-title: 20px;   --py-fw-admin-title: 800;
        --py-fs-card-title: 14px;    --py-fw-card-title: 700;
        --py-fs-body: 13.5px;        --py-fw-body: 400;   --py-lh-body: 1.7;
        --py-fs-caption: 11.5px;     --py-fw-caption: 400;
        --py-fs-kpi: 24px;           --py-fw-kpi: 900;

        /* شبکه فاصله‌گذاری 4px و «تنفس» کارت‌ها (۱۲ تا ۲۰px) */
        --py-space-1: 4px;
        --py-space-2: 8px;
        --py-space-3: 12px;
        --py-space-4: 16px;
        --py-space-5: 20px;

        /* کاتالوگ حرکت — زمان‌بندی ثابت جدول ۹ (هیچ انیمیشن سلیقه‌ای)
         * برچسب‌های easeOut/pulse/easeInOut جدول ۹ نام کاتالوگی‌اند؛ مقادیر زیر
         * نگاشت معتبر CSS هستند (ممیزی P1-AUDIT / G-2) */
        --py-dur-fade-up: 300ms;      --py-ease-fade-up: cubic-bezier(.22,1,.36,1);
        --py-dur-count-up: 600ms;     --py-ease-count-up: cubic-bezier(0,0,.2,1);      /* easeOut */
        --py-dur-hover-lift: 200ms;   --py-ease-hover-lift: ease;
        --py-dur-copy-pulse: 400ms;   --py-ease-copy-pulse: ease-in-out;               /* اثر پالس از keyframes */
        --py-dur-progress-fill: 500ms; --py-ease-progress-fill: cubic-bezier(0,0,.2,1); /* easeOut */
        --py-dur-toast-slide: 250ms;  --py-ease-toast-slide: cubic-bezier(0,0,.2,1);   /* easeOut */
        --py-dur-shimmer: 1.4s;       --py-ease-shimmer: linear;
        --py-dur-tab-morph: 250ms;    --py-ease-tab-morph: ease-in-out;                /* easeInOut */
        --py-stagger: 60ms;           /* تأخیر پلکانی ورود کارت‌ها */

        /* سطح‌های شیشه‌ای ظریف (سطح‌ها از توکن می‌خوانند — بدون رنگ ثابت) */
        --py-panel-glass: color-mix(in srgb, var(--py-panel) 88%, transparent);
        --py-border: rgba(148,163,184,.20);
        --py-border-strong: rgba(148,163,184,.32);

        /* سطح پایه اجزا */
        background: var(--py-bg);
        color: var(--py-text);
        font-family: var(--py-font);
        font-size: var(--py-fs-body);
        font-weight: var(--py-fw-body);
        line-height: var(--py-lh-body);
}

/* -------------------------------------------------------------------------
 * عدد KPI با گرادیان متن — بخش ۱۳: «اعداد KPI با گرادیان متن ۲۴/۹۰۰»
 * ---------------------------------------------------------------------- */
.py-scope .py-kpi-number {
        font-size: var(--py-fs-kpi);
        font-weight: var(--py-fw-kpi);
        background: var(--py-grad);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
}

/* -------------------------------------------------------------------------
 * کاتالوگ هشت الگوی حرکت — جدول ۹ سند
 * «همه انیمیشن‌ها تحت prefers-reduced-motion به حالت فید ساده سقوط می‌کنند
 * و هیچ حرکتی روی متن بدنه اعمال نمی‌شود (دسترس‌پذیری AA).»
 * ---------------------------------------------------------------------- */

/* ۱) Fade Up — ورود کارت‌ها با تأخیر پلکانی ۶۰ms */
@keyframes py-fade-up {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: translateY(0); }
}
.py-scope .py-anim-fade-up {
        animation: py-fade-up var(--py-dur-fade-up) var(--py-ease-fade-up) both;
        animation-delay: calc(var(--py-stagger-step, 0) * var(--py-stagger));
}

/* ۲) Count-Up — اعداد KPI/مبلغ؛ حرکت عدد با JS داخلی، مدت از توکن */
.py-scope .py-anim-count-up {
        animation: py-fade-up var(--py-dur-count-up) var(--py-ease-count-up) both;
}

/* ۳) Hover Lift — بلندشدن ۴px + تقویت سایه/گلو */
.py-scope .py-anim-hover-lift {
        transition: transform var(--py-dur-hover-lift) var(--py-ease-hover-lift),
                    box-shadow var(--py-dur-hover-lift) var(--py-ease-hover-lift);
}
.py-scope .py-anim-hover-lift:hover {
        transform: translateY(-4px);
        box-shadow: var(--py-glow);
}

/* ۴) Copy Pulse — پالس گلو دکمه کپی + تغییر آیکون به تیک */
@keyframes py-copy-pulse {
        0%   { box-shadow: var(--py-glow); }
        50%  { box-shadow: 0 0 40px rgba(99,102,241,.60); }
        100% { box-shadow: var(--py-glow); }
}
.py-scope .py-anim-copy-pulse.is-copied {
        animation: py-copy-pulse var(--py-dur-copy-pulse) var(--py-ease-copy-pulse);
}

/* ۵) Progress Fill — نوار «روزهای باقی‌مانده» در ورود به viewport */
@keyframes py-progress-fill {
        from { width: 0; }
        to   { width: var(--py-progress, 0%); }
}
.py-scope .py-anim-progress-fill {
        animation: py-progress-fill var(--py-dur-progress-fill) var(--py-ease-progress-fill) both;
}

/* ۶) Toast Slide — اعلان‌ها از پایین با fade */
@keyframes py-toast-slide {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: translateY(0); }
}
.py-scope .py-anim-toast-slide {
        animation: py-toast-slide var(--py-dur-toast-slide) var(--py-ease-toast-slide) both;
}

/* ۷) Shimmer — اسکلتون بارگذاری جدول‌ها/نمودارها */
@keyframes py-shimmer {
        0%   { background-position: 200% 0; }
        100% { background-position: -200% 0; }
}
.py-scope .py-anim-shimmer {
        background: linear-gradient(
                90deg,
                var(--py-panel) 25%,
                var(--py-panel-glass) 50%,
                var(--py-panel) 75%
        );
        background-size: 200% 100%;
        animation: py-shimmer var(--py-dur-shimmer) var(--py-ease-shimmer) infinite;
        border-radius: var(--py-radius-control);
}

/* ۸) Tab Morph — حرکت نشانگر تب فعال */
.py-scope .py-anim-tab-morph {
        transition: transform var(--py-dur-tab-morph) var(--py-ease-tab-morph);
}

/* -------------------------------------------------------------------------
 * دسترس‌پذیری — سقوط همه حرکت‌ها به فید ساده (بخش ۱۳ سند)
 * ---------------------------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
        .py-scope .py-anim-fade-up,
        .py-scope .py-anim-count-up,
        .py-scope .py-anim-copy-pulse,
        .py-scope .py-anim-toast-slide {
                animation: none;
                opacity: 1;
        }
        .py-scope .py-anim-progress-fill {
                animation: none;
                width: var(--py-progress, 0%);
        }
        .py-scope .py-anim-shimmer {
                animation: none;
        }
        .py-scope .py-anim-hover-lift,
        .py-scope .py-anim-hover-lift:hover,
        .py-scope .py-anim-tab-morph {
                transition: none;
                transform: none;
        }
}

/* -------------------------------------------------------------------------
 * لایه معنایی دوتمی (v1.3) — «پوسته‌های روشن/تیره روی یک توکن‌کارت»
 * اجزا فقط از متغیرهای معنایی می‌خوانند؛ تعویض تم = تعویض مقدارها روی
 * data-py-theme — بدون هیچ رنگ ثابت در پوسته اجزا.
 * پیش‌فرض: تیره (Midnight Premium) — سازگار کامل با نسخه‌های قبل.
 * ---------------------------------------------------------------------- */
.py-scope {
        --py-canvas: #0B1120;                 /* بوم پشت کارت‌ها */
        --py-panel: #111A2E;                  /* سطح کارت */
        --py-panel-2: #0E1628;                /* سطح فرورفته (اینپوت/کد/جدول) */
        --py-panel-hover: #16213A;            /* هاور سطح کارت */
        --py-border: rgba(148,163,184,.16);
        --py-border-strong: rgba(148,163,184,.30);
        --py-text: #E2E8F0;
        --py-text-muted: #94A3B8;
        --py-text-faint: #64748B;
        --py-head: #F8FAFC;                   /* تیترها */
        --py-shadow: 0 12px 32px rgba(2,6,23,.55);
        --py-glow: 0 0 24px rgba(99,102,241,.35);
        --py-glow-soft: 0 0 0 3px rgba(99,102,241,.22);
        --py-accent-contrast: #FFFFFF;        /* متن روی گرادیان برند */
        --py-code-bg: rgba(226,232,240,.07);
        --py-input-bg: #0E1628;
        --py-ring: rgba(99,102,241,.55);
        --py-grad-btn: linear-gradient(135deg, var(--py-grad-a) 0%, var(--py-grad-b) 100%);
}

/* پوسته روشن — «کاغذ سرد روشن» با همان DNA برند */
.py-scope[data-py-theme="light"] {
        --py-canvas: #EEF1F8;
        --py-panel: #FFFFFF;
        --py-panel-2: #F5F7FC;
        --py-panel-hover: #F2F5FC;
        --py-border: rgba(15,23,42,.10);
        --py-border-strong: rgba(15,23,42,.18);
        --py-text: #17223B;
        --py-text-muted: #4B5A74;
        --py-text-faint: #64748B;
        --py-head: #0B1120;
        --py-shadow: 0 10px 28px rgba(15,23,42,.08);
        --py-glow: 0 6px 18px rgba(99,102,241,.22);
        --py-glow-soft: 0 0 0 3px rgba(99,102,241,.16);
        --py-accent-contrast: #FFFFFF;
        --py-code-bg: rgba(15,23,42,.05);
        --py-input-bg: #FFFFFF;
        --py-ring: rgba(99,102,241,.45);
        /* گرادیان دکمه‌های متنی‌سفید در تم روشن — تیره‌تر برای کنتراست AA (بازبینی ناظر ۹-الف) */
        --py-grad-btn: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
        /* رنگ‌های وضعیت برای کنتراست AA روی زمینه روشن */
        --py-cyan: #0369A1;
        --py-green: #047857;
        --py-amber: #B45309;
        --py-red: #B91C1C;
}

/* پس‌زمینه اجزا از سطح معنایی می‌خواند — سازگاری با اجزای قدیمی */
.py-scope { background: var(--py-canvas); }