/* ==========================================================================
   مديد — Design Tokens (Phase 1)
   كل القيم البصرية في النظام تُقرأ من هنا فقط. لا تكتب ألوانًا أو مقاسات
   مباشرة داخل المكونات.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap");

:root {
  /* ---------- Brand ---------- */
  --color-primary: #142D44;
  --color-primary-dark: #0E2235;
  --color-primary-darker: #0A1A29;      /* Active/pressed */
  --color-primary-50: #E8EEF4;
  --color-primary-100: #D2DDE8;
  --color-primary-200: #A9BCCF;

  --color-secondary: #00A99D;           /* للزخارف والمؤشرات والرسوم، لا لنص أبيض صغير */
  --color-secondary-text: #00776E;      /* نص بلون الـ Secondary على خلفية فاتحة (AA) */
  --color-secondary-50: #E8F5F3;
  --color-secondary-100: #C9EBE6;

  --color-teal: #00857B;                /* Formal Teal */
  --color-teal-text: #00706A;
  --color-teal-50: #E8F5F3;
  --color-teal-100: #CDEBE6;

  /* ---------- Neutrals ---------- */
  --color-bg: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-surface-muted: #FAFBFD;
  --color-border: #DCE3EA;
  --color-border-strong: #BAC6D2;
  --color-text: #142D44;
  --color-text-muted: #5E6E7E;          /* AA على Surface الأبيض فقط */
  --color-text-disabled: #9AA7B4;
  --color-text-inverse: #FFFFFF;
  --color-neutral-50: #EEF2F6;
  --color-neutral-100: #E3E9EF;
  --color-neutral-text: #4A5A69;

  /* ---------- Semantic ---------- */
  --color-success: #1F8A5B;
  --color-success-solid: #197A50;       /* خلفية ممتلئة عليها نص أبيض (AA) */
  --color-success-text: #17724B;
  --color-success-50: #E8F4EE;
  --color-success-100: #CBE6D8;

  --color-warning: #C98A1A;             /* أيقونات وحدود وأشرطة فقط */
  --color-warning-text: #8A5D0C;        /* نص تحذيري (AA) */
  --color-warning-50: #FBF3E4;
  --color-warning-100: #F3E0BC;

  --color-danger: #B44545;
  --color-danger-dark: #9A3838;
  --color-danger-text: #9A3838;
  --color-danger-50: #F8EBEB;
  --color-danger-100: #EED0D0;

  /* حرج — للنوافذ التشغيلية الحرجة فقط (وصول ولي الأمر/طلب متأخر) */
  --color-critical: #C62828;
  --color-critical-dark: #A82B2B;
  --color-critical-50: #FDECEC;

  /* ---------- Typography ---------- */
  --font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --font-regular: 400;
  --font-semibold: 600;
  --font-bold: 700;

  /* size / line-height */
  --text-h1: 2rem;        --lh-h1: 2.75rem;     /* 32 / 44 */
  --text-h2: 1.625rem;    --lh-h2: 2.25rem;     /* 26 / 36 */
  --text-h3: 1.375rem;    --lh-h3: 2rem;        /* 22 / 32 */
  --text-h4: 1.125rem;    --lh-h4: 1.75rem;     /* 18 / 28 */
  --text-body: 1rem;      --lh-body: 1.75rem;   /* 16 / 28 */
  --text-small: 0.875rem; --lh-small: 1.5rem;   /* 14 / 24 */
  --text-caption: 0.75rem;--lh-caption: 1.25rem;/* 12 / 20 */
  --text-table: 0.9375rem;--lh-table: 1.5rem;   /* 15 / 24 */
  --text-kpi: 2rem;       --lh-kpi: 2.5rem;     /* أرقام KPI */

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --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: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-xs: 0 1px 2px rgba(20, 45, 68, 0.06);
  --shadow-sm: 0 1px 3px rgba(20, 45, 68, 0.08), 0 1px 2px rgba(20, 45, 68, 0.04);
  --shadow-md: 0 6px 16px rgba(20, 45, 68, 0.08), 0 2px 4px rgba(20, 45, 68, 0.04);
  --shadow-lg: 0 18px 40px rgba(20, 45, 68, 0.14), 0 4px 10px rgba(20, 45, 68, 0.06);
  --overlay: rgba(16, 34, 30, 0.48);

  /* ---------- Focus ---------- */
  --focus-ring: 0 0 0 3px rgba(0, 169, 157, 0.38);  /* تركواز الهوية — ظاهر على الكحلي والأبيض */
  --focus-ring-danger: 0 0 0 3px rgba(180, 69, 69, 0.24);
  --focus-ring-success: 0 0 0 3px rgba(31, 138, 91, 0.22);

  /* ---------- Control sizes (أزرار وحقول كبيرة وواضحة) ---------- */
  --control-sm: 36px;
  --control-md: 44px;     /* الافتراضي — يحقق حد اللمس 44px */
  --control-lg: 52px;     /* إجراءات رئيسية على الجوال/البوابة */

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

  /* ---------- Layers ---------- */
  --z-dropdown: 30;
  --z-sticky: 40;
  --z-drawer: 60;
  --z-modal: 70;
  --z-toast: 80;
  --z-tooltip: 90;

  /* ---------- Breakpoints (مرجعية — تُستخدم في media queries) ----------
     mobile  < 640
     tablet  640 – 1023
     laptop  1024 – 1279
     desktop ≥ 1280
  */
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; }
}