/* ═══════════════════════════════════════════════════════════════════════
   PADCORE — لایهٔ توکنِ سیستمِ طراحیِ یکپارچه
   مرجعِ تصمیم: docs/ADR/ADR-PADCORE-0027.md · طرح: docs/DESIGN-SYSTEM-PLAN.md
   فاز ۱. نام‌گذاری از قراردادهای shadcn/ui؛ رنگ‌ها عیناً از PAD-4 (docs/DESIGN.md).

   ⚠ این فایل **فقط تعریف** می‌کند و هیچ عنصری را استایل نمی‌دهد، پس
   افزودنش به یک صفحه هیچ پیکسلی را جابه‌جا نمی‌کند. مصرفِ توکن‌ها از فاز ۲
   (`ui.css`) شروع می‌شود. زودتر از `admin.css`/`app.css` بارگذاری می‌شود تا
   هرچه آن دو تعریف می‌کنند دستِ بالا را داشته باشد و رفتارِ امروز نشکند.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ══════════════════════════════════════════════════════════
       ۱) مقیاسِ پایه — PAD-4. عینِ مقادیرِ admin.css/app.css.
       ══════════════════════════════════════════════════════════ */

    /* ── Primary (navy) — ۹ پله ── */
    --p-50:  #EEF2F9;
    --p-100: #DCE5F1;
    --p-200: #B7C7E0;
    --p-300: #8AA3C9;
    --p-400: #54739F;
    --p-500: #2E5286;
    --p-600: #1F3E6B;   /* برند / کنشِ اصلی */
    --p-700: #18335A;
    --p-800: #122845;
    --p-900: #0C1B30;
    --p-on:  #FFFFFF;

    /* ── Accent (مسی) — فقط نقطه‌ای، هرگز غالب ── */
    --a-50:  #FBEEE4;
    --a-100: #F6D9C4;
    --a-500: #C2520E;
    --a-600: #A8450B;

    /* ── خنثی (اسلیت) — ۱۲ پله ── */
    --n-0:   #FFFFFF;
    --n-50:  #F7F8FA;
    --n-100: #F1F3F6;
    --n-150: #E9ECF1;
    --n-200: #E1E5EB;
    --n-300: #CBD2DB;
    --n-400: #A4ADBA;
    --n-500: #7A8493;
    --n-600: #5A6472;
    --n-700: #3E4654;
    --n-800: #2A313C;
    --n-900: #1A1F27;

    /* ══════════════════════════════════════════════════════════
       ۲) توکن‌های نقش — نام‌گذاریِ shadcn (§۶.۱ طرح)
       هر سطح یک `-foreground` دارد تا جفتِ کنتراست هیچ‌وقت گم نشود.
       ══════════════════════════════════════════════════════════ */
    --background:            var(--n-100);
    --foreground:            var(--n-900);
    --surface:               var(--n-50);
    --surface-foreground:    var(--n-900);
    --card:                  var(--n-0);
    --card-foreground:       var(--n-900);
    --popover:               var(--n-0);
    --popover-foreground:    var(--n-900);

    --primary:               var(--p-600);
    --primary-foreground:    var(--p-on);
    --secondary:             var(--n-150);
    --secondary-foreground:  var(--n-800);
    --muted:                 var(--n-100);
    --muted-foreground:      var(--n-600);

    /* سطحِ خنثای hover/انتخاب — رنگِ برند نیست، عمداً. */
    --accent:                var(--n-150);
    --accent-foreground:     var(--n-900);

    /* تنها جایی که مسی نقش می‌گیرد: نشانِ «جدید»/فوریت، نقطه‌ای. */
    --brand-accent:          var(--a-500);
    --brand-accent-foreground: var(--p-on);
    --brand-accent-muted:    var(--a-50);

    --border:                var(--n-200);
    --input:                 var(--n-200);
    --ring:                  var(--p-400);
    --selection:             var(--p-600);
    --selection-foreground:  var(--p-on);

    /* ── معناییِ وضعیت. مقادیر عیناً از --tn-* امروز. ── */
    --destructive:             #C03A2B;
    --destructive-foreground:  #FFFFFF;
    --destructive-muted:       #FBE9E6;
    --success:                 #1E7A4D;
    --success-foreground:      #FFFFFF;
    --success-muted:           #E6F3EC;
    --warning:                 #A86507;  /* ۴.۶۴:۱ روی سفید. #B26C09 قبلی ۴.۱۷ می‌داد و از گیتِ کنتراست رد نمی‌شد. */
    --warning-foreground:      #FFFFFF;
    --warning-muted:           #FBF0DC;

    /* ── سایدبار — هشت توکن (§۶.۱) ── */
    --sidebar:                      var(--p-800);
    --sidebar-foreground:           #C6D0E0;
    --sidebar-primary:              var(--p-600);
    --sidebar-primary-foreground:   var(--p-on);
    --sidebar-accent:               var(--p-700);
    --sidebar-accent-foreground:    var(--p-on);
    --sidebar-border:               var(--p-700);
    --sidebar-ring:                 var(--p-400);

    /* ── نمودار — رمپِ تک‌رنگِ navy، نه پنج رنگِ بی‌ربط (الگوی shadcn) ── */
    --chart-1: var(--p-300);
    --chart-2: var(--p-400);
    --chart-3: var(--p-500);
    --chart-4: var(--p-600);
    --chart-5: var(--p-800);

    /* ══════════════════════════════════════════════════════════
       ۳) لایهٔ حالت — به‌جای توکنِ جداگانه برای هر حالت (§۶.۲)
       سه عدد، نه ۲۲۶ توکن. شبه‌عنصرِ پوششیِ currentColor با این شفافیت.
       ══════════════════════════════════════════════════════════ */
    --state-hover:    .08;
    --state-press:    .12;
    --state-selected: .10;
    --state-disabled-opacity: .5;

    /* استثنا — جایی که پوششِ شفاف گل‌آلود می‌شود و رنگ باید عوض شود. */
    --destructive-hover: #A42E21;

    /* ══════════════════════════════════════════════════════════
       ۴) لایهٔ سطوحِ تودرتو — الگوی Carbon (§۶.۲.۱)
       ══════════════════════════════════════════════════════════ */
    --layer-1: var(--n-0);
    --layer-2: var(--n-50);
    --layer-3: var(--n-100);
    --field-1: var(--n-50);
    --field-2: var(--n-0);
    --field-3: var(--n-50);
    --border-subtle-0: var(--n-200);
    --border-subtle-1: var(--n-200);
    --border-subtle-2: var(--n-150);
    --border-subtle-3: var(--n-150);

    /* ══════════════════════════════════════════════════════════
       ۵) شکل — مقیاسِ ضربیِ shadcn روی یک عدد (§۶.۳). ۱۷ مقدار → ۶.
       ══════════════════════════════════════════════════════════ */
    --radius:      10px;
    --radius-sm:   calc(var(--radius) * 0.6);   /*  6px — تراشهٔ ریز، input کوچک */
    --radius-md:   calc(var(--radius) * 0.8);   /*  8px — دکمه، input */
    --radius-lg:   var(--radius);               /* 10px — کارت */
    --radius-xl:   calc(var(--radius) * 1.4);   /* 14px — مودال، کارتِ بزرگ */
    --radius-2xl:  calc(var(--radius) * 1.8);   /* 18px — پنلِ کشویی */
    --radius-pill: 100px;                       /* فقط badge و chip — بندِ ۳ ADR-0027 */

    /* ── ارتفاعِ کنترل — اعدادِ shadcn ── */
    --control-xs:   24px;
    --control-sm:   32px;
    --control-base: 36px;
    --control-lg:   40px;

    /* ══════════════════════════════════════════════════════════
       ۶) فاصله — پایهٔ ۴px (docs/DESIGN.md)
       ══════════════════════════════════════════════════════════ */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  28px;
    --space-8:  32px;
    --space-9:  36px;
    --space-10: 40px;
    --space-11: 48px;
    --space-12: 64px;

    /* ══════════════════════════════════════════════════════════
       ۷) تایپوگرافی — هفت پله (§۶.۳). ۲۶ مقدار → ۷.
       متنِ پایه ۱۵px است، نه ۱۴px: وزیرمتن در هم‌اندازهٔ پیکسلی
       ریزتر از فونتِ لاتین خوانده می‌شود (تصمیمِ دورِ دوم).
       مصرفش در فازِ مهاجرتِ همان صفحه است، نه اینجا.
       ══════════════════════════════════════════════════════════ */
    --font-sans: 'Vazirmatn', 'Vazir', Tahoma, system-ui, sans-serif;

    --text-display: 28px;  --text-display-lh: 1.35;  --text-display-weight: 700;
    --text-h1:      22px;  --text-h1-lh:      1.4;   --text-h1-weight:      700;
    --text-h2:      18px;  --text-h2-lh:      1.45;  --text-h2-weight:      700;
    --text-h3:      16px;  --text-h3-lh:      1.5;   --text-h3-weight:      700;
    --text-body:    15px;  --text-body-lh:    1.6;   --text-body-weight:    400;
    --text-label:   13px;  --text-label-lh:   1.5;   --text-label-weight:   500;
    --text-caption: 12px;  --text-caption-lh: 1.5;   --text-caption-weight: 400;

    /* ══════════════════════════════════════════════════════════
       ۸) سایه — تنِ navy، نه مشکیِ خالص (docs/DESIGN.md)
       ══════════════════════════════════════════════════════════ */
    --shadow-xs: 0 1px 2px rgba(16,32,56,.06);
    --shadow-sm: 0 1px 2px rgba(16,32,56,.06), 0 1px 3px rgba(16,32,56,.05);
    --shadow-md: 0 4px 14px rgba(16,32,56,.08), 0 2px 5px rgba(16,32,56,.04);
    --shadow-lg: 0 14px 36px rgba(16,32,56,.16);

    /* ══════════════════════════════════════════════════════════
       ۹) حرکت — الگوی Carbon
       ══════════════════════════════════════════════════════════ */
    --duration-fast:      110ms;
    --duration-base:      250ms;
    --duration-expansion: 300ms;
    --ease-standard: cubic-bezier(.2, 0, .38, .9);
    --ease-in:       cubic-bezier(.25, 0, 1, 1);
    --ease-out:      cubic-bezier(0, 0, .38, .9);

    /* ══════════════════════════════════════════════════════════
       ۱۰) لایه‌بندی — الگوی SLDS. امروز z-index عددِ خام است تا ۹۹۹۹.
       ══════════════════════════════════════════════════════════ */
    --z-base:     0;
    --z-sticky:   100;
    --z-dropdown: 200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    500;

    /* ══════════════════════════════════════════════════════════
       ۱۱) چگالی — پلهٔ معمولی. فشرده در بلاکِ بعد.
       ══════════════════════════════════════════════════════════ */
    --density-control: var(--control-base);
    --density-row:     44px;
    --density-pad-x:   var(--space-4);
    --density-pad-y:   var(--space-3);

    /* کمینهٔ عرضِ جدولِ داده: زیرِ این، به‌جای فشرده‌شدنِ ستون‌ها wrapper
       اسکرولِ افقی می‌خورد. مقیاسِ `--space-*` تا ۶۴px بالا می‌رود و این
       اندازه از آن جنس نیست، پس توکنِ خودش را دارد. */
    --table-min-inline: 45rem;
}

/* پلهٔ فشرده — جدولِ داده و فهرستِ بلند. فرم معمولی می‌ماند. */
[data-density="compact"] {
    --density-control: var(--control-sm);
    --density-row:     36px;
    --density-pad-x:   var(--space-3);
    --density-pad-y:   var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════════════
   لایهٔ سطوحِ تودرتو — «کارت داخلِ کارت داخلِ مودال» خودش یک پله بالا
   می‌رود، بی‌آنکه کامپوننت بداند کجا نشسته.
   ═══════════════════════════════════════════════════════════════════════ */
[data-layer="2"] {
    --layer-1: var(--n-50);
    --layer-2: var(--n-100);
    --layer-3: var(--n-150);
    --field-1: var(--n-0);
    --field-2: var(--n-50);
    --border-subtle-0: var(--n-200);
    --border-subtle-1: var(--n-150);
}

[data-layer="3"] {
    --layer-1: var(--n-100);
    --layer-2: var(--n-150);
    --layer-3: var(--n-200);
    --field-1: var(--n-0);
    --field-2: var(--n-50);
    --border-subtle-0: var(--n-150);
    --border-subtle-1: var(--n-200);
}

/* ═══════════════════════════════════════════════════════════════════════
   نگاشتِ یک‌جهتهٔ --tn-* روی توکن‌های تازه.
   هدف: صفحه‌ای که فقط این فایل را دارد، --tn-* سالم داشته باشد.
   admin.css و app.css همین نام‌ها را **بعد از** این فایل بازتعریف می‌کنند،
   پس امروز این بلاک هیچ اثری در آن دو صفحه ندارد — عمدی است. حذفِ
   تعریفِ تکراری از آن دو فایل، کارِ فاز ۶ است نه اینجا.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --tn-primary:           var(--primary);
    --tn-primary-dark:      var(--p-800);
    --tn-primary-light:     var(--p-50);
    --tn-primary-50:        var(--p-50);
    --tn-primary-container: var(--p-100);
    --tn-on-primary:        var(--primary-foreground);
    --tn-surface:           var(--background);
    --tn-surface-card:      var(--card);
    --tn-surface-dim:       var(--secondary);
    --tn-on-surface:        var(--foreground);
    --tn-on-surface-var:    var(--muted-foreground);
    --tn-on-surface-faint:  var(--n-500);
    --tn-outline:           var(--border);
    --tn-outline-light:     var(--n-150);
    --tn-error:   var(--destructive);  --tn-error-bg:   var(--destructive-muted);
    --tn-success: var(--success);      --tn-success-bg: var(--success-muted);
    --tn-warn:    var(--warning);      --tn-warn-bg:    var(--warning-muted);
    --tn-r-sm:   var(--radius-md);
    --tn-r-md:   12px;
    --tn-r-lg:   16px;
    --tn-r-full: var(--radius-pill);
    --tn-s1: var(--shadow-sm);
    --tn-s2: var(--shadow-md);
    --tn-s3: var(--shadow-lg);
    --tn-font: var(--font-sans);
}

/* ═══════════════════════════════════════════════════════════════════════
   تمِ تیره — روشن، با دو دروازه (فاز ۵الف و ۵ب).

   صفتِ `data-theme="dark"` را فقط دو جا می‌نویسد:
     `partials/theme-boot`      → پنلِ ادمین، با کلیدِ سه‌حالتهٔ خودِ مدیر.
     `partials/site-theme-boot` → سمتِ کاربر، و فقط وقتی include می‌شود که
                                  هر دو پترنِ هدر و فوترِ صفحه تیک خورده
                                  باشند (`ShellPattern::supportsDark`).

   عمداً روی صفتِ data است نه `prefers-color-scheme`ِ لخت: تمِ تیره نباید
   خودسر روشن شود، چون CSSِ سفارشیِ کاربران رنگِ هاردکد دارد. سمتِ کاربر
   ترجیحِ سیستم را می‌خوانَد، ولی **درونِ** همین دروازه — بی تیک، هیچ صفحه‌ای
   تیره نمی‌شود.
   ═══════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
    color-scheme: dark;

    --background:            #0E1420;
    --foreground:            #E6EAF2;
    --surface:               #131A28;
    --surface-foreground:    #E6EAF2;
    --card:                  #161E2D;
    --card-foreground:       #E6EAF2;
    --popover:               #1A2335;
    --popover-foreground:    #E6EAF2;

    --primary:               #7FA3D6;
    --primary-foreground:    #0C1B30;
    --secondary:             #222C3F;
    --secondary-foreground:  #D3DAE6;
    --muted:                 #1A2335;
    --muted-foreground:      #9AA6B8;
    --accent:                #222C3F;
    --accent-foreground:     #E6EAF2;

    --brand-accent:          #E2803F;
    --brand-accent-foreground: #231007;
    --brand-accent-muted:    #2E1A0E;

    --border:                #2A3549;
    --input:                 #2A3549;
    --ring:                  #7FA3D6;
    --selection:             #2E5286;
    --selection-foreground:  #FFFFFF;

    --destructive:            #E7695A;
    --destructive-foreground: #2A0D09;
    --destructive-muted:      #351713;
    --destructive-hover:      #F08274;
    --success:                #4FB383;
    --success-foreground:     #06281A;
    --success-muted:          #10301F;
    --warning:                #D9A23E;
    --warning-foreground:     #2B1D05;
    --warning-muted:          #30250F;

    --sidebar:                    #0C1320;
    --sidebar-foreground:         #9AA6B8;
    --sidebar-primary:            #7FA3D6;
    --sidebar-primary-foreground: #0C1B30;
    --sidebar-accent:             #1B2537;
    --sidebar-accent-foreground:  #E6EAF2;
    --sidebar-border:             #1B2537;
    --sidebar-ring:               #7FA3D6;

    --chart-1: #3C5C8C;
    --chart-2: #54739F;
    --chart-3: #7FA3D6;
    --chart-4: #A8C2E6;
    --chart-5: #D3E0F2;

    --layer-1: #161E2D;
    --layer-2: #1A2335;
    --layer-3: #222C3F;
    --field-1: #1A2335;
    --field-2: #161E2D;
    --field-3: #222C3F;
    --border-subtle-0: #2A3549;
    --border-subtle-1: #2A3549;
    --border-subtle-2: #222C3F;
    --border-subtle-3: #222C3F;

    /* روی زمینهٔ تیره پوششِ روشن کم‌رنگ‌تر دیده می‌شود، پس یک پله بالاتر. */
    --state-hover:    .12;
    --state-press:    .16;
    --state-selected: .14;

    --shadow-xs: 0 1px 2px rgba(0,0,0,.40);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.32);
    --shadow-md: 0 4px 14px rgba(0,0,0,.44), 0 2px 5px rgba(0,0,0,.28);
    --shadow-lg: 0 14px 36px rgba(0,0,0,.56);
}

/* ═══════════════════════════════════════════════════════════════════════
   احترام به ترجیحِ کاهشِ حرکت — تنها قاعدهٔ غیرتوکنیِ این فایل (فاز ۷).

   بخشِ اولش کافی **نیست**: صفر کردنِ `--duration-*` فقط چیزی را می‌گیرد که
   توکن مصرف می‌کند، و `admin.css`/`app.css`/`landing.css` ده‌ها
   `transition: all .15s` و `animation`ِ هاردکد دارند. بخشِ دوم همان‌ها را
   هم می‌گیرد.

   چرا اینجا و نه در `ui.css`: پوستهٔ سمتِ کاربر `ui.css` را بار نمی‌کند
   (تصمیمِ بازِ §۴ز طرح)، ولی همین فایل را بار می‌کند. پس این تنها جایی است
   که قاعده به **هر دو** پوسته می‌رسد.

   ۱ms و نه `none`: رویدادِ `transitionend`/`animationend` باید همچنان شلیک
   کند، وگرنه کدی که منتظرش است قفل می‌شود.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast:      1ms;
        --duration-base:      1ms;
        --duration-expansion: 1ms;
    }

    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-delay: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        transition-delay: 1ms !important;
    }

    html { scroll-behavior: auto !important; }
}