:root {
  color-scheme: light;
  --vsf-paper: #f4f0e8;
  --vsf-paper-raised: #fbf8f1;
  --vsf-paper-deep: #e5ded1;
  --vsf-ink: #171714;
  --vsf-ink-soft: #4f4c45;
  --vsf-ink-faint: #706b62;
  --vsf-line: #cbc5b9;
  --vsf-line-strong: #8f897e;
  --vsf-accent: #9c3f2f;
  --vsf-focus: #1e5b50;
  --vsf-display: "Newsreader", Georgia, serif;
  --vsf-body: "IBM Plex Sans", sans-serif;
  --vsf-mono: "IBM Plex Mono", monospace;
  --vsf-shell: min(calc(100% - 48px), 1360px);
  --vsf-reading: 720px;
  --vsf-space-1: 8px;
  --vsf-space-2: 16px;
  --vsf-space-3: 24px;
  --vsf-space-4: 40px;
  --vsf-space-5: 64px;
  --vsf-space-6: 96px;
  --vsf-radius: 0;
  --vsf-transition: 180ms ease;
}

@media (max-width: 599px) {
  :root {
    --vsf-shell: min(calc(100% - 32px), 1360px);
    --vsf-space-5: 48px;
    --vsf-space-6: 64px;
  }
}