/* ------------------------------------------------------------------
   الرموز التصميمية
   اللون المميز مأخوذ من العنابي القطري، والأسطح من لون الخرسانة والورق
   الهندسي. أرقام البيانات بخط أحادي المسافة لأن الجداول تُقرأ عموديًا.
   ------------------------------------------------------------------ */

:root {
  /* الأسطح */
  --paper: #f4f2ed;
  --surface: #ffffff;
  --surface-2: #faf9f6;
  --surface-sunk: #eeebe4;
  --line: #e0dcd3;
  --line-strong: #c9c3b7;

  /* النص */
  --ink: #14181f;
  --ink-2: #4b5462;
  --ink-3: #6b7583;   /* الباهت يُقرأ: ٤٫٦ إلى ١ على الأبيض — كان ٣٫٩ فلا يجتاز التباين للنصّ الصغير */

  /* الهوية */
  --brand: #8a1538;
  --brand-deep: #6b1029;
  --brand-tint: #f7e9ed;
  --steel: #1f4e5f;
  --steel-tint: #e7eff1;

  /* الحالات */
  --ok: #1a7a4c;
  --ok-tint: #e6f3ec;
  --warn: #9a6200;
  --warn-tint: #fbf0dc;
  --stop: #ad2118;
  --stop-tint: #fbeae8;
  --idle: #5c6674;
  --idle-tint: #eceef1;

  /* الشكل */
  --r-sm: 3px;
  --r: 6px;
  --r-lg: 10px;
  --shadow-1: 0 1px 2px rgba(20, 24, 31, .06), 0 1px 1px rgba(20, 24, 31, .04);
  --shadow-2: 0 8px 28px rgba(20, 24, 31, .12);
  --shadow-pop: 0 18px 50px rgba(20, 24, 31, .22);

  /* الخطوط */
  --font-ui: "IBM Plex Sans Arabic", "Segoe UI", "Noto Sans Arabic", Tahoma, system-ui, sans-serif;
  --font-data: "IBM Plex Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;

  /* القياسات */
  --sidebar: 252px;
  --topbar: 58px;
  --step: 4px;
}

:root[data-theme="dark"] {
  --paper: #0f1319;
  --surface: #161b23;
  --surface-2: #1b212a;
  --surface-sunk: #11161d;
  --line: #262e39;
  --line-strong: #38424f;

  --ink: #e9ecf1;
  --ink-2: #a7b1bf;
  --ink-3: #78828f;

  --brand: #d2607f;
  --brand-deep: #b73c60;
  --brand-tint: #2c1520;
  --steel: #6fb3c4;
  --steel-tint: #14252b;

  --ok: #4cbe86;
  --ok-tint: #12291f;
  --warn: #d9a441;
  --warn-tint: #2a2113;
  --stop: #e8695e;
  --stop-tint: #2c1715;
  --idle: #97a1af;
  --idle-tint: #1d232c;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, .5);
  --shadow-pop: 0 20px 60px rgba(0, 0, 0, .6);
}

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.75;              /* العربية تحتاج تباعدًا أوسع من اللاتينية */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* في الإنجليزية يقل تباعد الأسطر قليلًا لأن الأحرف اللاتينية أقصر */
html[lang="en"] body { line-height: 1.6; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.45;              /* لا يقل عن 1.4 للعناوين العربية الكبيرة */
  letter-spacing: normal;         /* التباعد الحرفي يكسر وصل الحروف العربية */
}

h1 { font-size: 25px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; border: 3px solid var(--paper); }

/* الأرقام والرموز: أحادية المسافة ومصطفة عموديًا */
.num, .code, .mono {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* الحقول اللاتينية داخل نص عربي تُعزل حتى لا تنقلب علاماتها */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

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