/* Optional foundation: apply hd-theme to body or a contained application root. */
.hd-theme {
  background: var(--hd-color-background);
  color: var(--hd-color-text);
  font-family: var(--hd-font-family);
  font-size: var(--hd-font-size-body);
  font-weight: var(--hd-font-weight-regular);
  line-height: var(--hd-line-height-body);
  color-scheme: var(--hd-color-scheme);
}

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

body.hd-theme {
  margin: 0;
}

.hd-theme :where(h1, h2, h3, h4, h5, h6) {
  line-height: var(--hd-line-height-heading);
}

.hd-theme :where(a) {
  color: var(--hd-color-accent);
  text-underline-offset: 0.18em;
}

.hd-theme :where(button, input, select, textarea) {
  font: inherit;
}

.hd-theme :where(code, pre, kbd, samp) {
  font-family: var(--hd-font-family-mono);
}

.hd-theme :where(img, video, svg) {
  max-width: 100%;
}

.hd-theme :focus-visible {
  outline: var(--hd-focus-width) solid var(--hd-color-focus);
  outline-offset: var(--hd-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  .hd-theme {
    scroll-behavior: auto;
  }
}