/*
  design-tokens.css — نظام التصميم الموحَّد الوحيد (Single Canonical Design
  Token Architecture)
  ============================================================
  Product Completion Pass (إزالة التوكنز القديمة نهائيًا): كان بهذا الملف
  طبقتان دلاليتان منفصلتان تُنتجان نفس اللون تقريبًا بأسماء/Hex مختلفة —
  (أ) طبقة "Shell" هنا (--bg-primary/--bg-elevated/--shell-border/
  --state-success..) استخدمتها sidebar/topbar/components.css فقط، و(ب)
  طبقة templates/base.html القديمة (--page-bg/--surface-*/--good/
  --critical..) استخدمتها بقية الصفحات. كلاهما أُزيلا نهائيًا هنا وبـ
  base.html -- التوكنز القانونية الوحيدة الآن هي طبقة "Design Language v1"
  أسفل هذا الملف (Void/Deep Navy/Panel Ink/Emerald/Signal Red/Amber Watch/
  Electric Blue/Cyan Pulse..)، تُستهلَك بكل صفحة بنفس الأسماء الحرفية، بلا
  أي Alias أو طبقة توافق قديمة. --space-1..8/--radius-sm/md/lg (base.html)
  و--space-3xs..3xl/--radius-1..4 (هنا) تبقيان مقصودتين منفصلتين (مقاييس
  تباعد/انحناء، لا مفردات لونية دلالية -- لا تعارض دلالي حقيقي بينهما).

  الاتجاه البصري: "sci-fi trading terminal" هادئ — خلفية داكنة عميقة (مو
  رمادي عادي)، حدود متوهجة (glow) حسب حالة العنصر، خط monospace للأرقام.
  الهدوء أهم من البهرجة — Glow خفيف دائمًا، مو نيون صارخ.

  Product Completion Pass (Dark-only globally): Trading OS قرار منتجي صريح
  أنه داكن فقط بكل صفحاته — لا وضع فاتح إطلاقًا، ولا زر تبديل مظهر (أُزيل
  من partials/topbar.html وtemplates/settings.html وtemplates/base.html).
  القيم أدناه كانت سابقًا فرع :root[data-theme="dark"]/@media منفصل خلف
  توكنز فاتحة افتراضية + مفتاح تبديل — أصبحت الآن القيم الوحيدة بـ:root
  مباشرة، بلا أي فرع فاتح، بلا أي شرط media/attribute.
*/

:root {
  /* ---------- الخطوط ---------- */
  --font-sans: "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --font-mono: "SF Mono", "IBM Plex Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, "Courier New", monospace;

  /* ---------- سلّم المسافات (Shell/Components — مستقل عن --space-1..8 القديم) ---------- */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* ---------- نصف القطر (مستقل عن --radius-sm/md/lg القديم) ---------- */
  --radius-1: 6px;
  --radius-2: 10px;
  --radius-3: 14px;
  --radius-4: 20px;
  --radius-full: 999px;

  /* ---------- توكن "محايد" عام (Generic Neutral) — منفصل عمدًا عن
     --slate-idle (ذاك لحالة "خامل/متوقف" لمحفظة تحديدًا §3.4) — هذا لأي
     سياق محايد عام لا علاقة له بحالة محفظة (مثلًا .ui-badge--neutral). ---------- */
  --neutral-gray: #93a3c2;
  --neutral-gray-glow: color-mix(in srgb, var(--neutral-gray) 30%, transparent);

  /* ---------- الحركة (إلزامي — لا Hardcode بأي مكوّن) ---------- */
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 400ms;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

  --glow-transition: box-shadow var(--duration-normal) var(--ease-standard);
  --card-hover-transition: transform var(--duration-fast) var(--ease-standard),
                           box-shadow var(--duration-fast) var(--ease-standard);
}

/*
  ============================================================================
  Design Language v1 (docs/visual-direction-v2-design-language.md, §3/§4/§5/§6)
  — التوكنز القانونية الوحيدة لكل ألوان/أسطح/نصوص/حدود المنتج بالكامل
  ============================================================================
  توكنز بالأسماء الحرفية من §3 (Void, Deep Navy, Panel Ink...). تُستهلَك الآن
  مباشرة (بلا Alias/طبقة توافق) بكل صفحة: dashboard/accounts/signals/trades/
  settings (عبر templates/base.html، أعيد بناؤها هنا)، وsidebar/topbar/
  components.css/mission_control.html (كانت تستهلك طبقة "Shell" منفصلة
  بأعلى هذا الملف، أُزيلت -- راجع تعليق أعلى الملف). dashboard.html المحلية
  (بادئة --dt-*، نطاق .dash-terminal فقط) تستهلكها أيضًا مباشرة.

  عمدًا Void/Deep Navy/Panel Ink وكل ما يعتمد عليها هنا **ثابتة بلا Light Mode**
  — هذا قرار موثَّق صراحة بـ§3.6: نظام Trading OS لا يملك وضعًا فاتحًا إطلاقًا
  بأي صفحة (Product Completion Pass: toggle الـLight/Dark أُزيل بالكامل).
*/
:root {
  /* ---------- §3.2 لوحة الأساس (Foundation) ---------- */
  --void: #05070D;
  --deep-navy: #0B1220;
  --panel-ink: #101A2E;
  --hairline: rgba(140, 170, 220, 0.14);
  --hairline-strong: rgba(140, 170, 220, 0.26);

  /* مستويات ارتفاع إضافية فوق --panel-ink (Elevation Tiers) — توحيد
     Product Completion Pass: كانت مبعثرة كـ--surface-2/-3 (طبقة base.html
     القديمة) و--bg-elevated/-2 (طبقة Shell القديمة بـdesign-tokens.css) --
     نفس الفكرة بالضبط بثلاث تسميات مختلفة. مصدر واحد الآن، مشتق فعليًا من
     --panel-ink نفسه (لا Hex منفصل جديد). */
  --panel-ink-2: color-mix(in srgb, var(--panel-ink) 90%, white 10%);
  --panel-ink-3: color-mix(in srgb, var(--panel-ink) 78%, white 22%);

  /* خط شبكي داخل الجداول — أخفّ من --hairline (حدود بطاقة) عمدًا */
  --grid-line: color-mix(in srgb, var(--hairline) 55%, var(--void) 45%);

  /* ظلال عامة (Depth عام، غير مرتبط بلون حالة) — كانت مكرَّرة (--shadow-sm/md
     بطبقة base.html القديمة و--shadow-1/2 بطبقة Shell القديمة، بقيم قريبة
     جدًا لبعض) -- توحيد على قيمة واحدة بكل مستوى. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 18px 40px rgba(0, 0, 0, 0.5);

  /* ---------- §3.3 ألوان الطاقة (Signal Colors) ---------- */
  --electric-blue: #3D7FFF;
  --cyan-pulse: #22D3EE;
  --neural-purple: #8B6BFF;
  /* تدرّج/توهّج مشتقّان من ألوان الطاقة أعلى -- كانا مُعرَّفين بـHex منفصل
     بطبقة base.html القديمة (--accent-gradient/--accent-soft)، الآن مشتقّان
     فعليًا من --electric-blue/--cyan-pulse القانونيين. */
  --accent-gradient: linear-gradient(135deg, var(--electric-blue), var(--cyan-pulse));
  --accent-soft: color-mix(in srgb, var(--electric-blue) 16%, transparent);

  /* ---------- §3.4 ألوان الحالة (Semantic — منفصلة عن ألوان الطاقة) ---------- */
  --emerald: #34D399;
  --amber-watch: #F5B942;
  --slate-idle: #6B7A99;
  --signal-red: #F5484A;
  /* عائلة لونية قريبة من amber-watch لكن متمايزة عمدًا (تحذير/معلَّق ثانٍ
     مثل accounts.status='paused' الوسم البرتقالي، أو رموز بانتظار اعتماد
     Owner) — كانت Hex منفصل بطبقة base.html القديمة، مصدر وحيد الآن. */
  --orange: #E8963D;

  /* ---------- §3.5 Gold — محجوز حصريًا لـpolaris_scores.is_crown، ممنوع
     استخدامه لأي عنصر آخر مهما بدا "مهمًا" ---------- */
  --gold: #E8B347;

  /* نسخ Glow لكل لون أعلاه — نفس منطق --state-*-glow الحالي بالأعلى
     (color-mix شفاف)، تُستهلك بـcomponents.css (Depth Shadow / Selective Glow) */
  --electric-blue-glow: color-mix(in srgb, var(--electric-blue) 38%, transparent);
  --cyan-pulse-glow: color-mix(in srgb, var(--cyan-pulse) 38%, transparent);
  --neural-purple-glow: color-mix(in srgb, var(--neural-purple) 38%, transparent);
  --emerald-glow: color-mix(in srgb, var(--emerald) 38%, transparent);
  --amber-watch-glow: color-mix(in srgb, var(--amber-watch) 38%, transparent);
  --slate-idle-glow: color-mix(in srgb, var(--slate-idle) 30%, transparent);
  --signal-red-glow: color-mix(in srgb, var(--signal-red) 42%, transparent);
  --gold-glow: color-mix(in srgb, var(--gold) 42%, transparent);

  /* ---------- نصوص Void/Deep Navy القانونية — كانتا مُكرَّرتين كقيم Hex ثابتة
     بـmission_control.html فقط (#E8ECF6/#C9D2E8)، الآن مصدر وحيد هنا يستهلكه
     mission_control.html وtemplates/base.html معًا (Product Completion Pass:
     توحيد الطبقتين على Void/Deep Navy — راجع الملاحظة أعلى الملف). ---------- */
  --text-hi: #E8ECF6;
  --text-mid: #C9D2E8;

  /* ---------- §4.2 الطباعة — يُضاف لا يستبدل --font-sans/--font-mono
     الحاليين بالأعلى (اللي يقودهما Cairo لدعم عربي/إنجليزي كامل بكل الواجهة
     الحية). --font-mono يُعاد ترتيبه فقط ليقود بـJetBrains Mono/IBM Plex Mono
     حسب توصية §4.2 الحرفية (كان يقود سابقًا بـSF Mono) — تعديل ترتيب Fallback
     فقط، بدون كسر أي استهلاك حالي (المستهلك الوحيد اليوم components.css). */
  --font-display: "Geist", "Inter", var(--font-sans);

  /* تباعد الحروف للتسميات/الحالات الثانوية — نفس عائلة العناوين بوزن أخف
     وLetter-spacing موجب خفيف حسب §4.2 صف "النصوص الثانوية/الوسوم" */
  --tracking-label: 0.03em;
  --tracking-label-lg: 0.08em;

  /* ---------- §5.3 مستويات أداء الخلفية (Performance Tiers) — تُستهلك
     لاحقًا بطبقات §5.2 (Nebula/Particle/Grid/Noise)، لا طبقات تُبنى هنا،
     فقط المتغيرات المتحكمة بكثافتها + بنية data-bg-tier على body/root.
     الافتراضي بلا أي data-bg-tier = BALANCED (توسّط آمن ريثما تُبنى آلية
     الكشف التلقائي لقدرة الجهاز بجلسة التنفيذ). ---------- */
  --bg-tier-nebula-opacity: 1;
  --bg-tier-particle-opacity: 0.6;
  --bg-tier-grid-opacity: 0;
  --bg-tier-noise-opacity: 1;
  --bg-tier-blur: 0px;
  --bg-tier-motion: running;
  --card-blur: 14px;

  /* ---------- §6 نظام الحركة — مدد/منحنيات جديدة، بالإضافة على
     --duration-fast/normal/slow و--ease-standard/emphasized الحاليين بالأعلى
     (تلك تبقى للحركة التفاعلية العامة لأي مكوّن UI، هذي مخصّصة لحالات §6
     المحدَّدة حرفيًا بالوثيقة) ---------- */
  --ease-ambient: cubic-bezier(0.45, 0, 0.55, 1); /* §6.1: ناعم جدًا، لا Linear ولا Bounce */
  --duration-ambient-slow: 16s;   /* §5.2: انجراف Neural Grid/Nebula البطيء جدًا */
  --duration-ambient-medium: 8s;  /* §5.2: حركة Particle Layer */
  --duration-glow-pulse: 2400ms;  /* §5.4/§6.2: نبض توهّج مستمر لعنصر "حي الآن" */
  --duration-glow-pulse-strong: 900ms; /* §6.2: نبضة واحدة قوية عند وصول قرار بوت جديد، قبل ما تهدأ لـglow-pulse */
  --duration-counter: 600ms;      /* §6.2: عدّ الأرقام (equity/pnl/confidence) بدل القفزة الفورية */
  --duration-badge-transition: 320ms; /* §6.2: انتقال لوني ناعم لشارة الحالة، لا استبدال فوري */
  --duration-signal-flow: 900ms;  /* §6.2: رسم خط اتصال بالخريطة العصبية عقدة→عقدة */
  --duration-alert-pulse: 220ms;  /* §6.2: الاستثناء الوحيد لحركة "حادة" واعية — Kill Switch/halted فقط */
}

/* §6.3: كل الحركة المحيطية تتجمّد لأقرب إطار ثابت — Counter يتحول لتحديث
   فوري بدون عدّ. المتغيرات فقط هنا (المستهلك الفعلي بجلسة لاحقة). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --bg-tier-motion: paused;
    --bg-tier-particle-opacity: 0;
    --bg-tier-grid-opacity: 0;
    --duration-counter: 1ms;
  }
}

/* [data-bg-tier] يُطبَّق على <body> أو أي عنصر جذر — يتحكم بكثافة طبقات
   §5.2 الأربع المتحركة + backdrop-blur، حسب جدول §5.3 حرفيًا. لا Nebula
   نفسها ولا Particle/Grid/Noise تُبنى بهذي الجلسة — فقط القيم التي
   ستستهلكها تلك الطبقات لاحقًا (Visual Implementation 1). */
[data-bg-tier="high"] {
  --bg-tier-nebula-opacity: 1;
  --bg-tier-particle-opacity: 1;
  --bg-tier-grid-opacity: 1;
  --bg-tier-noise-opacity: 1;
  --bg-tier-blur: 18px;
  --bg-tier-motion: running;
}
[data-bg-tier="balanced"] {
  --bg-tier-nebula-opacity: 1;
  --bg-tier-particle-opacity: 0.6;
  --bg-tier-grid-opacity: 0;
  --bg-tier-noise-opacity: 1;
  --bg-tier-blur: 0px;
  --bg-tier-motion: running;
}
[data-bg-tier="low"] {
  --bg-tier-nebula-opacity: 1;
  --bg-tier-particle-opacity: 0;
  --bg-tier-grid-opacity: 0;
  --bg-tier-noise-opacity: 1;
  --bg-tier-blur: 0px;
  --bg-tier-motion: paused;
  --card-blur: 0px;
}
[data-bg-tier="reduced"] {
  --bg-tier-nebula-opacity: 1;
  --bg-tier-particle-opacity: 0;
  --bg-tier-grid-opacity: 0;
  --bg-tier-noise-opacity: 0;
  --bg-tier-blur: 0px;
  --bg-tier-motion: paused;
  --card-blur: 0px;
}

/*
  ============================================================================
  Frontend Visual Rebuild (2026-08-10) — Shared typography scale + live-state
  indicator (docs/visual-direction-v2-design-language.md §4.3/§7 نقطة 4)
  ============================================================================
  طبقة Design Language v1 أعلاه وفّرت الألوان/المسافات/المدد فقط -- هذي
  الطبقة هي أول استهلاك فعلي لسلّم الطباعة الموصوف بـ§4.3 (الرقم أولًا) +
  مؤشر الحالة الحية ثلاثي الوضع الإلزامي بـ§7 (حي/ثابت/منقطع) كـclasses
  عامة يستهلكها الـShell الجديد وMission Control معًا -- لا Hex/مدة حركة
  مكتوبة مباشرة هنا، كل شيء من التوكنز أعلاه.
*/

/* ---------- سلّم الطباعة (§4.3: الرقم من الداخل للخارج) ---------- */
.os-metric-primary {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--text-hi);
}
.os-metric-secondary {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  color: var(--text-hi);
}
.os-metric-micro {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-hi);
}
.os-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label-lg);
  color: var(--slate-idle);
}
.os-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate-idle);
}
.os-section-title {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-mid);
  margin: 0;
}
.os-page-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-hi);
  margin: 0;
}
.os-good { color: var(--emerald); }
.os-bad { color: var(--signal-red); }
.os-warn { color: var(--amber-watch); }

/* ---------- مؤشر الحالة الحية (§7 نقطة 4) — 3 أوضاع فقط، لا رابع:
   is-live (نبض، يتحدّث الآن)، is-static (ثابت آخر قيمة معروفة، بلا نبض)،
   is-stale (منقطع/بيانات قديمة — تلاشي لوني + إلزامي نص "قديم منذ.."
   بجانبه من القالب، هذا الـclass نفسه توهج لوني فقط لا نص). ---------- */
.os-live-dot {
  position: relative;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald);
  flex-shrink: 0;
}
.os-live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--emerald);
  opacity: 0.5;
  animation: os-live-pulse var(--duration-glow-pulse) var(--ease-ambient) infinite;
}
.os-live-dot.is-static { background: var(--slate-idle); }
.os-live-dot.is-static::after { display: none; }
.os-live-dot.is-stale { background: var(--amber-watch); opacity: 0.7; }
.os-live-dot.is-stale::after { display: none; }
@keyframes os-live-pulse {
  0% { transform: scale(0.6); opacity: 0.6; }
  70%, 100% { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .os-live-dot::after { animation: none; opacity: 0; }
}

/* ---------- خلفية محيطية (§5.2 Nebula، تركيب CSS-only مبسَّط -- Particle/
   Grid/Noise الكاملة تبقى خارج نطاق هذي الجلسة، نفس ملاحظة الأعلى) ----------
   تُطبَّق على body مباشرة (طبقة ثابتة خلف كل المحتوى، z-index: 0 -- .app-shell
   يرتفع فوقها بـz-index: 1 بتعليق base.html). انجراف بطيء جدًا (16s) بمنحنى
   Ease-in-out ناعم -- "تُحسّ بالعين الطرفية لا المباشرة" حسب §5.2/§5.3. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--bg-tier-nebula-opacity, 1);
  background:
    radial-gradient(circle at 12% -8%, color-mix(in srgb, var(--neural-purple) 9%, transparent), transparent 55%),
    radial-gradient(circle at 112% 8%, color-mix(in srgb, var(--electric-blue) 7%, transparent), transparent 50%),
    radial-gradient(circle at 50% 115%, color-mix(in srgb, var(--cyan-pulse) 5%, transparent), transparent 60%);
  animation: os-nebula-drift var(--duration-ambient-slow) var(--ease-ambient) infinite alternate;
  animation-play-state: var(--bg-tier-motion, running);
}
@keyframes os-nebula-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-2%, 1.5%) scale(1.05); }
}