/* ============================================================
   رموز التصميم (Design Tokens)

   كل قيمة بصرية في اللوحة تأتي من هنا. لتغيير هوية الواجهة
   بالكامل عدّل هذا الملف وحده — لا تلمس بقية الملفات.
   ============================================================ */

:root {
  /* ---------- الأسطح ---------- */
  --bg: #f7f8fa;              /* خلفية الصفحة */
  --surface: #ffffff;         /* البطاقات واللوحات */
  --surface-2: #f2f4f7;       /* أسطح ثانوية: رؤوس الجداول، الحقول */
  --surface-3: #e9edf2;       /* تمرير الفأرة */
  --sidebar: #12223a;         /* شريط جانبي كحلي عميق */
  --sidebar-text: #aab6c8;
  --sidebar-text-strong: #f4f6fa;
  --sidebar-hover: #1b3149;
  --sidebar-active-bg: #1d3450;

  /* ---------- الحدود ---------- */
  --border: #e3e8ef;
  --border-strong: #cdd5e0;

  /* ---------- النصوص ---------- */
  --text: #111827;
  --text-2: #4b5563;          /* ثانوي */
  --text-3: #8b95a5;          /* خافت */

  /* ---------- اللون الأساسي: كحلي ---------- */
  --accent: #16324f;
  --accent-hover: #1f486e;
  --accent-soft: #eaeff5;
  --accent-border: #c4d3e4;
  --on-accent: #ffffff;

  /* ---------- الذهب: شامبانيا معدني (علامة، نشط، فواصل) ---------- */
  --gold: #d4a73c;
  --gold-strong: #e7c25c;
  --gold-soft: #f8f0dc;

  /* ---------- ألوان الحالة ---------- */
  --ok: #059669;
  --ok-soft: #ecfdf5;
  --ok-border: #a7f3d0;

  --warn: #d97706;
  --warn-soft: #fffbeb;
  --warn-border: #fde68a;

  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --danger-soft: #fef2f2;
  --danger-border: #fecaca;

  --info: #0284c7;
  --info-soft: #f0f9ff;

  /* ---------- الظلال (طبقات خفيفة، لا ثقيلة) ---------- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .04);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12), 0 4px 8px rgba(16, 24, 40, .06);
  --shadow-focus: 0 0 0 3px var(--accent-soft);

  /* ---------- الأبعاد ---------- */
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 13px;
  --r-xl: 18px;
  --r-full: 999px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 30px;
  --sp-7: 42px;

  /* ---------- الخطوط ---------- */
  --font: "Segoe UI", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, Roboto, system-ui, sans-serif;
  --font-mono: "Cascadia Code", "JetBrains Mono", Consolas, "Courier New", monospace;

  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-md: 13.5px;
  --fs-lg: 15px;
  --fs-xl: 19px;
  --fs-2xl: 25px;

  /* ---------- الحركة ---------- */
  --t-fast: 120ms cubic-bezier(.4, 0, .2, 1);
  --t-base: 200ms cubic-bezier(.4, 0, .2, 1);
  --t-slow: 320ms cubic-bezier(.4, 0, .2, 1);

  --sidebar-w: 248px;
  --rail-w: 68px;      /* الشريط مطويًّا: أيقونات فقط */
  --topbar-h: 52px;    /* شريط الجوال العلوي */
}

/* ============================================================
   الوضع الداكن — ليس عكسًا للفاتح، بل لوحة مصمَّمة له.
   الأسطح تتدرّج للأعلى بالإضاءة كما في واجهات النظام الحديثة.
   ============================================================ */
:root[data-theme="dark"] {
  --bg: #0c0d10;
  --surface: #141519;
  --surface-2: #1c1e24;
  --surface-3: #24262e;
  --sidebar: #0a0b0e;
  --sidebar-text: #9d9990;
  --sidebar-text-strong: #f0ede4;
  --sidebar-hover: #17181d;
  --sidebar-active-bg: #1c1a12;

  --border: #26272e;
  --border-strong: #3a3b44;

  --text: #ece9e2;
  --text-2: #a8a49a;
  --text-3: #6e6b64;

  /* الذهب يلمع على الأسود، فتباينه عالٍ ⇒ يصلح لونًا أساسيًا هنا */
  --accent: #e4be55;
  --accent-hover: #f1d177;
  --accent-soft: #241f10;
  --accent-border: #5a4a1e;
  --on-accent: #141519;

  --gold: #e4be55;
  --gold-strong: #f1d177;
  --gold-soft: #241f10;

  --ok: #34d399;
  --ok-soft: #0d2620;
  --ok-border: #1d5a48;

  --warn: #fbbf24;
  --warn-soft: #2a2010;
  --warn-border: #6b5217;

  --danger: #f87171;
  --danger-hover: #fca5a5;
  --danger-soft: #2b1517;
  --danger-border: #6e2b2e;

  --info: #38bdf8;
  --info-soft: #0c2430;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
  --shadow-focus: 0 0 0 3px rgba(228, 190, 85, .28);
}

/* من يفضّل تقليل الحركة لا نفرضها عليه. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-base: 1ms;
    --t-slow: 1ms;
  }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}