@layer base {
  body {
    color: var(--color-ink);
    background-color: var(--color-bg);
    font-size: 16px;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;

    @media (max-width: 639.98px) {
      line-height: 1.4;
    }
  }

  a {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }

    &.action {
      color: var(--color-link);
    }

    &.danger {
      color: var(--color-negative);
    }

    .no-decoration:hover {
      text-decoration: none;
    }
  }

  .paragraph {
    font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    line-height: 1.6;
    width: 96.66%;
    max-width: 480px;
  }

  .paragraph-sm {
    font-size: clamp(1rem, 0.9rem + 0.3vw, 1.25rem);
    line-height: 1.5;
  }

  li {
    margin-bottom: 0.5rem;

    @media (max-width: 639.98px) {
      margin-bottom: 0.375rem;
    }
  }

  small {
    display: inline-block;
    font-size: 0.8rem;
    line-height: 1.4;

    @media (max-width: 639.98px) {
      font-size: 0.75rem;
    }
  }

  /* Links */
  .text-link {
    color: var(--color-link);
  }

  /* Pseudo Links used in StimulusJS */
  .pseudo-link {
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--color-link);

    &:hover {
      text-decoration: underline;
    }
  }

  /* Headings */
  h1, h2, h3, h4 {
    color: var(--color-ink);
    font-weight: 400;
    line-height: 1.125;
    margin: 0;
    text-rendering: geometricPrecision;
  }

  h1 {
    font-size: clamp(1.875rem, 1.5rem + 1vw, 2.5rem);
    letter-spacing: -0.066rem;
  }

  h2 {
    font-size: clamp(1.5rem, 1.25rem + 0.75vw, 2rem);
  }

  h3 {
    font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  }

  h4 {
    color: var(--color-accent);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-rendering: optimizeLegibility;
    text-transform: uppercase;

    @media (max-width: 639.98px) {
      font-size: 0.813rem;
    }
  }

  /* Display */
  .display-1,
  .display-2 {
    line-height: 1.1;
    text-rendering: geometricPrecision;
  }

  .display-1 {
    color: var(--color-accent);
    font-size: clamp(2.25rem, 1.5rem + 2vw, 3.75rem);
    font-weight: 500;
    letter-spacing: -0.066rem;
  }

  .display-2 {
    font-size: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
    font-weight: 400;
  }

  .subtitle {
    color: var(--color-ink-muted);
    display: block;
    font-size: 1rem;
    margin-top: 0.5rem;

    @media (max-width: 639.98px) {
      font-size: 0.938rem;
    }
  }

  /* Unordered lists */
  .list-styled {
    margin: 0;
    padding: 0;

    li {
      background: url("/assets/bullet-bd52f3b9.svg") 0 0.563rem no-repeat;
      background-size: 0.375rem 0.375rem;
      list-style: none;
      margin: 0;
      margin-bottom: 0.5rem;
      padding-left: 1.25rem;
    }
  }

  .list-unstyled {
    margin: 0;
    padding: 0;

    li {
      list-style: none;
      margin-bottom: 0.5rem;
      padding-right: 1rem;

      a {
        display: block;
      }
    }
  }

  .list-unstyled-2 {
    margin: 0;
    padding: 0;

    li {
      list-style: none;
      margin-bottom: 0.5rem;
      padding-right: 1rem;
    }
  }
}