:root {
  /* thickness of the underline */
  --link-underline-thickness: 4px;
  /* color of the underline (fall back to currentColor if you like) */
  --link-underline-color: var(--accent);
  /* how “tall” the link’s hit-area should be, in multiples of your --space-m */
  --link-height-multiplier: 2;
  /* hover transition timing */
  --link-hover-duration: 0.2s;
  --link-hover-easing: ease;
}

/* reusable link effect class */
.link-effect {
  display: inline-flex;               /* so height & align-items work on <a> */
  align-items: center;
  height: calc(var(--space-m) * var(--link-height-multiplier));
  transition: box-shadow var(--link-hover-duration) var(--link-hover-easing);
}

/* on hover or when “active” */
.link-effect:hover,
.link-effect.active {
  /* inset shadow as an underline */
  box-shadow:
    inset
    0              /* X offset */
    calc(-1 * var(--link-underline-thickness)) /* Y offset */
    0              /* blur */
    0              /* spread */
    var(--link-underline-color);
}