:root {
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;

  --pad-panel:  var(--space-md);
  --pad-cell:   var(--space-xs);
  --gap-stack:  var(--space-md);
  --gap-cluster:var(--space-sm);
  --gutter-page: clamp(0.75rem, 3vw, 2rem);

  --measure:      74ch;
  --measure-wide: 110ch;
  --shell-max:    120ch;
  /* Both pinned chrome rows stand this tall, and 03-generic/_reset.css clears the same height
     above an anchored :target, so a change here moves the anchor offset with the bars. */
  --bar-h:        1.9rem;

  /* Written down here and written out again as a literal in every @media rule that wants one,
     because a media query cannot read a custom property. */
  --bp-sm: 40rem;
  --bp-md: 56rem;
  --bp-lg: 75rem;

  --bw: 1px;
  --radius: 0;

  --z-base: 0;
  --z-panel: 10;
  --z-dropdown: 100;
  --z-bar: 200;
  /* Above --z-bar: the menu bar's own stacking context carries its dropdowns, so it has to clear
     the sticky bars later in the DOM (.c-ai-notice) that would otherwise paint over them. */
  --z-menubar: 250;
  --z-modal: 300;
}