* {
  box-sizing: border-box;
  scrollbar-color: var(--hui-color-scrollbar-thumb) var(--hui-color-scrollbar-track);
  scrollbar-width: auto;
}

html {
  background: var(--hui-color-canvas);
  color: var(--hui-color-text);
  font-family: var(--hui-font-sans);
  font-size: 100%;
  scroll-padding-block-start: var(--hui-space-4);
}

body {
  margin: 0;
  min-block-size: 100dvh;
  background: var(--hui-color-canvas);
  font-size: var(--hui-text-body-size);
  line-height: var(--hui-text-body-line);
}

a {
  color: var(--hui-color-link);
  text-underline-offset: 0.18em;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid var(--hui-color-focus);
  outline-offset: 3px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: var(--hui-text-heading-medium-size);
  line-height: var(--hui-text-heading-medium-line);
}

h2 {
  font-size: var(--hui-text-heading-small-size);
  line-height: var(--hui-text-heading-small-line);
}

h3 {
  font-size: var(--hui-text-title-size);
  line-height: var(--hui-text-title-line);
}

img {
  display: block;
  max-inline-size: 100%;
}

small,
.muted {
  color: var(--hui-color-text-tertiary);
  font-size: var(--hui-text-body-small-size);
  line-height: var(--hui-text-body-small-line);
}

::-webkit-scrollbar {
  block-size: 0.75rem;
  inline-size: 0.75rem;
}

::-webkit-scrollbar-track {
  background: var(--hui-color-scrollbar-track);
}

::-webkit-scrollbar-thumb {
  border: 3px solid var(--hui-color-scrollbar-track);
  border-radius: var(--hui-radius-pill);
  background: var(--hui-color-scrollbar-thumb);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--hui-color-scrollbar-thumb-hover);
}

@media (forced-colors: active) {
  * {
    scrollbar-color: auto;
  }
}