/* ============================================================================
   base.css — ریست، تایپوگرافی، RTL
   مرجع: D4 §۳ و §۹
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg-app);
  direction: rtl;
  text-align: right;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--brand-primary-text);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover,
a:focus-visible {
  color: var(--brand-primary-hover);
  text-decoration: underline;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

/* ── فوکوس ───────────────────────────────────────────────────────────────
   D4 §۸: همه‌ی کنش‌ها باید با صفحه‌کلید قابل استفاده باشند.
   حلقه‌ی فوکوس هرگز حذف نمی‌شود — فقط جایگزین می‌شود. */
:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: var(--space-1);
}

/* ── اعداد ───────────────────────────────────────────────────────────────
   D4 §۳: اعداد در جدول و مبالغ، لاتین با عرض ثابت تا ستون‌ها تکان نخورند. */
.num,
td.num,
th.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  direction: ltr;
  unicode-bidi: embed;
  text-align: left;
}

/* شماره گارانتی، سریال و بارکد همیشه لاتین و چپ‌چین — D4 §۶.۶ */
.identifier {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
  letter-spacing: .02em;
}

/* ── ورودی‌ها ────────────────────────────────────────────────────────────
   اندازه‌ی فونت روی موبایل زیر ۱۶px نرود، وگرنه iOS زوم می‌کند — D4 §۲ */
input,
select,
textarea,
button {
  font-family: inherit;
  font-size: max(16px, var(--fs-base));
  line-height: inherit;
  color: inherit;
}

@media (min-width: 992px) {
  input,
  select,
  textarea,
  button {
    font-size: var(--fs-base);
  }
}

/* هدف لمسی حداقل ۴۴×۴۴ — D4 §۲. فقط زیر ۹۹۲px، جایی که ورودی اصلی انگشت است.
   از ۹۹۲px به بالا ماوس/تاچ‌پد دقت کافی دارد؛ نگه‌داشتن ۴۴px آنجا فقط فرم‌ها و
   ردیف دکمه‌ها را بی‌دلیل کش می‌دهد — همان چیزی که رابط را «فشرده و منسجم»
   نگه‌داشتن می‌طلبد. */
button,
[role="button"],
.btn,
a.btn {
  min-height: var(--tap);
  min-width: var(--tap);
  cursor: pointer;
}

@media (min-width: 992px) {
  button,
  [role="button"],
  .btn,
  a.btn {
    min-height: var(--tap-lg);
    min-width: var(--tap-lg);
  }
}

/* ── کمکی ────────────────────────────────────────────────────────────────── */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--bg-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.skip-link:focus {
  inset-inline-start: var(--space-2);
}

.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }

/* هیچ صفحه‌ای نباید در ۳۶۰px اسکرول افقی داشته باشد — D4 §۲ */
html,
body {
  overflow-x: hidden;
}

/* جدول‌ها و بلوک‌های کد عریض، داخل خودشان اسکرول می‌شوند نه کل صفحه */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}