:root{
  --mo-s1: 4px;
  --mo-s2: 8px;
  --mo-s3: 12px;
  --mo-s4: 20px;
  --mo-s5: 32px;
  --mo-s6: 48px;
  --mo-s7: 76px;
  --mo-s8: 120px;
  --mo-s9: 168px;

  /* page margin and container */
  --mo-margin: clamp(20px, 5vw, 76px); /* @kind spacing */
  --mo-maxw: 1340px; /* @kind spacing */
  --mo-gutter: 32px; /* @kind spacing */
  --mo-gutter-wide: 48px; /* @kind spacing */

  /* section rhythm: 168 top, 120 bottom, 76 between blocks */
  --mo-sec-top: var(--mo-s9); /* @kind spacing */
  --mo-sec-bottom: var(--mo-s8); /* @kind spacing */
  --mo-block: var(--mo-s7); /* @kind spacing */

  /* radii */
  --mo-r-media: 18px; /* @kind radius */
  --mo-r-card: 14px; /* @kind radius */
  --mo-r-tile: 8px; /* @kind radius */
  --mo-r-pill: 999px; /* @kind radius */

  /* there are no shadows in this system */
  --mo-shadow: none; /* @kind shadow */

  /* nav */
  --mo-nav-pad: 14px; /* @kind spacing */
}