@import "tailwindcss";

/* Theme tokens — the agent may retune these per brief. */
@theme {
  --color-primary: #10797A;
  --color-accent: #F58A2E;
  --color-surface: #F8F7F2;
  --color-ink: #1a1a1a;
  --color-ink-muted: #5a5a5a;
  --font-sans: "Vazirmatn", system-ui, sans-serif;
  --font-display: "Estedad", "Vazirmatn", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* این پروژه در رجیستر «Dark Cinematic Sci-Fi» ساخته شده؛ پس‌زمینهٔ ریشه باید
   تیره باشد تا نه هنگام mount اولیه فلش روشن دیده شود و نه در overscroll موبایل.
   توکن‌های @theme بالا هنوز پالت پیش‌فرض هستند و باید توسط ایجنت طراحی هم‌تراز شوند. */
html, body {
  font-family: var(--font-sans);
  color: #E8ECF4;
  background: #05070C;
  -webkit-font-smoothing: antialiased;
}

/* جلوگیری از اسکرول افقی در موبایل به‌خاطر لایه‌های سحابی با blur بزرگ */
html, body { overflow-x: hidden; }

#root { min-height: 100vh; }

/* ---------------------------------------------------------------
   وزن‌های عددی فونت
   کامپوننت‌ها از کلاس‌هایی مثل font-600 / font-800 استفاده کرده‌اند که در
   Tailwind وجود ندارند و بی‌اثر بودند (تیتر Hero و دکمه‌ها با وزن ۴۰۰ رندر
   می‌شدند). این‌جا به‌عنوان utility واقعی تعریف می‌شوند.
   نکته: برای متن فارسی وزن ۵۰۰ وزیرمتن بصری ضعیف است؛ عنوان‌ها باید ۶۰۰ به بالا باشند.
--------------------------------------------------------------- */
.font-400 { font-weight: 400; }
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.font-800 { font-weight: 800; }
.font-900 { font-weight: 900; }

/* ---------------------------------------------------------------
   دسترس‌پذیری: حالت فوکوس قابل‌مشاهده روی همهٔ عناصر تعاملی
--------------------------------------------------------------- */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid #31E7D2;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------
   احترام به prefers-reduced-motion برای انیمیشن‌های CSS.
   انیمیشن‌های Framer Motion از طریق <MotionConfig reducedMotion="user">
   در src/App.tsx مدیریت می‌شوند.
--------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* متن فارسی نباید letter-spacing بگیرد — اتصال حروف را می‌شکند.
   از این کلاس برای بلوک‌های فارسی داخل نوارهای تایپوگرافیک لاتین استفاده می‌شود. */
.fa-text { letter-spacing: normal; font-family: "Vazirmatn", system-ui, sans-serif; }