/* ==========================================================================
   HERO AI — Design Tokens
   ========================================================================== */

@font-face {
  font-family: 'Yekan Bakh';
  src: url('../fonts/YEKAN_BAKH_FANUM_04_REGULAR.WOFF') format('woff');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Yekan Bakh';
  src: url('../fonts/YEKAN_BAKH_FANUM_05_MEDIUM.WOFF') format('woff');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Yekan Bakh';
  src: url('../fonts/YEKAN_BAKH_FANUM_06_BOLD.WOFF') format('woff');
  font-weight: 700;
  font-display: swap;
}

/* Inter — latin subset only.

   نام مدل و شناسه‌ها باید لاتین بمانند (قرارداد CLAUDE.md)، ولی یکان بخ
   نسخه‌ی FaNum است و ارقام لاتین را با گلیف فارسی می‌کشد؛ «Grok 4.3» روی
   کارت «Grok ۴.۳» دیده می‌شد.

   قبلاً فقط در CSS نام Inter صدا زده می‌شد بدون اینکه فایلش در قالب باشد،
   پس مرورگر بی‌صدا به system-ui می‌افتاد و عنوان کارت تنها متنی بود که با
   بقیه هم‌خانواده نبود (اندازه‌گیری‌شده روی استیج). حالا فونت واقعاً هست.

   فقط دو وزنی که لازم است: ۵۰۰ برای نوار مدل‌های تازه، ۷۰۰ برای عنوان کارت.
   SIL OFL — همان فایل‌هایی که افزونه‌ی heroai-chat استفاده می‌کند. */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* — Brand gradient stops (from logo) — */
  --cyan-500: #12B5C9;
  --cyan-400: #1AC2C0;
  --blue-500: #3D7BF0;
  --blue-600: #4C6FEA;
  --violet-500: #8B4FD9;
  --violet-400: #B84FD9;

  --grad-brand: linear-gradient(135deg, #12B5C9 0%, #3D7BF0 48%, #8B4FD9 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(18,181,201,.12) 0%, rgba(61,123,240,.12) 50%, rgba(139,79,217,.12) 100%);
  --grad-brand-wide: linear-gradient(135deg, #1AC2C0 0%, #12B5C9 22%, #3D7BF0 55%, #8B4FD9 82%, #B84FD9 100%);

  /* — Surfaces — */
  --bg: #F8F9FB;
  --bg-sunken: #F1F3F7;
  --surface: #FFFFFF;
  --surface-2: #FAFBFC;

  /* — Text — */
  --text: #1A1D29;
  --text-2: #6B7280;
  --text-3: #9AA1AE;
  --text-invert: #FFFFFF;

  /* — Lines — */
  --border: #E7E9EF;
  --border-strong: #D6DAE3;

  /* — Status — */
  --success: #12A56E;
  --success-bg: #E6F7F0;
  --warning: #E08A17;
  --warning-bg: #FEF5E6;
  --danger: #E0453C;
  --danger-bg: #FDECEB;
  --info: #3D7BF0;
  --info-bg: #ECF2FE;

  /* — Radius — */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  /* — Shadows — */
  --sh-xs: 0 1px 2px rgba(26,29,41,.05);
  --sh-sm: 0 2px 8px rgba(26,29,41,.05);
  --sh-md: 0 6px 20px rgba(26,29,41,.07);
  --sh-lg: 0 16px 44px rgba(26,29,41,.10);
  --sh-brand: 0 10px 26px rgba(61,123,240,.26);

  /* — Spacing scale — */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* — Type scale — */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 26px;
  --fs-2xl: 34px;
  --fs-3xl: 44px;

  /* — Motion — */
  --t-fast: .16s cubic-bezier(.4,0,.2,1);
  --t: .24s cubic-bezier(.4,0,.2,1);
  --t-slow: .4s cubic-bezier(.4,0,.2,1);

  /* — Layout — */
  --container: 1200px;
  --header-h: 72px;
  --sidebar-w: 264px;
  --rail-w: 72px;
}