/* =========================================================
   SHIFT.camp — Design Tokens v2.0  (۲ آبان ۱۴۰۵)
   تنها منبع رنگ، اندازه، فاصله، گوشه، سایه و حرکت در کل سایت.
   مستقل از قالب (در SHIFT Core) تا با تغییر قالب از بین نرود.
   ساختار (برگرفته از Material 3):
     ۱. Reference  — مقادیر خام (فقط همین فایل)
     ۲. System     — نقش‌ها (کامپوننت‌ها فقط از این لایه)
     ۳. Component  — اندازه‌های ثابت کامپوننت‌ها
   ========================================================= */

:root {
  /* ---------- ۱. REFERENCE ---------- */
  --sc-ref-white:      #FFFFFF;
  --sc-ref-ink:        #0C0C0C;
  --sc-ref-ink-800:    #2A2C31;
  --sc-ref-gray-700:   #4A4D57;
  --sc-ref-gray-100:   #E2E4E9;
  --sc-ref-gray-50:    #F4F5F7;

  --sc-ref-blue-50:    #F2F5FF;
  --sc-ref-blue-100:   #E0E8FF;
  --sc-ref-blue-200:   #C2D1FF;
  --sc-ref-blue-300:   #94AFFF;
  --sc-ref-blue-400:   #668CFF;
  --sc-ref-blue-500:   #3366FF;
  --sc-ref-blue-600:   #2952D9;
  --sc-ref-blue-700:   #1F3FB0;
  --sc-ref-blue-800:   #172F85;
  --sc-ref-blue-900:   #0F1F5C;

  --sc-ref-green-50:   #E3F5EB;
  --sc-ref-green-500:  #00A550;
  --sc-ref-green-700:  #00753A;
  --sc-ref-red-50:     #FBEAE4;
  --sc-ref-red-500:    #D43E11;
  --sc-ref-red-700:    #A8300B;
  --sc-ref-yellow-50:  #FFFAE8;
  --sc-ref-yellow-100: #F2E4B8;
  --sc-ref-yellow-200: #FFEFA6;
  --sc-ref-yellow-500: #E0A100;
  --sc-ref-yellow-800: #7A5A00;

  --sc-ref-dark-300:   #C9CCD3;
  --sc-ref-dark-400:   #A3A7B2;
  --sc-ref-dark-500:   #6E727C;
  --sc-ref-dark-700:   #34363C;
  --sc-ref-dark-850:   #24262B;

  /* ---------- ۲. SYSTEM ---------- */
  --sc-bg:                     var(--sc-ref-white);
  --sc-surface:                var(--sc-ref-gray-50);
  --sc-ink:                    var(--sc-ref-ink);
  --sc-text:                   var(--sc-ref-ink-800);
  --sc-line:                   var(--sc-ref-gray-100);
  --sc-line-strong:            var(--sc-ref-ink);

  --sc-primary:                var(--sc-ref-ink);
  --sc-on-primary:             var(--sc-ref-white);
  --sc-primary-hover:          var(--sc-ref-ink-800);

  --sc-accent:                 var(--sc-ref-blue-500);
  --sc-on-accent:              var(--sc-ref-white);
  --sc-accent-hover:           var(--sc-ref-blue-600);
  --sc-accent-pressed:         var(--sc-ref-blue-700);
  --sc-accent-container:       var(--sc-ref-blue-50);
  --sc-accent-container-hover: var(--sc-ref-blue-100);
  --sc-on-accent-container:    var(--sc-ref-blue-700);
  --sc-link:                   var(--sc-ref-blue-500);
  --sc-link-hover:             var(--sc-ref-blue-700);
  --sc-focus:                  var(--sc-ref-blue-500);
  --sc-focus-halo:             var(--sc-ref-blue-100);

  --sc-success:                var(--sc-ref-green-500);
  --sc-on-success-container:   var(--sc-ref-green-700);
  --sc-success-container:      var(--sc-ref-green-50);
  --sc-error:                  var(--sc-ref-red-500);
  --sc-on-error-container:     var(--sc-ref-red-700);
  --sc-error-container:        var(--sc-ref-red-50);
  --sc-note:                   var(--sc-ref-yellow-500);
  --sc-on-note-container:      var(--sc-ref-yellow-800);
  --sc-note-container:         var(--sc-ref-yellow-50);
  --sc-note-line:              var(--sc-ref-yellow-100);
  --sc-highlight:              var(--sc-ref-yellow-200);

  --sc-inverse:                var(--sc-ref-ink);
  --sc-on-inverse:             var(--sc-ref-white);
  --sc-on-inverse-strong:      var(--sc-ref-dark-300);
  --sc-on-inverse-text:        var(--sc-ref-dark-400);
  --sc-on-inverse-muted:       var(--sc-ref-dark-500);
  --sc-inverse-line:           var(--sc-ref-dark-850);
  --sc-inverse-card:           var(--sc-ref-ink-800);
  --sc-inverse-card-line:      var(--sc-ref-dark-700);

  --sc-disabled-opacity:       .38;

  /* ---------- تایپوگرافی ---------- */
  --sc-font: "IRANYekanX", Roboto, Arial, sans-serif;
  --sc-weight-regular: 400;
  --sc-weight-bold:    700;

  --sc-display-size:   40px;   --sc-display-lh:   1.2;
  --sc-headline-size:  24px;   --sc-headline-lh:  1.35;
  --sc-title-l-size:   21px;   --sc-title-l-lh:   1.45;
  --sc-title-m-size:   20px;   --sc-title-m-lh:   1.45;
  --sc-title-s-size:   15px;   --sc-title-s-lh:   1.5;
  --sc-body-l-size:    17px;   --sc-body-l-lh:    1.9;
  --sc-body-m-size:    15px;   --sc-body-m-lh:    1.8;
  --sc-body-s-size:    14px;   --sc-body-s-lh:    1.6;
  --sc-label-l-size:   14px;
  --sc-label-m-size:   13px;   --sc-label-m-lh:   1.5;
  --sc-label-s-size:   11.5px;
  --sc-badge-size:     10px;

  /* ---------- فاصله ---------- */
  --sc-space-1: 4px;
  --sc-space-2: 8px;
  --sc-space-3: 16px;
  --sc-space-4: 24px;
  --sc-space-5: 32px;
  --sc-space-6: 48px;
  --sc-space-7: 64px;
  --sc-space-8: 96px;
  --sc-section-gap: 56px;

  /* ---------- چیدمان ---------- */
  --sc-container: 1170px;
  --sc-measure:   720px;
  --sc-gutter:    16px;

  /* ---------- گوشه‌ها ---------- */
  --sc-radius-none: 0;
  --sc-radius-xs:   3px;
  --sc-radius-sm:   8px;
  --sc-radius-md:   12px;
  --sc-radius-pill: 999px;

  /* ---------- خطوط ---------- */
  --sc-border:        1px;
  --sc-border-strong: 1.5px;
  --sc-rule:          3px;
  --sc-bar:           4px;

  /* ---------- سایه ---------- */
  --sc-elevation-0: none;
  --sc-elevation-1: 0 6px 16px -6px rgba(12,12,12,.45);
  --sc-elevation-2: 0 16px 40px -12px rgba(12,12,12,.35);
  --sc-scrim:       rgba(12,12,12,.6);

  /* ---------- حرکت ---------- */
  --sc-duration-short:  150ms;
  --sc-duration-medium: 200ms;
  --sc-ease: cubic-bezier(.2, 0, 0, 1);
  --sc-transition: color var(--sc-duration-short) var(--sc-ease),
                   background-color var(--sc-duration-short) var(--sc-ease),
                   border-color var(--sc-duration-short) var(--sc-ease),
                   box-shadow var(--sc-duration-short) var(--sc-ease);

  /* ---------- ۳. COMPONENT ---------- */
  --sc-btn-h-sm:  32px;
  --sc-btn-h:     40px;
  --sc-btn-h-lg:  48px;
  --sc-btn-px:    20px;
  --sc-field-h:   44px;
  --sc-touch:     44px;
  --sc-chip-h:    26px;
  --sc-card-pad:  24px;
  --sc-fab:       40px;
  --sc-avatar:    120px;

  /* نشانه‌های نوشتاری: کادر عنوان (Mark) و براکت — گوشه‌ی تیز */
  --sc-mark-bg:        var(--sc-inverse);
  --sc-on-mark:        var(--sc-on-inverse);
  --sc-mark-dark-bg:   var(--sc-ref-ink-800);
  --sc-mark-muted-bg:  var(--sc-surface);
  --sc-on-mark-muted:  var(--sc-ink);
  --sc-mark-pad-y:     6px;
  --sc-mark-pad-x:     16px;
  --sc-mark-radius:    var(--sc-radius-none);
  --sc-bracket-gap:    .35em;

  /* الگوهای صفحه: ریتم بخش‌ها، خط اتصال، هیرو */
  --sc-section-y:      64px;
  --sc-connector-w:    4px;
  --sc-connector-h:    48px;
  --sc-hero-overlap:   -24px;  /* منفی = فاصله میان تیتر و تصویر */
  --sc-hero-title-size: 35px;
  --sc-hero-art-w:     340px;
  --sc-connector-overlap: 24px;   /* خط اتصال تا داخل بخش بعدی */
}

@media (max-width: 549px) {
  :root {
    --sc-display-size:  28px;
    --sc-headline-size: 21px;
    --sc-title-l-size:  19px;
    --sc-title-m-size:  18px;
    --sc-body-l-size:   16px;
    --sc-section-gap:   44px;
    --sc-btn-h:         44px;
    --sc-avatar:        96px;
    --sc-section-y:     48px;
    --sc-connector-overlap: 16px;
    --sc-connector-h:   32px;
    --sc-hero-overlap:  0px;
    --sc-hero-title-size: 26px;
    --sc-hero-art-w:    260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --sc-duration-short: 0ms; --sc-duration-medium: 0ms; }
}