*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-stone);
  color: var(--color-ink-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-amber-deep); text-decoration-color: var(--color-stone-rule); text-underline-offset: 3px; transition: var(--transition-color); }
a:hover { color: var(--color-ink-body); text-decoration-color: var(--color-ink-dim); }
[data-surface="slate"] a { color: var(--color-amber); }
[data-surface="slate"] a:hover { color: var(--color-neutral-1); }

::selection { background: var(--color-amber-ring); color: var(--color-ink-body); }

:focus-visible { outline: 2px solid var(--color-amber); outline-offset: 2px; }