.link {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--clr-onSurface-02);
  text-decoration: none;
  transition: color 300ms ease-out;
}

.link-light {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--clr-brand-600);
  text-decoration: none;
  transition: color 300ms ease-out, text-decoration 300ms ease-out;
}


.link:focus-visible {
  outline: 2px solid var(--clr-forAccent-bronze--subtle);
  outline-offset: 2px;
  z-index: 1;
}

.link-light:focus-visible {
  outline: 2px solid var(--clr-bronze-800);
  outline-offset: 2px;
  z-index: 1;
}


@media (hover) {
  .link:hover {
    color: var(--clr-onSurface-02--strong);
  }

  .link-light:hover {
    color: var(--clr-brand-700);
    text-decoration: underline;
  }
}

.link-brand {
  border: none;
  background: none;
  cursor: pointer;
  text-decoration: none;
  color: var(--clr-onSurface-brand);
  transition: color 300ms ease-out;
}

.link-brand:focus-visible {
  outline: 2px solid var(--clr-forAccent-bronze--subtle);
  outline-offset: 2px;
  z-index: 1;
}

@media (hover) {
  .link-brand:hover {
    color: var(--clr-onSurface-brand--strong);
  }
}