:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--color-ink);
  background: var(--color-canvas);
  --color-canvas: #f5f5f1;
  --color-surface: #ffffff;
  --color-ink: #090909;
  --color-ink-muted: #666661;
  --color-line: #d8d8d2;
  --color-inverse: #090909;
  --color-inverse-text: #f5f5f1;
  --construction-rule: color-mix(in srgb, var(--color-ink) 28%, transparent);
  --construction-rule-strong: color-mix(in srgb, var(--color-ink) 54%, transparent);
  --header-offset: 6.25rem;
  --page-width: 72rem;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #0b0b0a;
  --color-surface: #141413;
  --color-ink: #f5f5f1;
  --color-ink-muted: #a7a7a0;
  --color-line: #343431;
  --color-inverse: #e4e1d8;
  --color-inverse-text: #090909;
}

@media (max-width: 42rem) {
  :root {
    --header-offset: 4.75rem;
  }
}