/* ═══════════════════════════════════════════════════════════
   رزرونو — سیستم توکنِ طراحیِ مشترک (Design Tokens)
   منبعِ واحدِ حقیقت برای هر سه اپ. دو لایه:
     ۱) Primitive  — مقادیرِ خام (رنگ، اندازه). هیچ‌جا مستقیم استفاده نکن.
     ۲) Semantic   — نقش‌ها (bg, text, brand, danger...). فقط این‌ها را استفاده کن.
   هر اپ تمِ خودش را با override کردنِ لایه‌ی Semantic می‌سازد.
   ═══════════════════════════════════════════════════════════ */

/* ── فونتِ Vazirmatn — self-hosted، نه از Google Fonts ──────────────────
   چرا: مخاطبِ رزرونو در ایران است و fonts.googleapis.com آن‌جا معمولاً در
   دسترس نیست. تا پیش از این، فونت فقط از Google لود می‌شد و هیچ نسخه‌ی
   محلی وجود نداشت؛ یعنی برای بخشِ بزرگی از کاربرانِ واقعی UI بی‌صدا روی
   sans-serifِ سیستم می‌افتاد (متنِ فارسی با متریک و شکلِ نادرست).

   یک فایلِ variable (۱۱۲KB) کلِ بازه‌ی وزنِ ۱۰۰..۹۰۰ را می‌دهد — جایگزینِ
   ۷ فایلِ استاتیکی که قبلاً از Google خواسته می‌شد.

   font-display: swap → متن بلافاصله با فونتِ جایگزین دیده می‌شود و بعد
   عوض می‌شود؛ هیچ‌وقت صفحه‌ی خالیِ منتظرِ فونت نداریم.
   ──────────────────────────────────────────────────────────────────── */
/* [merge ۰۸-۲۴] بلوکِ @font-face که اینجا بود به css/fonts.css منتقل شد —
   هر دو خطِ توسعه فونت را مستقل self-host کرده بودند (فایلِ باینری بایت‌به‌بایت
   یکی بود!) و دو اعلانِ هم‌زمان یعنی دوبار جاسازیِ ~۱۴۵KB در بسته‌ی آفلاین.
   fonts.css ماند چون توکن‌های --font-ui/--font-mono (پشته‌ی آماده‌ی Piyade)
   هم آنجاست و body همه‌ی اپ‌ها از var(--font-ui) می‌خواند. */

:root {
  /* ── لایه ۱: Primitive — مقیاسِ تایپوگرافی (۴px-baseline، پرش‌های واضح) ── */
  --fs-2xs: 11px;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;   /* بدنه‌ی پیش‌فرض */
  --fs-lg:  16px;
  --fs-xl:  20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;
  --fs-4xl: 40px;

  --lh-tight:   1.2;
  --lh-snug:    1.4;
  --lh-normal:  1.6;
  --lh-relaxed: 1.8;

  --ls-tight: -0.02em;   /* عنوان‌های بزرگ (به سبک Linear) */
  --ls-snug:  -0.01em;
  --ls-normal: 0;

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* ── لایه ۱: Primitive — مقیاسِ فاصله (۴px grid، پیکسل‌پرفکت) ── */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ── لایه ۱: Primitive — شعاع ── */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* ── لایه ۱: Primitive — حرکت (یک سیستمِ زمانی واحد) ── */
  --motion-fast:  130ms;
  --motion-base:  200ms;
  --motion-slow:  320ms;
  --ease-out:    cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ── لایه ۱: Primitive — رنگ‌های برند (خام) ── */
  --brand-500: #4F46E5;
  --brand-600: #4338CA;
  --brand-400: #6A4BFF;
  --violet-500: #7C3AED;
  --warm-500:  #E8925A;

  /* ── لایه ۲: Semantic — حالت‌های معنایی (مشترک بینِ همه‌ی اپ‌ها) ── */
  --success:      #12A150;
  --success-soft: #E7F6EE;
  --success-ink:  #0A7A3C;
  --warning:      #C2410C;
  --warning-soft: #FEF0E7;
  --warning-ink:  #9A3412;
  --danger:       #DC2626;
  --danger-soft:  #FDECEC;
  --danger-ink:   #B91C1C;
  --info:         #2563EB;
  --info-soft:    #E8F0FE;
  --info-ink:     #1D4ED8;

  /* ── هدفِ لمسیِ حداقل (Apple HIG / Material) ── */
  --touch-min: 44px;

  /* ── focus ring یکدست (دسترسی‌پذیری) ── */
  --focus-ring: 0 0 0 2px var(--bg, #fff), 0 0 0 4px var(--brand-500);

  /* ── لایه ۱: Primitive — Elevation (سایه‌های لایه‌ای، ۵ سطح) ──
     ⚠️ رفع‌شده (حسابرسیِ دیزاینِ Desire، ۲۰۲۶-۰۸-۱۴): این بلاک تا امروز
     بیرونِ :root تعریف شده بود (بعد از یک `}` زودهنگام) — یعنی از نظرِ CSS
     نامعتبر و کاملاً بی‌اثر بود؛ هر جا که var(--elevation-*)/var(--sh-*)/
     var(--z-*)/var(--grid-*)/var(--bp-*) بدونِ fallback استفاده می‌شد (مثلِ
     .modal، .sheet، .switch-thumb در foundation.css) مقدار به initial
     برمی‌گشت — یعنی z-index: var(--z-modal) عملاً auto بود، نه ۵۰۰. حالا
     داخلِ همان :root اصلی است؛ هیچ مقداری عوض نشده، فقط واقعاً اعمال می‌شود. */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(11,16,32,.05), 0 1px 1px rgba(11,16,32,.03);
  --elevation-2: 0 2px 6px rgba(11,16,32,.06), 0 1px 2px rgba(11,16,32,.04);
  --elevation-3: 0 6px 16px rgba(11,16,32,.08), 0 2px 4px rgba(11,16,32,.05);
  --elevation-4: 0 12px 32px rgba(11,16,32,.10), 0 4px 8px rgba(11,16,32,.06);
  --elevation-5: 0 24px 60px rgba(11,16,32,.16), 0 8px 16px rgba(11,16,32,.08);
  /* نام‌های مستعارِ معنایی */
  --sh-sm: var(--elevation-1);
  --sh-md: var(--elevation-3);
  --sh-lg: var(--elevation-4);
  --sh-xl: var(--elevation-5);

  /* ── لایه ۱: Primitive — Grid (۱۲ ستون، container، gutter) ── */
  --grid-cols: 12;
  --grid-gutter: var(--sp-6);
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-max: 1280px;

  /* ── لایه ۱: Primitive — Breakpoints (به‌صورت مقدار برای ارجاع؛ در media query مستقیم) ── */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ── لایه ۱: Primitive — z-index scale (لایه‌بندیِ یکدست) ── */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-drawer: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  /* ── لایه ۱: Primitive — حرکت: instant (فشارِ لمسی، اضافه‌شده ۲۰۲۶-۰۸-۱۴) ──
     fast/base/slow از قبل بودند؛ instant برایِ press-state (کارت/دکمه) کم بود. */
  --motion-instant: 90ms;

  /* ═══ DS-010 (۲۰۲۶-۰۹-۱۱): توکن‌های **نقش** — «اپل» به‌شکلِ مقدارِ کمتر ═══
     اندازه‌گیریِ صفحه‌ی اولِ اپِ مشتری: ۱۳ اندازه‌ی فونت نقاشی می‌شد در برابرِ
     ۹ توکن، ۶ وزن، ۱۱ شعاع، ۲۵۹ قاعده‌ی font-size با px خام در برابرِ ۲ توکنی.
     تنوع باید از محتوا بیاید نه از سیستم. این‌ها alias‌اند روی مقیاسِ موجود —
     هیچ مقدارِ خامِ تازه‌ای جز سه وزن و یک مدت. مصرف‌کننده نقش را می‌گوید
     (--type-title)، نه عدد را (20px)؛ پس تغییرِ مقیاس یک‌جا رخ می‌دهد.
     گاردِ ratchet (tools/check-css-raw-values.mjs) مقدارِ خامِ تازه را در
     apps/*/css قرمز می‌کند؛ موجودی هنگامِ تماس تنگ می‌شود. */

  /* وزن — فقط سه. ۵۰۰/۷۰۰/۹۰۰ ممنوع. */
  --weight-body:     400;
  --weight-emphasis: 600;
  --weight-display:  800;

  /* پنج نقشِ تایپ: اندازه / وزن / ارتفاعِ خط. روی یک صفحه حداکثر ۶ اندازه. */
  --type-display: var(--weight-display) var(--fs-3xl) / 1.15;
  --type-title:   var(--weight-display) var(--fs-xl)  / 1.3;
  --type-body:    var(--weight-body)    var(--fs-md)  / 1.7;
  --type-label:   var(--weight-emphasis) var(--fs-sm) / 1.4;
  --type-caption: var(--weight-body)    var(--fs-xs)  / 1.5;

  /* سه نقشِ شعاع. مقدارِ خام ممنوع؛ 50% برای دایره مجاز. */
  --radius-control: var(--radius-md);    /* دکمه، ورودی، چیپ */
  --radius-surface: var(--radius-lg);    /* کارت، شیت */
  --radius-pill:    var(--radius-full);

  /* دو سایه. box-shadow خام ممنوع. */
  --shadow-rest:   var(--elevation-1);
  --shadow-raised: var(--elevation-4);

  /* شیت/مودال از جای فراخوانی می‌آید — یک مدتِ مخصوص، نه یک عددِ تازه در هر فایل. */
  --motion-sheet: 480ms;

  /* ── لایه ۲: Semantic — نقش‌هایِ تایپوگرافی (اضافه‌شده ۲۰۲۶-۰۸-۱۴) ──
     روی همون Primitiveهایِ بالا سوار است؛ چیزی جایگزین/حذف نشده — فقط
     نقش‌هایِ معنایی برایِ کارت‌هایِ دیزایر/هیرو/اعداد اضافه شده تا هر اپ به‌جایِ
     ترکیبِ دستیِ fs+fw+lh یک نقشِ آماده داشته باشد. Persian-first (Vazirmatn،
     از هر اپ خودش لود می‌شود)؛ اینجا فقط اندازه/وزن/تراکم تعریف می‌شود. */
  --type-display-size: var(--fs-4xl);
  --type-display-weight: var(--fw-extra);
  --type-display-lh: var(--lh-tight);
  --type-display-ls: var(--ls-tight);

  --type-title-size: var(--fs-2xl);
  --type-title-weight: var(--fw-bold);
  --type-title-lh: var(--lh-tight);
  --type-title-ls: var(--ls-snug);

  --type-body-size: var(--fs-lg);
  --type-body-weight: var(--fw-normal);
  --type-body-lh: var(--lh-normal);

  --type-meta-size: var(--fs-xs);
  --type-meta-weight: var(--fw-medium);
  --type-meta-lh: var(--lh-snug);

  --type-numeric-weight: var(--fw-bold);
  --type-numeric-feature: tabular-nums;
}

/* احترامِ سراسری به کاهشِ حرکت — یک‌بار، درست، برای همه */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}