/* Shared presentation tokens. Override these in any theme to change its
   typography, palette, or geometry without changing the semantic HTML. */
:root {
  color-scheme: light;
  --paper: #ffffff;
  --surface: #f5f5f5;
  --text: #222222;
  --muted: #595959;
  --accent: #234e78;
  --rule: #dedede;
  --strong-rule: #555555;
  --heading-font: 'Helvetica Neue', Arial, sans-serif;
  --body-font: 'Helvetica Neue', Arial, sans-serif;
  --ui-font: 'Helvetica Neue', Arial, sans-serif;
  --body-size: 17px;
  --body-leading: 1.6;
  --title-size: 2rem;
  --section-title-size: 1.0625rem;
  --ui-size: .875rem;
  --heading-weight: 500;
  --heading-tracking: 0;
  --page-width: 960px;
  --label-width: 190px;
  --column-gap: 40px;
  --page-gutter: 28px;
  --page-space: 48px;
  --section-space: 24px;
  --reading-width: 730px;
  --navigation-target: 44px;
  --paragraph-space: 16px;
}
[data-theme='dark'] {
  color-scheme: dark;
  --paper: #1f2525;
  --surface: #293131;
  --text: #e9e7df;
  --muted: #b3bdb6;
  --accent: #e1b595;
  --rule: #495451;
  --strong-rule: #a4b0a8;
}
@media (max-width: 760px) {
  :root {
    --page-gutter: 22px;
    --page-space: 28px;
    --section-space: 24px;
  }
}