/* CargoSync design tokens: the shared contract for all responsive UI. */
:root {
  --color-canvas: #050506;
  --color-canvas-subtle: #080809;
  --color-surface: #111113;
  --color-surface-raised: #17171a;
  --color-surface-hover: #1d1d21;
  --color-border: #242429;
  --color-border-strong: #323238;
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
  --table-body-size: 0.8125rem;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --control-sm: 2.5rem;
  --control-md: 2.75rem;
  --control-lg: 3rem;
  --outbound-control-height: 3rem;
  --touch-target: 2.75rem;
  --record-card-padding: 0.625rem;
  --record-card-gap: 0.375rem;
  --record-label-size: 0.6875rem;
  --record-value-size: 0.8125rem;
  --record-icon-size: 2rem;
  --record-action-size: 2.5rem;
  --header-height: 3.75rem;
  --sidebar-width: 15rem;
  --search-field-ideal: 34rem;
  --content-max: 90rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --layer-header: 160;
  --layer-drawer-scrim: 240;
  --layer-drawer: 250;
  --layer-dialog-scrim: 400;
  --layer-dialog: 410;
}