/**
 * Space and size. Names are the value in px, so a spacing decision is unambiguous
 * at the call site. Chrome detail lives on --space-2; layout on 8/12/16/24.
 */
:root {
  --space-0: 0px;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* control heights: a button, input and select of the same size match to the pixel */
  --control-h-24: 24px;
  --control-h-28: 28px;
  --control-h-32: 32px;
  --control-h-36: 36px;
  --control-h-40: 40px;
  --control-h-48: 48px;
  --control-h-sm: var(--control-h-24);
  --control-h-md: var(--control-h-28);
  --control-h-lg: var(--control-h-36);

  --control-px-sm: var(--space-8);
  --control-px-md: var(--space-12);
  --control-px-lg: var(--space-16);

  /* structural dimensions - never magic numbers inside a component */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-prose: 720px;
  --sidebar-w: 250px;
  --sidebar-w-collapsed: 56px;
  --header-h: 44px;
  --titlebar-h: 22px;
  --toolbar-h: 32px;
  --touch-min: 44px;

  --frame-inset: 6px;
  --tick-len: 10px;
}