/* Seven sizes, two densities. No others. Weight never exceeds 600.

   MOBILE is the base scale on :root — 9 · 12.5 · 13 · 15 · 23 · 25 · 32.
   DESKTOP is a scope, not a media query: 14 · 14 · 16 · 18 · 24 · 28 · 36.

   Why a scope. A specimen canvas renders mobile and desktop frames side by
   side on one page, so a viewport media query cannot tell them apart. Put
   `.os-desktop` on the desktop shell and every role class inside it resolves
   to the desktop step — no component changes, because each component already
   reads `var(--os-size-*)` rather than a literal.

   In the real application, set the density once at the app shell. Either keep
   this class on a desktop layout wrapper, or flip the default with a media
   query and let the class handle the exceptions:

     @media (min-width: 900px) { :root { --os-size-body: 16px; … } }

   Do NOT thread a density prop through components. The Owner and Worker
   references do that only because they are inline-styled; it is not the
   pattern to copy. */
:root{
  --os-size-label:9px;
  --os-size-quiet:12.5px;
  --os-size-body:13px;
  --os-size-lead:15px;
  --os-size-title-sm:23px;
  --os-size-title:25px;
  --os-size-title-lg:32px;

  --os-weight-regular:400;
  --os-weight-medium:500;
  --os-weight-strong:600;

  --os-track-label:0.9px;
  --os-track-title:-0.4px;
  --os-track-title-sm:-0.3px;

  --os-leading-title:1.15;
  --os-leading-title-wrap:1.22;
  --os-leading-body:1.55;
  --os-leading-tight:1.4;
  --os-leading-loose:1.6;
}

/* Desktop density. Body, inputs, actions and table content are 16; labels and
   secondary text 14; titles 24 / 28 / 36. Replaced the mobile-only scale on
   9 Sep 2026 — 9px operational labels were not comfortable on a monitor. */
.os-desktop{
  --os-size-label:14px;
  --os-size-quiet:14px;
  --os-size-body:16px;
  --os-size-lead:18px;
  --os-size-title-sm:24px;
  --os-size-title:28px;
  --os-size-title-lg:36px;
}