html {
  font-family: var(--gin-font);
  scroll-padding-block-start: var(--gin-scroll-offset) !important;
}

body {
  color: var(--gin-color-text);
  background: var(--gin-bg-app);
  overflow-x: hidden;

  @include mq(large) {
    overflow-x: auto;
  }
}

h1, h2, h3 {
  letter-spacing: -.025em;
  font-weight: var(--gin-font-weight-normal);
}

h2 {
  font-size: var(--gin-font-size-h2);
}

h3 {
  font-size: var(--gin-font-size-h3);
}

::selection {
  background: var(--gin-color-primary-light-hover);
}

::-moz-selection {
  background: var(--gin-color-primary-light-hover);
}

a {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

// Enforcing colors on visually hidden text does not change anything for the
// user, but it prevents accessibility scanners like Wave from reporting contrast
// errors on visually hidden elements. While this is certainly an issue with the
// scanners and not Gin, this ensures that scans provide an accurate account of
// Gin's contrast support.
.visually-hidden {
  color: #000;

  .gin--dark-mode & {
    color: #FFF;
  }

  &.skip-link {
    color: var(--gin-color-button-text);
  }
}

// Set a dark color scheme to style native browser elements.
.gin--dark-mode {
  color-scheme: dark;
}