:root {
  /* Palette — from the Layout Sketch logo */
  --sk-bg: #E3FDFF;
  --sk-fill: #D0D0D0;
  --sk-ink: #000000;
  --sk-fluid: #736CFF;
  --sk-warn: #E20000;

  /* Sketch geometry */
  --sk-stroke: 2px;
  --sk-radius: 16px;
  --sk-radius-lg: 32px;
  --sk-frame: 6px;

  /* Rhythm */
  --sk-gap: 24px;
  --sk-gutter: 64px;
  --sk-measure: 1200px;

  /* Type */
  --sk-font: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sk-fs-sm: 13px;
  --sk-fs: 16px;
  --sk-fs-lg: 22px;
  --sk-fs-xl: clamp(38px, 8vw, 104px);
}

/* Annotation gutters shrink on narrow viewports so dimension lanes still fit. */
@media (max-width: 1024px) {
  :root { --sk-gutter: 40px; }
}
@media (max-width: 768px) {
  :root { --sk-gutter: 24px; }
}