:is(h1, h2, h3) {
  font-family: var(--font-family-1);
  font-size: var(--font-size-4);
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  font-size: var(--font-size-5);
}

p:has(small:read-only) {
  font-size: var(--font-size-2);
}

a:where([href]) {
  --anchor-underline-color: oklch(from currentColor l c h / 0.6);
  --anchor-underline-offset: 0.2em;
  --anchor-underline-thickness: 2px;
  color: rgb(var(--color-yellow));
  text-decoration: underline;
  text-decoration-color: var(--anchor-underline-color);
  text-decoration-thickness: var(--anchor-underline-thickness);
  text-decoration-skip-ink: none;
  text-underline-offset: var(--anchor-underline-offset);

  &:hover {
    --anchor-underline-color: oklch(from currentColor l c h / 0.1);
    color: rgb(var(--color-light-yellow));
  }
}

:is(b, strong) {
  font-weight: 700;
}

:is(i, em) {
  font-style: italic;
}