:root {
  /* surfaces */
  --surround: #161614;
  --page: #ebe9e2;
  --contour: #fbf9f2;
  --inset: #fbf9f2;
  --inverse: #171713;

  /* text and rules */
  --text: #1b1a16;
  --text-muted: #6e6c63;
  --text-faint: #9c9a8f;
  --rule: #c9c7bc;
  --rule-soft: #dad8ce;

  /* text on dark surfaces */
  --on-dark: #f4f2e9;
  --on-dark-strong: #fbf9f2;
  --on-dark-muted: #b2b0a5;
  --on-dark-faint: #8d8b81;
  --on-dark-nav: #8e8c84;
  --on-dark-rule: rgba(251, 249, 242, 0.16);

  /* the one accent: focus ring, active navigation, ring marker, method states */
  --signal: #f4641d;

  /* method states */
  --state-pass: #4c9d68;
  --state-open: #f4641d;
  --state-blocked: #d8482f;

  /* type */
  --font-sans: "Helvetica Neue", Helvetica, "Geist", Arial, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SF Mono", monospace;
  --text-title: 44px;
  --text-section: 19px;
  --text-ui: 14px;
  --text-small: 12px;
  --text-xs: 11px;
  --text-label: 10.5px;
  --text-table-head: 10px;
  --text-lead: 19px;
  --text-body: 17px;
  --leading-body: 1.7;
  --leading-spine: 1.75;
  --tracking-label: 0.14em;
  --tracking-table-head: 0.13em;
  --tracking-mark: 0.28em;

  /* measures */
  --measure: 600px;
  --measure-ladder: 660px;
  --measure-wide: 860px;
  --measure-panel: 950px;

  /* geometry */
  --radius-card: 12px;
  --radius-sheet: 18px;
  --radius-pill: 999px;
  --contour-width: 10px;
  --surround-gap: 12px;
  --card-pad: 26px;
  --row-pad: 12px;
  --button-height: 42px;
  --section-gap: 72px;
  --ring-size: 7px;
  --ring-stroke: 2px;
  --gutter: 48px;
  --header-height: 78px;
}

@media (max-width: 860px) {
  :root {
    --text-title: 30px;
    --contour-width: 6px;
    --surround-gap: 6px;
    --radius-sheet: 16px;
    --button-height: 44px;
    --section-gap: 40px;
    --gutter: 20px;
    --header-height: 64px;
  }
}