/* ============================================================
   AL BROKER — البروكار
   Design System Tokens v2.0

   الهرم اللوني:
   ① أساسي   — أبيض (الأكثر استخدامًا) + أسود (لون البراندنج)
   ② ثانوي   — عنبري (إشارة) + كحلي (عمق وصور)

   القاعدة: أي شاشة لازم تبقى مقروءة ومتماسكة بالأبيض والأسود لوحدهم.
   الثانوي بيتشال من غير ما تتكسر الصفحة.
   ============================================================ */

:root {
  /* ======================================================
     ① الأساسي — PRIMARY
     ====================================================== */

  /* الأبيض — الحامل الرئيسي */
  --white:      #FFFFFF;
  --white-50:   #FAFAFA;   /* خلفية سكشن بديلة */
  --white-100:  #F4F4F4;   /* خلفية مضغوطة */

  /* الأسود — لون العلامة */
  --black:      #0A0A0A;   /* ★ لون البراندنج — من ديزاينات الشركة */
  --black-900:  #141414;   /* سطح أسود مرفوع */
  --black-800:  #1F1F1F;   /* سطح مرفوع تاني */
  --black-700:  #2E2E2E;   /* بوردر على الأسود */
  --black-600:  #434343;   /* فاصل واضح على الأسود */

  /* الرمادي — مشتق من الأسود، محايد */
  --gray-500:   #6E6E6E;   /* نص ثانوي على أبيض */
  --gray-400:   #8F8F8F;   /* نص خافت */
  --gray-300:   #C9C9C9;   /* بوردر قوي */
  --gray-200:   #E4E4E4;   /* بوردر */
  --gray-100:   #EFEFEF;   /* فاصل خفيف */

  /* رماديات على الأسود */
  --on-black-1: #EDEDED;   /* نص أساسي على أسود */
  --on-black-2: #A8A8A8;   /* نص ثانوي على أسود */
  --on-black-3: #767676;   /* نص خافت على أسود */

  /* ======================================================
     ② الثانوي — SECONDARY (بالقطّارة)
     ====================================================== */

  /* العنبري — لون الإشارة: الأرقام، الحالة، التمييز الصغير */
  --amber-100: #F9E9D1;
  --amber-200: #F1D1A4;
  --amber-300: #E6B36E;    /* عنبري كنص على أسود */
  --amber-400: #D9933F;
  --amber-500: #C97A28;    /* العنبري المرجعي */
  --amber-600: #A86220;
  --amber-700: #854B23;    /* عنبري كنص على أبيض */

  /* الكحلي — عمق وأوفرلاي الصور فقط. مش لون واجهة. */
  --navy-900:  #0B1420;
  --navy-800:  #13202F;
  --navy-700:  #1D2E42;

  /* الرملي — دفء نادر */
  --sand-100:  #F4EDE1;
  --sand-200:  #E8DCC6;

  /* ======================================================
     ③ الوظيفي — SEMANTIC (حالات الأصول)
     ====================================================== */
  --state-live:     #1F7A5C;   /* شغال / مؤجّر */
  --state-pending:  #C97A28;   /* قيد التسكين */
  --state-vacant:   #8F8F8F;   /* شاغر — رمادي، مش أحمر */
  --state-overdue:  #B4341F;   /* متأخر / خطر */
  --state-info:     #2B6CB0;

  --state-live-bg:    rgba(31, 122, 92, .10);
  --state-pending-bg: rgba(201, 122, 40, .12);
  --state-vacant-bg:  rgba(143, 143, 143, .12);
  --state-overdue-bg: rgba(180, 52, 31, .09);

  /* ======================================================
     ④ أدوار الأسطح — SURFACE ROLES (فاتح = الافتراضي)
     ====================================================== */
  --bg-page:        var(--white);
  --bg-surface:     var(--white);
  --bg-surface-alt: var(--white-50);
  --bg-inverse:     var(--black);

  --text-primary:   var(--black);
  --text-secondary: var(--gray-500);
  --text-muted:     var(--gray-400);
  --text-inverse:   var(--white);
  --text-accent:    var(--amber-700);

  --border-subtle:  var(--gray-200);
  --border-strong:  var(--gray-300);

  /* الزرار الأساسي = أسود على أبيض (زي ديزاينات الشركة) */
  --btn-primary-bg:    var(--black);
  --btn-primary-fg:    var(--white);
  --btn-primary-hover: #2A2A2A;

  /* ======================================================
     ⑤ الطباعة — TYPOGRAPHY
     ====================================================== */
  --font-display: 'Cairo', system-ui, sans-serif;
  --font-text:    'IBM Plex Sans Arabic', system-ui, sans-serif;

  --fs-display: clamp(2.5rem, 6vw, 4.5rem);
  --fs-h1:      clamp(2rem, 4.5vw, 3.25rem);
  --fs-h2:      clamp(1.625rem, 3.2vw, 2.25rem);
  --fs-h3:      clamp(1.25rem, 2.2vw, 1.5rem);
  --fs-lead:    clamp(1.0625rem, 1.6vw, 1.25rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;
  --fs-stat:    clamp(2.75rem, 7vw, 5rem);

  --lh-tight:   1.1;
  --lh-heading: 1.2;
  --lh-body:    1.8;

  /* ======================================================
     ⑥ المسافات والشبكة
     ====================================================== */
  --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: 56px;  --sp-14: 72px;  --sp-16: 96px;  --sp-20: 128px;
  --sp-24: 160px;

  --container-max:    1200px;
  --container-narrow: 760px;
  --gutter:           clamp(20px, 5vw, 48px);

  --sect-hero:    clamp(72px, 10vh, 128px);
  --sect-default: clamp(64px, 9vh, 128px);
  --sect-compact: clamp(40px, 6vh, 72px);

  /* ======================================================
     ⑦ الحواف والظلال
     ====================================================== */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 999px;

  /* ظلال محايدة — مشتقة من الأسود، مش من الكحلي */
  --sh-sm: 0 1px 2px rgba(10,10,10,.06), 0 1px 3px rgba(10,10,10,.04);
  --sh-md: 0 4px 12px rgba(10,10,10,.08), 0 2px 4px rgba(10,10,10,.04);
  --sh-lg: 0 12px 32px rgba(10,10,10,.10), 0 4px 8px rgba(10,10,10,.05);

  /* ======================================================
     ⑧ الحركة
     ====================================================== */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   450ms;

  /* ======================================================
     ⑨ الطبقات
     ====================================================== */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ============================================================
   DARK MODE — الوضع الغامق
   الأسود بيبقى الحامل، والأبيض بيبقى الحبر. نفس اللونين مقلوبين.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page:        var(--black);
    --bg-surface:     var(--black-900);
    --bg-surface-alt: var(--black-800);
    --bg-inverse:     var(--white);

    --text-primary:   var(--on-black-1);
    --text-secondary: var(--on-black-2);
    --text-muted:     var(--on-black-3);
    --text-inverse:   var(--black);
    --text-accent:    var(--amber-300);

    --border-subtle:  var(--black-700);
    --border-strong:  var(--black-600);

    --btn-primary-bg:    var(--white);
    --btn-primary-fg:    var(--black);
    --btn-primary-hover: #E2E2E2;

    --sh-sm: 0 1px 2px rgba(0,0,0,.5);
    --sh-md: 0 4px 12px rgba(0,0,0,.55);
    --sh-lg: 0 12px 32px rgba(0,0,0,.6);
  }
}

:root[data-theme="dark"] {
  --bg-page:        var(--black);
  --bg-surface:     var(--black-900);
  --bg-surface-alt: var(--black-800);
  --bg-inverse:     var(--white);

  --text-primary:   var(--on-black-1);
  --text-secondary: var(--on-black-2);
  --text-muted:     var(--on-black-3);
  --text-inverse:   var(--black);
  --text-accent:    var(--amber-300);

  --border-subtle:  var(--black-700);
  --border-strong:  var(--black-600);

  --btn-primary-bg:    var(--white);
  --btn-primary-fg:    var(--black);
  --btn-primary-hover: #E2E2E2;

  --sh-sm: 0 1px 2px rgba(0,0,0,.5);
  --sh-md: 0 4px 12px rgba(0,0,0,.55);
  --sh-lg: 0 12px 32px rgba(0,0,0,.6);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0;              /* إلزامي للعربي */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-heading);
  letter-spacing: 0;
  margin: 0;
}
h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 800; }
h3 { font-size: var(--fs-h3); font-weight: 700; }

p { margin: 0; max-width: 68ch; }

a { color: var(--text-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

img, svg, video { max-width: 100%; height: auto; display: block; }

.num, table, .stat { font-variant-numeric: tabular-nums; }

[dir="ltr"] { direction: ltr; unicode-bidi: isolate; }

:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :focus-visible { outline-color: var(--white); }
}
:root[data-theme="dark"] :focus-visible { outline-color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--sect-default); }
.section--hero { padding-block: var(--sect-hero); }
.section--compact { padding-block: var(--sect-compact); }

/* سكشن أسود — لحظة التوكيد. تُستخدم بحساب، مش كخلفية عامة. */
.section--dark {
  background: var(--black);
  --bg-surface: var(--black-900);
  --bg-surface-alt: var(--black-800);
  --text-primary: var(--on-black-1);
  --text-secondary: var(--on-black-2);
  --text-muted: var(--on-black-3);
  --text-accent: var(--amber-300);
  --border-subtle: var(--black-700);
  --border-strong: var(--black-600);
  --btn-primary-bg: var(--white);
  --btn-primary-fg: var(--black);
  --btn-primary-hover: #E2E2E2;
  color: var(--text-primary);
}

/* ---------- الليبل الصغير ---------- */
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-end: var(--sp-3);
}
.eyebrow::before {
  content: "";
  inline-size: 20px;
  block-size: 2px;
  background: var(--amber-500);   /* اللمسة العنبرية الوحيدة هنا */
}

/* ---------- الأزرار ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-block-size: 48px;
  padding-inline: var(--sp-6);
  border: 0;
  border-radius: var(--r-md);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
@media (max-width: 640px) { .btn { min-block-size: 52px; } }

/* أساسي = أسود على أبيض · أبيض على أسود */
.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn--primary:hover { background: var(--btn-primary-hover); transform: translateY(-1px); box-shadow: var(--sh-md); }

.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.btn--secondary:hover { background: var(--text-primary); color: var(--bg-page); }

.btn--ghost { background: transparent; color: var(--text-primary); padding-inline: var(--sp-2); text-decoration: underline; }

/* ---------- الكروت ---------- */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.card:hover { box-shadow: var(--sh-md); border-color: var(--border-strong); }

/* ---------- كارت الإحصائية ---------- */
.stat__value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-stat);
  line-height: 1;
  color: var(--text-primary);       /* الرقم أسود/أبيض — مش عنبري */
  font-variant-numeric: tabular-nums;
}
.stat__unit  { font-size: var(--fs-sm); color: var(--text-secondary); }
.stat__rule  { inline-size: 40px; block-size: 3px; background: var(--amber-500); margin-block: var(--sp-4); border-radius: var(--r-full); }
.stat__label { font-size: var(--fs-body); font-weight: 600; }

/* ---------- البادج ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  border-radius: var(--r-full);
  padding: 4px 12px;
  font-size: var(--fs-xs);
  font-weight: 500;
}
.badge::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: var(--r-full); background: currentColor; }

.badge--live    { background: var(--state-live-bg);    color: var(--state-live); }
.badge--pending { background: var(--state-pending-bg); color: var(--amber-700); }
.badge--vacant  { background: var(--state-vacant-bg);  color: var(--state-vacant); }
.badge--overdue { background: var(--state-overdue-bg); color: var(--state-overdue); }

/* ---------- حقول الإدخال ---------- */
.field {
  inline-size: 100%;
  min-block-size: 48px;
  padding-inline: var(--sp-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  color: var(--text-primary);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field::placeholder { color: var(--text-muted); }
.field:focus {
  outline: none;
  border-color: var(--text-primary);
  box-shadow: 0 0 0 3px rgba(10,10,10,.10);
}
.field[aria-invalid="true"] { border-color: var(--state-overdue); }

/* ---------- أوفرلاي الصور ---------- */
.img-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,.88), rgba(10,10,10,.25));
  pointer-events: none;
}

/* ---------- دخول عند الاسكرول ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- إخفاء بصري ---------- */
.sr-only {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}