html {
  font-family: var(--gin-font);
  scroll-padding-top: 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 accessibilty 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;
}

// Flags.
.views-field .marker,
.gin-beta-flag,
.gin-experimental-flag,
.gin-new-flag
{
  font-size: 10px;
  font-weight: var(--gin-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .1em;
  display: inline-block;
  padding: .125em .5em;
  vertical-align: .125em;
  border-radius: var(--gin-border-xs);
}

.views-field .marker,
.gin-beta-flag,
.gin-experimental-flag {
  color: #555;
  background: #ddd;

  .gin--dark-mode & {
    color: #eee;
    background: #444;
  }
}

.gin-new-flag {
  color: #fff;
  background-color: #26a769;
}