/* =========================================================================
   نظام التصميم — التوكنز الأساسية
   المصدر: كود المنصات (نظام التصميم الوطني السعودي) — هيئة الحكومة الرقمية
   انسخ هذا الملف كما هو في أي مشروع جديد. لا تعدّل القيم؛ أضف فوقها فقط.

   ملاحظة عن الدقة: القيم من `sa-*` حتى `--z-*` مستخرجة من تطبيق مفتوح
   المصدر لكود المنصات يشير في تعليقاته إلى ملف Figma الرسمي للنظام.
   الأقسام المعلّمة بـ [إضافة] ليست جزءًا من النظام الأصلي — أُضيفت لأن
   النظام الأصلي يغطي عناصر الواجهة ولا يغطي أحجام العناوين الكبيرة.
   ========================================================================= */

/* --- الخط --- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root {
  /* =====================================================================
     1. الألوان
     ===================================================================== */

  /* الأخضر السعودي — لون الفعل الوحيد */
  --sa-25:  #F7FDF9;
  --sa-50:  #F3FCF6;
  --sa-100: #DFF6E7;
  --sa-200: #B8EACB;
  --sa-300: #88D8AD;
  --sa-400: #54C08A;
  --sa-500: #25935F;
  --sa-600: #1B8354;   /* ← اللون الأساسي */
  --sa-700: #166A45;
  --sa-800: #14573A;
  --sa-900: #104631;
  --sa-950: #092A1E;

  /* الرمادي المحايد — يحمل كل شيء آخر */
  --gray-25:  #FCFCFD;
  --gray-50:  #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D2D6DB;
  --gray-400: #9DA4AE;
  --gray-500: #6C737F;
  --gray-600: #4D5761;
  --gray-700: #384250;
  --gray-800: #1F2A37;
  --gray-900: #111927;
  --gray-950: #0D121C;

  /* خطأ */
  --error-25:  #FFFBFA;  --error-50:  #FEF3F2;  --error-100: #FEE4E2;
  --error-200: #FECDCA;  --error-300: #FDA29B;  --error-400: #F97066;
  --error-500: #F04438;  --error-600: #D92D20;  --error-700: #B42318;
  --error-800: #912018;  --error-900: #7A271A;  --error-950: #55160C;

  /* تحذير */
  --warning-25:  #FFFCF5;  --warning-50:  #FFFAEB;  --warning-100: #FEF0C7;
  --warning-200: #FEDF89;  --warning-300: #FEC84B;  --warning-400: #FDB022;
  --warning-500: #F79009;  --warning-600: #DC6803;  --warning-700: #B54708;
  --warning-800: #93370D;  --warning-900: #7A2E0E;  --warning-950: #4E1D09;

  /* نجاح — منفصل عن الأخضر الأساسي عمدًا: الأخضر السعودي للهوية، هذا للحالة */
  --success-25:  #F6FEF9;  --success-50:  #ECFDF3;  --success-100: #DCFAE6;
  --success-200: #ABEFC6;  --success-300: #75E0A7;  --success-400: #47CD89;
  --success-500: #17B26A;  --success-600: #079455;  --success-700: #067647;
  --success-800: #085D3A;  --success-900: #074D31;  --success-950: #053321;

  /* معلومة */
  --info-25:  #F5FAFF;  --info-50:  #EFF8FF;  --info-100: #D1E9FF;
  --info-200: #B2DDFF;  --info-300: #84CAFF;  --info-400: #53B1FD;
  --info-500: #2E90FA;  --info-600: #1570EF;  --info-700: #175CD3;
  --info-800: #1849A9;  --info-900: #194185;  --info-950: #102A56;

  /* --- الأدوار الدلالية: استخدم هذه في الكود، لا التدرجات مباشرة --- */
  --color-primary:          var(--sa-600);
  --color-primary-hover:    var(--sa-700);
  --color-primary-active:   var(--sa-800);
  --color-primary-subtle:   var(--sa-100);

  --color-bg:               #FFFFFF;
  --color-bg-subtle:        var(--gray-25);
  --color-bg-muted:         var(--gray-50);

  --color-text-primary:     var(--gray-900);
  --color-text-secondary:   var(--gray-700);
  --color-text-tertiary:    var(--gray-500);
  --color-text-disabled:    var(--gray-400);
  --color-text-inverse:     #FFFFFF;

  --color-border:           var(--gray-300);
  --color-border-subtle:    var(--gray-200);
  --color-border-focus:     var(--sa-500);
  --color-border-strong:    #161616;  /* حدود التركيز على البطاقات والحقول المضغوطة */

  /* =====================================================================
     2. الخطوط
     ===================================================================== */
  --font-display: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;
  --font-text:    'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Fira Code', Consolas, monospace;

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

  /* مقياس نص الواجهة (النظام الأصلي) */
  --fs-2xs: 0.625rem;  --lh-2xs: 0.875rem;
  --fs-xs:  0.75rem;   --lh-xs:  1.125rem;
  --fs-sm:  0.875rem;  --lh-sm:  1.25rem;   /* ← الافتراضي للواجهة */
  --fs-md:  1rem;      --lh-md:  1.5rem;
  --fs-lg:  1.125rem;  --lh-lg:  1.75rem;
  --fs-xl:  1.25rem;   --lh-xl:  1.875rem;

  /* [إضافة] مقياس العناوين — النظام الأصلي يتوقف عند 1.25rem */
  --fs-h3:      1.5rem;    --lh-h3:      2rem;
  --fs-h2:      1.875rem;  --lh-h2:      2.375rem;
  --fs-h1:      2.25rem;   --lh-h1:      2.75rem;
  --fs-display: 3rem;      --lh-display: 3.5rem;
  /* العربية تحتاج ارتفاع سطر أعلى من اللاتينية بسبب التشكيل والنقاط */

  /* =====================================================================
     3. المسافات
     ===================================================================== */
  --space-none: 0;
  --space-xxs:  0.125rem;  /* 2px  */
  --space-xs:   0.25rem;   /* 4px  */
  --space-sm:   0.375rem;  /* 6px  */
  --space-md:   0.5rem;    /* 8px  */
  --space-lg:   0.75rem;   /* 12px */
  --space-xl:   1rem;      /* 16px */
  --space-2xl:  1.25rem;   /* 20px */
  --space-3xl:  1.5rem;    /* 24px */
  --space-4xl:  2rem;      /* 32px */
  --space-5xl:  2.5rem;    /* 40px */
  --space-6xl:  3rem;      /* 48px */
  /* [إضافة] للفواصل بين أقسام الصفحة */
  --space-7xl:  4rem;      /* 64px */
  --space-8xl:  6rem;      /* 96px */

  /* =====================================================================
     4. الحواف — مقيّدة عمدًا
     ===================================================================== */
  --radius-none: 0;
  --radius-xs:   0.125rem;  /* 2px  — السويتش */
  --radius-sm:   0.25rem;   /* 4px  — الأزرار والحقول والشارات */
  --radius-md:   0.5rem;    /* 8px  — الحاويات الصغيرة والتنبيهات */
  --radius-lg:   1rem;      /* 16px — البطاقات */
  --radius-xl:   1.5rem;    /* 24px — نادر */
  --radius-full: 9999px;    /* الأفاتار والسويتش فقط */

  /* =====================================================================
     5. الظلال — خفيفة ومحايدة، لا ظلال ملونة
     ===================================================================== */
  --shadow-xs:  0px 1px 2px 0px rgba(16,24,40,0.05);
  --shadow-sm:  0px 1px 2px 0px rgba(16,24,40,0.05), 0px 1px 3px 0px rgba(16,24,40,0.05);
  --shadow-md:  0px 2px 4px -2px rgba(16,24,40,0.06), 0px 4px 8px -2px rgba(16,24,40,0.10);
  --shadow-lg:  0px 4px 6px -2px rgba(16,24,40,0.03), 0px 12px 16px -4px rgba(16,24,40,0.08);
  --shadow-xl:  0px 8px 8px -4px rgba(16,24,40,0.03), 0px 20px 24px -4px rgba(16,24,40,0.08);
  --shadow-2xl: 0px 24px 48px -12px rgba(16,24,40,0.18);

  /* =====================================================================
     6. التركيز والحركة
     ===================================================================== */
  --focus-ring:       0 0 0 3px rgba(27,131,84,0.4);
  --focus-ring-error: 0 0 0 3px rgba(240,68,56,0.2);

  --t-fast:   150ms ease;  /* التفاعل: hover، تغيير لون */
  --t-normal: 250ms ease;  /* الانتقال: فتح/إغلاق */
  --t-slow:   350ms ease;  /* نادر */

  /* =====================================================================
     7. ارتفاعات التحكمات — ثابتة
     ===================================================================== */
  --control-sm: 1.5rem;   /* 24px */
  --control-md: 2rem;     /* 32px */
  --control-lg: 2.5rem;   /* 40px */

  /* =====================================================================
     8. الطبقات
     ===================================================================== */
  --z-dropdown: 1000;  --z-sticky: 1020;  --z-fixed: 1030;
  --z-modal-backdrop: 1040;  --z-modal: 1050;
  --z-popover: 1060;  --z-tooltip: 1070;

  /* [إضافة] عرض المحتوى */
  --container-sm:  40rem;   /* 640px  — نص مقروء */
  --container-md:  64rem;   /* 1024px — صفحة معاملة */
  --container-lg:  80rem;   /* 1280px — لوحة تحكم */
}

/* =========================================================================
   الأساس
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  font-size: var(--fs-md);
}

[dir="rtl"] { direction: rtl; text-align: right; }
[dir="ltr"] { direction: ltr; text-align: left; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}