/* ════════════════════════════════════════════════════════════════════════
   tokens.css — توکن‌های دیزاین‌سیستمِ Trading Robot (کنسولِ مدیریت) + پایه‌ها.
   منبع: دیزاین‌سیستمِ برند (colors_and_type.css) + لایهٔ کنسول (design_src).
   تمِ تیره · RTL · فونت: Vazirmatn (بدنه) · Space Grotesk (نمایشی) · JetBrains Mono (اعداد/متا)
   ════════════════════════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap");

@font-face { font-family: "Vazirmatn"; src: url("https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* سطح‌ها (لایهٔ اپِ کنسول روی برند) */
  --abg:    #0a0d13;   /* پس‌زمینهٔ اپ            */
  --abg2:   #0c1623;   /* هدر/نوارها              */
  --card:   #162030;   /* کارت                    */
  --card2:  #121b29;   /* کارتِ فرورفته/اینپوت     */
  --line:   #1A2438;   /* خطِ ظریف                */
  --line2:  #263450;   /* خطِ پررنگ               */

  /* متن */
  --ink:    #E8EDF4;   /* اصلی   */
  --dim:    #9BA8BF;   /* فرعی   */
  --mut:    #5A6478;   /* متا    */
  --on-accent: #0A0A0B;

  /* برند و سمانتیک */
  --orange: #FF7A1A;   /* تنها رنگِ تأکید */
  --orange-2: #FFA15C; /* hover */
  --blue:   #5FB3FF;
  --green:  #26A69A;
  --green-2:#5BC28C;
  --red:    #EF5350;
  --violet: #9B8CFF;
  --amber:  #FFB23F;

  /* فونت‌ها — در RTL Vazirmatn پایهٔ همه است؛ لاتین/اعداد از خانوادهٔ خودشان می‌آیند */
  --mono: "JetBrains Mono", "Vazirmatn", "SF Mono", Menlo, monospace;
  --disp: "Space Grotesk", "Vazirmatn", sans-serif;
  --body: "Vazirmatn", "Inter", sans-serif;

  --radius:      10px;
  --radius-card: 14px;
  --radius-pill: 999px;
  --shadow-card: 0 32px 64px -16px rgba(0,0,0,.8);
  --ease: cubic-bezier(.25,.46,.45,.94);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--abg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: var(--body); }
::selection { background: var(--orange); color: var(--on-accent); }

/* ── اعداد: LTR ایزوله + رقم‌های هم‌عرض ── */
.num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.cur { color: var(--mut); font-size: .62em; margin-inline-start: 3px; font-weight: 500; }

/* ── eyebrowِ امضای برند: «▪ برچسب» ── */
.eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  color: var(--mut); display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--orange); display: inline-block; flex: none; }

/* ── چیپ ── */
.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 8px;
  border-radius: 6px; font-size: 10.5px; font-weight: 500; white-space: nowrap;
  border: 1px solid var(--line2); color: var(--dim); background: var(--card2);
}
.chip.warn { color: var(--amber); border-color: rgba(255,178,63,.4); background: rgba(255,178,63,.09); }
.chip.inst { color: #b9adff; border-color: rgba(155,140,255,.35); background: rgba(155,140,255,.1); }
.chip.ok   { color: var(--green-2); border-color: rgba(38,166,154,.35); background: rgba(38,166,154,.1); }
.chip.bad  { color: #ff8a87; border-color: rgba(239,83,80,.4); background: rgba(239,83,80,.1); }

/* ── دکمه ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: var(--radius);
  font: 600 13.5px var(--body); cursor: pointer; transition: .15s var(--ease);
  border: 1px solid var(--line2); background: var(--card2); color: var(--ink);
}
.btn:hover { border-color: var(--line2); transform: translateY(-1px); }
.btn.pri { background: var(--orange); border-color: var(--orange); color: var(--on-accent); }
.btn.pri:hover { background: var(--orange-2); }
.btn.gho { background: transparent; border-color: transparent; color: var(--dim); }
.btn.gho:hover { border-color: var(--line2); background: rgba(255,255,255,.03); transform: none; }
.btn.sm { height: 34px; padding: 0 13px; font-size: 12.5px; border-radius: 8px; }
.btn.w100 { width: 100%; }
.btn svg { width: 16px; height: 16px; }

/* ── اسکلتونِ بارگذاری ── */
.sk {
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04));
  background-size: 200% 100%; animation: sk-sh 1.3s infinite; border-radius: 11px;
}
@keyframes sk-sh { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── نقطهٔ زنده ── */
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(38,166,154,.5); animation: pl 1.7s infinite; flex: none; }
@keyframes pl { 0% { box-shadow: 0 0 0 0 rgba(38,166,154,.5); } 70% { box-shadow: 0 0 0 7px rgba(38,166,154,0); } 100% { box-shadow: 0 0 0 0 rgba(38,166,154,0); } }

/* ── فلکس‌کمکی ── */
.fx { display: flex; } .ac { align-items: center; } .jb { justify-content: space-between; }
.f1 { flex: 1; min-width: 0; }
.gap6 { gap: 6px; } .gap8 { gap: 8px; } .gap10 { gap: 10px; } .gap12 { gap: 12px; }
.wrap-fx { flex-wrap: wrap; }

/* ── اسکرول‌بارِ ظریف ── */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 99px; border: 2px solid var(--abg); }
::-webkit-scrollbar-track { background: transparent; }