/* ═══════════════════════════════════════════════════════════════
   tokens.css — نظام التصميم الموحّد (مصدر الحقيقة الوحيد)
   المرحلة أ من خطة "التصميم من المستقبل".
   كل الألوان والمسافات والحركة رموز (--) — لا قيم مثبّتة يدوياً.
   الوضع الداكن يعمل تلقائياً بتبديل الرموز الدلالية فقط.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── لوحة العلامة (Brand) — متوافقة مع النظام الحالي ── */
  --brand-500: #4f46e5;   /* indigo (primary) */
  --brand-400: #818cf8;
  --brand-600: #4338ca;
  --brand-700: #3730a3;
  --accent-500: #38bdf8;  /* sky */
  --accent-400: #7dd3fc;

  /* ── سلّم رمادي محايد (Slate) — يُستبدل بالدلالي في الداكن ── */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* ── ألوان الحالة (Semantic status) ── */
  --success: #10b981;  --success-soft: #10b98118;
  --warning: #f59e0b;  --warning-soft: #f59e0b18;
  --danger:  #ef4444;  --danger-soft:  #ef444418;
  --info:    #3b82f6;  --info-soft:    #3b82f618;

  /* ── رموز دلالية (تتبدّل في الوضع الداكن) ── */
  --bg:        var(--slate-50);   /* خلفية الصفحة */
  --surface:   #ffffff;           /* البطاقات */
  --surface-2: var(--slate-100);  /* أسطح ثانوية */
  --border:    var(--slate-200);
  --border-strong: var(--slate-300);
  --text:      var(--slate-800);
  --text-muted: var(--slate-500);
  --text-faint: var(--slate-400);
  --on-brand:  #ffffff;

  /* ── مسافات (4px base) ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* ── أنصاف الأقطار ── */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;

  /* ── الظلال + التوهّج ── */
  --sh-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --sh-md: 0 4px 12px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04);
  --sh-lg: 0 18px 40px -12px rgba(15,23,42,.18);
  --sh-glow: 0 0 0 1px rgba(79,70,229,.15), 0 8px 30px -6px rgba(79,70,229,.35);

  /* ── الزجاج (Glassmorphism) ── */
  --glass-bg: rgba(255,255,255,.72);
  --glass-border: rgba(255,255,255,.6);
  --glass-blur: 18px;

  /* ── تدرّجات ── */
  --grad-brand: linear-gradient(135deg, var(--brand-500), var(--accent-500));
  --grad-brand-soft: linear-gradient(135deg, rgba(79,70,229,.12), rgba(56,189,248,.10));
  --grad-mesh:
    radial-gradient(at 12% 8%, rgba(129,140,248,.18), transparent 45%),
    radial-gradient(at 88% 92%, rgba(56,189,248,.16), transparent 45%);

  /* ── الحركة ── */
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .18s; --dur: .32s; --dur-slow: .55s;

  /* ── الطباعة (سلّم) ── */
  --font: 'Cairo', 'Tajawal', system-ui, sans-serif;
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem;
  --fs-lg: 1.15rem; --fs-xl: 1.4rem; --fs-2xl: 1.8rem; --fs-3xl: 2.4rem;
  --fw-normal: 500; --fw-bold: 700; --fw-black: 800;
}

/* ═══ الوضع الداكن: نبدّل الرموز الدلالية فقط ═══ */
[data-theme="dark"] {
  --bg:        var(--slate-900);
  --surface:   #16203a;
  --surface-2: var(--slate-800);
  --border:    #263248;
  --border-strong: #33415a;
  --text:      var(--slate-50);
  --text-muted: var(--slate-400);
  --text-faint: var(--slate-500);

  --glass-bg: rgba(22,32,58,.62);
  --glass-border: rgba(255,255,255,.08);

  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh-md: 0 4px 14px rgba(0,0,0,.45);
  --sh-lg: 0 18px 44px -12px rgba(0,0,0,.6);
  --sh-glow: 0 0 0 1px rgba(129,140,248,.25), 0 8px 34px -6px rgba(79,70,229,.5);
  --glass-blur: 20px;

  /* ── جسر توافق: أسماء محلية قديمة تستخدمها اللوحات وصفحات inline ──
     تُعرَّف في :root المحلي بقيم فاتحة؛ نبدّلها هنا للوضع الداكن فقط.
     (tokens.css يُحمَّل بعد <style> المضمّن فتفوز هذه القيم عند الداكن) */
  --card:   #16203a;   /* = --surface */
  --surface-3: #1e2b45;
  --muted:  var(--slate-400);
  --shadow: 0 1px 3px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.35);
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}