@layer base {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--color-canvas);
    color: var(--color-ink);
    font-family: var(--font-sans);
    line-height: 1.375;
  }

  a {
    &:not([class]) {
      color: var(--color-link);
      text-decoration: underline;
    }

    &[class] {
      text-decoration: none;
    }
  }

  strong, b {
    font-weight: 600;
  }

  code {
    font-family: var(--font-mono);
    font-size: var(--text-small);
  }

  hr {
    border: none;
    border-block-start: var(--border);
    margin-block: var(--block-space);
  }

  ::selection {
    background: var(--color-selected);
  }

  :focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }
}