/* =====================================================================
   موثوق — Design Tokens
   Foundations: color, type, spacing, radius, shadow, motion
   Light mode (dark mode reserved for later via [data-theme="dark"])
   ===================================================================== */

:root{
  /* ---- Brand: deep teal-green (govt trust) — primary 50→900 ---- */
  --primary-50:#EEF7F4;
  --primary-100:#D6ECE4;
  --primary-200:#ADDACB;
  --primary-300:#79C0AC;
  --primary-400:#46A088;
  --primary-500:#22826C;
  --primary-600:#136A57;   /* primary action */
  --primary-700:#0F5447;
  --primary-800:#0E4339;
  --primary-900:#0B342D;
  --primary:var(--primary-600);
  --primary-ink:#FFFFFF;          /* text on primary */
  --primary-tint:var(--primary-50);

  /* ---- Cool neutral gray (surfaces / borders / text) ---- */
  --n-0:#FFFFFF;
  --n-25:#FBFCFD;
  --n-50:#F6F8FA;
  --n-100:#EEF1F5;
  --n-150:#E6EBF0;
  --n-200:#DDE3EA;
  --n-300:#C7D0D9;
  --n-400:#9BA7B4;
  --n-500:#6B7785;
  --n-600:#4E5A67;
  --n-700:#3A444F;
  --n-800:#262E37;
  --n-900:#161C22;

  /* semantic surface / text aliases */
  --bg-app:var(--n-50);
  --bg-surface:var(--n-0);
  --bg-subtle:var(--n-100);
  --bg-inset:var(--n-50);
  --border:var(--n-200);
  --border-strong:var(--n-300);
  --divider:var(--n-150);
  --text:var(--n-800);
  --text-soft:var(--n-600);
  --text-muted:var(--n-500);
  --text-faint:var(--n-400);
  --text-on-dark:#EAF1EE;

  /* ---- Warm sand (SAFA identity nod — secondary backgrounds only) ---- */
  --sand-50:#FAF7F0;
  --sand-100:#F3ECDC;
  --sand-200:#E8DBC1;
  --sand-300:#D8C49B;
  --sand-border:#E3D6BB;
  --sand-ink:#7A6431;     /* muted bronze for sand-on accents */

  /* ---- Semantic ---- */
  --success:#2F8F63; --success-600:#27784F; --success-bg:#E6F4EC; --success-border:#BFE3CD; --success-ink:#1C5E3D;
  --warning:#C9881A; --warning-600:#A8710F; --warning-bg:#FBF1DA; --warning-border:#EFD9A6; --warning-ink:#83560A;
  --error:#D14343;   --error-600:#B5352F;   --error-bg:#FBEAE8;   --error-border:#F0C4BF;   --error-ink:#8E2A26;
  --info:#2F6FED;    --info-600:#2257C9;    --info-bg:#E8EFFD;    --info-border:#C3D6FA;    --info-ink:#1B4499;

  /* ---- Classification grades (أ ب ج د) ---- */
  --grade-a:#2F8F63; --grade-a-bg:#E6F4EC; --grade-a-border:#BFE3CD; --grade-a-ink:#1C5E3D;
  --grade-b:#2F6FED; --grade-b-bg:#E8EFFD; --grade-b-border:#C3D6FA; --grade-b-ink:#1B4499;
  --grade-c:#C9881A; --grade-c-bg:#FBF1DA; --grade-c-border:#EFD9A6; --grade-c-ink:#83560A;
  --grade-d:#D14343; --grade-d-bg:#FBEAE8; --grade-d-border:#F0C4BF; --grade-d-ink:#8E2A26;

  /* ---- Lifecycle status (7 states) ---- */
  --st-notstarted-bg:#EEF1F5; --st-notstarted-ink:#4E5A67; --st-notstarted-dot:#9BA7B4;
  --st-filling-bg:#E8EFFD;   --st-filling-ink:#1B4499;   --st-filling-dot:#2F6FED;
  --st-submitted-bg:#E0F2F1; --st-submitted-ink:#0B5C56; --st-submitted-dot:#0E8C84;
  --st-review-bg:#FBF1DA;    --st-review-ink:#83560A;    --st-review-dot:#C9881A;
  --st-approval-bg:#F0EAFB;  --st-approval-ink:#5B2BB0;  --st-approval-dot:#7C3AED;
  --st-done-bg:#E6F4EC;      --st-done-ink:#1C5E3D;      --st-done-dot:#2F8F63;
  --st-returned-bg:#FBEAE8;  --st-returned-ink:#8E2A26;  --st-returned-dot:#D14343;

  /* ---- Typography ---- */
  --font-ar:"IBM Plex Sans Arabic",system-ui,"Segoe UI",sans-serif;
  --font-num:"IBM Plex Sans Arabic",system-ui,sans-serif;

  --fs-display:34px;  --lh-display:1.2;
  --fs-h1:27px;       --lh-h1:1.25;
  --fs-h2:22px;       --lh-h2:1.3;
  --fs-h3:18px;       --lh-h3:1.35;
  --fs-h4:16px;       --lh-h4:1.4;
  --fs-body-lg:16px;  --lh-body-lg:1.7;
  --fs-body:15px;     --lh-body:1.65;
  --fs-sm:13.5px;     --lh-sm:1.55;
  --fs-label:13px;    --lh-label:1.4;
  --fs-caption:12px;  --lh-caption:1.4;

  --fw-light:300; --fw-reg:400; --fw-med:500; --fw-semi:600; --fw-bold:700;

  /* ---- Spacing (4px system) ---- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:28px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  --sp-16:64px; --sp-20:80px;

  /* ---- Radius (medium) ---- */
  --r-xs:5px; --r-sm:7px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-pill:999px;

  /* ---- Shadow (light) ---- */
  --sh-xs:0 1px 2px rgba(22,28,34,.05);
  --sh-sm:0 1px 3px rgba(22,28,34,.07), 0 1px 2px rgba(22,28,34,.04);
  --sh-md:0 4px 12px -2px rgba(22,28,34,.10), 0 2px 6px -2px rgba(22,28,34,.06);
  --sh-lg:0 14px 36px -8px rgba(22,28,34,.16), 0 6px 14px -6px rgba(22,28,34,.08);
  --sh-ring:0 0 0 3px rgba(19,106,87,.18);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:.2s;

  --z-drawer:60; --z-modal:80; --z-toast:100; --z-tooltip:120;

  --maxw:1240px;
}

/* ===================== base ===================== */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-ar);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--text);
  background:var(--bg-app);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body[dir="rtl"], html[dir="rtl"]{direction:rtl;}
h1,h2,h3,h4,h5,p,figure{margin:0;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
ul{margin:0;padding:0;list-style:none;}
img{max-width:100%;display:block;}
:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px;}

/* numerals: tabular by default for data UIs */
.num,.tnum,table td .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.en{direction:ltr;unicode-bidi:isolate;display:inline-block;}

/* ===================== type helpers ===================== */
.t-display{font-size:var(--fs-display);line-height:var(--lh-display);font-weight:var(--fw-bold);letter-spacing:-.01em;}
.t-h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:var(--fw-bold);letter-spacing:-.01em;}
.t-h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:var(--fw-bold);}
.t-h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-semi);}
.t-h4{font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:var(--fw-semi);}
.t-body-lg{font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);}
.t-body{font-size:var(--fs-body);line-height:var(--lh-body);}
.t-sm{font-size:var(--fs-sm);line-height:var(--lh-sm);}
.t-label{font-size:var(--fs-label);line-height:var(--lh-label);font-weight:var(--fw-med);}
.t-caption{font-size:var(--fs-caption);line-height:var(--lh-caption);}
.t-muted{color:var(--text-muted);}
.t-soft{color:var(--text-soft);}
.t-eyebrow{font-size:var(--fs-caption);font-weight:var(--fw-semi);letter-spacing:.12em;color:var(--primary-700);text-transform:uppercase;}