@import "../tokens/colors.css";
@import "../tokens/typography.css";
@import "../tokens/spacing.css";
@import "../tokens/borders.css";
@import "../tokens/layout.css";
@import "../tokens/motion.css";

@import "../base/reset.css";
@import "../base/base.css";
@import "../base/utilities.css";

@import "../components/site-nav.css";
@import "../components/footer.css";

.legal {
  border-top: 0;
}

.legal__inner {
  max-width: 80ch;
}

.legal__content h2,
.legal__content h3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-heading);
}

.legal__content p,
.legal__content li {
  color: var(--color-black);
}

.legal__content ul {
  padding-left: var(--space-3);
}

.legal__content a {
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: text-decoration var(--duration-fast) var(--easing-standard),
              outline var(--duration-fast) var(--easing-standard);
}

.legal__content a:hover {
  text-decoration: none;
  background-color: var(--color-yellow);
  outline: var(--border-thin) solid var(--color-black);
}