/* ==========================================================================
   TradeLab — Design Tokens
   تمام مقادیر از اینجا کنترل می‌شوند و داشبورد مدیریت می‌تواند آن‌ها را override کند
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}

:root{
  /* ══ Brand — بنفشِ نسبتاً روشن + خاکستری ══
     خواسته‌ی کارفرما: «پالت دو رنگ بنفش (نسبتا روشن) و خاکستری باشه،
     بنفش نمیخوام گرادیان باشه».
     پس `--brand-grad` دیگر گرادیان **نیست** بلکه همان بنفشِ یکدست است.
     ⚠️ نامش را عوض نکردم و حذفش نکردم چون در ۵ فایل و ۹ قاعده به‌کار
     رفته؛ اگر حذف می‌کردم آن‌ها بی‌پشتوانه می‌شدند. با یکدست‌کردنِ
     خودِ توکن، همه‌ی آن ۹ جا یک‌جا بی‌گرادیان می‌شوند.
     اگر روزی خواستید گرادیان برگردد، **فقط همین دو خط** را عوض کنید. */
  --brand-1:#a78bfa;            /* بنفشِ روشن — رنگِ اصلیِ برند */
  --brand-2:#8b5cf6;            /* بنفشِ کمی تیره‌تر برای حالتِ hover */
  --brand-ink:#2e1065;          /* متنِ تیره روی بنفش (خوانایی) */
  --brand-grad:#a78bfa;                     /* یکدست — گرادیان نیست */
  --brand-grad-soft:rgba(167,139,250,.14);  /* یکدست — گرادیان نیست */

  /* Semantic */
  /* سبز/سرخ/نارنجی معنیِ معاملاتی دارند (سود، زیان، هشدار) و بنفش
     نمی‌شوند — اگر بنفششان کنم کاربر سود و زیان را تشخیص نمی‌دهد.
     ولی `--info` آبی بود و با پالتِ بنفش/خاکستری ناساز؛ بنفش شد. */
  --up:#22c55e;      --up-soft:rgba(34,197,94,.13);
  --down:#ef4444;    --down-soft:rgba(239,68,68,.13);
  --warn:#f59e0b;    --warn-soft:rgba(245,158,11,.13);
  --info:#a78bfa;    --info-soft:rgba(167,139,250,.14);
  --special:#8b5cf6; --special-soft:rgba(139,92,246,.14);

  /* Radius */
  --r-xs:8px; --r-sm:10px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-full:999px;

  /* Spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;

  /* Typography */
  --ff:'Vazirmatn',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;

  /* ⚠️ اینجا پیش‌تر 'JetBrains Mono','Fira Code',Consolas بود — و هیچ‌کدام
     در public/assets/fonts/ وجود ندارند (تنها Vazirmatn هست). پس هر عدد
     که کلاسِ mono داشت به فونتِ **پیش‌فرضِ سیستم** می‌افتاد؛ همان چیزی
     که کارفرما در ویدئو دید («فونت پیش‌فرض رو گرفته»).
     چرا Vazirmatn و نه دانلودِ یک فونتِ mono: کارفرما گفت «باید فونتِ
     **اصلی** رو بذارید». ولی عدد در جدول باید هم‌عرض باشد، و سنجیدم:
     ارقامِ فارسیِ Vazirmatn عرض‌های ۵۹۱ تا ۱۳۴۹ دارند (ناهم‌عرض!) و
     ویژگیِ `tnum` همه را ۱۳۴۹ می‌کند (۲۲ گلیف، آزموده با fontTools).
     پس ستون‌ها با همان فونتِ اصلی میزان می‌شوند، بی هیچ فونتِ تازه. */
  --ff-mono:'Vazirmatn',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  /* ارقامِ هم‌عرض — روی هر جایی که --ff-mono می‌رود باید این هم برود */
  --num-feat:"tnum" 1,"lnum" 1;
  --fs-xs:11.5px; --fs-sm:12.5px; --fs-base:14px; --fs-md:15px; --fs-lg:17px;
  --fs-xl:20px; --fs-2xl:24px; --fs-3xl:30px; --fs-4xl:38px; --fs-5xl:clamp(30px,5.2vw,54px);

  /* Motion */
  --t-fast:130ms cubic-bezier(.4,0,.2,1);
  --t:180ms cubic-bezier(.4,0,.2,1);
  --t-slow:320ms cubic-bezier(.4,0,.2,1);

  /* Layout */
  --container:1280px;
  --header-h:64px;
  --sidebar-w:250px;
  --sidebar-w-sm:68px;

  /* z-index */
  --z-header:100; --z-sidebar:90; --z-dropdown:200; --z-modal:400; --z-toast:500; --z-tip:600;
}

/* ---------- Dark theme (default) ---------- */
:root, [data-theme="dark"]{
  /* خاکستریِ خنثی — پیش‌تر آبی‌مایل بود (#070a12 و #0d1220 ته‌رنگِ آبی
     دارند). حالا بی ته‌رنگ است تا بنفش تنها رنگِ برند بمانَد. */
  --bg:#0b0b0d;
  --bg-grad:none;                /* گرادیانِ پس‌زمینه برداشته شد */
  --surface:#141417;
  --surface-2:#1a1a1f;
  --surface-3:#212127;
  --surface-hover:#2a2a31;
  --line:#2b2b33;
  --line-2:#3a3a44;
  --txt:#f1f1f4;
  --txt-2:#b9b9c4;
  --txt-3:#8b8b98;
  --txt-4:#6a6a76;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 8px 24px -8px rgba(0,0,0,.55);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,.7);
  --glow:0 0 0 1px rgba(167,139,250,.18), 0 18px 50px -22px rgba(167,139,250,.45);
  --overlay:rgba(6,6,8,.78);
  --grid-line:rgba(180,180,195,.07);
  --chart-bg:#101013;
  color-scheme:dark;
}

/* ---------- Light theme ---------- */
[data-theme="light"]{
  --bg:#f6f6f8;
  --bg-grad:none;                /* گرادیانِ پس‌زمینه برداشته شد */
  --surface:#ffffff;
  --surface-2:#ffffff;
  --surface-3:#f2f2f5;
  --surface-hover:#ecebf3;
  --line:#e4e4ea;
  --line-2:#d2d2db;
  --txt:#18181d;
  --txt-2:#4c4c58;
  --txt-3:#71717f;
  --txt-4:#9a9aa8;
  --shadow-sm:0 1px 2px rgba(15,26,46,.06);
  --shadow:0 8px 24px -10px rgba(15,26,46,.16);
  --shadow-lg:0 24px 60px -22px rgba(15,26,46,.22);
  --glow:0 0 0 1px rgba(139,92,246,.20), 0 18px 44px -22px rgba(139,92,246,.35);
  --overlay:rgba(24,24,29,.42);
  --grid-line:rgba(24,24,29,.06);
  --chart-bg:#ffffff;
  color-scheme:light;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ══════════════════════════════════════════════════════════════
   لایه‌ی هم‌نامی (alias) — پل بین نام‌گذاری layout.css و توکن‌های پایه
   چون هر دو روی همان عنصر :root تعریف می‌شوند، مقدار نهایی به‌صورت
   خودکار با تغییر تم (data-theme) به‌روزرسانی می‌شود.
   ══════════════════════════════════════════════════════════════ */
:root{
  --bg-1:var(--bg);
  --bg-2:var(--surface);
  --bg-3:var(--surface-2);
  --bg-4:var(--surface-3);
  --bg-hover:var(--surface-hover);

  --tx-1:var(--txt);
  --tx-2:var(--txt-2);
  --tx-3:var(--txt-3);
  --tx-4:var(--txt-4);

  --ln-1:var(--line);
  --ln-2:var(--line-2);

  --z-hdr:var(--z-header);
  --z-sb:var(--z-sidebar);

  --font-mono:var(--ff-mono);
  --sh-sm:var(--shadow-sm);
  --sh:var(--shadow);
  --sh-lg:var(--shadow-lg);
}