:root {
  --vsf-color-canvas: #F4F4F1;
  --vsf-color-surface: #FFFFFF;
  --vsf-color-ink: #171717;
  --vsf-color-muted: #61615D;
  --vsf-color-line: #D5D5CF;
  --vsf-color-inverse: #101010;
  --vsf-color-on-inverse: #F7F7F4;
  --vsf-color-accent: #9C2F2F;
  --vsf-color-focus: #1769AA;
  --vsf-color-success: #1F6B45;
  --vsf-color-warning: #8A5300;
  --vsf-color-danger: #B42318;

  --vsf-font-display: "Newsreader", Georgia, serif;
  --vsf-font-body: "IBM Plex Sans", system-ui, sans-serif;
  --vsf-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --vsf-font-size-body: 1.0625rem;
  --vsf-font-size-label: 0.875rem;
  --vsf-font-size-meta: 0.8125rem;
  --vsf-line-height-body: 1.6;
  --vsf-line-height-control: 1.25;

  --vsf-space-1: 0.25rem;
  --vsf-space-2: 0.5rem;
  --vsf-space-3: 0.75rem;
  --vsf-space-4: 1rem;
  --vsf-space-5: 1.5rem;
  --vsf-space-6: 2rem;
  --vsf-space-7: 3rem;
  --vsf-space-8: 4rem;

  --vsf-border-width: 1px;
  --vsf-border-color: var(--vsf-color-line);
  --vsf-radius-small: 2px;
  --vsf-radius-control: 4px;
  --vsf-radius-card: 8px;

  --vsf-control-min-size: 2.75rem;
  --vsf-control-primary-min-height: 3rem;
  --vsf-focus-ring-width: 2px;
  --vsf-focus-ring-offset: 2px;
}