/* ============================================================
   Clinical Capacity Management System — Design Tokens
   نظام إدارة السعة السريرية · مستشفى الشيخ جابر الأحمد
   Layer 1 primitive → Layer 2 semantic → Layer 3 component
   Values taken verbatim from the client design handoff.
   ============================================================ */

/* ---------- Fonts: self-hosted, no CDN on the MoH intranet ---------- */
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/fonts/IBMPlexSansArabic-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Tajawal";src:url("/fonts/Tajawal-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Tajawal";src:url("/fonts/Tajawal-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  /* ========== LAYER 1 — PRIMITIVE ========== */

  /* Brand core */
  --navy-700:#222e66; --healthcare-blue-500:#2f9edb; --pale-blue-100:#dfe6f6; --gold-500:#c9972e; --white:#ffffff;
  /* Navy scale */
  --navy-900:#131a3d; --navy-800:#1a2350; --navy-600:#33407c; --navy-500:#4a5794; --navy-300:#8a93b8; --navy-100:#e3e6f1;
  /* Healthcare blue scale */
  --blue-700:#1c74a8; --blue-600:#2586c2; --blue-300:#7cc3ea; --blue-100:#d7eefa;
  /* Pale blue */
  --pale-blue-50:#eef2fb;
  /* Gold scale */
  --gold-700:#9a7220; --gold-300:#e3c37c; --gold-100:#f7edd8;
  /* Neutrals */
  --neutral-0:#ffffff; --neutral-50:#f7f8fb; --neutral-100:#eceef4; --neutral-200:#d6dae6;
  --neutral-400:#a2a9bd; --neutral-600:#6b7288; --neutral-800:#3d4358; --neutral-900:#1b1f2b;
  /* Status */
  --status-success:#1e7a52; --status-success-bg:#e4f2eb;
  --status-warning:#c9972e; --status-warning-bg:#f7edd8;
  --status-danger:#b3261e;  --status-danger-bg:#fbe9e8;
  --status-info:#2f9edb;    --status-info-bg:#d7eefa;

  /* Typography primitives */
  --font-sans:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --font-display:"Tajawal","IBM Plex Sans Arabic",Tahoma,sans-serif;
  --text-2xs:11px; --text-xs:12px; --text-sm:13px; --text-base:15px; --text-md:17px;
  --text-lg:20px; --text-xl:24px; --text-2xl:30px; --text-3xl:38px; --text-4xl:48px;
  --leading-tight:1.2; --leading-snug:1.35; --leading-normal:1.55; --leading-loose:1.75;
  --weight-light:300; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --tracking-wordmark:.14em; --tracking-caps:.08em; --tracking-tight:-.01em; --tracking-normal:0;

  /* Spacing */
  --space-0:0px; --space-1:2px; --space-2:4px; --space-3:8px; --space-4:12px; --space-5:16px;
  --space-6:20px; --space-7:24px; --space-8:32px; --space-9:40px; --space-10:48px;
  --space-12:64px; --space-14:80px; --space-16:96px;
  --gutter-page:28px; --gutter-page-mobile:16px;

  /* Radius & borders */
  --radius-none:0px; --radius-xs:2px; --radius-sm:4px; --radius-md:6px; --radius-lg:10px;
  --radius-xl:16px; --radius-pill:999px;
  --border-hairline:1px; --border-rule:2px; --border-accent:3px;

  /* Elevation */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(19,26,61,.06);
  --shadow-sm:0 1px 3px rgba(19,26,61,.08),0 1px 2px rgba(19,26,61,.04);
  --shadow-md:0 4px 12px rgba(19,26,61,.10);
  --shadow-lg:0 12px 32px rgba(19,26,61,.14);
  --shadow-focus:0 0 0 3px rgba(47,158,219,.35);

  /* Motion */
  --ease-standard:cubic-bezier(.2,0,.2,1); --ease-out:cubic-bezier(0,0,.2,1); --ease-in:cubic-bezier(.4,0,1,1);
  --duration-fast:120ms; --duration-base:180ms; --duration-chart:240ms; --duration-slow:280ms;
  --transition-control:background-color var(--duration-fast) var(--ease-standard),
                       border-color var(--duration-fast) var(--ease-standard),
                       color var(--duration-fast) var(--ease-standard),
                       box-shadow var(--duration-fast) var(--ease-standard);

  /* ========== LAYER 2 — SEMANTIC ========== */

  /* Surfaces */
  --surface-page:var(--neutral-0);
  --surface-subtle:var(--neutral-50);
  --surface-card:var(--neutral-0);
  --surface-sunken:var(--pale-blue-50);
  --surface-brand:var(--navy-700);
  --surface-brand-soft:var(--pale-blue-100);
  --surface-accent:var(--healthcare-blue-500);
  /* Text */
  --text-heading:var(--navy-700);
  --text-body:var(--neutral-800);
  --text-muted:var(--neutral-600);
  --text-inverse:var(--neutral-0);
  --text-link:var(--blue-700);
  --text-link-hover:var(--navy-700);
  --text-on-brand:var(--neutral-0);
  /* Borders */
  --border-subtle:var(--neutral-200);
  --border-strong:var(--navy-700);
  --border-focus:var(--healthcare-blue-500);
  --rule-brand:var(--navy-700);
  --rule-accent:var(--gold-500);
  /* Controls */
  --control-primary-bg:var(--navy-700);
  --control-primary-bg-hover:var(--navy-800);
  --control-primary-bg-active:var(--navy-900);
  --control-secondary-bg:var(--healthcare-blue-500);
  --control-secondary-bg-hover:var(--blue-600);
  --control-height-sm:30px; --control-height-md:38px; --control-height-lg:46px;

  /* ========== LAYER 3 — COMPONENT ========== */

  /* Bed status — layer 1 of the two-layer colour system (tile background) */
  --bed-vacant-fg:#1e7a52;   --bed-vacant-bg:#e8f4ee;
  --bed-occupied-fg:#b3261e; --bed-occupied-bg:#fbeceb;
  --bed-cleaning-fg:#c9972e; --bed-cleaning-bg:#faf1de;
  --bed-oos-fg:#a2a9bd;      --bed-oos-bg:#eceef4;

  /* Patient status — layer 2 (the dot inside an occupied tile) */
  --patient-stable:#2f9edb;
  --patient-critical:#c2571f;
  --patient-monitoring:#5b4a94;
  --patient-discharge:#3f9e6f;

  /* Third marker — administrative override triangle */
  --marker-override:var(--gold-500);
  --marker-override-size:12px;

  /* Bed cell geometry */
  --bed-cell-min-h:78px;
  --bed-cell-min-h-mobile:62px;
  --bed-dot-size:10px;
  --bed-selected-ring:inset 0 0 0 2px var(--navy-700);

  /* KPI thresholds */
  --kpi-ok-bar:var(--navy-500);     --kpi-ok-bg:#ffffff;  --kpi-ok-num:var(--navy-700);
  --kpi-warn-bar:var(--gold-500);   --kpi-warn-bg:#fdf8ee; --kpi-warn-num:var(--gold-700);
  --kpi-crit-bar:#b3261e;           --kpi-crit-bg:#fdf1f0; --kpi-crit-num:#b3261e;

  /* Occupancy bar */
  --occ-bar-ok:#1e7a52; --occ-bar-warn:var(--gold-500); --occ-bar-crit:#b3261e;
  --occ-target-marker:var(--navy-700);

  /* Overlays & sheets */
  --overlay-bg:rgba(19,26,61,.45);
  --overlay-blur:2px;
  --modal-width-sm:440px; --modal-width-md:560px; --modal-width-lg:620px;
  --sheet-max-h:82%; --sheet-handle-w:44px; --sheet-handle-h:4px;

  /* Layout */
  --ward-sidebar-w:340px;
  --settings-panel-w:420px;
  --admin-sidebar-w:236px;
  --hospital-admin-max-w:920px;
  --roster-min-w:1060px;

  /* Shift tints used in the weekly roster */
  --shift-tint-0:transparent; --shift-tint-1:#e8f4ee; --shift-tint-2:#dfe6f6;
  --shift-tint-3:#eee9f7;     --shift-tint-4:#faf1de; --shift-tint-5:#fbeceb;
}

/* Direction-aware accent rule — set once, flipped in 03-rtl.css */
:root[dir="rtl"]{ --rule-direction:to left;  --leading-body:var(--leading-loose); }
:root[dir="ltr"]{ --rule-direction:to right; --leading-body:var(--leading-normal); }

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  font-size:var(--text-sm);
  line-height:var(--leading-body);
  color:var(--text-body);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--text-heading);margin:0;line-height:var(--leading-snug)}
.display{font-family:var(--font-display);font-weight:var(--weight-medium);line-height:var(--leading-tight)}
.eyebrow{font-size:var(--text-2xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted)}
.num,.tabular,td.num,.kpi__value,.stat__value{font-variant-numeric:tabular-nums}
:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-color:var(--border-focus)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}