/* ============================================================
   MASAR UI TOKENS — v5
   Semantic tokens shared by the operations portal and public site.
   ============================================================ */
:root,
:root[data-theme="light"]{
  color-scheme:light;
  --u-navy:#102A43;
  --u-navy-2:#173E67;
  --u-navy-surf:#1C3557;
  --u-brand-fill:#102A43;
  --u-brand-hover:#173E67;
  --u-accent:#8A570C;
  --u-accent-fill:#D1A44F;
  --u-accent-ink:#0F1C2E;
  --u-accent-bg:#FFF7E6;
  --u-bg:#F3F5F7;
  --u-surface:#FFFFFF;
  --u-surface-2:#F7F9FB;
  --u-surface-3:#EEF2F6;
  --u-alt:var(--u-surface-2);
  --u-border:#DCE3EA;
  --u-border-strong:#BBC7D3;
  --u-txt:#0F1C2E;
  --u-txt-2:#58687B;
  --u-txt-3:#66758A;
  --u-ok:#1E6B4B;
  --u-ok-bg:#EAF6F0;
  --u-danger:#A8323A;
  --u-danger-bg:#FCECEE;
  --u-warn:#98600B;
  --u-warn-bg:#FFF4DE;
  --u-info:#245F91;
  --u-info-bg:#EAF3FA;
  --u-overlay:rgba(7,18,35,.62);
  --u-shadow:0 1px 2px rgba(15,28,46,.05),0 4px 12px rgba(15,28,46,.04);
  --u-shadow-lift:0 12px 32px rgba(15,28,46,.11);
  --u-shadow-card:0 1px 2px rgba(15,28,46,.05),0 10px 28px rgba(15,28,46,.07);
  --u-shadow-modal:0 28px 80px rgba(2,8,23,.28);
  --u-ring:0 0 0 3px rgba(36,95,145,.28);
  --u-ring-inverse:0 0 0 2px var(--u-navy-surf),0 0 0 4px rgba(255,255,255,.9);
  --u-active-shadow:0 2px 6px rgba(16,42,67,.2);
  --u-font-ui:'IBM Plex Sans Arabic','Segoe UI',Tahoma,Arial,sans-serif;
  --u-font-num:'Tajawal','Segoe UI',Tahoma,Arial,sans-serif;
  --u-leading:1.6;
  --u-sp-1:4px;
  --u-sp-2:8px;
  --u-sp-3:12px;
  --u-sp-4:16px;
  --u-sp-5:20px;
  --u-sp-6:24px;
  --u-sp-8:32px;
  --u-r-card:14px;
  --u-r-control:10px;
  --u-r-pill:999px;
  --u-control-h:44px;
  --u-control-h-lg:48px;
  --u-touch:44px;
  --u-content:1580px;
  --u-form-content:1080px;
  --u-dur:.16s;
  --u-ease:cubic-bezier(.2,.8,.2,1);
  --u-z-sticky:200;
  --u-z-nav:900;
  --u-z-modal:1000;
  --u-placeholder:#66758A;
  --u-disabled:#8D99A8;
  --u-disabled-bg:#E9EDF2;
  --u-number:#102A43;
  --u-on-navy:#F8FAFC;
  --u-on-navy-muted:#C7D5E3;

  /* compatibility aliases */
  --ds-p:var(--u-brand-fill);
  --ds-pl:var(--u-brand-hover);
  --ds-surf:var(--u-surface);
  --ds-alt:var(--u-alt);
  --ds-txt:var(--u-txt);
  --ds-txt2:var(--u-txt-2);
  --ds-brd:var(--u-border);
  --navy:var(--u-brand-fill);
  --navy-dark:#0A1C30;
  --navy-mid:var(--u-brand-hover);
  --navy-light:#28557E;
  --bg:var(--u-bg);
  --surface:var(--u-surface);
  --border:var(--u-border);
  --text:var(--u-txt);
  --text-mid:var(--u-txt-2);
  --text-muted:var(--u-txt-3);
  --green:var(--u-ok);
  --green-light:var(--u-ok-bg);
  --red:var(--u-danger);
  --red-light:var(--u-danger-bg);
  --radius-sm:var(--u-r-control);
  --radius-md:var(--u-r-card);
  --radius-lg:18px;
  --shadow-sm:var(--u-shadow);
  --shadow-md:var(--u-shadow-lift);
  --shadow-lg:var(--u-shadow-modal);
  --primary:var(--u-brand-fill);
  --primary-light:var(--u-brand-hover);
  --section-alt:var(--u-bg);
  --text-primary:var(--u-txt);
  --text-secondary:var(--u-txt-2);
  --body:var(--u-txt);
  --muted:var(--u-txt-2);
  --gold:var(--u-accent);
  --gold-dim:var(--u-accent-bg);
  --gold-brd:var(--u-accent-fill);
  --wa:#176B47;
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --u-navy:#E4EDF6;
  --u-navy-2:#C3D3E3;
  --u-navy-surf:#25415F;
  --u-brand-fill:#24507A;
  --u-brand-hover:#2E638F;
  --u-accent:#F0C76C;
  --u-accent-fill:#D8A847;
  --u-accent-ink:#0B1728;
  --u-accent-bg:#342A18;
  --u-bg:#08111F;
  --u-surface:#101C2E;
  --u-surface-2:#17263A;
  --u-surface-3:#1E3048;
  --u-alt:var(--u-surface-2);
  --u-border:#30435A;
  --u-border-strong:#465C76;
  --u-txt:#F2F6FA;
  --u-txt-2:#C2CEDB;
  --u-txt-3:#A8B6C7;
  --u-ok:#82D9B3;
  --u-ok-bg:#12382B;
  --u-danger:#FFA0A7;
  --u-danger-bg:#421F29;
  --u-warn:#F3C875;
  --u-warn-bg:#3B2E18;
  --u-info:#91CEF7;
  --u-info-bg:#143650;
  --u-overlay:rgba(2,7,15,.78);
  --u-shadow:0 1px 2px rgba(0,0,0,.28),0 5px 18px rgba(0,0,0,.18);
  --u-shadow-lift:0 18px 42px rgba(0,0,0,.34);
  --u-shadow-card:0 1px 2px rgba(0,0,0,.3),0 12px 30px rgba(0,0,0,.22);
  --u-shadow-modal:0 28px 84px rgba(0,0,0,.58);
  --u-ring:0 0 0 3px rgba(145,206,247,.42);
  --u-ring-inverse:0 0 0 2px #17263A,0 0 0 4px rgba(240,199,108,.84);
  --u-placeholder:#9DACBE;
  --u-disabled:#8492A5;
  --u-disabled-bg:#202E42;
  --u-number:#F2F6FA;
  --u-on-navy:#F8FAFC;
  --u-on-navy-muted:#C7D5E3;
  --navy-dark:#09111E;
  --navy-light:#C5D9EA;
}

@media (prefers-reduced-motion:reduce){
  :root{--u-dur:0s;--u-ease:linear}
}