/* =====================================================
   assets/css/variables.css
   نظام ألوان احترافي حديث — Teal/Slate (مناسب للمديرين)
   التبديل عبر  document.documentElement.setAttribute('data-theme','dark')
   ===================================================== */

:root {
  /* ── الوضع الفاتح (الافتراضي) — Navy Corporate ── */
  --bg:       #f8fafc;   /* slate-50 — خلفية ناعمة جداً مريحة للعين */
  --bg2:      #ffffff;   /* خلفية ثانوية — أبيض */
  --card:     #ffffff;   /* الكارت */
  --card2:    #f1f5f9;   /* كارت بديل — slate-100 */
  --border:   #e2e8f0;   /* slate-200 */
  --border2:  #cbd5e1;   /* slate-300 */

  /* ── ألوان التأكيد (Navy Blue كلاسيكي) ── */
  --accent:   #1e40af;   /* blue-800 — كلاسيكي، موثوق، احترافي */
  --accent2:  #3b82f6;   /* blue-500 — وضوح */
  --accent-rgb: 30,64,175;
  --green:    #10b981;
  --red:      #ef4444;
  --gold:     #f59e0b;
  --purple:   #475569;   /* slate-600 (محايد) */
  --orange:   #f97316;
  --teal:     #0d9488;
  --blue:     #1e40af;

  /* ── النصوص (slate تركيبي مريح) ── */
  --text:     #0f172a;   /* slate-900 — قراءة مريحة بلا أسود حاد */
  --text2:    #475569;   /* slate-600 */
  --text3:    #94a3b8;   /* slate-400 */

  /* ── ظلال ناعمة ── */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03);
  --shadow:    0 4px 12px rgba(30,64,175,.08), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg: 0 12px 28px rgba(30,64,175,.12), 0 4px 12px rgba(15,23,42,.06);
  --shadow-accent: 0 4px 14px rgba(30,64,175,.22);

  /* ── طبقات تفاعلية ── */
  --hover-bg: rgba(30,64,175,.05);
  --nav-grad: linear-gradient(90deg,#ffffff,#f8fafc,#ffffff);
  --footer-bg: #f8fafc;

  /* ── الأبعاد ── */
  --nav-h:    62px;
  --sidebar-w: 290px;
  --radius:   12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
}

/* ════════════ الوضع الداكن ════════════ */
:root[data-theme="dark"] {
  --bg:       #0b1220;   /* slate-950 */
  --bg2:      #0f172a;   /* slate-900 */
  --card:     #131c2f;
  --card2:    #1a2438;
  --border:   #243049;
  --border2:  #2f3d5a;

  --accent:   #3b82f6;   /* blue-500 — أكثر سطوعاً في الداكن للوضوح */
  --accent2:  #60a5fa;   /* blue-400 */

  --text:     #e8ecf5;
  --text2:    #a0aac4;
  --text3:    #6e7894;

  --shadow-sm: 0 2px 8px rgba(0,0,0,.3);
  --shadow:    0 4px 16px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.5);
  --shadow-accent: 0 4px 16px rgba(59,130,246,.30);

  --hover-bg: rgba(255,255,255,.04);
  --nav-grad: linear-gradient(90deg,#0f172a,#131c2f,#0f172a);
  --footer-bg: var(--bg2);
}

/* ── زر تبديل الثيم / اللغة ── */
.theme-toggle, .lang-toggle {
  cursor: pointer;
  padding: 5px 11px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text2);
  font-size: 14px;
  transition: all .2s;
  font-family: 'Cairo', sans-serif;
  font-weight: 800;
  min-width: 36px;
  text-align: center;
}
.theme-toggle:hover, .lang-toggle:hover {
  border-color: var(--accent2);
  color: var(--accent);
  background: var(--hover-bg);
}
.lang-toggle {
  font-size: 11px;
  letter-spacing: 0.5px;
}

/* ── اختيار النص ── */
::selection { background: rgba(30,64,175,.22); color: var(--text); }