/* ============================================================
   SINOX API — BASE.CSS
   فونت، ریست، تایپوگرافی پایه، پس‌زمینه‌ی صفحه و کمک‌کننده‌های چیدمان.
   وابسته به tokens.css — همیشه بعد از آن لود شود.
   ============================================================ */

/* ---------- ۱. فونت‌ها (Vazirmatn + JetBrains Mono، محلی) ----------
   فایل‌های وزن در public/fonts/ قرار می‌گیرند (این پروژه آن‌ها را دانلود
   نمی‌کند — فقط قوانین /* وزیرمتن — زیرمجموعه‌ی لاتین + عربی/فارسی با unicode-range (لوکال، بدون CDN) */
@font-face { font-family:'Vazirmatn'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/vazirmatn-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family:'Vazirmatn'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/vazirmatn-arabic-400.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F; }
@font-face { font-family:'Vazirmatn'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/vazirmatn-latin-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+2000-206F,U+20AC; }
@font-face { font-family:'Vazirmatn'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/vazirmatn-arabic-500.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F; }
@font-face { font-family:'Vazirmatn'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/vazirmatn-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+2000-206F,U+20AC; }
@font-face { font-family:'Vazirmatn'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/vazirmatn-arabic-700.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F; }
@font-face { font-family:'Vazirmatn'; font-style:normal; font-weight:900; font-display:swap;
  src:url('../fonts/vazirmatn-latin-900.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+2000-206F,U+20AC; }
@font-face { font-family:'Vazirmatn'; font-style:normal; font-weight:900; font-display:swap;
  src:url('../fonts/vazirmatn-arabic-900.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/jetbrains-mono-700.woff2') format('woff2'); }

/* ---------- ۲. ریست مدرن ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

/* ---------- ۳. پیش‌فرض‌های RTL بدنه ---------- */
html {
  direction: rtl;
}

body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--text-1);
  background: var(--bg);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- ۴. تایپوگرافی ---------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--fh-h1); font-weight: var(--fw-black); }
h2 { font-size: var(--fh-h2); font-weight: var(--fw-black); }
h3 { font-size: var(--fh-h3); }
h4 { font-size: var(--fh-h4); }

p {
  line-height: var(--lh-body);
  color: var(--text-2);
}

a {
  color: var(--primary-light);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard);
}
a:hover { color: var(--primary-lighter); }
a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-xs); }

small { font-size: var(--fs-xs); color: var(--text-muted); }
strong, b { font-weight: var(--fw-bold); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  direction: ltr;
}

code {
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  background: var(--bg2);
  border: 1px solid var(--border-1);
  color: var(--cyan);
  font-size: 0.9em;
  unicode-bidi: isolate;
}

/* ---------- ۵. فوکوس قابل‌مشاهده (سراسری) ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ---------- ۶. اسکرول‌بار سفارشی ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--border-3); }

/* ---------- ۷. انتخاب متن ---------- */
::selection {
  background: rgba(99, 102, 241, 0.35);
  color: var(--text-1);
}

/* ---------- ۸. لینک پرش به محتوا (دسترس‌پذیری صفحه‌کلید) ---------- */
.skip-link {
  position: fixed;
  inset-inline-start: var(--space-4);
  top: -100px;
  z-index: 2000;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  transition: top var(--dur-base) var(--ease-standard);
}
.skip-link:focus-visible {
  top: var(--space-4);
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---------- ۹. پس‌زمینه‌ی صفحه (مش گرادیانت + نویز ظریف) ---------- */
.sx-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--grad-mesh);
}
.sx-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
/* سازگاری با نام کلاس قدیمی در style.css فعلی */
.stars { position: fixed; inset: 0; z-index: -1; background: var(--grad-mesh); }

/* ---------- ۱۰. کانتینر و کمک‌کننده‌های چیدمان ---------- */
.sx-container {
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.sx-container-wide {
  max-width: var(--container-w-wide);
  margin-inline: auto;
  padding-inline: var(--space-10);
}
@media (max-width: 640px) {
  .sx-container { padding-inline: var(--space-4); }
  .sx-container-wide { padding-inline: var(--space-4); }
}

.sx-section { padding-block: var(--space-16); }
@media (max-width: 640px) {
  .sx-section { padding-block: var(--space-10); }
}

.sx-grid { display: grid; gap: var(--space-5); }
.sx-grid-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.sx-grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.sx-grid-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

.sx-flex { display: flex; }
.sx-flex-center { display: flex; align-items: center; justify-content: center; }
.sx-flex-between { display: flex; align-items: center; justify-content: space-between; }
.sx-stack { display: flex; flex-direction: column; }

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

/* ---------- ۱۱. آشکارسازی هنگام اسکرول (scroll-reveal) ----------
   ui.js با IntersectionObserver کلاس is-visible را اضافه می‌کند. */
.sx-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slower) var(--ease-out),
              transform var(--dur-slower) var(--ease-out);
}
.sx-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .sx-reveal { opacity: 1; transform: none; transition: none; }
}