/* WOMARK design tokens (A95; A97 redesign values). The one source for colour, type, spacing, radius, depth, layout and motion.
   Plain CSS, no important flags: the generated layers (ui-a90.css, ui-a91.css) read these through var(--wm-*),
   so a value changed here changes every screen. Owner rule: white, black and grey only (R = G = B).
   Status meaning stays the A85 mono language (solid = done, outline = attention, heavy outline + bold = problem,
   the word always carries the meaning), so the "tone" tokens below are greys, not colours. */
:root{
  /* Colour */
  --wm-black:#111111;--wm-black-hover:#262626;--wm-white:#ffffff;
  --wm-bg:#f5f5f5;--wm-surface:#ffffff;--wm-surface-subtle:#fafafa;--wm-surface-muted:#f1f1f1;--wm-surface-press:#e9e9e9;
  --wm-hover:rgba(0,0,0,.045);--wm-hover-strong:rgba(0,0,0,.07);
  --wm-border-soft:#efefef;--wm-border:#e8e8e8;--wm-border-strong:#d4d4d4;--wm-border-control:#dcdcdc;
  --wm-text:#141414;--wm-text-2:#3d3d3d;--wm-text-secondary:#595959;--wm-text-muted:#707070;--wm-text-disabled:#a3a3a3;
  /* Status (A85 language): fill = done, outline = needs attention, heavy outline = problem. The word is always written. */
  --wm-tone-ink:#0a0a0a;--wm-tone-text:#262626;--wm-tone-fill:#f1f1f1;--wm-tone-subtle:#fbfbfb;
  --wm-tone-line:#ececec;--wm-tone-line-strong:#dedede;--wm-tone-rule:#bdbdbd;
  --wm-overlay:rgba(10,10,10,.38);
  /* Type (font files are declared once in ui-a80.css: Inter and IBM Plex Sans Arabic) */
  --wm-font:"Inter A80","Plex Arabic A80",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --wm-font-ar:"Plex Arabic A80","Inter A80",system-ui,"Segoe UI",Tahoma,Arial,sans-serif;
  --wm-text-page:26px;--wm-text-section:16px;--wm-text-card:14px;--wm-text-body:14px;--wm-text-control:13.5px;
  --wm-text-table:13px;--wm-text-meta:12px;--wm-text-kpi:30px;
  --wm-weight-title:650;--wm-weight-strong:600;--wm-weight-medium:550;--wm-weight-body:450;--wm-weight-heavy:800;
  --wm-text-note:13px;
  --wm-text-title:20px;--wm-text-total:24px; /* A154: the 7-step type scale is meta 12, note 13, body 14, section 16, title 20, total 24, kpi 30 */
  --wm-leading:1.5;--wm-leading-tight:1.25;--wm-tracking-title:-.02em;
  /* Spacing (4px scale) */
  --wm-space-1:4px;--wm-space-2:8px;--wm-space-3:12px;--wm-space-4:16px;--wm-space-5:20px;--wm-space-6:24px;
  --wm-space-8:32px;--wm-space-10:40px;--wm-space-12:48px;
  /* Radius */
  --wm-radius-xs:6px;--wm-radius-sm:7px;--wm-radius-control:8px;--wm-radius-card:12px;--wm-radius-inner:10px;
  --wm-radius-modal:14px;--wm-radius-sheet:18px;--wm-radius-pill:999px;
  /* Depth: borders first, shadows only for things that float */
  --wm-shadow-none:none;--wm-shadow-xs:0 1px 2px rgba(0,0,0,.04);
  --wm-shadow-sm:0 1px 2px rgba(0,0,0,.04),0 1px 3px rgba(0,0,0,.06);
  --wm-shadow-md:0 2px 4px -2px rgba(0,0,0,.05),0 6px 16px -4px rgba(0,0,0,.08);
  --wm-shadow-menu:0 0 0 1px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.10);
  --wm-shadow-modal:0 0 0 1px rgba(0,0,0,.05),0 14px 40px rgba(0,0,0,.12);
  --wm-shadow-card:none;
  --wm-ring:0 0 0 3px rgba(0,0,0,.10);
  /* Component dimensions (A95.1: every value a component uses comes from here) */
  --wm-text-label:12.5px;--wm-gap-tight:6px;--wm-hairline:1px;--wm-indicator:2px;
  --wm-count-min:24px;--wm-count-h:22px;--wm-icon-md:20px;--wm-icon-box:40px;
  --wm-skeleton-line:12px;--wm-skeleton-title:22px;--wm-skeleton-block:96px;
  --wm-basis-title:320px;--wm-basis-search:240px;
  /* A96 owned controls: badge, chip, alert, empty, toast */
  --wm-badge-h:22px;--wm-badge-pad-y:2px;--wm-badge-pad-x:9px;--wm-badge-dot:6px;--wm-badge-dot-sm:5px;--wm-badge-heavy:1.5px;
  --wm-chip-h:30px;
  --wm-alert-rule:3px;--wm-alert-pad-x:14px;--wm-alert-gap:4px;
  --wm-empty-min-h:150px;--wm-empty-pad-y:44px;--wm-empty-pad-x:22px;
  --wm-toast-inset:22px;--wm-toast-bottom:22px;--wm-toast-max:420px;
  /* Controls */
  --wm-control-sm:32px;--wm-control-md:38px;--wm-control-lg:44px;--wm-field-h:40px;--wm-nav-h:36px;--wm-icon:18px;
  /* Layout */
  --wm-sidebar-w:248px;--wm-rail-w:72px;--wm-topbar-h:60px;--wm-gutter:28px;--wm-card-pad:20px;--wm-table-cell-x:14px;
  --wm-topbar-title-size:17px;--wm-topbar-title-weight:650;
  /* Layers */
  --wm-z-sticky:20;--wm-z-dropdown:900;--wm-z-drawer:1150;--wm-z-modal:1200;--wm-z-toast:1300;
  /* A97 redesign: motion (spec UI_MOTION_PERFORMANCE_QA: productive motion, transform/opacity only) */
  --wm-motion-instant:70ms;--wm-motion-fast:110ms;--wm-motion-base:150ms;--wm-motion-panel:220ms;--wm-motion-emphasis:280ms;
  --wm-motion-page:160ms;--wm-settle:6px;
  --wm-ease-standard:cubic-bezier(.2,0,.38,.9);--wm-ease-enter:cubic-bezier(0,0,.38,.9);--wm-ease-exit:cubic-bezier(.2,0,1,.9);
  /* A97 metric tiles, panels, charts and rows */
  --wm-text-display:clamp(24px,2.1vw,32px);--wm-text-kpi-fluid:clamp(20px,1.75vw,28px);--wm-text-card-title:15px;--wm-text-axis:11px;
  --wm-inverse-2:rgba(255,255,255,.74);--wm-inverse-3:rgba(255,255,255,.6);--wm-inverse-fill:rgba(255,255,255,.14);
  --wm-metric-min-h:132px;--wm-metric-pad:16px 18px;--wm-spark-h:44px;--wm-popover-w:600px;--wm-popover-max-h:620px;--wm-chart-net-w:2px;--wm-note-dot-top:.6em;--wm-gap-hair:2px;--wm-icon-sm:14px;
  /* A98: shared table and inventory workspace */
  --wm-row-table:44px;--wm-row-table-dense:40px;--wm-drawer-w:480px;--wm-thumb:36px;--wm-text-kpi-inv:20px;
  --wm-inv-kpi-min:132px;--wm-inv-id-w:260px;--wm-inv-cell-w:52px;--wm-inv-matrix-h:calc(100vh - 220px);--wm-inv-search-max:420px;--wm-inv-skel-kpi:72px;
  --wm-chart-h:200px;--wm-chart-axis:64px;--wm-chart-bar:10px;--wm-chart-xlabel:16px;--wm-chart-pick:18px;
  --wm-row-dense:42px;--wm-row-default:46px;--wm-basis-aside:300px;--wm-dash-gap:24px;--wm-dash-gap-tight:16px;
  --wm-tabbar-h:64px;
  /* A103: command palette, keyboard keys, page-change stagger */
  --wm-cmdk-w:640px;--wm-cmdk-top:12vh;--wm-cmdk-max-h:min(520px,72vh);--wm-cmdk-item-h:44px;--wm-cmdk-icon:28px;--wm-kbd-h:20px;
  --wm-keys-w:720px;--wm-stagger:30ms;--wm-z-palette:1400;
  /* Motion (A95 names kept; they point at the A97 motion tokens) */
  --wm-ease:var(--wm-ease-standard);--wm-fast:var(--wm-motion-fast);--wm-base:var(--wm-motion-base);--wm-slow:var(--wm-motion-panel);--wm-shimmer:1.2s;
}
html[dir=rtl]{--wm-font:var(--wm-font-ar)}

/* Responsive values live in tokens, so the components keep one rule each. */
@media (min-width:901px) and (max-width:1199px){:root{--wm-gutter:20px}}
@media (max-width:900px){:root{--wm-toast-inset:12px;--wm-toast-bottom:12px;--wm-alert-gap:8px}}
@media (max-width:760px){:root{--wm-text-page:22px;--wm-chart-h:168px;--wm-chart-axis:44px;--wm-dash-gap:16px;--wm-dash-gap-tight:12px;--wm-metric-min-h:112px;--wm-metric-pad:14px;--wm-card-pad:16px;--wm-table-cell-x:12px;--wm-topbar-title-size:16px;--wm-toast-inset:16px;--wm-toast-bottom:88px}}
/* Touch tablets: the toast sits above the bottom tab bar while it is shown (phones always do, see 760px above). */
@media (min-width:761px) and (max-width:900px){
  body.mobile-device.a91-tabbar-on:not(.a90-view-pos):not(.mobile-nav-open):not(.a91-modal-open):not(.camera-open){--wm-toast-bottom:88px}
  .camera-open{--wm-toast-bottom:10px}
}
body.mobile-device{--wm-gutter:16px}

/* A screen that draws its own page header (.wm-page-head) owns the big title;
   the top bar then reads as a quiet breadcrumb instead of a second title. */
body:has(.wm-page-head){--wm-topbar-title-size:14px;--wm-topbar-title-weight:550}