/* ===================== پایه: فونت، ریست، تایپوگرافی، ابزارها ===================== */
@font-face { font-family: "Vazirmatn"; src: url("/assets/fonts/Vazirmatn-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("/assets/fonts/Vazirmatn-Bold.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("/assets/fonts/Vazirmatn-ExtraBold.woff2") format("woff2"); font-weight: 800 900; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--space-4)); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-family);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
body.is-scroll-locked { overflow: hidden; }

h1, h2, h3, h4, h5 { margin: 0 0 var(--space-3); line-height: var(--leading-tight); font-weight: var(--weight-black); letter-spacing: -0.01em; }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-primary); text-underline-offset: 3px; }
a:hover { color: var(--color-primary-strong); }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:where(button, [role="button"]) { touch-action: manipulation; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; }
fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
legend { padding: 0; }
dl { margin: 0; }
dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
[hidden] { display: none !important; }
bdi, .ltr { unicode-bidi: isolate; }
.ltr { direction: ltr; display: inline-block; }
code, kbd { font-family: var(--font-mono); font-size: 0.9em; }
kbd {
  display: inline-block; min-width: 1.6em; padding: 0 var(--space-1); text-align: center;
  border: 1px solid var(--color-border-strong); border-bottom-width: 2px; border-radius: var(--radius-xs); white-space: nowrap;
  background: var(--color-surface); direction: ltr;
}

:focus { outline: none; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-xs); }
/* عنوان‌هایی که برای اعلام تغییر نما focus می‌گیرند حلقه focus نمایش نمی‌دهند */
[tabindex="-1"]:focus-visible:is(h1, h2, h3, main, section) { outline: none; }

::selection { background: var(--color-primary-soft); color: var(--color-text); }

/* ---------- آیکون ---------- */
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 1em; height: 1em; }
.icon--lg { width: 1.6em; height: 1.6em; }
.icon--xl { width: 2.4em; height: 2.4em; }
/* آیکون‌های جهت‌دار در RTL قرینه می‌شوند */
[dir="rtl"] .icon--dir { transform: scaleX(-1); }

/* ---------- ابزارها ---------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: fixed; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); z-index: var(--z-skip);
  padding: var(--space-2) var(--space-4); background: var(--color-text); color: var(--color-bg); border-radius: var(--radius-sm);
  transform: translateY(-200%); transition: transform var(--motion-fast);
}
.skip-link:focus { transform: none; color: var(--color-bg); }
.container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-2)); }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.muted { color: var(--color-text-muted); }
.subtle { color: var(--color-text-subtle); }
.small { font-size: var(--text-sm); }
.xsmall { font-size: var(--text-xs); }
.bold { font-weight: var(--weight-bold); }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.w-full { width: 100%; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 240px)), 1fr)); gap: var(--gap, var(--space-4)); }
.eyebrow { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-primary); letter-spacing: 0.02em; margin-bottom: var(--space-2); display: block; }

/* اطلاعیه داده نمایشی — تا با عملکرد واقعی اشتباه نشود */
.demo-note {
  display: flex; gap: var(--space-2); align-items: flex-start;
  font-size: var(--text-xs); color: var(--color-warning); background: var(--color-warning-soft);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
}

@media print {
  .no-print { display: none !important; }
}

/* نشانگر ناوبری SPA */
html.is-navigating body::before { content: ""; position: fixed; inset-block-start: 0; inset-inline: 0; height: 3px; z-index: 9999; background: linear-gradient(90deg, transparent, var(--color-primary), transparent); background-size: 50% 100%; animation: spa-bar 0.9s linear infinite; }
@keyframes spa-bar { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) { html.is-navigating body::before { animation: none; background: var(--color-primary); opacity: 0.6; } }