/* ==========================================================================
   Design Tokens — المصدر الوحيد لقيم الهوية
   --------------------------------------------------------------------------
   مستويين:
   1) Primitives: القيم الخام (درجات الألوان). لا تُستخدم مباشرة في الصفحات.
   2) Semantic: أسماء بالمعنى (primary, surface, text...). هذي اللي تستخدمها
      الـ components والصفحات.
   الدارك مود لاحقاً = إعادة تعريف طبقة Semantic فقط.
   ========================================================================== */

:root {
  /* ---------- Primitives: Brand ---------- */
  /* Primary — الأساسي #2A6CB5 */
  --blue-50:  #EDF5FF; /* من الهوية (ظل 2) */
  --blue-100: #DFE9F4;
  --blue-200: #BFD3E9;
  --blue-300: #94B6DA;
  --blue-400: #5F91C8;
  --blue-500: #2A6CB5;
  --blue-600: #245C9B;
  --blue-700: #1E4C81;
  --blue-800: #193C67;
  --blue-900: #132D4D;

  /* Secondary — الفرعي #F9A038 */
  --orange-50:  #FFF9F3; /* من الهوية (ظل 1) */
  --orange-100: #FEF1E1;
  --orange-200: #FDE2C3;
  --orange-300: #FCD09C;
  --orange-400: #FAB86A;
  --orange-500: #F9A038;
  --orange-600: #D4872F;
  --orange-700: #AE6E26;
  --orange-800: #89541C;
  --orange-900: #643B13;

  /* Neutral — رمادي مايل للأزرق، مبني على 4 قيم من الهوية (★)
     والباقي درجات وسيطة بينها */
  --gray-0:   #FFFFFF;
  --gray-50:  #F6F8FA;
  --gray-100: #ECF0F5;
  --gray-200: #DCE4EC; /* ★ نص على الخلفيات الغامقة */
  --gray-300: #BEC8D1;
  --gray-400: #A1ABB6;
  --gray-500: #848E9A;
  --gray-600: #66727F; /* ★ نص فرعي ووصف */
  --gray-700: #505A65;
  --gray-800: #3A424C;
  --gray-900: #272E36; /* ★ خلفية الداشبورد الغامقة */
  --gray-950: #202832; /* ★ النص الأساسي على الأبيض */

  /* Status — مقترحة (مو من الهوية)، تتعدل لو في فيجما قيم ثانية */
  --green-50:  #ECF8F1;
  --green-500: #1F9D55;
  --green-700: #17773F;
  --red-50:    #FFEEEE;
  --red-200:   #FEBABA; /* من التصميم: خلفية الملاحظة العاجلة */
  --red-300:   #FE898B; /* من التصميم */
  --red-500:   #FF383C; /* من التصميم: نقاط التقويم العاجلة */
  --red-700:   #C4161B;
  --amber-50:  #FFF7E6;
  --amber-100: #FFF3DB; /* من التصميم: مسار مؤشر التارجت */
  --amber-300: #FFCD71; /* من التصميم: مؤشر التارجت */
  --amber-500: #E8A317;
  --amber-700: #9A6A00;

  /* خلفية الصفحات */
  --gray-canvas: #F2F2F7;

  /* ألوان الرسوم البيانية — مقروءة من الداشبورد (ألوان Tailwind الافتراضية) */
  --chart-1: #14B8A6; /* teal */
  --chart-2: #3B82F6; /* blue */
  --chart-3: #6366F1; /* indigo */
  --chart-4: #EC4899; /* pink */
  --chart-5: #F59E0B; /* amber */
  --chart-6: #FACC15; /* yellow */
  --chart-7: #FE898B; /* red */

  /* ---------- Semantic: Colors ---------- */
  --color-primary:        var(--blue-500);
  --color-primary-hover:  var(--blue-600);
  --color-primary-active: var(--blue-700);
  --color-primary-subtle: var(--blue-50);
  --color-on-primary:     var(--gray-0);

  --color-secondary:        var(--orange-500);
  --color-secondary-hover:  var(--orange-600);
  --color-secondary-active: var(--orange-700);
  --color-secondary-subtle: var(--orange-50);
  /* النص الأبيض على البرتقالي تباينه ضعيف (~2:1)، فالنص عليه غامق */
  --color-on-secondary:     var(--gray-950);

  --color-bg:             var(--gray-canvas); /* خلفية الصفحة */
  --color-surface:        var(--gray-0);    /* كروت، جداول، نوافذ */
  --color-surface-muted:  var(--gray-100);
  --color-surface-inverse: var(--gray-900); /* الداشبورد: sidebar / header */

  --color-text:           var(--gray-950); /* على الخلفيات الفاتحة */
  --color-text-muted:     var(--gray-600); /* نص فرعي ووصف */
  --color-text-subtle:    var(--gray-500); /* placeholder، معطل */
  --color-text-inverse:   var(--gray-200); /* على الخلفيات الغامقة */
  --color-text-inverse-muted: var(--gray-400);
  --color-link:           var(--color-primary);

  --color-border:         var(--gray-200);
  --color-border-strong:  var(--gray-300);
  --color-focus-ring:     rgb(42 108 181 / .35);

  --color-success:        var(--green-500);
  --color-success-subtle: var(--green-50);
  --color-danger:         var(--red-500);
  --color-danger-subtle:  var(--red-50);
  --color-warning:        var(--amber-500);
  --color-warning-subtle: var(--amber-50);
  --color-info:           var(--color-primary);
  --color-info-subtle:    var(--color-primary-subtle);

  /* ---------- Priority — أهمية الملاحظات والمهام ----------
     مشتركة بين التقويم (النقاط) وقائمة الملاحظات والوسوم */
  --priority-high:          var(--red-500);
  --priority-high-subtle:   var(--red-200);
  --priority-medium:        var(--orange-500);
  --priority-medium-subtle: var(--orange-50);
  --priority-low:           var(--blue-500);
  --priority-low-subtle:    var(--blue-50);

  /* ---------- Typography ---------- */
  /* الترتيب يتبدل حسب اللغة في base.css، وكل خط يغطي الحروف اللي ناقصة في الثاني */
  --font-ar: "Noto Sans Arabic", "Jost", system-ui, sans-serif;
  --font-en: "Jost", "Noto Sans Arabic", system-ui, sans-serif;
  --font-sans: var(--font-en);

  /* شبكة الـ 8: المقاسات وارتفاعات الأسطر مضاعفات 8 (و 4 كنص خطوة للصغير).
     كل مقاس له ارتفاع سطر مرافق، والارتفاعات مختارة تكفي العربي والإنجليزي. */
  --text-xs:   0.75rem;  --leading-xs:   1.25rem; /* 12 / 20 */
  --text-sm:   0.875rem; --leading-sm:   1.5rem;  /* 14 / 24 */
  --text-base: 1rem;     --leading-base: 1.5rem;  /* 16 / 24 */
  --text-lg:   1.25rem;  --leading-lg:   2rem;    /* 20 / 32 */
  --text-xl:   1.5rem;   --leading-xl:   2rem;    /* 24 / 32 */
  --text-2xl:  2rem;     --leading-2xl:  2.5rem;  /* 32 / 40 */
  --text-3xl:  2.5rem;   --leading-3xl:  3rem;    /* 40 / 48 */
  --text-4xl:  3rem;     --leading-4xl:  3.5rem;  /* 48 / 56 */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---------- Spacing (شبكة 8، و 4 نص خطوة) ---------- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */

  /* ---------- Radius ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;   /* أزرار، حقول، عناصر القائمة، مربع الأيقونة */
  --radius-lg:   12px;  /* الكروت */
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgb(39 46 54 / .06);
  --shadow-md: 0 4px 12px rgb(39 46 54 / .08);
  --shadow-lg: 0 12px 32px rgb(39 46 54 / .12);

  /* ---------- Layout ---------- */
  /* مقاسة من صورة الداشبورد (إطار 1440) */
  --sidebar-width: max(240px, 15rem); /* ما تصغر عن 240 مهما صغر الخط، وتكبر على الشاشات الكبيرة */
  --header-height: 5rem;
  --nav-item-height: 2.5rem;
  --container-max: 1280px;

  /* ---------- Motion ---------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
}