/* نظام الألوان (design tokens) - Dark كافتراضي، Light عبر data-theme أو
   تفضيل النظام. كل الألوان الدلالية (up/down/neutral) بتتحدد هنا مرة واحدة
   وبتتستخدم فى كل الصفحات - من غير ما نكرر ألوان hardcoded فى أي تمبلت. */
:root {
  color-scheme: dark;
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #1d2129;
  --border: #2a2e38;
  --text: #e6e8ec;
  --muted: #9aa1ac;
  --accent: #4f8cff;
  --accent-bg: rgba(79, 140, 255, 0.15);
  --accent-2: #f5a623;

  --up: #2ecc71;
  --down: #e74c3c;
  --neutral: #9aa1ac;
  --up-bg: rgba(46, 204, 113, 0.14);
  --down-bg: rgba(231, 76, 60, 0.14);
  --neutral-bg: rgba(154, 161, 172, 0.14);

  /* نفس درجات الأحمر/الأخضر بالظبط من اللوجو (اتقاست من logo-mark.png) -
     مخصصة للشموع والفوليوم فى الشارتات بس، وثابتة فى الوضعين (فاتح/غامق)
     لأنها هوية بصرية مش حالة UI بتتغير مع الثيم */
  --candle-up: #45ae71;
  --candle-down: #ea2f2e;

  /* ألوان مؤشرات TradingView الافتراضية بالظبط (مش --accent/--accent-2
     العامين، اللي بيتحكموا فى روابط/أزرار الابلكيشن كله وميصحش نغيرهم من
     أجل المؤشرات بس) - ثابتة فى الوضعين زي ألوان الشموع، لأن TradingView
     نفسه بيستخدم نفس الدرجات دي فى وضعيه الغامق والفاتح، مش بتتغير مع الثيم.
     الخط الأساسي (MACD/ستوكاستيك %K/ستوكاستيك RSI %K/حدود بولينجر/SMA/EMA)
     أزرق، وخط الإشارة (MACD/ستوكاستيك %D/ستوكاستيك RSI %D/بولينجر الأوسط/
     RSI الإشارة) برتقالي - إلا RSI الأساسي بنفسجي (لون TradingView
     الافتراضي المميز لمؤشر RSI تحديدًا) */
  --ind-primary: #2962ff;
  --ind-secondary: #ff6d00;
  --ind-rsi: #7e57c2;
  --ind-hist-up: #26a69a;
  --ind-hist-up-fade: #b2dfdb;
  --ind-hist-down: #ef5350;
  --ind-hist-down-fade: #ffcdd2;

  --radius: 14px;
  --radius-sm: 8px;
  --font: "Segoe UI", Tahoma, Arial, sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f5f7;
  --panel: #ffffff;
  --panel-2: #ffffff;
  --border: #e3e5ea;
  --text: #1a1d23;
  --muted: #6b7280;
  --accent: #2f6fed;
  --accent-bg: rgba(47, 111, 237, 0.10);
  --accent-2: #c9820a;

  --up: #1a9c53;
  --down: #d63b2f;
  --neutral: #6b7280;
  --up-bg: rgba(26, 156, 83, 0.10);
  --down-bg: rgba(214, 59, 47, 0.10);
  --neutral-bg: rgba(107, 114, 128, 0.10);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #f4f5f7;
    --panel: #ffffff;
    --panel-2: #ffffff;
    --border: #e3e5ea;
    --text: #1a1d23;
    --muted: #6b7280;
    --accent: #2f6fed;
    --accent-bg: rgba(47, 111, 237, 0.10);
    --accent-2: #c9820a;

    --up: #1a9c53;
    --down: #d63b2f;
    --neutral: #6b7280;
    --up-bg: rgba(26, 156, 83, 0.10);
    --down-bg: rgba(214, 59, 47, 0.10);
    --neutral-bg: rgba(107, 114, 128, 0.10);
  }
}