/* Space (4px base), radius, line, motion. Source: uploads/tokens.css + brand board "Tokens". */
:root{
  --mol-space-1:4px;--mol-space-2:8px;--mol-space-3:12px;--mol-space-4:16px;
  --mol-space-5:24px;--mol-space-6:32px;--mol-space-7:48px;--mol-space-8:64px;
  --mol-space-9:96px;--mol-space-10:128px;

  --mol-radius-s:4px;   /* inputs, chips */
  --mol-radius-m:8px;   /* buttons, cards */
  --mol-radius-l:16px;  /* panels, dialogs */

  --mol-hairline:1px;
  --mol-icon-stroke:1.5px;
  --mol-focus:0 0 0 2px var(--mol-vellum),0 0 0 4px var(--mol-blue);

  --mol-control-h:44px;     /* source: controls are 44px tall */
  --mol-control-h-s:32px;   /* derived: dense app toolbars */
  --mol-control-h-xs:24px;  /* derived: inline row actions */

  /* Elevation: the brand is flat. One overlay shadow for floating layers only (derived). */
  --mol-shadow-none:none;
  --mol-shadow-overlay:0 1px 0 rgba(23,25,28,.04),0 8px 24px rgba(23,25,28,.10);

  /* Motion (derived): short, linear-ish, no bounce */
  --mol-ease:cubic-bezier(.2,0,0,1); /* @kind other */
  --mol-dur-fast:120ms; /* @kind other */
  --mol-dur:180ms; /* @kind other */
}
